晚上客服聊天
This commit is contained in:
龙运模
parent
fbf370b609
commit
539e8479ad
@ -287,7 +287,7 @@
|
||||
this.$store.commit("set_repair_count", res.data.list_repair_info.repair_count);
|
||||
}
|
||||
let apiMenu = tool.objCopy(tool.data.get("MENU"));
|
||||
if(apiMenu.length<1) return
|
||||
if(!apiMenu || apiMenu.length === 0) return
|
||||
apiMenu.forEach(item=>{
|
||||
if(item.name == 'order'){
|
||||
item.meta.tag = 0;
|
||||
|
||||
@ -67,6 +67,7 @@ export default {
|
||||
},
|
||||
upload_data:{},
|
||||
params:{},
|
||||
singleFnc:true,
|
||||
parentParams:{
|
||||
to_user_id:"",
|
||||
unique:""
|
||||
@ -119,7 +120,6 @@ export default {
|
||||
|
||||
// 导入文件
|
||||
importFile(params){
|
||||
this.visible = true;
|
||||
this.parentParams = params;
|
||||
},
|
||||
// 上传前
|
||||
@ -149,14 +149,17 @@ export default {
|
||||
formData.append('to_user_id', this.parentParams['to_user_id']);
|
||||
this.params = formData;
|
||||
|
||||
// 单次
|
||||
if(this.singleFnc){
|
||||
this.singleFnc = false;
|
||||
this.save();
|
||||
}
|
||||
},
|
||||
deleteFileNum(num){
|
||||
this.handleRemove(this.fileList[num], this.fileList);
|
||||
this.setParamsData();
|
||||
},
|
||||
close(){
|
||||
this.visible = false;
|
||||
this.progressShow = false;
|
||||
this.listProgress = [];
|
||||
this.handleRemove('',this.fileList,true);
|
||||
@ -166,11 +169,11 @@ export default {
|
||||
const res = await this.$API.customer.attachmentMessage.post(this.params);
|
||||
this.saveLoading = false;
|
||||
if (res.code == 200) {
|
||||
this.$message.success('提交成功,正在上传');
|
||||
this.listProgress = [];
|
||||
this.visible = false;
|
||||
// this.uploadShow = false;
|
||||
// this.$emit('uploadFileSuccess');
|
||||
this.params = {};
|
||||
this.fileList = [];
|
||||
this.singleFnc = true;
|
||||
|
||||
this.$emit('uploadFileSuccess',res.data);
|
||||
}
|
||||
},
|
||||
handleExceed(){
|
||||
@ -179,7 +182,6 @@ export default {
|
||||
handleRemove(file,fileList,isArr=false){
|
||||
if(isArr){
|
||||
fileList = [];
|
||||
// this.listProgress = [];
|
||||
}else{
|
||||
const index = fileList.findIndex(f => f.uid === file.uid);
|
||||
if (index !== -1) {
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
<template>
|
||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" draggable destroy-on-close @closed="$emit('closed')">
|
||||
<el-input placeholder="搜索" v-model="keyWord"></el-input>
|
||||
<div class="searchBtn">
|
||||
<el-input placeholder="搜索" v-model="keyWord" @change="searchInput"></el-input>
|
||||
</div>
|
||||
<el-tabs v-loading="loading" element-loading-text="加载中..." v-model="tabName" @tab-change="tabChange">
|
||||
<el-tab-pane label="全部" name="1">
|
||||
<records-list :recordsData="recordsDataList"></records-list>
|
||||
<records-list :recordsData="recordsDataList" @moreList="pageMore"></records-list>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="文档" name="2">
|
||||
<records-list :recordsData="recordsDataList"></records-list>
|
||||
<el-tab-pane label="文件" name="2">
|
||||
<records-list :recordsData="recordsDataList" @moreList="pageMore"></records-list>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
@ -33,6 +35,8 @@ export default {
|
||||
recordsDataList:[],
|
||||
|
||||
page: 1,
|
||||
pageSize:100,
|
||||
moreShow:true,
|
||||
keyWord:"",
|
||||
user_id:this.$TOOL.data.get('USER_INFO').id,
|
||||
to_user_id:"",
|
||||
@ -49,17 +53,29 @@ export default {
|
||||
return this
|
||||
},
|
||||
tabChange(){
|
||||
this.setData();
|
||||
this.page = 1;
|
||||
this.getData();
|
||||
},
|
||||
//表单注入数据
|
||||
setData(data) {
|
||||
this.to_user_id = data;
|
||||
this.to_user_id = data.from_user_id;
|
||||
this.titleMap.show = data.from_user && data.from_user.name?"与"+data.from_user.name+"聊天记录":'与匿名聊天记录';
|
||||
this.getData();
|
||||
},
|
||||
// 加载更多
|
||||
pageMore(){
|
||||
if(!this.moreShow) return
|
||||
this.page = this.page +1;
|
||||
this.getData();
|
||||
},
|
||||
searchInput(){
|
||||
this.page = 1;
|
||||
this.getData();
|
||||
},
|
||||
async getData() {
|
||||
let params = {
|
||||
page: this.page,
|
||||
pageSize: 100,
|
||||
pageSize: this.pageSize,
|
||||
creator_id: {
|
||||
operator: "in",
|
||||
value: [this.to_user_id, this.user_id]
|
||||
@ -82,14 +98,22 @@ export default {
|
||||
item.to_message_list = JSON.parse(item.to_message);
|
||||
}
|
||||
})
|
||||
// console.log(res.data.rows)
|
||||
if(res.data.rows.length < this.pageSize){
|
||||
this.moreShow = false;
|
||||
}
|
||||
if(this.page === 1){
|
||||
this.recordsDataList = res.data.rows;
|
||||
}else{
|
||||
this.recordsDataList = this.recordsDataList.concat(res.data.rows);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.searchBtn{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div class="recordView">
|
||||
<el-scrollbar max-height="420px">
|
||||
<el-scrollbar height="420px" @scroll="handleScroll">
|
||||
<div class="itemRow" ref="itemRow">
|
||||
<div class="itemCol" v-for="(item,index) in recordsData" :key="index">
|
||||
<div class="avatar">
|
||||
<el-avatar :size="36" :src="item.from_user.avatar" fit="contain" v-if="item.from_user && item.from_user.avatar">
|
||||
@ -25,11 +26,13 @@
|
||||
</span>
|
||||
<span class="fileView" v-else>
|
||||
<fileType size="30px" :fileType="em.extension" />
|
||||
<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
@ -55,7 +58,13 @@ export default {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
handleScroll(event){
|
||||
const { scrollTop } = event;
|
||||
let num = this.$refs.itemRow.scrollHeight;
|
||||
if(Number(scrollTop) + 420 > num){
|
||||
this.$emit('moreList');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -91,6 +100,13 @@ export default {
|
||||
text-align: left;
|
||||
.fileView{
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #f4f4f4;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background: #f8f6f6;
|
||||
}
|
||||
}
|
||||
.textComNoneBack{
|
||||
|
||||
@ -1,484 +1,34 @@
|
||||
<template>
|
||||
<el-container class="mainNoBack userBox">
|
||||
<el-aside class="userAside" width="220px">
|
||||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-scrollbar>
|
||||
<div class="contacts">
|
||||
<div class="contactsTitle">联系人</div>
|
||||
<div class="bodyView">
|
||||
<div class="itemCol" :class="{'itemColActive':item.from_user && item.from_user.id === to_user_id}" v-for="(item,index) in contactsList" :key="index" @click="contactsActive(item)">
|
||||
<div class="avatar">
|
||||
<el-avatar :size="36" :src="item.from_user && item.from_user.avatar" fit="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="viewRight">
|
||||
<div class="title">{{item.from_user && item.from_user.name==""?'匿名':item.from_user && item.from_user.name}}</div>
|
||||
<div class="msg">{{item.to_message}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<el-main>
|
||||
问题反馈
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-main class="userMain userMainPadding_0" style="border-top-right-radius: 0;border-bottom-right-radius: 0;padding: 0;">
|
||||
<div class="mainBody">
|
||||
<div class="mainTitle">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
|
||||
<div class="mainView">
|
||||
<el-scrollbar ref="scrollbar">
|
||||
<div class="msgList">
|
||||
<div class="msgItem" :class="user_id != item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
|
||||
<div class="avatar" v-if="user_id === item.to_user_id">
|
||||
<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="msgText">
|
||||
<div class="msgTitle">
|
||||
<span class="leftTime" v-if="user_id != item.to_user_id">{{item.created_at}}</span>
|
||||
{{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" 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':''" v-for="(em,ind) in item.to_message_list" :key="ind">
|
||||
<span v-if="em.extension === 'png' || em.extension === 'jpg' || em.extension === 'gif' || em.extension === 'jpeg'">
|
||||
<el-image style="max-width: 280px;max-height: 240px;" fit="cover" :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
|
||||
</span>
|
||||
<span class="fileView" v-else @click="linkFile(em)">
|
||||
<fileType size="26px" :fileType="em.extension" />
|
||||
<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
|
||||
</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="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="mainFooter">
|
||||
<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 @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" type="textarea" placeholder="Shift+Enter换行 请输入.." :rows="3" resize="none"></el-input>
|
||||
<div class="saveBtn" @click="sendCustomer" :class="params.to_message!=''?'saveActive':''">
|
||||
<el-icon size="22"><sc-icon-SendCustom /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-aside class="userAside" width="260px">
|
||||
<el-container>
|
||||
<el-main class="nopadding" style="border-left: 1px solid #f4f4f4;border-top-left-radius: 0;border-bottom-left-radius: 0;">
|
||||
<div class="contactsUserInfo">
|
||||
<div class="contactsTitle">
|
||||
<el-avatar :size="56" :src="contactsInfo.from_user && contactsInfo.from_user.avatar" fit="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="bodyView">
|
||||
<div class="itemCol">
|
||||
<div class="name">昵称</div>
|
||||
<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
|
||||
</div>
|
||||
<div class="itemCol">
|
||||
<div class="name">手机号</div>
|
||||
<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.mobile}}</div>
|
||||
</div>
|
||||
<div class="itemCol">
|
||||
<div class="name">邮箱</div>
|
||||
<div class="text">{{ contactsInfo.from_user && contactsInfo.from_user.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
|
||||
<customer-records-dialog v-if="dialog.show" ref="recordsMsgDialog" @closed="dialog.show=false"></customer-records-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {eventBus} from "@/utils/eventBus";
|
||||
import customerRecordsDialog from "@/views/service/components/customerRecords"
|
||||
import uploadFile from "@/views/service/components/attachmentUpload";
|
||||
import fileType from "@/views/docsManager/fileType"
|
||||
export default {
|
||||
name: "", // faq
|
||||
name: "faq",
|
||||
components:{
|
||||
customerRecordsDialog,
|
||||
uploadFile,
|
||||
fileType
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
contactsList:[],
|
||||
contactsInfo:{},
|
||||
msgList:[],
|
||||
user_id:0,
|
||||
to_user_id:0,
|
||||
|
||||
params:{
|
||||
to_user_id:"",
|
||||
to_message:"",
|
||||
},
|
||||
|
||||
dialog:{
|
||||
show:false
|
||||
},
|
||||
mesList:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
const userInfo = this.$TOOL.data.get("USER_INFO");
|
||||
this.user_id = userInfo.id;
|
||||
|
||||
setTimeout(()=>{
|
||||
this.getContactList();
|
||||
|
||||
},1000)
|
||||
// 获取新消息
|
||||
eventBus.$on('sockBack', this.getWsResult);
|
||||
},
|
||||
methods:{
|
||||
getWsResult(res){
|
||||
if(res.data && (res.data.type == 36 || res.data.type == 38)){
|
||||
switch(res.data.type) {
|
||||
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;
|
||||
this.scrollDown();
|
||||
break;
|
||||
case 38:
|
||||
this.contactsList = res.data.contact_list;
|
||||
if(res.data.contact_list.length>0){
|
||||
this.to_user_id = res.data.contact_list[0].from_user.id;
|
||||
this.params.to_user_id = res.data.contact_list[0].from_user.id;
|
||||
this.contactsInfo = res.data.contact_list[0];
|
||||
if(!this.mesList){
|
||||
this.getCustomerMsgList();
|
||||
this.mesList = true;
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
async getContactList() {
|
||||
await this.$API.customer.contactList.post();
|
||||
},
|
||||
contactsActive(item){
|
||||
this.contactsInfo = item;
|
||||
this.to_user_id = item.from_user.id;
|
||||
this.getCustomerMsgList();
|
||||
},
|
||||
async getCustomerMsgList() {
|
||||
let params = {
|
||||
to_user_id:this.to_user_id
|
||||
}
|
||||
await this.$API.customer.list.post(params);
|
||||
},
|
||||
handleKeydown(event){
|
||||
if(event.key === 'Enter' && !event.shiftKey){
|
||||
event.preventDefault(); // 阻止输入框的默认行为
|
||||
this.sendCustomer();
|
||||
}else if(event.key === 'Enter' && event.shiftKey){
|
||||
this.params.to_message += '';
|
||||
}
|
||||
},
|
||||
async sendCustomer() {
|
||||
if(this.params.to_message =="") return
|
||||
const res = await this.$API.customer.send.post(this.params);
|
||||
if(res.code == 200){
|
||||
const userInfo = this.$TOOL.data.get("USER_INFO");
|
||||
this.msgList.push({
|
||||
to_user_id:-1,
|
||||
send_message_type:1,
|
||||
from_user:{
|
||||
name:userInfo.name,
|
||||
avatar:userInfo.avatar
|
||||
},
|
||||
to_message:this.params.to_message
|
||||
});
|
||||
this.params.to_message = "";
|
||||
this.scrollDown();
|
||||
}
|
||||
},
|
||||
|
||||
// 上传附件
|
||||
uploadFile(){
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.uploadFile.importFile(this.params);
|
||||
})
|
||||
},
|
||||
uploadFileSuccess(){
|
||||
// this.getCustomerMsgList();
|
||||
},
|
||||
|
||||
recordsShow(){
|
||||
this.dialog.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.recordsMsgDialog.open('show').setData(this.to_user_id); // this.to_user_id
|
||||
})
|
||||
},
|
||||
linkFile(em){
|
||||
window.location.href = em.file;
|
||||
},
|
||||
|
||||
scrollDown() {
|
||||
this.$nextTick(() => {
|
||||
const wrap = this.$refs.scrollbar;
|
||||
if(wrap){
|
||||
const e = wrap.$el.querySelector('.el-scrollbar__wrap')
|
||||
e.scrollTop = e.scrollHeight;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .noBorderRadius{border-radius: 0;}
|
||||
.contacts{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.contactsTitle{
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bodyView{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 5px;
|
||||
.itemCol{
|
||||
padding: 10px 8px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.viewRight{
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.title{
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.msg{
|
||||
width: 100%;
|
||||
color: #888888;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemCol:hover{
|
||||
background: #F6FBFF;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.itemColActive{
|
||||
background: #F6FBFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contactsUserInfo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
.contactsTitle{
|
||||
padding: 20px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
}
|
||||
.bodyView{
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 5px;
|
||||
.itemCol{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
.name{
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainBody{
|
||||
height: 100%;
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.mainTitle{
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
padding-bottom: 10px;
|
||||
margin: 0 10px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mainView{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-bottom: 10px;
|
||||
.msgList{
|
||||
padding: 10px;
|
||||
.msgItem{
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
padding-right: 40px;
|
||||
.avatar{
|
||||
padding-right: 10px;
|
||||
}
|
||||
.msgText{
|
||||
.msgTitle{
|
||||
padding:0 0 8px 0;
|
||||
color: #555;
|
||||
.time{
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.leftTime{
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
.textCom{
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
.fileView{
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #f4f4f4;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
background: #f8f6f6;
|
||||
}
|
||||
}
|
||||
.textComNoneBack{
|
||||
background: none;
|
||||
padding: 10px 0;
|
||||
.fileRightItem{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.msgRightItem{
|
||||
justify-content: flex-end;
|
||||
padding:0 0 0 40px;
|
||||
.avatar{
|
||||
padding-left: 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.msgText{
|
||||
text-align: right;
|
||||
.msgTitle{
|
||||
text-align: right;
|
||||
}
|
||||
.textCom{
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
text-align: left;
|
||||
}
|
||||
.textComNoneBack{
|
||||
background: none;
|
||||
.el-image{
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mainFooter{
|
||||
margin: 0 10px 5px 10px;
|
||||
padding: 10px 0;
|
||||
border: 1px solid #F6F6F6;
|
||||
border-radius: 4px;
|
||||
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{
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
padding:10px 35px 10px 10px;
|
||||
}
|
||||
::v-deep .el-textarea__inner::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
.saveBtn{
|
||||
position: absolute;
|
||||
bottom:20px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
color: #A8ABB2;
|
||||
border-radius: 3px;
|
||||
cursor: not-allowed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.saveActive{
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,24 +1,510 @@
|
||||
<template>
|
||||
<div>900</div>
|
||||
<el-container class="mainNoBack userBox">
|
||||
<el-aside class="userAside" width="220px">
|
||||
<el-container>
|
||||
<el-main class="nopadding">
|
||||
<el-scrollbar>
|
||||
<div class="contacts">
|
||||
<div class="contactsTitle">联系人</div>
|
||||
<div class="bodyView">
|
||||
<div class="itemCol" :class="{'itemColActive':item.from_user && item.from_user.id === to_user_id}" v-for="(item,index) in contactsList" :key="index" @click="contactsActive(item)">
|
||||
<div class="avatar">
|
||||
<el-avatar :size="36" :src="item.from_user && item.from_user.avatar" fit="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="viewRight">
|
||||
<div class="title">{{item.from_user && item.from_user.name==""?'匿名':item.from_user && item.from_user.name}}</div>
|
||||
<div class="msg">{{item.to_message}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
<el-main class="userMain userMainPadding_0" style="border-top-right-radius: 0;border-bottom-right-radius: 0;padding: 0;">
|
||||
<div class="mainBody">
|
||||
<div class="mainTitle">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
|
||||
<div class="mainView">
|
||||
<el-scrollbar ref="scrollbar" @scroll="handleScroll">
|
||||
<div class="msgList">
|
||||
<div class="msgItem" :class="user_id != item.to_user_id?'msgRightItem':''" v-for="(item,index) in msgList" :key="index">
|
||||
<div class="avatar" v-if="user_id === item.to_user_id">
|
||||
<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="msgText">
|
||||
<div class="msgTitle">
|
||||
<span class="leftTime" v-if="user_id != item.to_user_id">{{item.created_at}}</span>
|
||||
{{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" 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':''" v-for="(em,ind) in item.to_message_list" :key="ind">
|
||||
<span v-if="em.extension === 'png' || em.extension === 'jpg' || em.extension === 'gif' || em.extension === 'jpeg'">
|
||||
<el-image style="max-width: 280px;max-height: 240px;" fit="cover" :src="em.file?em.file:em" preview-teleported :preview-src-list="[em.file?em.file:em]"></el-image>
|
||||
</span>
|
||||
<span class="fileView" v-else @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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="avatar" v-if="user_id != item.to_user_id">
|
||||
<el-avatar :size="36" :src="item.from_user.avatar" fit="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="mainFooter">
|
||||
<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 @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" type="textarea" placeholder="Shift+Enter换行 请输入.." :rows="3" resize="none"></el-input>
|
||||
<div class="saveBtn" @click="sendCustomer" :class="params.to_message!=''?'saveActive':''">
|
||||
<el-icon size="22"><sc-icon-SendCustom /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
<el-aside class="userAside" width="260px">
|
||||
<el-container>
|
||||
<el-main class="nopadding" style="border-left: 1px solid #f4f4f4;border-top-left-radius: 0;border-bottom-left-radius: 0;">
|
||||
<div class="contactsUserInfo">
|
||||
<div class="contactsTitle">
|
||||
<el-avatar :size="56" :src="contactsInfo.from_user && contactsInfo.from_user.avatar" fit="contain">
|
||||
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
||||
</el-avatar>
|
||||
</div>
|
||||
<div class="bodyView">
|
||||
<div class="itemCol">
|
||||
<div class="name">昵称</div>
|
||||
<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.name?contactsInfo.from_user.name:"匿名"}}</div>
|
||||
</div>
|
||||
<div class="itemCol">
|
||||
<div class="name">手机号</div>
|
||||
<div class="text">{{contactsInfo.from_user && contactsInfo.from_user.mobile}}</div>
|
||||
</div>
|
||||
<div class="itemCol">
|
||||
<div class="name">邮箱</div>
|
||||
<div class="text">{{ contactsInfo.from_user && contactsInfo.from_user.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-aside>
|
||||
</el-container>
|
||||
|
||||
<customer-records-dialog v-if="dialog.show" ref="recordsMsgDialog" @closed="dialog.show=false"></customer-records-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {eventBus} from "@/utils/eventBus";
|
||||
import customerRecordsDialog from "@/views/service/components/customerRecords"
|
||||
import uploadFile from "@/views/service/components/attachmentUpload";
|
||||
import fileType from "@/views/docsManager/fileType"
|
||||
export default {
|
||||
name: "infoQuery",
|
||||
name: "",
|
||||
components:{
|
||||
customerRecordsDialog,
|
||||
uploadFile,
|
||||
fileType
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
contactsList:[],
|
||||
contactsInfo:{},
|
||||
msgList:[],
|
||||
user_id:0,
|
||||
to_user_id:0,
|
||||
|
||||
params:{
|
||||
to_user_id:"",
|
||||
to_message:"",
|
||||
},
|
||||
|
||||
dialog:{
|
||||
show:false
|
||||
},
|
||||
mesList:true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
created() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
mounted() {
|
||||
const userInfo = this.$TOOL.data.get("USER_INFO");
|
||||
this.user_id = userInfo.id;
|
||||
|
||||
setTimeout(()=>{
|
||||
this.getContactList();
|
||||
|
||||
},1000)
|
||||
// 获取新消息
|
||||
eventBus.$on('sockBack', this.getWsResult);
|
||||
},
|
||||
methods:{
|
||||
getWsResult(res){
|
||||
if(res.data && (res.data.type == 36 || res.data.type == 38)){
|
||||
switch(res.data.type) {
|
||||
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;
|
||||
setTimeout(()=>{
|
||||
this.scrollDown();
|
||||
},500);
|
||||
break;
|
||||
case 38:
|
||||
this.contactsList = res.data.contact_list;
|
||||
if(res.data.contact_list.length>0){
|
||||
if(this.mesList){
|
||||
this.to_user_id = res.data.contact_list[0].from_user.id;
|
||||
this.params.to_user_id = res.data.contact_list[0].from_user.id;
|
||||
this.contactsInfo = res.data.contact_list[0];
|
||||
|
||||
this.getCustomerMsgList();
|
||||
this.mesList = false;
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
async getContactList() {
|
||||
await this.$API.customer.contactList.post();
|
||||
},
|
||||
contactsActive(item){
|
||||
this.contactsInfo = item;
|
||||
this.to_user_id = item.from_user.id;
|
||||
this.params.to_user_id = item.from_user.id;
|
||||
this.getCustomerMsgList();
|
||||
},
|
||||
async getCustomerMsgList() {
|
||||
let params = {
|
||||
to_user_id:this.to_user_id
|
||||
}
|
||||
await this.$API.customer.list.post(params);
|
||||
},
|
||||
handleKeydown(event){
|
||||
if(event.key === 'Enter' && !event.shiftKey){
|
||||
event.preventDefault(); // 阻止输入框的默认行为
|
||||
this.sendCustomer();
|
||||
}else if(event.key === 'Enter' && event.shiftKey){
|
||||
this.params.to_message += '';
|
||||
}
|
||||
},
|
||||
async sendCustomer() {
|
||||
if(this.params.to_message =="") return
|
||||
const res = await this.$API.customer.send.post(this.params);
|
||||
if(res.code == 200){
|
||||
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
|
||||
},
|
||||
to_message:this.params.to_message
|
||||
});
|
||||
this.params.to_message = "";
|
||||
this.scrollDown();
|
||||
}
|
||||
},
|
||||
|
||||
// 上传附件
|
||||
uploadFile(){
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.uploadFile.importFile(this.params);
|
||||
})
|
||||
},
|
||||
uploadFileSuccess(data){
|
||||
console.log('接口上传成功',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:''
|
||||
});
|
||||
},
|
||||
|
||||
recordsShow(){
|
||||
this.dialog.show = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.recordsMsgDialog.open('show').setData(this.contactsInfo);
|
||||
})
|
||||
},
|
||||
linkFile(em){
|
||||
window.location.href = em.file;
|
||||
},
|
||||
|
||||
handleScroll(event){
|
||||
const { scrollTop } = event;
|
||||
if(scrollTop === 0){
|
||||
console.log(scrollTop)
|
||||
}
|
||||
},
|
||||
scrollDown() {
|
||||
this.$nextTick(() => {
|
||||
const wrap = this.$refs.scrollbar;
|
||||
if(wrap){
|
||||
const e = wrap.$el.querySelector('.el-scrollbar__wrap')
|
||||
e.scrollTop = e.scrollHeight;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
::v-deep .noBorderRadius{border-radius: 0;}
|
||||
.contacts{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.contactsTitle{
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.bodyView{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 5px;
|
||||
.itemCol{
|
||||
padding: 10px 8px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.viewRight{
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.title{
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.msg{
|
||||
width: 100%;
|
||||
color: #888888;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemCol:hover{
|
||||
background: #F6FBFF;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.itemColActive{
|
||||
background: #F6FBFF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contactsUserInfo{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 10px;
|
||||
.contactsTitle{
|
||||
padding: 20px 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
}
|
||||
.bodyView{
|
||||
flex:1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 5px;
|
||||
.itemCol{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 15px;
|
||||
.name{
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mainBody{
|
||||
height: 100%;
|
||||
padding: 15px 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.mainTitle{
|
||||
border-bottom: 1px solid #F6F6F6;
|
||||
padding-bottom: 10px;
|
||||
margin: 0 10px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mainView{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding-bottom: 10px;
|
||||
.msgList{
|
||||
padding: 10px;
|
||||
.msgItem{
|
||||
display: flex;
|
||||
margin-bottom: 12px;
|
||||
padding-right: 40px;
|
||||
.avatar{
|
||||
padding-right: 10px;
|
||||
}
|
||||
.msgText{
|
||||
.msgTitle{
|
||||
padding:0 0 8px 0;
|
||||
color: #555;
|
||||
.time{
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.leftTime{
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
}
|
||||
.textCom{
|
||||
background: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
.fileView{
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #f4f4f4;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background: #f8f6f6;
|
||||
}
|
||||
}
|
||||
.el-image{
|
||||
border-radius: 4px;
|
||||
}
|
||||
.textComNoneBack{
|
||||
background: none;
|
||||
padding: 10px 0;
|
||||
.fileRightItem{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.msgRightItem{
|
||||
justify-content: flex-end;
|
||||
padding:0 0 0 40px;
|
||||
.avatar{
|
||||
padding-left: 10px;
|
||||
padding-right: 0;
|
||||
}
|
||||
.msgText{
|
||||
text-align: right;
|
||||
.msgTitle{
|
||||
text-align: right;
|
||||
}
|
||||
.textCom{
|
||||
background: var(--el-color-primary);
|
||||
color: var(--el-color-white);
|
||||
text-align: left;
|
||||
}
|
||||
.textComNoneBack{
|
||||
background: none;
|
||||
.el-image{
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mainFooter{
|
||||
margin: 0 10px 5px 10px;
|
||||
padding: 10px 0;
|
||||
border: 1px solid #F6F6F6;
|
||||
border-radius: 4px;
|
||||
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{
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
padding:10px 35px 10px 10px;
|
||||
}
|
||||
::v-deep .el-textarea__inner::-webkit-scrollbar{
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
.saveBtn{
|
||||
position: absolute;
|
||||
bottom:20px;
|
||||
right: 10px;
|
||||
z-index: 10;
|
||||
color: #A8ABB2;
|
||||
border-radius: 3px;
|
||||
cursor: not-allowed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.saveActive{
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
28
src/views/service/queryRecord.vue
Normal file
28
src/views/service/queryRecord.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<el-container class="mainNoBack userBox">
|
||||
<el-main>
|
||||
查询记录
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "queryRecord",
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user