完成游戏折扣的搜索
This commit is contained in:
expdsn
parent
33ea67f34b
commit
f323b6a5ae
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div
|
||||
class={
|
||||
'flex cursor-pointer h-[215px] overflow-hidden bg-[#17212d] items-center flex-col rounded-lg relative '
|
||||
}
|
||||
onClick={() => { }}
|
||||
key={index}
|
||||
>
|
||||
<img class={'h-[142px] w-full object-cover'} src={item.commdity[0]?.img}></img>
|
||||
<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>
|
||||
<span
|
||||
class={
|
||||
'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
|
||||
}
|
||||
>
|
||||
{item.typename}
|
||||
</span>
|
||||
</div>
|
||||
<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%
|
||||
{
|
||||
(store.state.find ? store.searchList :
|
||||
store.list).map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
class={
|
||||
'flex cursor-pointer h-[215px] overflow-hidden bg-[#17212d] items-center flex-col rounded-lg relative '
|
||||
}
|
||||
onClick={() => { }}
|
||||
key={index}
|
||||
>
|
||||
<img class={'h-[142px] w-full object-cover'} src={item.commdity[0]?.img}></img>
|
||||
<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>
|
||||
<span
|
||||
class={
|
||||
'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
|
||||
}
|
||||
>
|
||||
{item.typename}
|
||||
</span>
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
state.pageIndex += 1;
|
||||
if (state.find !== '') {
|
||||
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,
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue