fix

src/components/ChatOptions/index.vue

@@ -4,8 +4,8 @@
       v-for="item in props.list"
       :key="item.name"
       class="item flex items-center justify-center ml-4"
-      :class="{ 'select-item': props.selected === item.name }"
-      @click="props.setSelected && props.setSelected(item.name)"
+      :class="{ 'select-item': props.selected === item.id }"
+      @click="props.setSelected && props.setSelected(item.id)"
     >{{ item.name }}</div>
   </div>
 </template>
@@ -14,14 +14,10 @@
 import { PropType } from "vue";
 const props = defineProps({
   list: {
-    type: Array as PropType<{ name: string }[]>,
-    default() {
-      return [{ name: "常用语" }, { name: "结束服务" },];
-    },
+    type: Array as PropType<{ name: string, id: number }[]>,
   },
   selected: {
-    type: String,
-    default: "常用语",
+    type: Number,
   },
   setSelected: {
     type: Function,

src/components/CommonUseSentence/index.vue

@@ -2,10 +2,10 @@
     <div class="overflow-auto">
         <div
             v-for="item in list"
-            :key="item.id"
+            :key="item"
             class="text-center sentence"
             @click="$emit('useSentence', item)"
-        >{{ item.content }}</div>
+        >{{ item }}</div>
     </div>
 </template>
 <script lang="ts" setup>
@@ -15,19 +15,7 @@ defineEmits(["useSentence"])
 
 defineProps({
     list: {
-        type: Array as PropType<{ content: string, id: string }[]>,
-        default: function () {
-            return [
-                { content: '单次贷款利息多少q', id: 'asdlkfj' },
-                { content: '单次贷款利息多少a', id: 'asdlkfj' },
-                { content: '单次贷款利息多少q', id: 'asdlkfj' },
-                { content: '单次贷款利息多少a', id: 'asdlkfj' },
-                { content: '单次贷款利息多少q', id: 'asdlkfj' },
-                { content: '单次贷款利息多少a', id: 'asdlkfj' },
-                { content: '单次贷款利息多少q', id: 'asdlkfj' },
-                { content: '单次贷款利息多少a', id: 'asdlkfj' },
-            ]
-        }
+        type: Array as PropType<string[]>,
     }
 })
 

src/service/FaqService/index.ts

+import baseAxios from '../index'
+
+export function queryFaqList() {
+  return baseAxios<{
+    question: string[]
+    count: number
+  }>({
+    url: '/faq/query/list',
+    method: 'get',
+  })
+}
+export function queryFaqAnswer(data: { question: string }) {
+  return baseAxios<string>({
+    url: '/faq/query/answer',
+    method: 'get',
+    params: data,
+  })
+}

src/views/Chat/Chat.vue

@@ -10,12 +10,17 @@
     <div class="flex flex-col flex-grow overflow-hidden" style="flex-basis: 0px">
       <ChatContentVue />
       <ServiceRating :setSelectedRate="handleSelect" :selected="selected" v-if="showServiceRating" />
-      <ChatOption :selected="selectedChatOption" :setSelected="handleSelectChatOption" />
+      <ChatOption
+        :selected="selectedChatOption"
+        :setSelected="handleSelectChatOption"
+        :list="optionList"
+      />
       <ChatInputVue />
       <CommonUseSentence
         class="transition-all h-0"
         :class="{ 'h-20': showShortSentences }"
         @useSentence="useSentence"
+        :list="sentenceList"
       />
     </div>
   </div>
@@ -24,10 +29,10 @@
 <script lang="ts">
 /* eslint-disable */
 import NavBar from "@/components/NavBar/index.vue";
-import { defineComponent, onBeforeUnmount, onMounted, reactive, ref, watch , defineAsyncComponent} from "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 { getFromId } from "@/store/appCallerStore";
 import { messageStore } from "@/store/messagesStore";
 import ChatMessageDB from "@/db/ChatMessageDB";
 import { chatCardTimeStamp } from "@/store/chatCardStore";
@@ -35,45 +40,83 @@ import ChatListCardDB from "@/db/ChatListCardDB";
 import { v4 as uuidv4 } from 'uuid'
 import { ChatMessageTypes } from "@/types/chatMessageTypes";
 import { useRoute } from "vue-router";
+import { queryFaqAnswer, queryFaqList } from "@/service/FaqService";
 
 
 export default defineComponent({
   components: {
-    ChatContentVue:  defineAsyncComponent(()=>import(/* webpackChunkName: 'ChatContentVue' */"./ChatContent.vue")),
-    ChatInputVue: defineAsyncComponent(()=>import(/* webpackChunkName: 'ChatInputVue' */"./ChatInput.vue")),
+    ChatContentVue: defineAsyncComponent(() => import(/* webpackChunkName: 'ChatContentVue' */"./ChatContent.vue")),
+    ChatInputVue: defineAsyncComponent(() => import(/* webpackChunkName: 'ChatInputVue' */"./ChatInput.vue")),
     NavBar,
-    ServiceRating: defineAsyncComponent(()=>import(/* webpackChunkName: 'serviceRating' */ "@/components/ServiceRating/index.vue")),
-    ChatOption: defineAsyncComponent(()=>import(/* webpackChunkName: 'ChatOption' */"@/components/ChatOptions/index.vue")),
-    CommonUseSentence: defineAsyncComponent(()=>import(/* webpackChunkName: 'CommonUseSentence' */"@/components/CommonUseSentence/index.vue"))
+    ServiceRating: defineAsyncComponent(() => import(/* webpackChunkName: 'serviceRating' */ "@/components/ServiceRating/index.vue")),
+    ChatOption: defineAsyncComponent(() => import(/* webpackChunkName: 'ChatOption' */"@/components/ChatOptions/index.vue")),
+    CommonUseSentence: defineAsyncComponent(() => import(/* webpackChunkName: 'CommonUseSentence' */"@/components/CommonUseSentence/index.vue"))
   },
 
   setup() {
     const initError = ref(false);
     const showServiceRating = ref(false);
     const selected = ref("");
-    const selectedChatOption = ref("");
+    const selectedChatOption = ref(NaN);
     const showShortSentences = ref(true);
 
     const route = useRoute()
     const target = route.query.targetId as string;
 
+    const sentenceList = ref<any[]>([])
+
+    const optionList = [
+      { name: '常用问题', id: 1 },
+    ];
 
     const setShowSentences = (show: boolean) =>
       (showShortSentences.value = show);
     const handleSelect = (select: string) => (selected.value = select);
-    const handleSelectChatOption = (select: string) => selectedChatOption.value = select;
-
-    const useSentence = (data: { content: string, id: string }) => {
+    const handleSelectChatOption = (select: number) => {
+      selectedChatOption.value = select
+      if (select === 1) {
+        queryFaqList().then(ret => {
+          if (ret.code === 200) {
+            sentenceList.value = ret.data.question;
+          }
+        })
+        setShowSentences(true)
+      }
+    };
 
+    const useSentence = (content: string) => {
+      /* 问 */
       messageStore.displayNewMessage({
-        content: data,
-        from: target,
-        target: getFromId(),
+        content: {
+          content,
+        },
+        from: getFromId() as string,
+        target: target,
         uuid: uuidv4(),
         state: 'success',
         datetime: new Date().getTime(),
         type: ChatMessageTypes.robot,
       })
+
+      queryFaqAnswer({
+        question: content
+      }).then((ret) => {
+
+        if (ret.code === 200) {
+          /* 答 */
+          messageStore.displayNewMessage({
+            content: {
+              content: ret.data,
+            },
+            from: target,
+            target: getFromId(),
+            uuid: uuidv4(),
+            state: 'success',
+            datetime: new Date().getTime(),
+            type: ChatMessageTypes.robot,
+          })
+        }
+      })
     }
 
     onMounted(async () => {
@@ -98,7 +141,9 @@ export default defineComponent({
       showShortSentences,
       selectedChatOption,
       handleSelectChatOption,
-      useSentence
+      useSentence,
+      sentenceList,
+      optionList
     };
   },
 });