From 336f9ca676bffb1418017e4fb89242fca4632f6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com> Date: Wed, 15 Sep 2021 17:39:07 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E6=8E=89loading=E5=BC=95=E8=B5=B7?= =?UTF-8?q?=E7=9A=84=E5=86=85=E5=AE=B9=E9=9A=90=E8=97=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/service/index.vue | 113 ++++++++++++++++++++---------------- 1 file changed, 64 insertions(+), 49 deletions(-) diff --git a/src/views/service/index.vue b/src/views/service/index.vue index 4c2d3f7..eb596de 100644 --- a/src/views/service/index.vue +++ b/src/views/service/index.vue @@ -46,20 +46,19 @@
-
-
-
- - - -
-
{{ item.sendText }}
- +
+
{{ item.msgTime }}
-
{{ item.msgTime }}
-
-
-
- {{ item.sendText }} - +
+
{{ item.msgTime }}
-
{{ item.msgTime }}
@@ -120,44 +120,45 @@ export default { numTop: null, query: { pageNum: 1, - pageSize: 10, + pageSize: 10 }, userTotal: 0, queryParams: { userId: null, pageNum: 1, - pageSize: 10, + pageSize: 10 }, msgTotal: 0, - loading: true, + loading: false, info: [], icon: '', // 用户头像 userList: [], activeId: '', // 当前用户ID customerText: '', path: 'ws://121.5.136.69:1919/webStock/' + this.$store.state.user.userId, - socket: '', + // 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) => { + const info = this.userList.find(item => { return item.id == newVal; }); if (info.msgNoReadCount != 0) { // 消息改为已读 - readMsg({ userId: newVal }).then((res) => { + readMsg({ userId: newVal }).then(res => { info.msgNoReadCount = 0; }); } this.queryParams.userId = newVal; this.getMsgList(); - }, + } }, computed: { - ...mapGetters(['avatar']), + ...mapGetters(['avatar']) }, mounted() { // 初始化 @@ -186,20 +187,34 @@ export default { }, // 获取和某个好友的聊天记录 getMsgList() { - this.loading = true; + // let loading; + // if (this.queryParams.pageNum != 1) { + // loading = this.$loading({ + // lock: true, + // text: 'Loading', + // spinner: 'el-icon-loading', + // background: 'rgba(0, 0, 0, 0.7)' + // }); + // } + + // this.loading = true; 会引起右边内容隐藏 getChatRecords(this.queryParams).then(({ data }) => { // 时间转时间戳 - data.list.map((item) => { + data.list.map(item => { item.sendTime = new Date(item.sendTime).getTime(); }); // 时间戳排序 - data.list.sort(function (a, b) { + 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; + // this.loading = false; + // if (this.queryParams.pageNum != 1) { + // loading.close(); + // } + if (this.queryParams.pageNum == 1) { // 消息到底 this.$nextTick(() => { @@ -218,7 +233,7 @@ export default { }); setTimeout(() => { this.getUserList(); - }, 600000); + }, 300000); }, // 用户发送消息 sentMsg() { @@ -228,9 +243,9 @@ export default { msgTime: this.getTodayTime(), type: 'rightinfo', sendText: text, - receiverUserId: this.activeId, + receiverUserId: this.activeId }; - sendMsg(obj).then((res) => { + sendMsg(obj).then(res => { this.info.push(obj); this.customerText = ''; this.$nextTick(() => { @@ -276,7 +291,7 @@ export default { this.info = []; this.icon = item.icon; }, - init: function () { + init: function() { if (typeof WebSocket === 'undefined') { alert('您的浏览器不支持socket'); } else { @@ -291,13 +306,13 @@ export default { this.socket.onmessage = this.getMessage; } }, - open: function () { + open: function() { console.log('socket连接成功'); }, - error: function () { + error: function() { console.log('连接错误'); }, - msgTips(){ + msgTips() { let that = this; if (!('Notification' in window)) { console.log('浏览器不支持消息通知'); @@ -341,13 +356,13 @@ export default { const data = JSON.parse(msg.data); console.log(JSON.parse(msg.data)); const msgInfo = JSON.parse(msg.data); - this.msgTips() + this.msgTips(); // 遍历用户列表 新消息的用户未读数量加加 if (msgInfo.sendUserId === this.activeId) { this.info.push(msgInfo); // 消息已读 - readMsg({ userId: msgInfo.sendUserId }).then((res) => { - const info = this.userList.find((item) => { + readMsg({ userId: msgInfo.sendUserId }).then(res => { + const info = this.userList.find(item => { return item.id == msgInfo.sendUserId; }); info.msgNoReadCount = 0; @@ -357,24 +372,24 @@ export default { // } else { - const userInfo = this.userList.find((item) => { + const userInfo = this.userList.find(item => { return item.id == data.sendUserId; }); userInfo.msgNoReadCount++; } }, - send: function (params) { + send: function(params) { this.socket.send(params); }, - close: function () { + close: function() { console.log('socket已经关闭'); - }, + } }, destroyed() { console.log('out'); // 销毁监听 this.socket.onclose = this.close; - }, + } }; @@ -389,7 +404,7 @@ export default { overflow: auto; .box_l { // background-color: #cad5db; - background-color: rgba(255,255,255,.2); + background-color: rgba(255, 255, 255, 0.2); padding: 10px; min-height: 100%; .user_item {