fix: 修复点击开启新会话的时候，界面显示异常的问题

src/views/AI-new/components/chat-new.vue

@@ -132,7 +132,8 @@ export default {
       this.$emit('update:isSearching', !this.isSearching)
     },
     startNewConversation() {
-      this.$emit('update:messages', [])
+      this.$emit('initBotMessage')
+      // this.$emit('update:messages', [])
       this.$emit('update:conversationId', '')
       this.$emit('update:productName', '')
     },

src/views/AI-new/index.vue

@@ -31,7 +31,7 @@
 
     <chatMessage ref="chatMessage" :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
       :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
-      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="normal_chat"></chatMessage>
+      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="normal_chat" @initBotMessage="initBotMessage"/>
   </div>
 </template>
 
@@ -134,6 +134,9 @@ export default {
     },
     cellClick(item) {
       this.$refs.chatMessage.cellClick(item)
+    },
+    initBotMessage() {
+      this.messages = []
     }
   },
   watch: {

src/views/AI-new/views/productKnowledge/index.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="chat-page">
     <van-nav-bar title="产品知识助手" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
-    <sticky :hotList="hotList" :productName="productName" :messagesList.sync="messages"
+    <sticky
-      :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
+      :hotList="hotList"
-      :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+      :productName="productName"
+      :messagesList.sync="messages"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @setProductName="setProductName"
+      :isDisabled="messageStatus === 'send'"
+      :conversationId="conversationId"
+    ></sticky>
 
     <main class="chat-main">
       <div class="chat-content">
         <div class="message-area" ref="messageArea" @scroll="handleScroll">
-          <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching" :think-ok="isThink"
+          <messageComponent
-            @setProductName="setProductName"></messageComponent>
+            :messagesList="messages"
+            :is-deep="isDeep"
+            :is-search="isSearching"
+            :think-ok="isThink"
+            @setProductName="setProductName"
+          ></messageComponent>
           <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
         </div>
       </div>
@@ -19,9 +30,18 @@
       </div>
     </main>
 
-    <chatMessage :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
+    <chatMessage
-      :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
+      :messages.sync="messages"
-      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="chat"/>
+      :messageStatus.sync="messageStatus"
+      :is-deep.sync="isDeep"
+      :conversation-id.sync="conversationId"
+      :is-searching.sync="isSearching"
+      :product-name.sync="productName"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @getIsThink="getIsThink"
+      action="chat"
+      @initBotMessage="initBotMessage"
+    />
   </div>
 </template>
 
@@ -41,7 +61,7 @@ export default {
     messageComponent,
     HotProducts,
     chatMessage,
-    sticky,
+    sticky
   },
   data() {
     return {
@@ -54,7 +74,7 @@ export default {
       isSearching: false,
       isDeep: false,
       autoScrollEnabled: true,
-      scrollPosition: 0,
+      scrollPosition: 0
     }
   },
   created() {
@@ -65,16 +85,13 @@ export default {
 
     if (!compareId) {
       sessionStorage.removeItem('results')
-      this.messages.push({
+      this.initBotMessage()
-        type: 'bot',
-        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`,
-      })
     } else {
       // 可以调用接口展示 名字 或者存在session里
 
       let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
       console.log(sesstions)
-      let text = sesstions.map((item) => {
+      let text = sesstions.map(item => {
         return item.productName + '<br/>'
       })
       console.log(text)
@@ -82,7 +99,7 @@ export default {
 
       this.messages.push({
         type: 'user',
-        text: other,
+        text: other
       })
     }
     this.getHotProducts()
@@ -122,6 +139,12 @@ export default {
       this.autoScrollEnabled = isAtBottom
       this.scrollPosition = messageArea.scrollTop
     },
+    initBotMessage() {
+      this.messages.splice(0, this.messages.length, {
+        type: 'bot',
+        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`
+      })
+    }
   },
   watch: {
     messages: {
@@ -129,9 +152,9 @@ export default {
         // console.log(this.messages, 'messages');
         this.$nextTick(() => this.scrollToBottom())
       },
-      deep: true,
+      deep: true
-    },
+    }
-  },
+  }
 }
 </script>
 

src/views/AI-new/views/productRecommend/index.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="chat-page">
     <van-nav-bar title="产品推荐助手-保障型" left-text="返回" left-arrow @click-left="$router.history.go(-1)" />
