优化聊天组件

pages/index/index.vue

@@ -147,49 +147,62 @@ export default {
       this.loadCountdownData();
       this.loadChatMessage();
     },
-    getChatMsgIdMax(){
+    getChatMsgIdMax() {
       let h5ChatItem = this.json.filter(e => e.type === 'h5-chat')[0]
-      let maxId = Math.max(0,...h5ChatItem.messages.map(e=>e.id))
+      let maxId = Math.max(0, ...h5ChatItem.messages.map(e => e.id))
       return maxId + 1
     },
     // 聊天组件选择了选项
-    selectOption(id,option){
+    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: []
       })
-      // 选项存在回复就回复用户
-      if(option.answer) {
-        setTimeout(()=>{
-          h5ChatItem.messages.push({
-            id: this.getChatMsgIdMax(),
-            sender: 'agent',
-            text: option.answer,
-            options: []
-          })
-        },1000)
-      }
-      // 然后发送下一个客服消息
-      let nextMsg = h5ChatItem.agentMsg.shift()
-      if(nextMsg) {
-        setTimeout(()=>{
-          h5ChatItem.messages.push(nextMsg)
-        },1000)
+      await this.delay(1000);
+
+      if (option.answer) {
+        h5ChatItem.messages.push({
+          id: this.getChatMsgIdMax(),
+          sender: 'agent',
+          text: option.answer,
+          options: []
+        })
+        await this.delay(1000);
+        h5ChatItem.messages.push(nextMsg);
       } else {
-        setTimeout(()=>{
-          h5ChatItem.messages.push({
-            id: this.getChatMsgIdMax(),
-            sender: 'agent',
-            text: "好的，已经为您分配专业老师。<span style='color:red'>【点击下方按钮】</span>添加老师，获取免费上课链接。!",
-            options: []
-          })
-        },2000)
+        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 (h5ChatItem.agentMsg.length === 0) {
+        await this.delay(1000);
+        h5ChatItem.messages.push({
+          id: this.getChatMsgIdMax(),
+          sender: 'agent',
+          text: "好的，已经为您分配专业老师。<span style='color:red'>【点击下方按钮】</span>添加老师，获取免费上课链接。!",
+          options: []
+        });
+      }
+    },
+    // 辅助函数：延迟
+    delay(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    },
     // 加载计时器数据
     loadCountdownData() {
       let countdownItems = this.json.filter(e => e.type === 'h5-countdown')