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

2025-12-18 07:16:50 +08:00 · 2025-07-29 20:20:05 +08:00
parent 05144d9afb
commit 9353af4973
4 changed files with 220 additions and 170 deletions
--- a/src/views/AI-new/components/chat-new.vue
+++ b/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', '')
    },
--- a/src/views/AI-new/index.vue
+++ b/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: {
--- a/src/views/AI-new/views/productKnowledge/index.vue
+++ b/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"
-      :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
-      :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+    <sticky
+      :hotList="hotList"
+      :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"
-            @setProductName="setProductName"></messageComponent>
+          <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"
-      :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
-      :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="chat"/>
+    <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="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({
-        type: 'bot',
-        text: `这里是产品知识小助手，请告诉我您想要了解哪个产品？也可以输入以下信息，我帮您进行精准查询：\n\n1.投保规则\n\n2.保障责任\n\n3.增值服务\n\n您可以直接向我提问~`,
-      })
+      this.initBotMessage()
    } 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>

--- a/src/views/AI-new/views/productRecommend/index.vue
+++ b/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"
-            :autoScrollEnabled.sync="autoScrollEnabled" @setProductName="setProductName"
-            :isDisabled="messageStatus === 'send'" :conversationId="conversationId"></sticky>
+    <sticky
+      :hotList="hotList"
+      :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" @setProductName="setProductName"></messageComponent>
+          <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"
-            :conversation-id.sync="conversationId" :is-searching.sync="isSearching" :product-name.sync="productName"
-            :autoScrollEnabled.sync="autoScrollEnabled" @getIsThink="getIsThink" action="product_recommend">
+    <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="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({
-                type: 'bot',
-                text: `这里是产品推荐小助手，请告诉我以下客户的信息， 我帮您精准推荐：\n\n1.如果您需要推荐保障类产品，您可以告诉我以下信息：
-                \n\n• 客户需要哪类保障？（重疾/医疗/意外）
-                \n\n• 客户的年龄、性别、有无既往病症
-                \n\n• 客户的保障场景（住院医疗/百万医疗/出行意外/综合意外/交通意外）
-                \n\n2.如果您需要推荐理财储蓄类产品，您可以告诉我以下信息：
-                \n\n• 客户主要目标是什么？（财富升值/子女教育/资产传承/养老保障）
-                \n\n• 客户的年龄、性别、年收入、风险承受能力`,
-            })
+      this.initBotMessage()
    } 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>