perf: 优化聊天窗口群聊已读列表

resources/assets/js/pages/manage/components/DialogView.vue

@@ -48,14 +48,13 @@
         <!--时间/阅读-->
         <div v-if="msgData.created_at" class="dialog-foot">
             <div class="time" :title="msgData.created_at">{{$A.formatTime(msgData.created_at)}}</div>
+
+            <div v-if="msgData.send > 1 || dialogType === 'group'" class="percent" @click="openReadPercentage">
                 <EPopover
-                v-if="msgData.send > 1 || dialogType === 'group'"
                     v-model="popperShow"
                     ref="percent"
-                class="percent"
                     placement="left-end"
-                :width="360"
+                    :width="360">
-                :offset="-8">
                     <div class="dialog-wrapper-read-poptip-content">
                         <ul class="read overlay-y">
                             <li class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</li>
@@ -70,8 +69,11 @@
                             </li>
                         </ul>
                     </div>
-                <WCircle slot="reference" :percent="msgData.percentage" :size="14"/>
+                    <div slot="reference"></div>
                 </EPopover>
+                <Loading v-if="popperLoad > 0"/>
+                <WCircle v-else :percent="msgData.percentage" :size="14"/>
+            </div>
             <Icon v-else-if="msgData.percentage === 100" class="done" type="md-done-all"/>
             <Icon v-else class="done" type="md-checkmark"/>
         </div>
@@ -102,6 +104,7 @@ export default {
 
     data() {
         return {
+            popperLoad: 0,
             popperShow: false,
             allList: [],
         }
@@ -154,22 +157,6 @@ export default {
                 this.msgRead();
             },
             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)
-                });
-            }
         }
     },
 
@@ -189,6 +176,32 @@ export default {
             }, 50)
         },
 
+        openReadPercentage() {
+            if (this.popperLoad > 0) {
+                return;
+            }
+            if (this.popperShow) {
+                this.popperShow = false;
+                return;
+            }
+            this.popperLoad++;
+            this.$store.dispatch("call", {
+                url: 'dialog/msg/readlist',
+                data: {
+                    msg_id: this.msgData.id,
+                },
+            }).then(({data}) => {
+                this.allList = data;
+            }).catch(() => {
+                this.allList = [];
+            }).finally(_ => {
+                setTimeout(() => {
+                    this.popperLoad--;
+                    this.popperShow = true
+                }, 100)
+            });
+        },
+
         textMsg(text) {
             if (!text) {
                 return ""