晚上客服聊天
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);
|
this.$store.commit("set_repair_count", res.data.list_repair_info.repair_count);
|
||||||
}
|
}
|
||||||
let apiMenu = tool.objCopy(tool.data.get("MENU"));
|
let apiMenu = tool.objCopy(tool.data.get("MENU"));
|
||||||
if(apiMenu.length<1) return
|
if(!apiMenu || apiMenu.length === 0) return
|
||||||
apiMenu.forEach(item=>{
|
apiMenu.forEach(item=>{
|
||||||
if(item.name == 'order'){
|
if(item.name == 'order'){
|
||||||
item.meta.tag = 0;
|
item.meta.tag = 0;
|
||||||
|
|||||||
@ -67,6 +67,7 @@ export default {
|
|||||||
},
|
},
|
||||||
upload_data:{},
|
upload_data:{},
|
||||||
params:{},
|
params:{},
|
||||||
|
singleFnc:true,
|
||||||
parentParams:{
|
parentParams:{
|
||||||
to_user_id:"",
|
to_user_id:"",
|
||||||
unique:""
|
unique:""
|
||||||
@ -119,7 +120,6 @@ export default {
|
|||||||
|
|
||||||
// 导入文件
|
// 导入文件
|
||||||
importFile(params){
|
importFile(params){
|
||||||
this.visible = true;
|
|
||||||
this.parentParams = params;
|
this.parentParams = params;
|
||||||
},
|
},
|
||||||
// 上传前
|
// 上传前
|
||||||
@ -149,14 +149,17 @@ export default {
|
|||||||
formData.append('to_user_id', this.parentParams['to_user_id']);
|
formData.append('to_user_id', this.parentParams['to_user_id']);
|
||||||
this.params = formData;
|
this.params = formData;
|
||||||
|
|
||||||
|
// 单次
|
||||||
|
if(this.singleFnc){
|
||||||
|
this.singleFnc = false;
|
||||||
this.save();
|
this.save();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
deleteFileNum(num){
|
deleteFileNum(num){
|
||||||
this.handleRemove(this.fileList[num], this.fileList);
|
this.handleRemove(this.fileList[num], this.fileList);
|
||||||
this.setParamsData();
|
this.setParamsData();
|
||||||
},
|
},
|
||||||
close(){
|
close(){
|
||||||
this.visible = false;
|
|
||||||
this.progressShow = false;
|
this.progressShow = false;
|
||||||
this.listProgress = [];
|
this.listProgress = [];
|
||||||
this.handleRemove('',this.fileList,true);
|
this.handleRemove('',this.fileList,true);
|
||||||
@ -166,11 +169,11 @@ export default {
|
|||||||
const res = await this.$API.customer.attachmentMessage.post(this.params);
|
const res = await this.$API.customer.attachmentMessage.post(this.params);
|
||||||
this.saveLoading = false;
|
this.saveLoading = false;
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
this.$message.success('提交成功,正在上传');
|
this.params = {};
|
||||||
this.listProgress = [];
|
this.fileList = [];
|
||||||
this.visible = false;
|
this.singleFnc = true;
|
||||||
// this.uploadShow = false;
|
|
||||||
// this.$emit('uploadFileSuccess');
|
this.$emit('uploadFileSuccess',res.data);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
handleExceed(){
|
handleExceed(){
|
||||||
@ -179,7 +182,6 @@ export default {
|
|||||||
handleRemove(file,fileList,isArr=false){
|
handleRemove(file,fileList,isArr=false){
|
||||||
if(isArr){
|
if(isArr){
|
||||||
fileList = [];
|
fileList = [];
|
||||||
// this.listProgress = [];
|
|
||||||
}else{
|
}else{
|
||||||
const index = fileList.findIndex(f => f.uid === file.uid);
|
const index = fileList.findIndex(f => f.uid === file.uid);
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog :title="titleMap[mode]" v-model="visible" :width="600" draggable destroy-on-close @closed="$emit('closed')">
|
<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-tabs v-loading="loading" element-loading-text="加载中..." v-model="tabName" @tab-change="tabChange">
|
||||||
<el-tab-pane label="全部" name="1">
|
<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>
|
||||||
<el-tab-pane label="文档" name="2">
|
<el-tab-pane label="文件" name="2">
|
||||||
<records-list :recordsData="recordsDataList"></records-list>
|
<records-list :recordsData="recordsDataList" @moreList="pageMore"></records-list>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@ -33,6 +35,8 @@ export default {
|
|||||||
recordsDataList:[],
|
recordsDataList:[],
|
||||||
|
|
||||||
page: 1,
|
page: 1,
|
||||||
|
pageSize:100,
|
||||||
|
moreShow:true,
|
||||||
keyWord:"",
|
keyWord:"",
|
||||||
user_id:this.$TOOL.data.get('USER_INFO').id,
|
user_id:this.$TOOL.data.get('USER_INFO').id,
|
||||||
to_user_id:"",
|
to_user_id:"",
|
||||||
@ -49,17 +53,29 @@ export default {
|
|||||||
return this
|
return this
|
||||||
},
|
},
|
||||||
tabChange(){
|
tabChange(){
|
||||||
this.setData();
|
this.page = 1;
|
||||||
|
this.getData();
|
||||||
},
|
},
|
||||||
//表单注入数据
|
//表单注入数据
|
||||||
setData(data) {
|
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();
|
this.getData();
|
||||||
},
|
},
|
||||||
async getData() {
|
async getData() {
|
||||||
let params = {
|
let params = {
|
||||||
page: this.page,
|
page: this.page,
|
||||||
pageSize: 100,
|
pageSize: this.pageSize,
|
||||||
creator_id: {
|
creator_id: {
|
||||||
operator: "in",
|
operator: "in",
|
||||||
value: [this.to_user_id, this.user_id]
|
value: [this.to_user_id, this.user_id]
|
||||||
@ -82,14 +98,22 @@ export default {
|
|||||||
item.to_message_list = JSON.parse(item.to_message);
|
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;
|
this.recordsDataList = res.data.rows;
|
||||||
|
}else{
|
||||||
|
this.recordsDataList = this.recordsDataList.concat(res.data.rows);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
.searchBtn{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="recordView">
|
<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="itemCol" v-for="(item,index) in recordsData" :key="index">
|
||||||
<div class="avatar">
|
<div class="avatar">
|
||||||
<el-avatar :size="36" :src="item.from_user.avatar" fit="contain" v-if="item.from_user && item.from_user.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>
|
||||||
<span class="fileView" v-else>
|
<span class="fileView" v-else>
|
||||||
<fileType size="30px" :fileType="em.extension" />
|
<fileType size="30px" :fileType="em.extension" />
|
||||||
|
<span class="fileName">{{em.client_file_name?em.client_file_name:'未命名'}}</span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -55,7 +58,13 @@ export default {
|
|||||||
|
|
||||||
},
|
},
|
||||||
methods:{
|
methods:{
|
||||||
|
handleScroll(event){
|
||||||
|
const { scrollTop } = event;
|
||||||
|
let num = this.$refs.itemRow.scrollHeight;
|
||||||
|
if(Number(scrollTop) + 420 > num){
|
||||||
|
this.$emit('moreList');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -91,6 +100,13 @@ export default {
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
.fileView{
|
.fileView{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #f4f4f4;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f8f6f6;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.textComNoneBack{
|
.textComNoneBack{
|
||||||
|
|||||||
@ -1,484 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-container class="mainNoBack userBox">
|
<el-container class="mainNoBack userBox">
|
||||||
<el-aside class="userAside" width="220px">
|
<el-main>
|
||||||
<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-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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: "", // faq
|
name: "faq",
|
||||||
components:{
|
components:{
|
||||||
customerRecordsDialog,
|
|
||||||
uploadFile,
|
|
||||||
fileType
|
|
||||||
},
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
return{
|
||||||
contactsList:[],
|
|
||||||
contactsInfo:{},
|
|
||||||
msgList:[],
|
|
||||||
user_id:0,
|
|
||||||
to_user_id:0,
|
|
||||||
|
|
||||||
params:{
|
|
||||||
to_user_id:"",
|
|
||||||
to_message:"",
|
|
||||||
},
|
|
||||||
|
|
||||||
dialog:{
|
|
||||||
show:false
|
|
||||||
},
|
|
||||||
mesList:false,
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
const userInfo = this.$TOOL.data.get("USER_INFO");
|
|
||||||
this.user_id = userInfo.id;
|
|
||||||
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.getContactList();
|
|
||||||
|
|
||||||
},1000)
|
|
||||||
// 获取新消息
|
|
||||||
eventBus.$on('sockBack', this.getWsResult);
|
|
||||||
},
|
},
|
||||||
methods:{
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<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>
|
</style>
|
||||||
|
|||||||
@ -1,24 +1,510 @@
|
|||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<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 {
|
export default {
|
||||||
name: "infoQuery",
|
name: "",
|
||||||
|
components:{
|
||||||
|
customerRecordsDialog,
|
||||||
|
uploadFile,
|
||||||
|
fileType
|
||||||
|
},
|
||||||
data(){
|
data(){
|
||||||
return{
|
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>
|
</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>
|
</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