完成游戏折扣的搜索

package.json

@@ -33,6 +33,7 @@
     "echarts": "^5.5.1",
     "gsap": "^3.12.5",
     "localforage": "^1.10.0",
+    "lodash": "^4.17.21",
     "lunar-typescript": "^1.7.5",
     "oh-vue-icons": "^1.0.0-rc3",
     "pinia": "^2.1.7",

src/layout/header/search/useSearchStore.ts

@@ -2,8 +2,15 @@ import { defineStore } from 'pinia'
 import { ref, watch } from 'vue'
 import useSearchConfigStore from './useSearchConfigStore'
 import jump from '@/utils/jump'
+import debounce from 'lodash/debounce'
 import { aIUrl, translateUrl } from '@/config'
-
+import request from '@/utils/request'
+export type SearchAdType = {
+  name: string
+  icon: string
+  url: string
+  id: string
+}
 export default defineStore('search', () => {
   const searchRef = ref<HTMLInputElement | null>(null)
   const focus = ref(false)
@@ -26,6 +33,7 @@ export default defineStore('search', () => {
   const searchStr = ref('')
   const current = ref(-1)
   const sugList = ref<string[]>([])
+  const addList = ref<SearchAdType[]>([])
   watch(
     searchStr,
     (val) => {
@@ -45,6 +53,15 @@ export default defineStore('search', () => {
       immediate: true
     }
   )
+  const debouncedHandler = debounce((newValue) => {
+    console.log('数值改变并已防抖处理:', newValue)
+    request<SearchAdType[]>("GET", `/api/app/searchBars`).then((res) => {
+      addList.value = res
+    })
+  }, 500) // 
+  watch(searchStr, (newValue) => {
+    debouncedHandler(newValue)
+  })
   const searchConfig = useSearchConfigStore()
   const handle = (e: KeyboardEvent) => {
     const n = sugList.value.length

src/widgets/discount/Modal.tsx

@@ -1,10 +1,12 @@
-import { defineComponent, ref, watch, type VNodeRef } from 'vue'
+import { defineComponent, onMounted, ref, watch, type VNodeRef } from 'vue'
 import useGameNews from './useDiscountStore'
 import { RiTimeLine } from 'oh-vue-icons/icons'
 import { addIcons, OhVueIcon } from 'oh-vue-icons'
 import { IoCloseCircleOutline, RiCloseCircleLine } from 'oh-vue-icons/icons'
 import dayjs from 'dayjs'
 import useDiscountStore from './useDiscountStore'
+import { debounce } from 'lodash'
+import { request } from 'http'
 addIcons(RiTimeLine, IoCloseCircleOutline, RiCloseCircleLine)
 export default defineComponent(() => {
   const store = useDiscountStore()
@@ -12,11 +14,29 @@ export default defineComponent(() => {
   const searchText = ref('')
   const handleScroll = () => {
     const container = containerRef.value
+    if (store.loading) return
+    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 15) {
+      store.state.pageIndex += 1;
 
-    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
       store.getNews()
     }
   }
+  const debouncedHandler = debounce((newValue) => {
+    console.log('数值改变并已防抖处理:', newValue)
+    searchText.value = newValue
+    store.state.find = newValue
+    store.searchList = []
+    store.state.pageIndex = 1
+    store.noMoreData = false
+    store.getNews()
+  }, 500) // 
+  watch(searchText, (newValue) => {
+    debouncedHandler(newValue)
+  })
+  onMounted(() => {
+    store.state.pageIndex = 1
+    store.getNews()
+  })
   return () => (
     <div
       class="w-full h-full  flex flex-col p-5 bg-[#17212d]"
@@ -53,7 +73,9 @@ export default defineComponent(() => {
           ref={containerRef}
         >
           <div class={'grid grid-cols-3 gap-4 '}>
-            {store.list.map((item, index) => {
+            {
+              (store.state.find ? store.searchList :
+                store.list).map((item, index) => {
                   return (
                     <div
                       class={
@@ -100,7 +122,7 @@ export default defineComponent(() => {
                 })}
           </div>
           {store.loading && (
-            <div class={'w-full font-bold flex justify-center text-white py-2'}>加载中...</div>
+            <div class={'w-full font-bold flex absolute bottom-2 bg-[#17212d] justify-center text-white py-2'}>加载中...</div>
           )}
           {store.noMoreData && (
             <div class={'w-full font-bold flex justify-center text-white py-2'}>无更多数据</div>

src/widgets/discount/useDiscountStore.ts

@@ -20,17 +20,18 @@ export interface GameDiscount {
 }
 export default defineStore("gameDiscount", () => {
     const list = ref<GameDiscount[]>([])
+    const searchList = ref<GameDiscount[]>([])
     const loading = ref(false)
     const noMoreData = ref(false)
     const state = reactive({
-        pageSize: 1,
+        pageSize: 10,
         pageIndex: 1,
         find: ''
     })
     const getList = async () => {
         const res = await request<
             GameDiscount[]
-        >('GET', `/api/gameDiscount?pageSize=${state.pageSize}&pageIndex=${state.pageIndex}&find=${state.find}&type=all`)
+        >('GET', `/api/gameDiscount?pagesize=${state.pageSize}&pageindex=${state.pageIndex}&find=${state.find}&type=all`)
         return res
     }
     const getNews = async () => {
@@ -41,9 +42,13 @@ export default defineStore("gameDiscount", () => {
             const data = await getList()
             if (data.length === 0) {
                 noMoreData.value = true;
+            } else {
+                if (state.find !== '') {
+                    searchList.value.push(...data);
                 } else {
                     list.value.push(...data);
-                state.pageIndex += 1;
+                }
+
             }
         } catch (e) {
             console.log(e);
@@ -58,6 +63,7 @@ export default defineStore("gameDiscount", () => {
         list,
         loading,
         noMoreData,
+        searchList,
         getNews,
         state,
     }