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 () => (
+ (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/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 ab8f34f..f397d60 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/user/useUserStore.ts b/src/user/useUserStore.ts
index 97b1f65..bf95f8b 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) => {
@@ -37,7 +37,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 = ''
}
// 自动备份
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 () => (
-
{
+ show.value = true
+ }}
+ onMouseleave={() => {
+ show.value = false
+ }}
+ >
+
+ )
+})
\ 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({
<>
+ {
+ layoutStore.state.simple = !layoutStore.state.simple
+ }}
+ >{layoutStore.state.simple ? '极简' : '常规'}
+
+ {
+ settingStore.state.showTop = settingStore.state.showTop === 'auto' ? 'show' : 'auto'
+ }}>
+ {
+ settingStore.state.showTop === 'auto' ?
+
+
- large
+
+
)
})
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 () => (
-
+
+
+ -13%
+
+ 剩余1天
+
+
+ {selectItem.value.name}
+
+
+
+ {selectItem.value.typename}
+
+
+
+
+ ￥{selectItem.value.commdity[0]?.price}
+
+
+ ￥{selectItem.value.commdity[0]?.oldprice}
+
+
+
+
+
- middle
+
+
)
})
diff --git a/src/widgets/discount/Modal.tsx b/src/widgets/discount/Modal.tsx
index d4a5492..9f75a35 100644
--- a/src/widgets/discount/Modal.tsx
+++ b/src/widgets/discount/Modal.tsx
@@ -1,10 +1,9 @@
-import { defineComponent, ref, watch, type VNodeRef } from 'vue'
-import useGameNews from './useDiscountStore'
+import { defineComponent, onMounted, ref, watch, type VNodeRef } from 'vue'
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'
addIcons(RiTimeLine, IoCloseCircleOutline, RiCloseCircleLine)
export default defineComponent(() => {
const store = useDiscountStore()
@@ -12,11 +11,28 @@ 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) => {
+ 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 () => (
+
+
+ -13%
+
+
+
+ {selectItem.value.name}
+
+
+
+
+ ￥{selectItem.value.commdity[0]?.price}
+
+
+ ￥{selectItem.value.commdity[0]?.oldprice}
+
+
+
+
+ {
ref={containerRef}
>
- {store.list.map((item, index) => {
- return (
-
{ }}
- key={index}
- >
- 
-
- ([])
+ 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,
}
- {item.name}
-
{store.loading && (
-
-
- {item.typename}
-
-
-
-
- )
- })}
+ )
+ })}
- -13%
+ {
+ (store.state.find ? store.searchList :
+ store.list).map((item, index) => {
+ return (
+
- { }}
+ key={index}
+ >
+
+
-
+
+ {item.name}
+
-
- ￥{item.commdity[0]?.price}
-
-
- ￥{item.commdity[0]?.oldprice}
-
-
- 剩余{item.commdity[0]?.oldprice}天
-
+
+ {item.typename}
+
+
+
+
+ -13%
+
+
+ ￥{item.commdity[0]?.price}
+
+
+ ￥{item.commdity[0]?.oldprice}
+
+
+ 剩余{1}天
+
+ 加载中...
+ 加载中...
)}
{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