williamet/jiace-admin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

管理端客服

Browse Source
This commit is contained in:
熊丽君
2021-08-17 16:17:35 +08:00
parent e6ed881b22
commit 0768f2f242
2 changed files with 168 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/api/service.js
View File

@ -6,3 +6,26 @@ export function getUsers(params) {
params
});
}
// 消息改为已读
export function readMsg(params) {
return request({
url: '/chat/readMsg',
params
});
}
// 获取和某个好友的聊天记录
export function getChatRecords(params) {
return request({
url: '/chat/getChatRecords',
params
});
}
// 给某人发送信息
export function sendMsg(data) {
return request({
url: '/chat/send',
method: 'post',
data
});
}

268
src/views/service/index.vue
View File

@ -7,29 +7,33 @@
class="user_item"
v-for="item in userList"
:key="item.id"
@click="active(item.id)"
@click="active(item)"
:class="activeId === item.id ? 'active' : ''"
>
<div class="user_item_l">
<div class="el-avatar">
<span
:class="item.status ? 'el-avatar2' : ''"
v-if="item.msgNoReadCount != 0"
></span>
<img :src="item.icon" alt="" />
</div>
<div class="info">
<div class="phone">{{ item.username }}</div>
<div class="company">{{ num }}--msgNoReadCount:{{item.msgNoReadCount}}</div>
<div class="phone">
{{ item.username
}}<el-tag
style="margin-left: 15px"
size="mini"
v-if="item.msgNoReadCount != 0"
>{{ item.msgNoReadCount }}条未读</el-tag
>
</div>
<div class="company">{{ numTop }}</div>
</div>
</div>
<div class="user_item_r">14:19</div>
<!-- <div class="user_item_r">14:19</div> -->
</div>
</div>
</el-col>
<el-col :span="18">
<div class="box_r">
<!-- <div class="box" v-if="!activeId">
<div class="box" v-if="!activeId">
<div class="famous-box">
<img src="~@/assets/image/chat.png" width="300" />
<p>
@ -38,34 +42,41 @@
加油吧！ ......
</p>
</div>
</div> -->
<div class="box">
<div id="content" class="content" @scroll="scroll">
</div>
<div class="box" v-else>
<div
v-loading="loading"
id="content"
class="content"
@scroll="scroll"
>
<div v-for="(item, index) in info" :key="index">
<div class="info_r info_default" v-if="item.type == 'leftinfo'">
<span class="circle circle_r"></span>
<span class="circle circle_r el-avatar">
<img :src="icon" alt="" />
</span>
<div class="con_r con_text">
<div>{{ item.content }}</div>
<div v-for="(item2, index) in item.question" :key="index">
<div>{{ item.sendText }}</div>
<!-- <div v-for="(item2, index) in item.question" :key="index">
<div class="con_que">
<div class="czkj-question-msg">
{{ item2.index }}
{{ item2.content }}
{{ item2.sendText }}
</div>
</div>
</div> -->
</div>
</div>
<div class="time_r">{{ item.time }}</div>
<div class="time_r">{{ item.msgTime }}</div>
</div>
<div class="info_l" v-if="item.type == 'rightinfo'">
<div class="con_r con_text">
<span class="con_l">{{ item.content }}</span>
<span class="circle circle_l">
<img src class="pic_l" />
<span class="con_l">{{ item.sendText }}</span>
<span class="circle circle_l el-avatar">
<img :src="avatar" alt="" />
</span>
</div>
<div class="time_l">{{ item.time }}</div>
<div class="time_l">{{ item.msgTime }}</div>
</div>
</div>
</div>
@ -84,9 +95,9 @@
"
id="text"
v-model="customerText"
@keyup.enter="sentMsg()"
@keyup.enter="sentMsg"
></textarea>
<button @click="sentMsg()" class="setproblems">
<button @click="sentMsg" class="setproblems">
<span style="vertical-align: 4px">发 送</span>
</button>
</div>
@ -98,62 +109,53 @@
</template>
<script>
import { getUsers } from '@/api/service';
import { mapGetters } from 'vuex';
import { getUsers, readMsg, getChatRecords, sendMsg } from '@/api/service';
export default {
data() {
return {
num: 0,
queryParams: {
numTop: null,
query: {
pageNum: 1,
pageSize: 10,
},
a: {},
total: 0,
userTotal: 0,
queryParams: {
userId: null,
pageNum: 1,
pageSize: 10,
},
msgTotal: 0,
loading: true,
info: [],
icon: '', // 用户头像
userList: [],
activeId: '1424606573631770624',
activeId: '', // 当前用户ID
customerText: '',
info: [
// {
// type: 'leftinfo',
// time: this.getTodayTime(),
// name: 'robot',
// content: '',
// question: []
// }
],
timer: null,
robotQuestion: [
{ id: 1, content: '客户资料完善后是由谁来审批', index: 1 },
{ id: 2, content: '客户资料审批一直不通过', index: 2 },
{ id: 3, content: '客户资料审批需要多长时间', index: 3 },
{
id: 4,
content: '注册网站时需要一次填写完所有的客户资料吗',
index: 4,
},
{ id: 5, content: '注册时使用的手机号变更怎么办', index: 5 },
],
robotAnswer: [
{
id: 1,
content:
'答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批,答案客户资料完善后是由谁来审批',
index: 1,
},
{ id: 2, content: '测试', index: 2 },
{ id: 3, content: '测试', index: 3 },
{
id: 4,
content: '3333333',
index: 4,
},
{ id: 5, content: '44444444', index: 5 },
],
textarea: '',
path: 'ws://192.168.0.125:1919/webStock/' + this.$store.state.user.userId,
socket: '',
};
},
watch: {
activeId(newVal, oldVal) {
this.queryParams.pageNum = 1;
if (newVal == '' || newVal == null) return;
const info = this.userList.find((item) => {
return item.id == newVal;
});
if (info.msgNoReadCount != 0) {
// 消息改为已读
readMsg({ userId: newVal }).then((res) => {
info.msgNoReadCount = 0;
});
}
this.queryParams.userId = newVal;
this.getMsgList();
},
},
computed: {
...mapGetters(['avatar']),
},
mounted() {
// 初始化
this.init();
@ -161,76 +163,77 @@ export default {
// this.userList = data.list
// this.total = data.total
// })
},
created() {
this.getUserList();
},
created() {},
methods: {
scroll(e) {
// console.log(e.srcElement.scrollTop);
this.num = e.srcElement.scrollTop;
this.numTop = e.srcElement.scrollTop;
if (e.srcElement.scrollTop == 0) {
if (
this.queryParams.pageNum * this.queryParams.pageSize >=
this.msgTotal
)
return this.msgInfo('已经加载完成');
this.queryParams.pageNum++;
this.getMsgList();
}
},
// 获取和某个好友的聊天记录
getMsgList() {
this.loading = true;
getChatRecords(this.queryParams).then(({ data }) => {
// 时间转时间戳
data.list.map((item) => {
item.sendTime = new Date(item.sendTime).getTime();
});
// 时间戳排序
data.list.sort(function (a, b) {
return a.sendTime > b.sendTime ? 1 : -1;
});
console.log(data.list);
this.info = [...data.list, ...this.info];
this.msgTotal = data.total;
this.loading = false;
if (this.queryParams.pageNum == 1) {
// 消息到底
this.$nextTick(() => {
var contentHeight = document.getElementById('content');
console.log(contentHeight.scrollHeight);
contentHeight.scrollTop = contentHeight.scrollHeight;
});
}
});
},
// 获取用户列表
getUserList() {
getUsers(this.queryParams).then(({ data }) => {
getUsers(this.query).then(({ data }) => {
this.userList = data.list;
this.total = data.total;
this.userTotal = data.total;
});
},
// 用户发送消息
sentMsg() {
clearTimeout(this.timer);
let text = this.customerText.trim();
if (text != '') {
var obj = {
msgTime: this.getTodayTime(),
type: 'rightinfo',
time: this.getTodayTime(),
content: text,
sendText: text,
receiverUserId: this.activeId,
};
sendMsg(obj).then((res) => {
this.info.push(obj);
this.appendRobotMsg(this.customerText);
this.customerText = '';
this.$nextTick(() => {
var contentHeight = document.getElementById('content');
console.log(contentHeight.scrollHeight);
contentHeight.scrollTop = contentHeight.scrollHeight;
});
}
},
// 机器人回答消息
appendRobotMsg(text) {
clearTimeout(this.timer);
text = text.trim();
let answerText = '';
let flag;
for (let i = 0; i < this.robotAnswer.length; i++) {
if (this.robotAnswer[i].content.indexOf(text) != -1) {
flag = true;
answerText = this.robotAnswer[i].content;
break;
}
}
// if (flag) {
// let obj = {
// type: 'leftinfo',
// time: this.getTodayTime(),
// name: 'robot',
// content: answerText,
// question: []
// };
// this.info.push(obj);
// } else {
// answerText = '您可能想问：';
// let obj = {
// type: 'leftinfo',
// time: this.getTodayTime(),
// name: 'robot',
// content: answerText,
// question: this.robotQuestion
// };
// this.info.push(obj);
// }
this.$nextTick(() => {
var contentHeight = document.getElementById('content');
contentHeight.scrollTop = contentHeight.scrollHeight;
});
}
},
getTodayTime() {
// 获取当前时间
@ -261,8 +264,11 @@ export default {
seconds;
return time;
},
active(id) {
this.activeId = id;
active(item) {
this.customerText = '';
this.activeId = item.id;
this.info = [];
this.icon = item.icon;
},
init: function () {
if (typeof WebSocket === 'undefined') {
@ -286,10 +292,25 @@ export default {
console.log('连接错误');
},
getMessage(msg) {
console.log(msg.data);
const data = JSON.parse(msg.data);
console.log(JSON.parse(msg.data));
this.a = JSON.parse(msg.data);
// sendUserId
const msgInfo = JSON.parse(msg.data);
// 遍历用户列表 新消息的用户未读数量加加
if (msgInfo.sendUserId === this.activeId) {
this.info.push(msgInfo);
// 消息已读
readMsg({ userId: msgInfo.sendUserId }).then((res) => {
const info = this.userList.find((item) => {
return item.id == msgInfo.sendUserId;
});
info.msgNoReadCount = 0;
});
} else {
const userInfo = this.userList.find((item) => {
return item.id == data.sendUserId;
});
userInfo.msgNoReadCount++;
}
},
send: function (params) {
this.socket.send(params);
@ -330,15 +351,6 @@ export default {
align-items: center;
.el-avatar {
position: relative;
span {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: red;
position: absolute;
top: 0;
right: 0;
}
img {
width: 40px;
height: 40px;