完成游戏折扣的搜索

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/user/useUserStore.ts

@@ -23,7 +23,7 @@ export default defineStore('user', () => {
   watch(token, (val) => {
     localStorage.setItem('token', val)
   })
-  const profile = reactive({ ...defaultUserInfo })
+  const profile = reactive({...defaultUserInfo})
   watch(
     token,
     (val) => {
@@ -38,7 +38,7 @@ export default defineStore('user', () => {
   const isLogin = computed(() => !!token.value && !!profile.id)
   const logout = () => {
     token.value = ''
-    Object.assign(profile, { ...defaultUserInfo })
+    Object.assign(profile, {...defaultUserInfo})
     // profile.avatar = ''
   }
   return {

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,54 +73,56 @@ export default defineComponent(() => {
           ref={containerRef}
         >
           <div class={'grid grid-cols-3 gap-4 '}>
-            {store.list.map((item, index) => {
+            {
-              return (
+              (store.state.find ? store.searchList :
-                <div
+                store.list).map((item, index) => {
-                  class={
+                  return (
-                    'flex cursor-pointer h-[215px] overflow-hidden bg-[#17212d] items-center flex-col  rounded-lg relative '
+                    <div
-                  }
+                      class={
-                  onClick={() => { }}
+                        'flex cursor-pointer h-[215px] overflow-hidden bg-[#17212d] items-center flex-col  rounded-lg relative '
-                  key={index}
+                      }
-                >
+                      onClick={() => { }}
-                  <img class={'h-[142px] w-full object-cover'} src={item.commdity[0]?.img}></img>
+                      key={index}
-                  <div
+                    >
-                    class={
+                      <img class={'h-[142px] w-full object-cover'} src={item.commdity[0]?.img}></img>
-                      'absolute bottom-0 w-full h-[100px] rounded-lg bg-[#0003]  backdrop-blur-md'
+                      <div
-                    }
+                        class={
-                  >
+                          'absolute bottom-0 w-full h-[100px] rounded-lg bg-[#0003]  backdrop-blur-md'
-                    <div class="flex flex-col w-full h-full justify-between py-2 px-3">
+                        }
-                      <span class="text-white text-[14px]">{item.name}</span>
+                      >
-                      <div>
+                        <div class="flex flex-col w-full h-full justify-between py-2 px-3">
-                        <span
+                          <span class="text-white text-[14px]">{item.name}</span>
-                          class={
+                          <div>
-                            'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
+                            <span
-                          }
+                              class={
-                        >
+                                'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
-                          {item.typename}
+                              }
-                        </span>
+                            >
-                      </div>
+                              {item.typename}
-                      <div class="bg-white/20 flex rounded items-center">
+                            </span>
-                        <div class="bg-[#ef5a41] h-full text-white rounded px-2 text-[18px] font-bold ">
+                          </div>
-                          -13%
+                          <div class="bg-white/20 flex rounded items-center">
+                            <div class="bg-[#ef5a41] h-full text-white rounded px-2 text-[18px] font-bold ">
+                              -13%
+                            </div>
+                            <span class="text-[#fffbc2] text-[16px] ml-2">
+                              ￥{item.commdity[0]?.price}
+                            </span>
+                            <span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
+                              ￥{item.commdity[0]?.oldprice}
+                            </span>
+                            <span class="text-[12px] text-[#ebebeb] line-through decoration-current">
+                              剩余{item.commdity[0]?.oldprice}天
+                            </span>
+                          </div>
                         </div>
-                        <span class="text-[#fffbc2] text-[16px] ml-2">
-                          ￥{item.commdity[0]?.price}
-                        </span>
-                        <span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
-                          ￥{item.commdity[0]?.oldprice}
-                        </span>
-                        <span class="text-[12px] text-[#ebebeb] line-through decoration-current">
-                          剩余{item.commdity[0]?.oldprice}天
-                        </span>
                       </div>
                     </div>
-                  </div>
+                  )
-                </div>
+                })}
-              )
-            })}
           </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 () => {
@@ -42,8 +43,12 @@ export default defineStore("gameDiscount", () => {
             if (data.length === 0) {
                 noMoreData.value = true;
             } else {
-                list.value.push(...data);
+                if (state.find !== '') {
-                state.pageIndex += 1;
+                    searchList.value.push(...data);
+                } else {
+                    list.value.push(...data);
+                }
+
             }
         } catch (e) {
             console.log(e);
@@ -58,6 +63,7 @@ export default defineStore("gameDiscount", () => {
         list,
         loading,
         noMoreData,
+        searchList,
         getNews,
         state,
     }