From 8acf3b21c72012712bfeca3b2d7206d6b43e99ca Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Wed, 20 Apr 2022 16:13:12 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=81=8A=E5=A4=A9?=
 =?UTF-8?q?=E7=AA=97=E5=8F=A3=E7=BE=A4=E8=81=8A=E5=B7=B2=E8=AF=BB=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/DialogView.vue | 93 +++++++++++--------
 1 file changed, 53 insertions(+), 40 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/DialogView.vue b/resources/assets/js/pages/manage/components/DialogView.vue
index 0141e2b00..1c6fec061 100644
--- a/resources/assets/js/pages/manage/components/DialogView.vue
+++ b/resources/assets/js/pages/manage/components/DialogView.vue
@@ -48,30 +48,32 @@
         <!--时间/阅读-->
         <div v-if="msgData.created_at" class="dialog-foot">
             <div class="time" :title="msgData.created_at">{{$A.formatTime(msgData.created_at)}}</div>
-            <EPopover
-                v-if="msgData.send > 1 || dialogType === 'group'"
-                v-model="popperShow"
-                ref="percent"
-                class="percent"
-                placement="left-end"
-                :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>
-                        <li v-for="item in readList">
-                            <UserAvatar :userid="item.userid" :size="26" showName/>
-                        </li>
-                    </ul>
-                    <ul class="unread overlay-y">
-                        <li class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</li>
-                        <li v-for="item in unreadList">
-                            <UserAvatar :userid="item.userid" :size="26" showName/>
-                        </li>
-                    </ul>
-                </div>
-                <WCircle slot="reference" :percent="msgData.percentage" :size="14"/>
-            </EPopover>
+
+            <div v-if="msgData.send > 1 || dialogType === 'group'" class="percent" @click="openReadPercentage">
+                <EPopover
+                    v-model="popperShow"
+                    ref="percent"
+                    placement="left-end"
+                    :width="360">
+                    <div class="dialog-wrapper-read-poptip-content">
+                        <ul class="read overlay-y">
+                            <li class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</li>
+                            <li v-for="item in readList">
+                                <UserAvatar :userid="item.userid" :size="26" showName/>
+                            </li>
+                        </ul>
+                        <ul class="unread overlay-y">
+                            <li class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</li>
+                            <li v-for="item in unreadList">
+                                <UserAvatar :userid="item.userid" :size="26" showName/>
+                            </li>
+                        </ul>
+                    </div>
+                    <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 ""