perf: 消息已读/未读人员优化

This commit is contained in:
kuaifan 2022-03-08 16:24:52 +08:00
parent 885437de8d
commit d4a082382d

View File

@ -44,27 +44,30 @@
<!--时间/阅读--> <!--时间/阅读-->
<div v-if="msgData.created_at" class="dialog-foot"> <div v-if="msgData.created_at" class="dialog-foot">
<div class="time" :title="msgData.created_at">{{$A.formatTime(msgData.created_at)}}</div> <div class="time" :title="msgData.created_at">{{$A.formatTime(msgData.created_at)}}</div>
<Poptip <EPopover
v-if="msgData.send > 1 || dialogType == 'group'" v-if="msgData.send > 1 || dialogType == 'group'"
v-model="popperShow"
ref="percent" ref="percent"
class="percent" class="percent"
placement="left-end" placement="left-end"
transfer
:width="360" :width="360"
:offset="8" :offset="-8">
@on-popper-show="popperShow"> <div class="dialog-wrapper-read-poptip-content">
<div slot="content" class="dialog-wrapper-read-poptip-content"> <ul class="read overlay-y">
<ul class="read"> <li class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</li>
<li class="read-title"><em>{{readList.length}}</em>{{$L('已读')}}</li> <li v-for="item in readList">
<li v-for="item in readList"><UserAvatar :userid="item.userid" :size="26" showName/></li> <UserAvatar :userid="item.userid" :size="26" showName/>
</li>
</ul> </ul>
<ul class="unread"> <ul class="unread overlay-y">
<li class="read-title"><em>{{unreadList.length}}</em>{{$L('未读')}}</li> <li class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</li>
<li v-for="item in unreadList"><UserAvatar :userid="item.userid" :size="26" showName/></li> <li v-for="item in unreadList">
<UserAvatar :userid="item.userid" :size="26" showName/>
</li>
</ul> </ul>
</div> </div>
<WCircle :percent="msgData.percentage" :size="14"/> <WCircle slot="reference" :percent="msgData.percentage" :size="14"/>
</Poptip> </EPopover>
<Icon v-else-if="msgData.percentage === 100" class="done" type="md-done-all"/> <Icon v-else-if="msgData.percentage === 100" class="done" type="md-done-all"/>
<Icon v-else class="done" type="md-checkmark"/> <Icon v-else class="done" type="md-checkmark"/>
</div> </div>
@ -95,7 +98,8 @@ export default {
data() { data() {
return { return {
read_list: [] popperShow: false,
allList: [],
} }
}, },
@ -107,11 +111,11 @@ export default {
...mapState(['userToken', 'userId']), ...mapState(['userToken', 'userId']),
readList() { readList() {
return this.read_list.filter(({read_at}) => read_at) return this.allList.filter(({read_at}) => read_at)
}, },
unreadList() { unreadList() {
return this.read_list.filter(({read_at}) => !read_at) return this.allList.filter(({read_at}) => !read_at)
}, },
showMenu() { showMenu() {
@ -125,6 +129,22 @@ export default {
this.msgRead(); this.msgRead();
}, },
immediate: true, immediate: true,
},
popperShow(val) {
if (val) {
this.$store.dispatch("call", {
url: 'dialog/msg/readlist',
data: {
msg_id: this.msgData.id,
},
}).then(({data}) => {
this.allList = data;
setTimeout(this.$refs.percent.updatePopper, 10)
}).catch(() => {
this.allList = [];
setTimeout(this.$refs.percent.updatePopper, 10)
});
}
} }
}, },
@ -144,22 +164,6 @@ export default {
}, 50) }, 50)
}, },
popperShow() {
this.$store.dispatch("call", {
url: 'dialog/msg/readlist',
data: {
msg_id: this.msgData.id,
},
}).then(({data}) => {
this.read_list = data;
this.$nextTick(() => {
this.$refs.percent.updatePopper();
})
}).catch(() => {
this.read_list = [];
});
},
textMsg(text) { textMsg(text) {
if (!text) { if (!text) {
return "" return ""