From f323b6a5ae7d4e72423fbbaad138434d764e25d8 Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Fri, 8 Nov 2024 18:26:57 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=B8=B8=E6=88=8F?= =?UTF-8?q?=E6=8A=98=E6=89=A3=E7=9A=84=E6=90=9C=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/layout/header/search/useSearchStore.ts | 19 +++- src/user/useUserStore.ts | 4 +- src/widgets/discount/Modal.tsx | 112 ++++++++++++--------- src/widgets/discount/useDiscountStore.ts | 14 ++- 5 files changed, 98 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index 34d375e..75121f7 100644 --- a/package.json +++ b/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", diff --git a/src/layout/header/search/useSearchStore.ts b/src/layout/header/search/useSearchStore.ts index d84c9c7..c6def70 100644 --- a/src/layout/header/search/useSearchStore.ts +++ b/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(null) const focus = ref(false) @@ -26,6 +33,7 @@ export default defineStore('search', () => { const searchStr = ref('') const current = ref(-1) const sugList = ref([]) + const addList = ref([]) watch( searchStr, (val) => { @@ -45,6 +53,15 @@ export default defineStore('search', () => { immediate: true } ) + const debouncedHandler = debounce((newValue) => { + console.log('数值改变并已防抖处理:', newValue) + request("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 diff --git a/src/user/useUserStore.ts b/src/user/useUserStore.ts index 3a299dd..bf8c7d4 100644 --- a/src/user/useUserStore.ts +++ b/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 { diff --git a/src/widgets/discount/Modal.tsx b/src/widgets/discount/Modal.tsx index d4a5492..871afe8 100644 --- a/src/widgets/discount/Modal.tsx +++ b/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 () => (
{ ref={containerRef} >
- {store.list.map((item, index) => { - return ( -
{ }} - key={index} - > - -
-
- {item.name} -
- - {item.typename} - -
-
-
- -13% + { + (store.state.find ? store.searchList : + store.list).map((item, index) => { + return ( +
{ }} + key={index} + > + +
+
+ {item.name} +
+ + {item.typename} + +
+
+
+ -13% +
+ + ￥{item.commdity[0]?.price} + + + ￥{item.commdity[0]?.oldprice} + + + 剩余{item.commdity[0]?.oldprice}天 + +
- - ￥{item.commdity[0]?.price} - - - ￥{item.commdity[0]?.oldprice} - - - 剩余{item.commdity[0]?.oldprice}天 -
-
-
- ) - })} + ) + })}
{store.loading && ( -
加载中...
+
加载中...
)} {store.noMoreData && (
无更多数据
diff --git a/src/widgets/discount/useDiscountStore.ts b/src/widgets/discount/useDiscountStore.ts index f63aff1..5c1890a 100644 --- a/src/widgets/discount/useDiscountStore.ts +++ b/src/widgets/discount/useDiscountStore.ts @@ -20,17 +20,18 @@ export interface GameDiscount { } export default defineStore("gameDiscount", () => { const list = ref([]) + const searchList = ref([]) 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, } From da41cc1e12c16aa2b64d7c627895fabf89597c1d Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Fri, 8 Nov 2024 20:22:37 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 13 +++++--- src/layout/header/GlobalTime.tsx | 4 +-- src/layout/header/ModeChange.tsx | 51 ++++++++++++++++++++++++++++++ src/layout/header/index.tsx | 2 ++ src/layout/header/search/index.tsx | 2 +- src/main.css | 2 +- src/settings/useSettingsStore.ts | 1 + src/widgets/discount/Modal.tsx | 10 ++---- 8 files changed, 69 insertions(+), 16 deletions(-) create mode 100644 src/layout/header/ModeChange.tsx diff --git a/src/App.vue b/src/App.vue index 732fce1..e32c46d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -33,11 +33,14 @@ const layout = useLayoutStore() - - - - -
+ + + + + + + +
diff --git a/src/layout/header/GlobalTime.tsx b/src/layout/header/GlobalTime.tsx index 62c2d8f..5911cf1 100644 --- a/src/layout/header/GlobalTime.tsx +++ b/src/layout/header/GlobalTime.tsx @@ -39,12 +39,12 @@ export default defineComponent({ const layout = useLayoutStore() return () => (
diff --git a/src/layout/header/ModeChange.tsx b/src/layout/header/ModeChange.tsx new file mode 100644 index 0000000..d17026b --- /dev/null +++ b/src/layout/header/ModeChange.tsx @@ -0,0 +1,51 @@ +import { addIcons, OhVueIcon } from "oh-vue-icons"; +import { defineComponent, ref } from "vue"; +import { BiEyeFill } from "oh-vue-icons/icons"; +import { BiEyeSlashFill } from "oh-vue-icons/icons"; +import useLayoutStore from "../useLayoutStore"; +import clsx from "clsx"; +import useSettingsStore from "@/settings/useSettingsStore"; +addIcons(BiEyeFill, BiEyeSlashFill) +export default defineComponent(() => { + const layoutStore = useLayoutStore() + const settingStore = useSettingsStore() + const show = ref(false) + + return () => ( +
{ + show.value = true + }} + onMouseleave={() => { + show.value = false + }} + > +
+ { + layoutStore.state.simple = !layoutStore.state.simple + }} + >{layoutStore.state.simple ? '极简' : '常规'} +
{ + settingStore.state.showTop = settingStore.state.showTop === 'auto' ? 'show' : 'auto' + }}> + { + settingStore.state.showTop === 'auto' ? + + : + + + } + +
+
+
+ ) +}) \ No newline at end of file diff --git a/src/layout/header/index.tsx b/src/layout/header/index.tsx index 2af68ff..3e9aa19 100644 --- a/src/layout/header/index.tsx +++ b/src/layout/header/index.tsx @@ -1,5 +1,6 @@ import { defineAsyncComponent, defineComponent } from 'vue' import Search from './search' +import ModeChange from './ModeChange' const GlobalTime = defineAsyncComponent({ loader: () => import('./GlobalTime') @@ -11,6 +12,7 @@ export default defineComponent({ <> + ) } diff --git a/src/layout/header/search/index.tsx b/src/layout/header/search/index.tsx index 309d291..cd2b76a 100644 --- a/src/layout/header/search/index.tsx +++ b/src/layout/header/search/index.tsx @@ -23,7 +23,7 @@ export default defineComponent((props: { } : { - top: layout.isCompact ? '40px' : '172px', + top: layout.isCompact ? '40px' : layout.state.simple ? '230px' : '172px', width: settings.state.searchWidth + 'rem' }} > diff --git a/src/main.css b/src/main.css index 3ef721b..5250346 100644 --- a/src/main.css +++ b/src/main.css @@ -134,7 +134,7 @@ body { /* 默认动画 */ .v-enter-active, .v-leave-active { - transition: opacity 0.3s ease-in-out; + transition: opacity 0.15s ease-in-out; } .v-enter-from, diff --git a/src/settings/useSettingsStore.ts b/src/settings/useSettingsStore.ts index e9375c1..63ac234 100644 --- a/src/settings/useSettingsStore.ts +++ b/src/settings/useSettingsStore.ts @@ -15,6 +15,7 @@ export default defineStore( showSider: 'show' as VisibleState, showDock: 'show' as VisibleState, showPet: 'show' as VisibleState, + showTop: 'show' as VisibleState, showTime: true, timeOptions: ['date', 'week', '12hour', 'lunal', 'second'] as TimeUnit[], showAdder: true, diff --git a/src/widgets/discount/Modal.tsx b/src/widgets/discount/Modal.tsx index 871afe8..9f75a35 100644 --- a/src/widgets/discount/Modal.tsx +++ b/src/widgets/discount/Modal.tsx @@ -1,12 +1,9 @@ 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() @@ -22,7 +19,6 @@ export default defineComponent(() => { } } const debouncedHandler = debounce((newValue) => { - console.log('数值改变并已防抖处理:', newValue) searchText.value = newValue store.state.find = newValue store.searchList = [] @@ -101,7 +97,7 @@ export default defineComponent(() => { {item.typename}
-
+
-13%
@@ -111,8 +107,8 @@ export default defineComponent(() => { ￥{item.commdity[0]?.oldprice} - - 剩余{item.commdity[0]?.oldprice}天 + + 剩余{1}天
From 9f2506b49854bed84d1caf0b2d2b214ac16e7a0f Mon Sep 17 00:00:00 2001 From: expdsn <18111002318@163.com> Date: Mon, 11 Nov 2024 10:59:28 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=B0=8F=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/widgets/discount/Large.tsx | 55 +++++++++++++++++++++++++++++++-- src/widgets/discount/Middle.tsx | 47 +++++++++++++++++++++++++--- 2 files changed, 95 insertions(+), 7 deletions(-) diff --git a/src/widgets/discount/Large.tsx b/src/widgets/discount/Large.tsx index b83de91..2980098 100644 --- a/src/widgets/discount/Large.tsx +++ b/src/widgets/discount/Large.tsx @@ -1,9 +1,58 @@ -import { defineComponent } from 'vue' +import { computed, defineComponent, onMounted, ref } from 'vue' +import useDiscountStore from './useDiscountStore' export default defineComponent(() => { + const store = useDiscountStore() + const idx = ref(0) + const selectItem = computed(() => { + return store.list[idx.value] + }) + onMounted(() => { + setInterval(() => { + idx.value = idx.value + 1 + if (idx.value > store.list.length - 1) { + idx.value = 0 + } + }, 5000) + }) return () => ( -
- large +
+
+
+ -13% +
+ 剩余1天 +
+
+
+ {selectItem.value.name} +
+ + {selectItem.value.typename} + +
+
+ + ￥{selectItem.value.commdity[0]?.price} + + + ￥{selectItem.value.commdity[0]?.oldprice} + +
+ + +
+
) }) diff --git a/src/widgets/discount/Middle.tsx b/src/widgets/discount/Middle.tsx index 53edc23..1c91629 100644 --- a/src/widgets/discount/Middle.tsx +++ b/src/widgets/discount/Middle.tsx @@ -1,10 +1,49 @@ -import { defineComponent } from 'vue' +import { computed, defineComponent, onMounted, ref } from 'vue' +import useDiscountStore from './useDiscountStore' export default defineComponent(() => { - + const store = useDiscountStore() + const idx = ref(0) + const selectItem = computed(() => { + return store.list[idx.value] + }) + onMounted(() => { + setInterval(() => { + idx.value = idx.value + 1 + if (idx.value > store.list.length - 1) { + idx.value = 0 + } + }, 5000) + }) return () => ( -
- middle +
+
+
+ -13% +
+
+
+
+ {selectItem.value.name} + +
+ + ￥{selectItem.value.commdity[0]?.price} + + + ￥{selectItem.value.commdity[0]?.oldprice} + +
+ + +
+
) })