更改历史记录位置

src/assets/style/common.css

@@ -86,28 +86,30 @@
 }
 
 .van-overlay {
-    background-color: rgba(0, 0, 0, .35)!important;
+    background-color: rgba(0, 0, 0, 0.35) !important;
 }
 
 .van-toast.van-toast--loading {
-    width: 60px!important;
-    height: 60px!important;
-    min-height: 60px!important;
+    width: 60rem !important;
+    height: 60rem !important;
+    min-height: 60rem !important;
 }
 
 .van-dialog {
-    width: 75%!important;
+    width: 75% !important;
 }
 
 #__vconsole .vc-switch {
     z-index: 100000000000 !important;
 }
 
-body .van-toast--html, body .van-toast--text {
-    max-width: 200px;
+body .van-toast--html,
+body .van-toast--text {
+    max-width: 200rem;
 }
 
-#__vconsole .vc-mask, #__vconsole .vc-panel {
+#__vconsole .vc-mask,
+#__vconsole .vc-panel {
     z-index: 1000000 !important;
 }
 
@@ -137,7 +139,7 @@ body .van-popup--bottom {
     -webkit-transform: scale(.5);
     -webkit-transform-origin: 0 0;
     background-color: #ddd;
-    height: 1px;
+    height: 1rem;
     z-index: 2;
 } */
 
@@ -151,7 +153,7 @@ body .van-image-preview__image img{
     width: 70%;
 } */
 
