longlong/xw_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改客户端客服

Browse Source
This commit is contained in:
龙运模 2024-11-20 20:02:55 +08:00
parent e4f74602cc
commit b306a519f3
7 changed files with 291 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
src/components/scCustomer/index.vue
View File

@ -10,8 +10,12 @@
<div class="bodyMain affix-container">
<el-scrollbar ref="scrollbar" height="100%" @scroll="scroll">
<div class="innerRefCom">
<div class="tagList" ref="tagList">
<div class="tagItem" v-for="(item,index) in tagList" :key="index" @click="typeActive(item)">{{item.label}}</div>
<div class="tagRow" ref="tagList">
<el-scrollbar height="100%">
<div class="tagList">
<div class="tagItem" v-for="(item,index) in tagList" :key="index" @click="typeActive(item)">{{item.label}}</div>
</div>
</el-scrollbar>
</div>
<div class="msgList">
<div class="msgItem" :class="user_id != item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
@ -26,9 +30,25 @@
{{item.from_user && item.from_user.name?item.from_user.name:'匿名'}}
<span class="time" v-if="user_id === item.to_user_id">{{item.created_at}}</span>
</div>
<div class="textCom">
<div class="textCom" v-if="item.send_message_type === 1">
<div v-html="item.to_message"></div>
</div>
<div class="textCom textComNoneBack" v-if="item.send_message_type === 2">
<div :class="user_id != item.to_user_id?'fileRightItem':'fileLeftItem'" v-for="(em,ind) in item.to_message_list" :key="ind">
<span class="imgView" :class="user_id != item.to_user_id?'imgViewRight':''" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
<el-icon class="loadingIcon" size="30" v-if="user_id != item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
<el-image style="width: 140px;height: 100px;" fit="contain" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
<el-icon class="loadingIcon" size="30" v-if="user_id === item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
</span>
<span class="fileView" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1" @click="linkFile(em)">
<fileType size="26px" :fileType="em.extension || em.file_type" />
<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
</span>
<span class="progressLine" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1 && em.showLoading">
<el-progress class="exportPopover" :text-inside="true" :show-text="false" :stroke-width="4" :percentage="em.rate" />
</span>
</div>
</div>
</div>
<div class="avatar" v-if="user_id != item.to_user_id">
<el-avatar :size="36" :src="item.from_user.avatar" fit="cover">
@ -41,22 +61,47 @@
</el-scrollbar>
</div>
<div class="footer">
<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" resize="none" type="textarea" :row="2" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
<div class="saveBtn" :class="params.to_message!==''?'saveActive':''" @click="sendCustomer">发 送</div>
<div class="tagList">
<div class="tagItem" @click="uploadFile">
<uploadFile ref="uploadFile" @uploadFileSuccess="uploadFileSuccess" title="上传附件"></uploadFile>
</div>
<div class="tagItem" @click="recordsShow"><el-icon size="18"><sc-icon-Record/></el-icon></div>
<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
</div>
<div class="sendView">
<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" resize="none" type="textarea" :rows="3" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
<div class="saveBtn" :class="params.to_message!==''?'saveActive':''" @click="sendCustomer">发 送</div>
</div>
</div>
</div>
</div>
</div>
<customer-records-dialog v-if="dialog.show" ref="recordsMsgDialog" @closed="dialog.show=false"></customer-records-dialog>
</template>
<script>
import {eventBus} from "@/utils/eventBus";
import uploadFile from "@/views/service/components/attachmentUpload";
import customerRecordsDialog from "@/views/service/components/customerRecords"
import fileType from "@/views/docsManager/fileType"
export default {
name: "index",
components:{
uploadFile,
customerRecordsDialog,
fileType
},
data(){
return{
dialog:{
show:false
},
customerShow:false,
user_info:{
name:"随机客服"
},
page:1,
params:{
client:2,
type:"",
@ -78,7 +123,6 @@ export default {
// 获取新消息
eventBus.$on('sockBack', this.getWsResult);
const userInfo = this.$TOOL.data.get("USER_INFO");
if(userInfo && userInfo.id){
this.user_id = userInfo.id;
@ -90,22 +134,72 @@ export default {
},
methods:{
getWsResult(res){
if(res.data && (res.data.type == 36 || res.data.type == 37)){
if(res.data && (res.data.type == 12 || res.data.type == 35 || res.data.type == 36 || res.data.type == 37)){
switch(res.data.type) {
case 36:
this.msgList = res.data.rows;
this.scrollDown();
case 12: // 接收进度
this.msgList.forEach(item=>{
if(item.to_message_list && item.to_message_list.length>0){
item.to_message_list.forEach(em=>{
if(em.uuid && em.uuid === res.data.file_unique_id){
em.showLoading = res.data.rate !== 100;
em.rate = res.data.rate;
}
})
}
})
break;
case 37:
case 35: // 接收消息
if(res.data.send_message_type === 2 && res.data.data.to_message){
res.data.data.to_message_list = JSON.parse(res.data.data.to_message);
}
if(res.data.data){
let obj = {
created_at: res.data.from_time,
send_message_type: res.data.send_message_type ? res.data.send_message_type : 1,
to_user_id: res.data.to_user_id,
to_message: res.data.data.to_message,
to_message_list: res.data.data.to_message_list,
from_user: {
avatar: res.data.from_avatar,
name: res.data.from_user,
}
};
this.msgList.push(obj);
setTimeout(()=>{
this.scrollDown();
},100);
}
break;
case 36: // 系统记录
res.data.rows.forEach((item)=>{
if(item.send_message_type == 2){
item.to_message_list = JSON.parse(item.to_message);
}
})
this.msgList = res.data.rows.concat(this.msgList);
this.page = res.data.page;
setTimeout(()=>{
if(res.data.page === res.data.pageSize){
this.scrollDown();
}
},100);
break;
case 37: // 随机客服
this.user_info = res.data.user.user_info;
this.params.to_user_id = res.data.user.uid;
this.msgList = [{
this.msgList.push({
to_user_id:this.user_id,
send_message_type:1,
created_at:this.$TOOL.dateFormat(new Date()),
from_user:{
name:res.data.user.user_info.name,
avatar:res.data.user.user_info.avatar
},
to_message:res.data.to_message
}]
})
setTimeout(()=>{
this.scrollDown();
},100);
break;
default:
break;
@ -115,9 +209,11 @@ export default {
openCustomer(){
this.customerShow = !this.customerShow;
if(this.customerShow){
this.getAssign();
this.getRecordList();
this.customerType();
this.getRecordList();
this.getAssign();
// 控制条控制在底部
this.scrollDown();
}
@ -129,8 +225,21 @@ export default {
async getAssign() {
await this.$API.customer.customer.post();
},
async getRecordList() {
await this.$API.customer.list.post();
async getRecordList(isPage=false) {
let params = {}
if(!isPage){
params = {
to_user_id:'',
pageSize:30
}
}else{
params = {
to_user_id:'',
page:this.page,
pageSize:30
}
}
await this.$API.customer.list.post(params);
},
async customerType() {
const res = await this.$API.customer.typeList.post();
@ -157,6 +266,8 @@ export default {
const userInfo = this.$TOOL.data.get("USER_INFO");
this.msgList.push({
to_user_id:-1,
send_message_type:1,
created_at:this.$TOOL.dateFormat(new Date()),
from_user:{
name:userInfo.name,
avatar:userInfo.avatar
@ -168,6 +279,47 @@ export default {
}
},
// 上传附件
uploadFile(){
this.$nextTick(()=>{
this.$refs.uploadFile.importFile(this.params);
})
},
uploadFileSuccess(data){
const userInfo = this.$TOOL.data.get("USER_INFO");
this.msgList.push({
to_user_id:-1,
send_message_type:2,
created_at:this.$TOOL.dateFormat(new Date()),
from_user:{
name:userInfo.name,
avatar:userInfo.avatar
},
to_message_list:data,
to_message:''
});
setTimeout(()=>{
this.scrollDown();
},100)
},
recordsShow(){
this.dialog.show = true;
this.$nextTick(() => {
let params = {
from_user_id:this.params.to_user_id,
from_user:{
name:this.user_info.name
}
}
this.$refs.recordsMsgDialog.open('show').setData(params);
})
},
linkFile(em){
window.location.href = em.file;
},
scroll({scrollTop}){
if(scrollTop>10){
this.$refs.tagList.style.position = "absolute";
@ -176,6 +328,10 @@ export default {
this.$refs.tagList.style.position = "relative";
this.$refs.tagList.style.background = "";
}
if(scrollTop === 0 && this.msgList.length>0 && this.page >1){
this.page = this.page -1;
this.getRecordList(true)
}
},
scrollDown() {
this.$nextTick(() => {
@ -203,7 +359,7 @@ export default {
}
.customerView{
width: 380px;
height: 580px;
height: 600px;
position: absolute;
right: 0;
bottom: 70px;
@ -211,7 +367,6 @@ export default {
box-shadow: 0 4px 4px rgba(19,103,193,0.3);
border: 1px solid #B7D7F9;
border-radius: 8px;
.viewBody{
display: flex;
flex-direction: column;
@ -234,10 +389,13 @@ export default {
.bodyMain{
flex: 1;
overflow: hidden;
.tagList{
.tagRow{
position: relative;
left: 0;
z-index: 0;
z-index: 200;
height: 100px;
}
.tagList{
display: flex;
flex-wrap: wrap;
padding: 0 10px 10px 10px;
@ -279,6 +437,52 @@ export default {
padding: 10px;
display: inline-block;
text-align: left;
.imgView{
height: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 5px;
.loadingIcon{
animation: rotate 1s linear infinite;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
.imgViewRight{
justify-content: flex-end;
}
.fileView{
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
border: 1px solid #f4f4f4;
padding: 10px;
border-radius: 4px;
background: #f8f6f6;
margin-bottom: 5px;
}
}
.el-image{
border-radius: 4px;
}
.textComNoneBack{
background: none;
padding: 10px 0;
.fileLeftItem{
padding-right: 48px;
}
.fileRightItem{
text-align: right;
padding-left: 48px;
}
}
}
}
@ -298,14 +502,33 @@ export default {
color: var(--el-color-white);
text-align: left;
}
.textComNoneBack{
background: none;
.el-image{
border-radius: 4px;
}
}
}
}
}
}
.footer{
padding: 10px;
padding: 10px 0;
border-top: 1px solid #F6F6F6;
position: relative;
.tagList{
display: flex;
align-items: center;
border-bottom: 1px solid #F6F6F6;
padding-bottom: 10px;
.tagItem{
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
cursor: pointer;
}
}
.customTextarea{
font-size:13px;
::v-deep .el-textarea__inner{

2
src/style/pages.scss
View File

@ -24,7 +24,7 @@
/*common-page*/
.common-page {}
.pageHeader{box-shadow: 0 1px 10px rgba(0,0,0,0.14);margin-bottom: 10px;}
.pageHeader{box-shadow: 0 1px 8px rgba(0,0,0,0.06);margin-bottom: 10px;}
.common-header-left {display: flex;align-items: center;}
.common-header-logo {display: flex;align-items: center;}
.common-header-logo img {margin-right: 10px;vertical-align: bottom;width: 180px;}

2
src/views/personalCenter/index.vue
View File

@ -90,7 +90,7 @@ export default {
<style scoped lang="scss">
.mainScroll ::v-deep .el-scrollbar__view{
height: calc(100% - 240px);
height: calc(100% - 180px);
}
.mainServeBody{

64
src/views/serveView/components/commonPage.vue
View File

@ -8,13 +8,35 @@
<div class="headerView">
<div class="menuList">
<div class="menu-item">
<el-dropdown trigger="click" @command="handleUser" placement="bottom-start">
<el-dropdown trigger="click" @command="serverQuery">
<span class="el-dropdown-link">
个人中心
服务支持
<el-icon class="el-icon--right">
<el-icon-ArrowDown />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="termQuery">维保期限查询</el-dropdown-item>
<el-dropdown-item command="componentQuery">主控部件查询</el-dropdown-item>
<el-dropdown-item command="orderQuery">订单号查询</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="menuIcon">
<div class="panel-item">
<el-icon><sc-icon-See /></el-icon>
</div>
<div class="panel-item">
<el-dropdown trigger="click" @command="handleUser" placement="bottom-start">
<span class="el-dropdown-link">
<el-icon><sc-icon-User /></el-icon>
<!-- <el-icon class="el-icon&#45;&#45;right">-->
<!-- <el-icon-ArrowDown />-->
<!-- </el-icon>-->
</span>
<template #dropdown>
<div class="userView" style="width: 280px">
<div class="headerView">
@ -41,31 +63,7 @@
</div>
</template>
</el-dropdown>
</div>
<div class="menu-item">
<el-dropdown trigger="click" @command="serverQuery">
<span class="el-dropdown-link">
服务支持
<el-icon class="el-icon--right">
<el-icon-ArrowDown />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="termQuery">维保期限查询</el-dropdown-item>
<el-dropdown-item command="componentQuery">主控部件查询</el-dropdown-item>
<el-dropdown-item command="orderQuery">订单号查询</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div class="menuIcon">
<div class="panel-item">
<el-icon><sc-icon-See /></el-icon>
</div>
<div class="panel-item">
<el-icon><sc-icon-User /></el-icon>
</div>
</div>
</div>
@ -190,6 +188,18 @@ export default {
display: flex;
align-items: center;
cursor: pointer;
.el-dropdown{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
.el-dropdown-link{
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
}
}
}
}

3
src/views/serveView/components/footerPage.vue
View File

@ -43,7 +43,7 @@ export default {
<style lang="scss" scoped>
.serveFooter{
background: #262626;
background: #f0f0f0;
padding: 20px;
.footerView{
display: flex;
@ -56,7 +56,6 @@ export default {
margin: 0 50px;
.line{
padding:0 0 15px 0;
color: var(--el-color-white);
font-size: 14px;
}
}

2
src/views/serveView/index.vue
View File

@ -97,7 +97,7 @@ export default {
<style scoped lang="scss">
.mainScroll ::v-deep .el-scrollbar__view{
height: calc(100% - 240px);
height: calc(100% - 180px);
}
.mainServeBody{

10
src/views/service/infoQuery.vue
View File

@ -52,7 +52,7 @@
<div :class="user_id != item.to_user_id?'fileRightItem':''" v-for="(em,ind) in item.to_message_list" :key="ind">
<span class="imgView" :class="user_id != item.to_user_id?'imgViewRight':''" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) !=-1">
<el-icon class="loadingIcon" size="30" v-if="user_id != item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
<el-image style="max-width: 240px;max-height: 200px;" fit="cover" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
<el-image style="width: 240px;height: 200px;" fit="contain" lazy :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
<el-icon class="loadingIcon" size="30" v-if="user_id === item.to_user_id && em.showLoading" style="color:#333;padding: 4px;"><el-icon-Loading/></el-icon>
</span>
<span class="fileView" v-if="['png','jpg','gif','jpeg'].indexOf(em.file_type || em.extension) ===-1" @click="linkFile(em)">
@ -144,7 +144,6 @@ export default {
user_id:0,
to_user_id:0,
page:1,
pageSize:1,
params:{
client:1, // 1 管理后台 2 客服端
@ -206,7 +205,7 @@ export default {
this.msgList.push(obj);
setTimeout(()=>{
this.scrollDown();
},500);
},100);
}
break;
case 36:
@ -217,12 +216,11 @@ export default {
})
this.msgList = res.data.rows.concat(this.msgList);
this.page = res.data.page;
this.pageSize = res.data.pageSize;
setTimeout(()=>{
if(res.data.page === res.data.pageSize){
this.scrollDown();
}
},500);
},100);
break;
case 38:
if(res.data.contact_list && res.data.contact_list.length>0){
@ -326,7 +324,7 @@ export default {
setTimeout(()=>{
this.scrollDown();
},500)
},100)
},
recordsShow(){