You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
389 lines
8.2 KiB
Vue
389 lines
8.2 KiB
Vue
<template>
|
|
<view class="chatk">
|
|
<view class="msg_list" ref="scrollContainer" id="container">
|
|
<view v-if="jianjie != ''" class="sendMsg">
|
|
<view class="sendMsg_left">
|
|
<view class="sendMsg_left_time">{{jianjie.created_at.substring(5,19)}}</view>
|
|
<view class="sendMsg_left_msg">
|
|
<view class="jianjie_k">
|
|
<view>
|
|
{{jianjie.title}}
|
|
</view>
|
|
<view class="jianjie_img_k">
|
|
<image v-for="(item,index) in jianjie.imgs" :key="index" class="jianjie_img"
|
|
:src="baseUrl+item"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="sendMsg_right">
|
|
<image class="user_img" src="../../static/chat/user.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-for="(item,index) in chatList">
|
|
<view v-if="item.user_type==0" class="sendMsg">
|
|
<view class="sendMsg_left">
|
|
<view class="sendMsg_left_time">{{item.created_at.substring(5,19)}}</view>
|
|
<view class="sendMsg_left_msg">
|
|
<span v-if="item.msg_type==0">{{item.content}}</span>
|
|
<span v-if="item.msg_type==1">
|
|
<image class="jianjie_img" :src="baseUrl+item.content"></image>
|
|
</span>
|
|
</view>
|
|
</view>
|
|
<view class="sendMsg_right">
|
|
<image class="user_img" src="../../static/chat/user.png"></image>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.user_type==1" class="receiveMsg">
|
|
<view class="receiveMsg_left">
|
|
<image class="user_img" src="../../static/chat/kefu.png"></image>
|
|
<view class="username">客服</view>
|
|
</view>
|
|
<view class="receiveMsg_right">
|
|
<view class="receiveMsg_right_time">{{item.created_at.substring(5,19)}}</view>
|
|
<view class="receiveMsg_right_msg"><span v-if="item.msg_type==0">{{item.content}}</span>
|
|
<span v-if="item.msg_type==1">
|
|
<image class="jianjie_img" :src="baseUrl+item.content"></image>
|
|
</span>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="chatList.length==0" class="tishi">欢迎留言</view>
|
|
<view v-if="workOrderstatus.status==3" class="tishi">工单已关闭，如遇到问题请重新提交工单</view>
|
|
<view class="ding"></view>
|
|
</view>
|
|
<view class="end">
|
|
<view v-if="workOrderstatus.status==1 || workOrderstatus.status==2 " style="display: flex;">
|
|
<view style="margin-bottom: 10rpx;font-size: 20rpx;color:#999999">
|
|
发送图片
|
|
<uni-file-picker ref="files" class="file111" @select="selectFile" :imageStyles="imageStyles"
|
|
:auto-upload="false" limit="1">
|
|
|
|
</uni-file-picker>
|
|
</view>
|
|
<view style="display: flex; align-items: center; margin-left: 20rpx;">
|
|
<switch :checked="switchchecked" color="#ff7c2e" @change="CloseWorkOrderChange"
|
|
style="transform:scale(0.7); margin-bottom: 10rpx;" />
|
|
<view style="color:#808080; font-size: 22rpx; margin-top: -10rpx; margin-left: -10rpx;">关闭此工单</view>
|
|
</view>
|
|
</view>
|
|
<view class="msg_k">
|
|
<view class="msg_k_left">
|
|
<uni-easyinput :disabled="workOrderstatus.status!=3?false:true" type="textarea" v-model="msgContent"
|
|
placeholder="请输入留言信息" />
|
|
</view>
|
|
<view class="msg_k_right"><button type="primary" size="mini" plain="true" @click="send">发送</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<!-- 提示窗示例 -->
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|
<uni-popup-dialog cancelText="取消" confirmText="确定" title="提示" content="确定关闭此工单吗？"
|
|
@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
nextTick
|
|
} from "vue"
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
GetSelfMsgList,
|
|
GetWorkOrderInfo,
|
|
BaseFileUrl,
|
|
InsertMsg,
|
|
UserChangeWorkOrder,
|
|
UpFileUrl
|
|
} from '@/api'
|
|
let imageStyles = {
|
|
width: 50,
|
|
height: 50,
|
|
border: {
|
|
color: "#ccc",
|
|
width: 1,
|
|
style: 'dashed',
|
|
radius: '2px'
|
|
},
|
|
|
|
}
|
|
let files = ref(null)
|
|
let switchchecked = ref(true);
|
|
let alertDialog = ref(null)
|
|
const dialogClose = () => {
|
|
|
|
switchchecked.value = true
|
|
}
|
|
//关闭工单
|
|
const CloseWorkOrderChange = (e) => {
|
|
if (e.detail.value == false) {
|
|
alertDialog.value.open()
|
|
switchchecked.value = false
|
|
}
|
|
|
|
}
|
|
|
|
let workOrderId = ref('')
|
|
|
|
onLoad((option) => {
|
|
workOrderId.value = option.id
|
|
})
|
|
//更改工单状态
|
|
const dialogConfirm = async () => {
|
|
let data = {
|
|
WorkOrder: workOrderId.value
|
|
}
|
|
|
|
UserChangeWorkOrder(data).then(res => {
|
|
if (res.status) {
|
|
uni.showToast({
|
|
title: "工单成功关闭",
|
|
duration: 2000,
|
|
icon: 'none'
|
|
});
|
|
getList()
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
let msgContent = ref("")
|
|
let msgType = ref(0)
|
|
let chatList = ref([]) //聊天记录
|
|
let workOrderstatus = ref('') //工单状态
|
|
const send = async () => {
|
|
if (msgContent.value == '') return
|
|
let data = {
|
|
MsgInfo: {
|
|
WorkOrder: workOrderId.value,
|
|
Content: msgContent.value,
|
|
MsgType: msgType.value
|
|
}
|
|
}
|
|
msgContent.value = ''
|
|
msgType.value = 0
|
|
InsertMsg(data).then(res => {
|
|
if (res.status) {
|
|
getList()
|
|
}
|
|
})
|
|
}
|
|
let page = ref(1)
|
|
const getList = async () => {
|
|
let data = {
|
|
Page: page.value,
|
|
WorkOrder: workOrderId.value
|
|
}
|
|
GetSelfMsgList(data).then(res => {
|
|
if (res.status) {
|
|
chatList.value = res.data.list.reverse()
|
|
workOrderstatus.value = res.data.workorder_status
|
|
toBottom()
|
|
}
|
|
})
|
|
|
|
}
|
|
const scrollContainer = ref(null);
|
|
//滚动到聊天底部
|
|
const toBottom = () => {
|
|
nextTick(() => {
|
|
const container = document.getElementById('container'); // 替换为你的容器元素ID
|
|
|
|
container.scrollIntoView(false);
|
|
})
|
|
|
|
}
|
|
let jianjie = ref('');
|
|
//获取工单简介
|
|
const getJianJie = () => {
|
|
GetWorkOrderInfo({
|
|
WorkOrder: workOrderId.value
|
|
}).then(res => {
|
|
if (res.status) {
|
|
jianjie.value = res.data
|
|
}
|
|
})
|
|
}
|
|
const selectFile = (e) => {
|
|
console.log(e)
|
|
uni.uploadFile({
|
|
url: UpFileUrl(), //仅为示例，非真实的接口地址
|
|
filePath: e.tempFilePaths[0],
|
|
name: 'file',
|
|
header: {
|
|
Authorization: 'Bearer ' + sessionStorage.getItem("access_token")
|
|
},
|
|
success: (uploadFileRes) => {
|
|
let res = JSON.parse(uploadFileRes.data);
|
|
files.value.clearFiles()
|
|
msgContent.value = res.data
|
|
msgType.value = 1
|
|
send()
|
|
},
|
|
fail: (err) => {
|
|
console.log(err);
|
|
}
|
|
})
|
|
}
|
|
|
|
let baseUrl = ref('');
|
|
onMounted(() => {
|
|
baseUrl.value = BaseFileUrl()
|
|
console.log(baseUrl.value)
|
|
getJianJie()
|
|
getList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.grey {
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
.chatk {
|
|
height: 100vh;
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
.msg_list {
|
|
padding: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
.end {
|
|
background-color: #fff;
|
|
padding: 20rpx;
|
|
position: fixed;
|
|
bottom: 0px;
|
|
width: calc(100% - 40rpx);
|
|
}
|
|
|
|
.msg_k {
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.msg_k_left {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.msg_k_right {
|
|
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.sendMsg {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.sendMsg_left_time {
|
|
text-align: right;
|
|
color: #9c9c9c;
|
|
font-size: 24rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.sendMsg_left_msg {
|
|
background-color: #6ecda9;
|
|
color: #444444;
|
|
padding: 20rpx 30rpx;
|
|
border-radius: 20rpx 0rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.receiveMsg {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
margin: 20rpx auto;
|
|
}
|
|
|
|
.receiveMsg_right_time {
|
|
text-align: left;
|
|
color: #9c9c9c;
|
|
font-size: 24rpx;
|
|
margin-bottom: 4rpx;
|
|
}
|
|
|
|
.receiveMsg_right_msg {
|
|
background-color: #ffffff;
|
|
color: #565656;
|
|
padding: 20rpx 30rpx;
|
|
border-radius: 0rpx 20rpx 20rpx 20rpx;
|
|
}
|
|
|
|
.ding {
|
|
height: 350rpx;
|
|
}
|
|
|
|
.receiveMsg_left {
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.tishi {
|
|
text-align: center;
|
|
font-size: 20rpx;
|
|
color: #ccc;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.user_img {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
background-color: #eeeeee;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.username {
|
|
font-size: 20rpx;
|
|
color: #ccc;
|
|
text-align: center;
|
|
}
|
|
|
|
.jianjie_k {
|
|
|
|
padding: 10rpx;
|
|
|
|
}
|
|
|
|
.jianjie_img_k {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
margin-top: 10rpx;
|
|
|
|
}
|
|
|
|
.jianjie_img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background-color: #5faa9e;
|
|
}
|
|
|
|
.jianjie_img:not(:last-child) {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.icon-add {
|
|
height: 1px !important;
|
|
}
|
|
</style> |