完善客服表情
This commit is contained in:
龙运模
parent
77b460b2a2
commit
eb28b64c44
@ -5,7 +5,7 @@
|
||||
<span class="arrow"></span>
|
||||
<div class="viewBody">
|
||||
<div class="title">智能客服
|
||||
<el-icon class="close" size="18" @click="closeCustomer"><el-icon-Close/></el-icon>
|
||||
<el-icon class="close" size="18" @click.stop="closeCustomer"><el-icon-Close/></el-icon>
|
||||
</div>
|
||||
<div class="bodyMain affix-container">
|
||||
<el-scrollbar ref="scrollbar" height="100%" @scroll="scroll">
|
||||
@ -66,10 +66,19 @@
|
||||
<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>
|
||||
<el-dropdown trigger="click" placement="top" ref="dropdownDown">
|
||||
<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
|
||||
<template #dropdown>
|
||||
<el-scrollbar height="180">
|
||||
<ul class="emojiView">
|
||||
<li class="emojiCol" v-for="(item,index) in emojiJson" :key="index" @click.stop="emojiChange(item)">{{item}}</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</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>
|
||||
<el-input class="customTextarea" v-model="params.to_message" @keydown="handleKeydown" autofocus ref="messageInput" resize="none" type="textarea" :rows="3" placeholder="Shift+Enter换行 请简短描述您的问题"></el-input>
|
||||
<div class="saveBtn" :class="params.to_message!==''?'saveActive':''" @click="sendCustomer">发 送</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -85,6 +94,7 @@ 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"
|
||||
import emoji from "@/views/service/components/emoji.json";
|
||||
export default {
|
||||
name: "index",
|
||||
components:{
|
||||
@ -108,6 +118,7 @@ export default {
|
||||
to_user_id:"",
|
||||
to_message:"",
|
||||
},
|
||||
emojiJson:[],
|
||||
tagList:[],
|
||||
msgList:[],
|
||||
user_id:0,
|
||||
@ -128,9 +139,13 @@ export default {
|
||||
this.user_id = userInfo.id;
|
||||
}
|
||||
}
|
||||
|
||||
this.emojiJson = emoji.data.split(',');
|
||||
document.addEventListener('click', this.closeDropdown);
|
||||
},
|
||||
unmounted() {
|
||||
eventBus.$off('sockBack', this.getWsResult);
|
||||
document.removeEventListener('click', this.closeDropdown);
|
||||
},
|
||||
methods:{
|
||||
getWsResult(res){
|
||||
@ -279,6 +294,26 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
emojiChange(item){
|
||||
let text = this.$TOOL.objCopy(this.params.to_message);
|
||||
this.params.to_message = text + item;
|
||||
},
|
||||
closeDropdown(event){
|
||||
if(this.$refs.dropdownDown && this.$refs.dropdownDown.$el){
|
||||
const dropdownElement = this.$refs.dropdownDown.$el;
|
||||
if (!dropdownElement.contains(event.target)) {
|
||||
this.$refs.dropdownDown.handleClose();
|
||||
}
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.$nextTick(()=>{
|
||||
if(this.$refs.messageInput){
|
||||
this.$refs.messageInput.focus();
|
||||
}
|
||||
})
|
||||
},10)
|
||||
},
|
||||
|
||||
// 上传附件
|
||||
uploadFile(){
|
||||
this.$nextTick(()=>{
|
||||
@ -417,6 +452,8 @@ export default {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.msgText{
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.msgTitle{
|
||||
padding: 0 0 8px 0;
|
||||
color: #555;
|
||||
@ -437,6 +474,7 @@ export default {
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
max-width: 100%;
|
||||
.imgView{
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@ -468,6 +506,14 @@ export default {
|
||||
border-radius: 4px;
|
||||
background: #f8f6f6;
|
||||
margin-bottom: 5px;
|
||||
overflow: hidden;
|
||||
.fileName{
|
||||
flex: 1;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: break-word;
|
||||
display: inline-block;
|
||||
word-break:break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
.el-image{
|
||||
@ -580,4 +626,17 @@ export default {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.emojiView{
|
||||
width: 380px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.emojiCol{
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
3
src/views/service/components/emoji.json
Normal file
3
src/views/service/components/emoji.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"data": "😀,😁,😂,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,😇,😐,😑,😶,😏,😣,😥,😮,😯,😪,😫,😴,😌,😛,😜,😝,😒,😓,😔,😕,😲,😷,😖,😞,😟,😤,😢,😭,😦,😧,😨,😬,😰,😱,😳,😵,😡,😠,💘,❤,💓,💔,💕,💖,💗,💙,💚,💛,💜,💝,💞,💟,❣,💪,👈,👉,☝,👆,👇,✌,✋,👌,👍,👎,✊,👊,👋,👏,👐,✍,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🍅,🍆,🌽,🍄,🌰,🍞,🍖,🍗,🍔,🍟,🍕,🍳,🍲,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🍫,🍬,🍭,🍮,🍯,🍼,☕,🍵,🍶,🍷,🍸,🍹,🍺,🍻,🍴,🌹,🍀,🍎,💰,📱,🌙,🍁,🍂,🍃,🌷,💎,🔪,🔫,🏀,⚽,⚡,👄,👍,🔥,🙈,🙉,🙊,🐵,🐒,🐶,🐕,🐩,🐺,🐱,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐈,🐯,🐅,🐆,🐴,🐎,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🐘,🐭,🐁,🐀,🐹,🐰,🐇,🐻,🐨,🐼,🐾,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🐸,🐊,🐢,🐍,🐲,🐉,🐳,🐋,🐬,🐟,🐠,🐡,🐙,🐚,🐌,🐛,🐜,🐝,🐞,🦋,😈,👿,👹,👺,💀,☠,👻,👽,👾,💣"
|
||||
}
|
||||
@ -80,10 +80,17 @@
|
||||
<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>
|
||||
<el-dropdown trigger="click" ref="dropdownDown">
|
||||
<div class="tagItem"><el-icon size="18"><sc-icon-Expression/></el-icon></div>
|
||||
<template #dropdown>
|
||||
<ul class="emojiView">
|
||||
<li class="emojiCol" v-for="(item,index) in emojiJson" :key="index" @click.stop="emojiChange(item)">{{item}}</li>
|
||||
</ul>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</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>
|
||||
<el-input @keydown="handleKeydown" v-model="params.to_message" class="customTextarea" autofocus ref="messageInput" 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>
|
||||
@ -129,6 +136,7 @@ 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"
|
||||
const emoji = require("@/views/service/components/emoji.json");
|
||||
export default {
|
||||
name: "",
|
||||
components:{
|
||||
@ -143,6 +151,7 @@ export default {
|
||||
msgDataLoading:false,
|
||||
contactsLoading:false,
|
||||
msgList:[],
|
||||
emojiJson:[],
|
||||
user_id:0,
|
||||
to_user_id:0,
|
||||
page:1,
|
||||
@ -171,6 +180,12 @@ export default {
|
||||
},1000)
|
||||
// 获取新消息
|
||||
eventBus.$on('sockBack', this.getWsResult);
|
||||
|
||||
this.emojiJson = emoji.data.split(',');
|
||||
document.addEventListener('click', this.closeDropdown);
|
||||
},
|
||||
unmounted() {
|
||||
document.removeEventListener('click', this.closeDropdown);
|
||||
},
|
||||
methods:{
|
||||
getWsResult(res){
|
||||
@ -261,6 +276,9 @@ export default {
|
||||
this.params.to_user_id = item.from_user.id;
|
||||
this.msgList = [];
|
||||
this.getCustomerMsgList(false);
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.messageInput.focus();
|
||||
})
|
||||
},
|
||||
async getCustomerMsgList(isPage=false) {
|
||||
let params = {}
|
||||
@ -307,6 +325,21 @@ export default {
|
||||
this.scrollDown();
|
||||
}
|
||||
},
|
||||
emojiChange(item){
|
||||
let text = this.$TOOL.objCopy(this.params.to_message);
|
||||
this.params.to_message = text + item;
|
||||
},
|
||||
closeDropdown(event){
|
||||
const dropdownElement = this.$refs.dropdownDown.$el;
|
||||
if (!dropdownElement.contains(event.target)) {
|
||||
this.$refs.dropdownDown.handleClose();
|
||||
}
|
||||
setTimeout(()=>{
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.messageInput.focus();
|
||||
})
|
||||
},10)
|
||||
},
|
||||
|
||||
// 上传附件
|
||||
uploadFile(){
|
||||
@ -605,6 +638,19 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.emojiView{
|
||||
width: 650px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.emojiCol{
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.exportPopover{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user