u

components/css/benefits-plan.less

@@ -74,8 +74,5 @@
     .item-title {
         font-weight: bold;
         margin-bottom: 10px;
-        text-decoration: underline;
-        cursor: pointer;
-        text-decoration: underline;
     }
 }
\ No newline at end of file

components/message-input.vue

@@ -128,7 +128,13 @@
                         };
                         img.remove();
                     }
-                    return uploadFile(file)
+                    return uploadFile(
+                        file,
+                        (p: number) =>
+                            type === MessageType.File &&
+                            this.chatInput &&
+                            this.chatInput.updateUploadProgress(p)
+                    )
                         .then((r) => {
                             if (r) {
                                 const msg = {
@@ -160,6 +166,7 @@
                             console.error(e);
 
                             this.setMsg2Failed(index);
+                            this.chatInput && this.chatInput.updateUploadProgress(0);
                         });
                 }
             }

components/who-read-list.vue

@@ -136,6 +136,9 @@
                         };
                     })
             );
+            if (!this.readlist.length) {
+                this.tab = 2;
+            }
             this.unreadlist = await Promise.all(
                 readerlist
                     .filter((k) => !k.is_read)

hybrid-input/index.vue

@@ -29,6 +29,13 @@
                 />
             </label>
 
+            <el-progress
+                :percentage="percentage"
+                :show-text="false"
+                :format="formatPercentage"
+                v-if="percentage"
+            ></el-progress>
+
             <input
                 @change="onChange"
                 :value="file"
@@ -69,7 +76,6 @@
     import { Component, Ref, Vue, Watch } from "vue-property-decorator";
     import { namespace } from "vuex-class";
     import {
-        ERROR_IMAGE,
         getFileType,
         getSvg,
         MAX_FILE_SIZE,
@@ -157,6 +163,7 @@
         private tip4File = `发送文件(最大${MAX_FILE_SIZE_STRING})`;
 
         private emoji: EmojiItem[] = [];
+        private percentage = 0;
 
         @Watch("chatId")
         private onChatIdChanged(v: number, old: number) {
@@ -217,7 +224,8 @@
 
         private allowLoadFile() {
             this.acceptType =
-                limitedFileExtension.map((i) => `.${i}`).join(",") + ",image/*,video/*";
+                limitedFileExtension.map((i) => `.${i}`).join(",") +
+                ",image/*,video/*";
         }
 
         private async handlePasteEvent(event: ClipboardEvent) {
@@ -566,6 +574,17 @@
                 });
             });
         }
+
+        private formatPercentage(p: number) {
+            return `文件处理中 ${p}%`;
+        }
+
+        public updateUploadProgress(v: number) {
+            this.percentage = v;
+            if (v <= 0 || v >= 100) {
+                this.percentage = 0;
+            }
+        }
     }
 </script>
 
@@ -662,6 +681,14 @@
         .offset {
             margin: 0 22px;
         }
+
+        .el-progress {
+            display: inline-block;
+            margin-left: 20px;
+            width: 150px;
+            top: -4px;
+            position: relative;
+        }
     }
 
     .emoji-picker {

service/upload.ts

 import Chat from "@/customer-service/xim";
 
-export async function uploadFile(file: File) {
+export async function uploadFile(file: File, uploading?: (p: number) => void) {
     const sdk = Chat.getSdk();
-    let { url } = await sdk.uploadFileV2(file)
+    const { url } = await sdk.uploadFileV2(file, {
+        onUploadProgress: (e) => uploading(e.percent),
+    });
     return `${sdk.global.baseUrl}${url}`;
 }