add:历史记录以及搜索发现接口对接

src/api/carousal.ts

@@ -1,5 +1,5 @@
 import type { PageResult } from '@/model/base'
-import type { Article, ArticleParams, Category, CreateCarousalsRequest } from '@/model/pet-manual'
+import type { Article, ArticleParams, Category, CreateCarousalsRequest, Recommends } from '@/model/pet-manual'
 import httpClient from '@/api/httpClient'
 
 function getCarousalList() {
@@ -15,10 +15,12 @@ function getSearchRecords() {
   return httpClient.get<string[]>('/articles/search-records')
 }
 function getSearchRecommends() {
-  return httpClient.get<string[]>('/articles/active-search-recommends')
+  return httpClient.get<Recommends[]>('/articles/active-search-recommends')
 }
 export default {
   getCarousalList,
   getTypeList,
   getArticleList,
+  getSearchRecords,
+  getSearchRecommends,
 }

src/model/pet-manual.ts

@@ -27,3 +27,8 @@ export interface Article {
   updatedTime?: string
   imageUrl?: string
 }
+
+export interface Recommends {
+  id: string
+  keyword: string
+}

src/pages/pet-manual/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Paging } from '@/model/base'
-import type { Article, ArticleParams, Category, CreateCarousalsRequest } from '@/model/pet-manual'
+import type { Article, ArticleParams, Category, CreateCarousalsRequest, Recommends } from '@/model/pet-manual'
 import carousalApi from '@/api/carousal'
 import CardList from '@/pages/pet-manual/components/CardList.vue'
 import circle from '@/static/image/feed-plan/circle.png'
@@ -62,21 +62,35 @@ async function handleClickType(item: Category) {
   await updateArticleList()
 }
 const isSearch = ref<boolean>(true)
+const isSearchSource = ref<boolean>(false)
 function handleSearchFocus() {
   isSearch.value = false
+  isSearchSource.value = false
+  updateSearchList()
 }
-function handleCancel() {
+async function handleSearchBlur() {
+  if (searchValue.value !== '') {
+    isSearchSource.value = true
+    reset()
+    articleParams.value.title = searchValue.value
+    await updateArticleList()
+  }
+}
+function handleSearchKeyword(keyword: string): void {
+  searchValue.value = keyword
+  handleSearchBlur()
+}
+async function handleCancel() {
   isSearch.value = true
+  reset()
+  articleParams.value.categoryId = typeList.value.filter(item => item.isClick === true)[0].id
+  await updateArticleList()
 }
-const historyList = ref<{ name: string }[]>([
-  { name: '猫' },
-  { name: '狗' },
-  { name: '烘培粮' },
-])
-const findList = ref<{ name: string }[]>([
-  { name: '宠物吃饭慢' },
-  { name: '猫咪尿闭怎么办' },
-])
+function handleSearchClear() {
+  isSearchSource.value = false
+}
+const historyList = ref<string[]>([])
+const findList = ref<Recommends[]>([])
 async function updateArticleList() {
   const articleListApi = await carousalApi.getArticleList(articleParams.value)
   if (cardState.value === 'update') {
@@ -96,6 +110,10 @@ async function handleLoadArticle() {
   cardState.value = 'updatePage'
   await updateArticleList()
 }
+async function updateSearchList() {
+  historyList.value = await carousalApi.getSearchRecords()
+  findList.value = await carousalApi.getSearchRecommends()
+}
 async function init() {
   info.value = await carousalApi.getCarousalList()
   typeList.value = (await carousalApi.getTypeList()).map((item, index) => {
@@ -108,8 +126,17 @@ async function init() {
   })
   articleParams.value.categoryId = typeList.value[0].id
   await updateArticleList()
+  await updateSearchList()
+}
+function reset() {
+  articleParams.value = {
+    page: 1,
+    size: 10,
+    title: '',
+    categoryId: '',
+  }
+  listModel.value = []
 }
-
 function handleJumpUrl(item: CreateCarousalsRequest) {
   if (item.targetType === 'url') {
     uni.navigateTo({
@@ -133,16 +160,18 @@ init()
         :radius="20"
         @focus="handleSearchFocus"
         @cancel="handleCancel"
+        @blur="handleSearchBlur"
+        @clear="handleSearchClear"
       />
     </view>
-    <view v-show="!isSearch" class="mx-4 mt-4">
-      <view>
+    <view v-show="!isSearch" class=" mt-4">
+      <view v-show="!isSearchSource" class="mx-4">
         <text class="text-[18px] font-600">
           历史记录
         </text>
         <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
-          <view v-for="(item, index) in historyList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm">
-            {{ item.name }}
+          <view v-for="(item, index) in historyList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm" @click="handleSearchKeyword(item)">
+            {{ item }}
           </view>
         </view>
         <view class="mt-8">
@@ -150,17 +179,18 @@ init()
             搜索发现
           </text>
           <view class="mt-4 flex gap-2 flex-wrap text-[12px] text-[#999] font-400 leading-5">
-            <view v-for="(item, index) in findList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm gap-1">
+            <view v-for="(item, index) in findList" :key="index" class="px-2 py-0.5 flex justify-center items-center bg-[white] rounded-sm gap-1" @click="handleSearchKeyword(item.keyword)">
               <view class="flex items-center justify-center">
                 <uni-icons color="#999999" size="14" type="search" />
               </view>
               <view class="flex items-center justify-center">
-                {{ item.name }}
+                {{ item.keyword }}
               </view>
             </view>
           </view>
         </view>
       </view>
+      <CardList v-show="isSearchSource" :card-list="listModel" @load-more="handleLoadArticle" />
     </view>
     <view v-show="isSearch">
       <view class="ml-4 mt-4 text-[20px] font-600">