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

去掉loading引起的内容隐藏

Browse Source
This commit is contained in:
熊丽君
2021-09-15 17:39:07 +08:00
parent 1a0beb5841
commit 336f9ca676
1 changed files with 64 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,14 +46,13 @@
</div> </div>
</div> </div>
<div class="box" v-else> <div class="box" v-else>
<div <div id="content" class="content" @scroll="scroll">
v-loading="loading" <div v-loading="loading">
id="content"
class="content"
@scroll="scroll"
>
<div v-for="(item, index) in info" :key="index"> <div v-for="(item, index) in info" :key="index">
<div class="info_r info_default" v-if="item.type == 'leftinfo'"> <div
class="info_r info_default"
v-if="item.type == 'leftinfo'"
>
<span class="circle circle_r el-avatar"> <span class="circle circle_r el-avatar">
<img :src="icon" alt="" /> <img :src="icon" alt="" />
</span> </span>
@ -82,6 +81,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="setproblem"> <div class="setproblem">
<textarea <textarea
@ -120,44 +120,45 @@ export default {
numTop: null, numTop: null,
query: { query: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
}, },
userTotal: 0, userTotal: 0,
queryParams: { queryParams: {
userId: null, userId: null,
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10
}, },
msgTotal: 0, msgTotal: 0,
loading: true, loading: false,
info: [], info: [],
icon: '', // 用户头像 icon: '', // 用户头像
userList: [], userList: [],
activeId: '', // 当前用户ID activeId: '', // 当前用户ID
customerText: '', customerText: '',
path: 'ws://121.5.136.69:1919/webStock/' + this.$store.state.user.userId, 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: { watch: {
activeId(newVal, oldVal) { activeId(newVal, oldVal) {
this.queryParams.pageNum = 1; this.queryParams.pageNum = 1;
if (newVal == '' || newVal == null) return; if (newVal == '' || newVal == null) return;
const info = this.userList.find((item) => { const info = this.userList.find(item => {
return item.id == newVal; return item.id == newVal;
}); });
if (info.msgNoReadCount != 0) { if (info.msgNoReadCount != 0) {
// 消息改为已读 // 消息改为已读
readMsg({ userId: newVal }).then((res) => { readMsg({ userId: newVal }).then(res => {
info.msgNoReadCount = 0; info.msgNoReadCount = 0;
}); });
} }
this.queryParams.userId = newVal; this.queryParams.userId = newVal;
this.getMsgList(); this.getMsgList();
}, }
}, },
computed: { computed: {
...mapGetters(['avatar']), ...mapGetters(['avatar'])
}, },
mounted() { mounted() {
// 初始化 // 初始化
@ -186,20 +187,34 @@ export default {
}, },
// 获取和某个好友的聊天记录 // 获取和某个好友的聊天记录
getMsgList() { 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 }) => { getChatRecords(this.queryParams).then(({ data }) => {
// 时间转时间戳 // 时间转时间戳
data.list.map((item) => { data.list.map(item => {
item.sendTime = new Date(item.sendTime).getTime(); 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; return a.sendTime > b.sendTime ? 1 : -1;
}); });
console.log(data.list); console.log(data.list);
this.info = [...data.list, ...this.info]; this.info = [...data.list, ...this.info];
this.msgTotal = data.total; this.msgTotal = data.total;
this.loading = false; // this.loading = false;
// if (this.queryParams.pageNum != 1) {
// loading.close();
// }
if (this.queryParams.pageNum == 1) { if (this.queryParams.pageNum == 1) {
// 消息到底 // 消息到底
this.$nextTick(() => { this.$nextTick(() => {
@ -218,7 +233,7 @@ export default {
}); });
setTimeout(() => { setTimeout(() => {
this.getUserList(); this.getUserList();
}, 600000); }, 300000);
}, },
// 用户发送消息 // 用户发送消息
sentMsg() { sentMsg() {
@ -228,9 +243,9 @@ export default {
msgTime: this.getTodayTime(), msgTime: this.getTodayTime(),
type: 'rightinfo', type: 'rightinfo',
sendText: text, sendText: text,
receiverUserId: this.activeId, receiverUserId: this.activeId
}; };
sendMsg(obj).then((res) => { sendMsg(obj).then(res => {
this.info.push(obj); this.info.push(obj);
this.customerText = ''; this.customerText = '';
this.$nextTick(() => { this.$nextTick(() => {
@ -276,7 +291,7 @@ export default {
this.info = []; this.info = [];
this.icon = item.icon; this.icon = item.icon;
}, },
init: function () { init: function() {
if (typeof WebSocket === 'undefined') { if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持socket'); alert('您的浏览器不支持socket');
} else { } else {
@ -291,13 +306,13 @@ export default {
this.socket.onmessage = this.getMessage; this.socket.onmessage = this.getMessage;
} }
}, },
open: function () { open: function() {
console.log('socket连接成功'); console.log('socket连接成功');
}, },
error: function () { error: function() {
console.log('连接错误'); console.log('连接错误');
}, },
msgTips(){ msgTips() {
let that = this; let that = this;
if (!('Notification' in window)) { if (!('Notification' in window)) {
console.log('浏览器不支持消息通知'); console.log('浏览器不支持消息通知');
@ -341,13 +356,13 @@ export default {
const data = JSON.parse(msg.data); const data = JSON.parse(msg.data);
console.log(JSON.parse(msg.data)); console.log(JSON.parse(msg.data));
const msgInfo = JSON.parse(msg.data); const msgInfo = JSON.parse(msg.data);
this.msgTips() this.msgTips();
// 遍历用户列表 新消息的用户未读数量加加 // 遍历用户列表 新消息的用户未读数量加加
if (msgInfo.sendUserId === this.activeId) { if (msgInfo.sendUserId === this.activeId) {
this.info.push(msgInfo); this.info.push(msgInfo);
// 消息已读 // 消息已读
readMsg({ userId: msgInfo.sendUserId }).then((res) => { readMsg({ userId: msgInfo.sendUserId }).then(res => {
const info = this.userList.find((item) => { const info = this.userList.find(item => {
return item.id == msgInfo.sendUserId; return item.id == msgInfo.sendUserId;
}); });
info.msgNoReadCount = 0; info.msgNoReadCount = 0;
@ -357,24 +372,24 @@ export default {
// } // }
else { else {
const userInfo = this.userList.find((item) => { const userInfo = this.userList.find(item => {
return item.id == data.sendUserId; return item.id == data.sendUserId;
}); });
userInfo.msgNoReadCount++; userInfo.msgNoReadCount++;
} }
}, },
send: function (params) { send: function(params) {
this.socket.send(params); this.socket.send(params);
}, },
close: function () { close: function() {
console.log('socket已经关闭'); console.log('socket已经关闭');
}, }
}, },
destroyed() { destroyed() {
console.log('out'); console.log('out');
// 销毁监听 // 销毁监听
this.socket.onclose = this.close; this.socket.onclose = this.close;
}, }
}; };
</script> </script>
@ -389,7 +404,7 @@ export default {
overflow: auto; overflow: auto;
.box_l { .box_l {
// background-color: #cad5db; // background-color: #cad5db;
background-color: rgba(255,255,255,.2); background-color: rgba(255, 255, 255, 0.2);
padding: 10px; padding: 10px;
min-height: 100%; min-height: 100%;
.user_item { .user_item {