-        <sticky :hotList="hotList" :productName="productName" :messagesList.sync="messages"
+    <sticky
-            :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
+      :hotList="hotList"
-            :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+      :productName="productName"
+      :messagesList.sync="messages"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @setProductName="setProductName"
+      :isDisabled="messageStatus === 'send'"
+      :conversationId="conversationId"
+    ></sticky>
 
     <main class="chat-main">
       <div class="chat-content">
         <div class="message-area" ref="messageArea" @scroll="handleScroll">
-                    <messageComponent :messagesList="messages" :is-deep="isDeep" :is-search="isSearching"
+          <messageComponent
-                        :think-ok="isThink" @setProductName="setProductName"></messageComponent>
+            :messagesList="messages"
+            :is-deep="isDeep"
+            :is-search="isSearching"
+            :think-ok="isThink"
+            @setProductName="setProductName"
+          ></messageComponent>
           <!-- <HotProducts class="mb10" :messagesList.sync="messages" @getHotList="getHotProducts"></HotProducts> -->
         </div>
       </div>
@@ -19,9 +30,18 @@
       </div>
     </main>
 
-        <chatMessage :messages.sync="messages" :messageStatus.sync="messageStatus" :is-deep.sync="isDeep"
+    <chatMessage
-            :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
+      :messages.sync="messages"
-            :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="product_recommend">
+      :messageStatus.sync="messageStatus"
+      :is-deep.sync="isDeep"
+      :conversation-id.sync="conversationId"
+      :is-searching.sync="isSearching"
+      :product-name.sync="productName"
+      :autoScrollEnabled.sync="autoScrollEnabled"
+      @getIsThink="getIsThink"
+      action="product_recommend"
+      @initBotMessage="initBotMessage"
+    >
     </chatMessage>
   </div>
 </template>
@@ -42,7 +62,7 @@ export default {
     messageComponent,
     HotProducts,
     chatMessage,
-        sticky,
+    sticky
   },
   data() {
     return {
@@ -55,7 +75,7 @@ export default {
       isSearching: false,
       isDeep: false,
       autoScrollEnabled: true,
-            scrollPosition: 0,
+      scrollPosition: 0
     }
   },
   created() {
@@ -66,21 +86,12 @@ export default {
 
     if (!compareId) {
       sessionStorage.removeItem('results')
-            this.messages.push({
+      this.initBotMessage()
-                type: 'bot',
-                text: `这里是产品推荐小助手，请告诉我以下客户的信息， 我帮您精准推荐：\n\n1.如果您需要推荐保障类产品，您可以告诉我以下信息：
-                \n\n• 客户需要哪类保障？（重疾/医疗/意外）
-                \n\n• 客户的年龄、性别、有无既往病症
-                \n\n• 客户的保障场景（住院医疗/百万医疗/出行意外/综合意外/交通意外）
-                \n\n2.如果您需要推荐理财储蓄类产品，您可以告诉我以下信息：
-                \n\n• 客户主要目标是什么？（财富升值/子女教育/资产传承/养老保障）
-                \n\n• 客户的年龄、性别、年收入、风险承受能力`,
-            })
     } else {
       // 可以调用接口展示 名字 或者存在session里
       let sesstions = JSON.parse(sessionStorage.getItem('results')).productResults
       console.log(sesstions)
-            let text = sesstions.map((item) => {
+      let text = sesstions.map(item => {
         return item.productName + '<br/>'
       })
       console.log(text)
@@ -88,7 +99,7 @@ export default {
 
       this.messages.push({
         type: 'user',
-                text: other,
+        text: other
       })
     }
     this.getHotProducts()
@@ -128,15 +139,27 @@ export default {
       this.autoScrollEnabled = isAtBottom
       this.scrollPosition = messageArea.scrollTop
     },
+    initBotMessage() {
+      this.messages.splice(0, this.messages.length, {
+        type: 'bot',
+        text: `这里是产品推荐小助手，请告诉我以下客户的信息， 我帮您精准推荐：\n\n1.如果您需要推荐保障类产品，您可以告诉我以下信息：
+                \n\n• 客户需要哪类保障？（重疾/医疗/意外）
+                \n\n• 客户的年龄、性别、有无既往病症
+                \n\n• 客户的保障场景（住院医疗/百万医疗/出行意外/综合意外/交通意外）
+                \n\n2.如果您需要推荐理财储蓄类产品，您可以告诉我以下信息：
+                \n\n• 客户主要目标是什么？（财富升值/子女教育/资产传承/养老保障）
+                \n\n• 客户的年龄、性别、年收入、风险承受能力`
+      })
+    }
   },
   watch: {
     messages: {
       handler() {
         this.$nextTick(() => this.scrollToBottom())
       },
-            deep: true,
+      deep: true
-        },
+    }
-    },
+  }
 }
 </script>