faq list

package.json

@@ -18,6 +18,7 @@
     "dayjs": "^1.10.7",
     "dexie": "^3.0.3",
     "enc-utils": "^3.0.0",
+    "js-base64": "^3.7.2",
     "prepend-http": "^4.0.0",
     "quasar": "^2.0.4",
     "secp256k1": "^4.0.2",

src/components/CommonUseSentence/index.vue

 <template>
     <div class="overflow-auto">
-        <div
-            v-for="item in list"
-            :key="item"
-            class="text-center sentence"
-            @click="$emit('useSentence', item)"
-        >{{ item }}</div>
+        <Skeleton :loading="loading" :row="5" row-width="[100%]">
+            <div
+                v-for="item in list"
+                :key="item"
+                class="text-center sentence"
+                @click="$emit('useSentence', item)"
+            >{{ item }}</div>
+        </Skeleton>
     </div>
 </template>
 <script lang="ts" setup>
 import { PropType, defineEmits } from "@vue/runtime-core";
+import { Skeleton } from "vant"
 
 defineEmits(["useSentence"])
 
 defineProps({
     list: {
         type: Array as PropType<string[]>,
-    }
+    },
+    loading: Boolean
 })
 
 </script>

src/service/FaqService/index.ts

 import baseAxios from '../index'
+import {toBase64} from "js-base64"
 
 export function queryFaqList() {
   return baseAxios<{
@@ -10,9 +11,12 @@ export function queryFaqList() {
   })
 }
 export function queryFaqAnswer(data: { question: string }) {
+  const base64 = toBase64(data.question)
   return baseAxios<string>({
     url: '/faq/query/answer',
     method: 'get',
-    params: data,
+    params: {
+      question: base64
+    },
   })
 }

src/views/Chat/Chat.vue

@@ -18,7 +18,8 @@
       <ChatInputVue />
       <CommonUseSentence
         class="transition-all h-0"
-        :class="{ 'h-20': showShortSentences }"
+        :class="{ 'h-40': showShortSentences }"
+        :loading="sentensesLoading"
         @useSentence="useSentence"
         :list="sentenceList"
       />
@@ -31,7 +32,6 @@
 import NavBar from "@/components/NavBar/index.vue";
 import { defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch, defineAsyncComponent } from "vue";
 import { connectionState } from "@/store/connectionStore";
-import { privateKey, publicKey } from "@/store/appCallerStore";
 import { getFromId } from "@/store/appCallerStore";
 import { messageStore } from "@/store/messagesStore";
 import ChatMessageDB from "@/db/ChatMessageDB";
@@ -58,12 +58,13 @@ export default defineComponent({
     const showServiceRating = ref(false);
     const selected = ref("");
     const selectedChatOption = ref(NaN);
-    const showShortSentences = ref(true);
+    const showShortSentences = ref(false);
 
     const route = useRoute()
     const target = route.query.targetId as string;
 
     const sentenceList = ref<any[]>([])
+    const sentensesLoading = ref(false)
 
     const optionList = [
       { name: '常用问题', id: 1 },
@@ -74,15 +75,23 @@ export default defineComponent({
     const handleSelect = (select: string) => (selected.value = select);
     const handleSelectChatOption = (select: number) => {
       selectedChatOption.value = select
-      if (select === 1) {
+    };
+
+    watch(selectedChatOption, () => {
+      if (selectedChatOption.value === 1) {
+        setShowSentences(true)
+        sentensesLoading.value = true;
         queryFaqList().then(ret => {
           if (ret.code === 200) {
             sentenceList.value = ret.data.question;
           }
+          sentensesLoading.value = false;
         })
         setShowSentences(true)
+      } else {
+        setShowSentences(false)
       }
-    };
+    })
 
     const useSentence = (content: string) => {
       /* 问 */
@@ -143,7 +152,8 @@ export default defineComponent({
       handleSelectChatOption,
       useSentence,
       sentenceList,
-      optionList
+      optionList,
+      sentensesLoading
     };
   },
 });