添加聊天组件

pages/index/index.vue

@@ -34,6 +34,7 @@
                       :style="{color: item.style.btnTextColor,backgroundColor: item.style.buttonColor}"
                       class="option-button"
                       :class="{ 'selected': isOptionSelected(message.id, option) }"
+                      @click="selectOption(message.id, option)"
                   >
                     {{ option.text }}
                   </button>
@@ -146,6 +147,49 @@ export default {
       this.loadCountdownData();
       this.loadChatMessage();
     },
+    getChatMsgIdMax(){
+      let h5ChatItem = this.json.filter(e => e.type === 'h5-chat')[0]
+      let maxId = Math.max(0,...h5ChatItem.messages.map(e=>e.id))
+      return maxId + 1
+    },
+    // 聊天组件选择了选项
+    selectOption(id,option){
+      let h5ChatItem = this.json.filter(e => e.type === 'h5-chat')[0]
+      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)
+      } else {
+        setTimeout(()=>{
+          h5ChatItem.messages.push({
+            id: this.getChatMsgIdMax(),
+            sender: 'agent',
+            text: "好的，已经为您分配专业老师。<span style='color:red'>【点击下方按钮】</span>添加老师，获取免费上课链接。!",
+            options: []
+          })
+        },2000)
+      }
+    },
+
     // 加载计时器数据
     loadCountdownData() {
       let countdownItems = this.json.filter(e => e.type === 'h5-countdown')
@@ -376,6 +420,7 @@ export default {
   flex-direction: column;
   background-color: #f8f8f8;
   font-family: Arial, sans-serif;
+  max-height: 500px;
 }
 
 .chat-messages {
@@ -459,7 +504,7 @@ export default {
 }
 
 .option-button:hover {
-  background-color: #3a80d2;
+  background-color: #045dba;
 }
 
 .option-button.selected {