优化聊天组件

pages/index/index.vue

@@ -34,7 +34,8 @@
                       :style="{color: item.style.btnTextColor,backgroundColor: item.style.buttonColor}"
                       class="option-button"
                       :class="{ 'selected': isOptionSelected(message.id, option) }"
-                      @click="selectOption(message.id, option)"
+                      @click="selectOption(message, option)"
+                      v-once
                   >
                     {{ option.text }}
                   </button>
@@ -79,7 +80,8 @@ export default {
       order_plan_id: '',
       creative_id: '',
       impress_id: '',
-      sign: ''
+      sign: '',
+      isProcessing: false // 防止按钮重复点击
     }
   },
   mounted() {
@@ -153,50 +155,66 @@ export default {
       return maxId + 1
     },
     // 聊天组件选择了选项
-    async selectOption(id, option) {
-      let h5ChatItem = this.json.filter(e => e.type === 'h5-chat')[0]
-      if (!h5ChatItem) {
-        console.error("未找到类型为 'h5-chat' 的元素");
-        return;
-      }
-      // 如果有答案就直接用户消息和客服消息
-      let nextMsg = h5ChatItem.agentMsg.shift();
-
-      h5ChatItem.messages.push({
-        id: this.getChatMsgIdMax(),
-        sender: 'user',
-        text: option.text,
-        options: []
-      })
-      await this.delay(1000);
+    async selectOption(message, option) {
+      try{
+        if(this.isProcessing){
+          return;
+        }
+        this.isProcessing = true;
+        let h5ChatItem = this.json.filter(e => e.type === 'h5-chat')[0]
+        // 防止重复点击
+        if(message.handle){
+          return;
+        } else {
+          message.handle = true;
+        }
+        if (!h5ChatItem) {
+          console.error("未找到类型为 'h5-chat' 的元素");
+          return;
+        }
+        // 如果有答案就直接用户消息和客服消息
+        let nextMsg = h5ChatItem.agentMsg.shift();
 
-      if (option.answer) {
         h5ChatItem.messages.push({
           id: this.getChatMsgIdMax(),
-          sender: 'agent',
-          text: option.answer,
+          sender: 'user',
+          text: option.text,
           options: []
         })
         await this.delay(1000);
-        h5ChatItem.messages.push(nextMsg);
-      } else {
-        await this.delay(1000);
-        h5ChatItem.messages.push(nextMsg);
-      }
 
-      while((nextMsg = h5ChatItem.agentMsg.shift()) && (!nextMsg.options || nextMsg.options.length === 0)) {
-        await this.delay(1000);
-        h5ChatItem.messages.push(nextMsg);
-      }
+        if (option.answer) {
+          h5ChatItem.messages.push({
+            id: this.getChatMsgIdMax(),
+            sender: 'agent',
+            text: option.answer,
+            options: []
+          })
+          await this.delay(1000);
+          h5ChatItem.messages.push(nextMsg);
+        } else {
+          await this.delay(1000);
+          h5ChatItem.messages.push(nextMsg);
+        }
 
-      if (h5ChatItem.agentMsg.length === 0) {
-        await this.delay(1000);
-        h5ChatItem.messages.push({
-          id: this.getChatMsgIdMax(),
-          sender: 'agent',
-          text: "好的，已经为您分配专业老师。<span style='color:red'>【点击下方按钮】</span>添加老师，获取免费上课链接。!",
-          options: []
-        });
+        while((nextMsg = h5ChatItem.agentMsg.shift()) && (!nextMsg.options || nextMsg.options.length === 0)) {
+          await this.delay(500+(Math.random()*1000)%500);
+          h5ChatItem.messages.push(nextMsg);
+        }
+
+        if (h5ChatItem.agentMsg.length === 0) {
+          await this.delay(1000);
+          h5ChatItem.messages.push({
+            id: this.getChatMsgIdMax(),
+            sender: 'agent',
+            text: "好的，已经为您分配专业老师。<span style='color:red'>【点击下方按钮】</span>添加老师，获取免费上课链接。!",
+            options: []
+          });
+        }
+      }catch (err) {
+        console.error(err);
+      }finally {
+        this.isProcessing = false;
       }
     },
     // 辅助函数：延迟