-/*1px线*/
+/*1rem线*/
 
 ._line-fine:not(:first-child)::before {
     content: "";
@@ -159,12 +161,12 @@ body .van-image-preview__image img{
     width: 200%;
     left: 0;
     top: 0;
-    transform: scale(.5);
+    transform: scale(0.5);
     transform-origin: 0 0;
-    -webkit-transform: scale(.5);
+    -webkit-transform: scale(0.5);
     -webkit-transform-origin: 0 0;
     background-color: #b7b7b7;
-    height: 1px;
+    height: 1rem;
     z-index: 2;
 }
 
@@ -182,8 +184,8 @@ body .van-image-preview__image img{
     -webkit-transform-origin: 0 0;
     transform: scale(0.5);
     transform-origin: 0 0;
-    border: 1px solid #8EC2FF;
-    border-radius: 82px;
+    border: 1rem solid #8ec2ff;
+    border-radius: 82rem;
 }
 
 .before-top::before {
@@ -192,8 +194,8 @@ body .van-image-preview__image img{
     left: 0;
     top: 0;
     width: 100%;
-    height: 1px;
-    border-top: 1px solid #ddd;
+    height: 1rem;
+    border-top: 1rem solid #ddd;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: scaleY(0.5);
@@ -204,10 +206,10 @@ body .van-image-preview__image img{
     content: " ";
     position: absolute;
     left: 0;
-    bottom: -1px;
+    bottom: -1rem;
     width: 100%;
-    height: 1px;
-    border-bottom: 1px solid #e5e5e5;
+    height: 1rem;
+    border-bottom: 1rem solid #e5e5e5;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: scaleY(0.5);
@@ -215,25 +217,26 @@ body .van-image-preview__image img{
 }
 
 .this-news-box {
-    padding-bottom: 18px;
+    padding-bottom: 18rem;
 }
 
 .this-news-tips {
     font-family: PingFangSC-Regular;
-    font-size: 11px;
-    line-height: 16px;
+    font-size: 11rem;
+    line-height: 16rem;
     color: #666666;
     text-align: center;
     position: relative;
 }
 
-.this-news-tips:after, .this-news-tips:before {
+.this-news-tips:after,
+.this-news-tips:before {
     content: "";
     position: absolute;
     top: 50%;
-    height: 1px;
-    width: 85px;
-    border-top: 1px solid #ddd;
+    height: 1rem;
+    width: 85rem;
+    border-top: 1rem solid #ddd;
     -webkit-transform-origin: 0 0;
     transform-origin: 0 0;
     -webkit-transform: scaleY(0.5);
@@ -241,39 +244,40 @@ body .van-image-preview__image img{
 }
 
 .this-news-tips:after {
-    left: 34px;
+    left: 34rem;
 }
 
 .this-news-tips:before {
-    right: 34px;
+    right: 34rem;
 }
 
 .elder-content .this-news-tips {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 150px;
-    height: 27px;
-    background: rgba(85, 92, 128, 0.10);
-    border-radius: 13px;
+    width: 150rem;
+    height: 27rem;
+    background: rgba(85, 92, 128, 0.1);
+    border-radius: 13rem;
     font-family: PingFangSC-Regular;
-    font-size: 18px;
-    color: #7E849F;
+    font-size: 18rem;
+    color: #7e849f;
     text-align: center;
-    line-height: 18px;
-    margin-left: 98px;
+    line-height: 18rem;
+    margin-left: 98rem;
 }
 
-.elder-content .this-news-tips:after, .this-news-tips:before {
-    width: 96px;
+.elder-content .this-news-tips:after,
+.this-news-tips:before {
+    width: 96rem;
 }
 
 .elder-content .this-news-tips:after {
-    left: 150px;
+    left: 150rem;
 }
 
 .elder-content .this-news-tips:before {
-    right: 150px;
+    right: 150rem;
 }
 
 .opacity {
@@ -301,188 +305,182 @@ body .van-image-preview__image img{
 
 .an-move-left {
     margin-left: 0;
-    animation: moveLeft .5s ease;
-    -webkit-animation: moveLeft .5s ease;
+    animation: moveLeft 0.5s ease;
+    -webkit-animation: moveLeft 0.5s ease;
 }
 
 .an-move-right {
     margin-left: 0;
-    animation: moveRight .5s ease;
-    -webkit-animation: moveRight .5s ease;
+    animation: moveRight 0.5s ease;
+    -webkit-animation: moveRight 0.5s ease;
 }
 
 .an-move-up {
     margin-top: 0;
-    animation: moveUp .5s ease;
-    -webkit-animation: moveUp .5s ease;
+    animation: moveUp 0.5s ease;
+    -webkit-animation: moveUp 0.5s ease;
 }
 
 @keyframes moveRight {
     0% {
-        margin-left: -20px;
-        opacity: 0
+        margin-left: -20rem;
+        opacity: 0;
     }
-    ;
     100% {
         margin-left: 0;
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @-webkit-keyframes moveRight {
     0% {
-        margin-left: -20px;
-        opacity: 0
+        margin-left: -20rem;
+        opacity: 0;
     }
-    ;
     100% {
-        margin-left: 0px;
-        opacity: 1
+        margin-left: 0rem;
+        opacity: 1;
     }
 }
 
 @keyframes moveLeft {
     0% {
-        margin-left: 20px;
-        opacity: 0
+        margin-left: 20rem;
+        opacity: 0;
     }
-    ;
     100% {
-        margin-left: 0px;
-        opacity: 1
+        margin-left: 0rem;
+        opacity: 1;
     }
 }
 
 @-webkit-keyframes moveLeft {
     0% {
-        margin-left: 20px;
-        opacity: 0
+        margin-left: 20rem;
+        opacity: 0;
     }
-    ;
     100% {
-        margin-left: 0px;
-        opacity: 1
+        margin-left: 0rem;
+        opacity: 1;
     }
 }
 
 @keyframes moveUp {
     0% {
-        margin-top: 30px;
-        opacity: 0
+        margin-top: 30rem;
+        opacity: 0;
     }
-    ;
     100% {
-        margin-top: 0px;
-        opacity: 1
+        margin-top: 0rem;
+        opacity: 1;
     }
 }
 
 @-webkit-keyframes moveUp {
     0% {
-        margin-top: 30px;
-        opacity: 0
+        margin-top: 30rem;
+        opacity: 0;
     }
-    ;
     100% {
-        margin-top: 0px;
-        opacity: 1
+        margin-top: 0rem;
+        opacity: 1;
     }
 }
 
 @-webkit-keyframes msgLeft {
     0% {
-        -webkit-transform: translateX(-20px);
-        transform: translateX(-20px);
-        opacity: 0
+        -webkit-transform: translateX(-20rem);
+        transform: translateX(-20rem);
+        opacity: 0;
     }
     50% {
-        -webkit-transform: translateX(-20px);
-        transform: translateX(-20px);
-        opacity: 0
+        -webkit-transform: translateX(-20rem);
+        transform: translateX(-20rem);
+        opacity: 0;
     }
     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @keyframes msgLeft {
     0% {
-        -webkit-transform: translateX(-20px);
-        transform: translateX(-20px);
-        opacity: 0
+        -webkit-transform: translateX(-20rem);
+        transform: translateX(-20rem);
+        opacity: 0;
     }
     50% {
-        -webkit-transform: translateX(-20px);
-        transform: translateX(-20px);
-        opacity: 0
+        -webkit-transform: translateX(-20rem);
+        transform: translateX(-20rem);
+        opacity: 0;
     }
     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @-webkit-keyframes msgRight {
     0% {
-        -webkit-transform: translateX(20px);
-        transform: translateX(20px);
-        opacity: 0
+        -webkit-transform: translateX(20rem);
+        transform: translateX(20rem);
+        opacity: 0;
     }
     20% {
-        -webkit-transform: translateX(20px);
-        transform: translateX(20px);
-        opacity: 0
+        -webkit-transform: translateX(20rem);
+        transform: translateX(20rem);
+        opacity: 0;
     }
     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @keyframes msgRight {
     0% {
-        -webkit-transform: translateX(20px);
-        transform: translateX(20px);
-        opacity: 0
+        -webkit-transform: translateX(20rem);
+        transform: translateX(20rem);
+        opacity: 0;
     }
     20% {
-        -webkit-transform: translateX(20px);
-        transform: translateX(20px);
-        opacity: 0
+        -webkit-transform: translateX(20rem);
+        transform: translateX(20rem);
+        opacity: 0;
     }
     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @-webkit-keyframes slideInRight {
     0% {
-        -webkit-transform: translateX(100px);
-        transform: translateX(100px);
-        opacity: 0
+        -webkit-transform: translateX(100rem);
+        transform: translateX(100rem);
+        opacity: 0;
     }
     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
-        opacity: 1
+        opacity: 1;
     }
 }
 
 @keyframes slideInRight {
     0% {
-        -webkit-transform: translateX(100px);
-        transform: translateX(100px);
-        opacity: 0
+        -webkit-transform: translateX(100rem);
+        transform: translateX(100rem);
+        opacity: 0;
     }
     to {
         -webkit-transform: translateX(0);
         transform: translateX(0);
-        opacity: 1
+        opacity: 1;
     }
-}
+}

src/components/abstract.vue

@@ -78,6 +78,7 @@ const getOrderCount = () => {
 
     Post('policy/queryCount', {
       dentityCardno: identityCardno,
+      userId: store.userId
     })
   } catch (error) {
     console.log(error)

src/components/chat-new.vue

@@ -18,7 +18,20 @@ import { SJHLCmdList } from '@/utils/constant'
 defineOptions({
   name: 'chat-new',
 })
-
+const { isWX, tokenExist, lostChatInfoNum } = defineProps({
+  isWX: {
+    type: Boolean,
+    default: false,
+  },
+  tokenExist: {
+    type: Boolean,
+    default: false,
+  },
+  lostChatInfoNum: {
+    type: Number,
+    default: 0,
+  },
+})
 const store = inject('appStore', null)
 const chatArr = inject('chatArr', ref([]))
 const isChatLoading = inject('isChatLoading', ref(false))
@@ -28,9 +41,9 @@ const isLostMessage = inject('isLostMessage', ref(null))
 const mainContainerRef = ref(null)
 
 // 参考 liics/chat-main 的 tokenExist：token 获取成功后才渲染聊天主内容
-const tokenExist = computed(() => Boolean(store?.token))
 
 const historylist = ref([])
+const historyLoading = ref(false)
 const pageNum = ref(1)
 const pageSize = ref(10)
 const nolist = ref(false)
@@ -208,9 +221,11 @@ const getChatHistory = async () => {
     sessionId: sessionId.value || store?.sessionId,
     userId: userId.value || store?.userId,
   }
+  historyLoading.value = true
 
   Post('history/chatInfo', params)
     .then((response) => {
+      historyLoading.value = false
       if (response.code && response.code != 0) {
         showToast(response.msg)
         return
@@ -248,8 +263,8 @@ const getChatHistory = async () => {
         const normalizedList = store.normalizeHistoryMessages
           ? store.normalizeHistoryMessages(dataList)
           : dataList
-        store.chatArr = normalizedList.concat(store.chatArr)
-        _.map(store.chatArr, (item) => {
+        historylist.value = normalizedList.concat(historylist.value)
+        _.map(historylist.value, (item) => {
           // 历史记录不展示数据互联
           if (SJHLCmdList.includes(item.cmd) && !_.isEmpty(item.VIEW_ID)) {
             item.msgText = ''
@@ -286,6 +301,7 @@ const getChatHistory = async () => {
       }
     })
     .catch(() => {
+      historyLoading.value = false
       pageNum.value--
       nolist.value = true
     })
@@ -309,44 +325,28 @@ watch(
 <template>
   <div class="chat-new">
     <div class="main-container" ref="mainContainerRef">
+      <div class="history-loading" v-if="historyLoading">
+        <van-loading type="spinner" size="18px" />
+      </div>
+      <div class="historicRecords" v-if="historylist.length > 0">
+        <chatContent :historylist="historylist" :isWX="isWX" :tokenExist="tokenExist"
+          :lostChatInfoNum="lostChatInfoNum" />
+      </div>
+      <div class="this-news-box opacity" v-if="historylist.length > 0">
+        <div class="this-news-tips">以下是本次消息</div>
+      </div>
       <welcomes />
       <abstract />
       <hotQuestionNew />
-      <!-- <div class="message-con" v-if="chatArr.length || showTyping">
-        <div v-for="(item, index) in chatArr" :key="index"
-          :class="['msg-item', item.type === 'user' ? 'from-user' : 'from-bot']">
-          <div class="bubble" :class="{ 'image-bubble': isImageMessage(item) }">
-            <template v-if="isImageMessage(item)">
-              <DynamicImage
-                class="message-image"
-                :image-key="getItemImage(item)"
-                alt="聊天图片"
-                :clickable="true"
-                image-style="display: block; width: 100%; height: 100%; object-fit: cover;"
-                @click="previewImage(item)"
-              />
-              <div v-if="isImageUploading(item)" class="upload-loading-icon">
-                <van-loading type="spinner" color="#ffffff" size="16px" />
-              </div>
-              <div v-else-if="isImageFailed(item)" class="upload-loading-icon upload-failed-icon">
-                <van-icon name="warning-o" size="22px" />
-              </div>
-            </template>
-<span v-else class="message-text" v-html="getItemHtml(item)"></span>
-</div>
-</div>
-<div class="msg-item from-bot" v-if="showTyping">
-  <div class="bubble typing"><span></span><span></span><span></span></div>
-</div>
-</div> -->
-      <chatContent :historylist="chatArr" />
     </div>
     <div class="chat-footer">
       <footer-bar v-if="tokenExist" :tokenExist="tokenExist" />
     </div>
   </div>
 </template>
-
+<style>
+@import '@/assets/style/common.css';
+</style>
 <style lang="scss" scoped>
 .chat-new {
   width: 100vw;
@@ -372,6 +372,11 @@ watch(
     flex: 1;
     overflow: auto;
 
+    .history-loading {
+      display: flex;
+      justify-content: center;
+    }
+
     .message-con {
       display: flex;
       flex-direction: column;

src/components/welcomes.vue

@@ -1,15 +1,19 @@
 <script setup>
-import { ref,onMounted,inject } from 'vue';
+import { ref, onMounted, inject } from 'vue';
 import { Post } from '@/utils/https'
 const store = inject('appStore')
 
-const welcomeWord = ref('下午好，张先生')
+const welcomeWord = ref('')
 const welcomeSubWord = ref('我是您的服务管家皮卡丘')
 onMounted(() => {
   Post('welcome/speech', {
     source: store.source,
     userInfoId: store.userId
-  }).then(res =>{})
+  }).then(res => {
+    if (res.code === 0 && res.data) {
+      welcomeWord.value = `${res.data?.greetings || ''}${res.data?.greetings ? '，' : ''}${res.data?.welcomeName || ''}`
+    }
+  })
 })
 </script>
 <template>

src/views/chat.vue

@@ -6,7 +6,7 @@
       :isWX="isWX"
       :lostChatInfoNum="lostChatInfoNum"
     /> -->
-    <chat-new v-if="isToken" />
+    <chat-new v-if="isToken" :tokenExist="isToken" :isWX="isWX" :lostChatInfoNum="lostChatInfoNum" />
     <!-- <human-appraise-popup /> -->
   </div>
 </template>