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

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

@ -46,20 +46,19 @@
</div>
</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 el-avatar">
<img :src="icon" alt="" />
</span>
<div class="con_r con_text">
<div>{{ item.sendText }}</div>
<!-- <div v-for="(item2, index) in item.question" :key="index">
<div id="content" class="content" @scroll="scroll">
<div v-loading="loading">
<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 el-avatar">
<img :src="icon" alt="" />
</span>
<div class="con_r con_text">
<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 }}
@ -67,18 +66,19 @@
</div>
</div>
</div> -->
</div>
<div class="time_r">{{ item.msgTime }}</div>
</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.sendText }}</span>
<!-- <span class="circle circle_l el-avatar">
<div class="info_l" v-if="item.type == 'rightinfo'">
<div class="con_r con_text">
<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.msgTime }}</div>
</div>
<div class="time_l">{{ item.msgTime }}</div>
</div>
</div>
</div>
@ -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;
},
}
};
</script>
@ -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 {