This commit is contained in:
expdsn
parent
04f0294f0e
commit
12119322b7
|
|
@ -1,194 +1,217 @@
|
||||||
import {
|
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
|
||||||
computed,
|
|
||||||
defineComponent,
|
|
||||||
onMounted,
|
|
||||||
ref,
|
|
||||||
watch,
|
|
||||||
} from 'vue'
|
|
||||||
import useLayoutStore from '../useLayoutStore'
|
import useLayoutStore from '../useLayoutStore'
|
||||||
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import { BiChevronLeft } from "oh-vue-icons/icons";
|
import { BiChevronLeft } from 'oh-vue-icons/icons'
|
||||||
import CategoryTab from '@/utils/CategoryTab';
|
import CategoryTab from '@/utils/CategoryTab'
|
||||||
import { BiChevronDown } from "oh-vue-icons/icons";
|
import { BiChevronDown } from 'oh-vue-icons/icons'
|
||||||
import request from '@/utils/request';
|
import request from '@/utils/request'
|
||||||
import useUserStore from '@/user/useUserStore';
|
import useUserStore from '@/user/useUserStore'
|
||||||
import useRouterStore from '@/useRouterStore';
|
import useRouterStore from '@/useRouterStore'
|
||||||
import useBackgroundStore from './useBackgroundStore';
|
import useBackgroundStore from './useBackgroundStore'
|
||||||
|
|
||||||
addIcons(BiChevronLeft, BiChevronDown)
|
addIcons(BiChevronLeft, BiChevronDown)
|
||||||
|
|
||||||
|
|
||||||
const typeList = [
|
const typeList = [
|
||||||
'热门',
|
'热门',
|
||||||
'COSPALY',
|
'COSPALY',
|
||||||
'二次元',
|
'二次元',
|
||||||
'风景',
|
'风景',
|
||||||
'插画',
|
'插画',
|
||||||
'热门',
|
'热门',
|
||||||
'COSPALY',
|
'COSPALY',
|
||||||
'二次元',
|
'二次元',
|
||||||
'风景',
|
'风景',
|
||||||
'插画',
|
'插画',
|
||||||
'热门',
|
'热门',
|
||||||
'COSPALY',
|
'COSPALY',
|
||||||
'二次元',
|
'二次元',
|
||||||
'风景',
|
'风景',
|
||||||
'插画'
|
'插画'
|
||||||
]
|
|
||||||
const wallpaperAttrList = [
|
|
||||||
'动态壁纸',
|
|
||||||
'静态壁纸',
|
|
||||||
'自定义壁纸'
|
|
||||||
]
|
]
|
||||||
|
const wallpaperAttrList = ['动态壁纸', '静态壁纸', '自定义壁纸']
|
||||||
export type BackgroundType = {
|
export type BackgroundType = {
|
||||||
id: string
|
id: string
|
||||||
oridinal: number
|
oridinal: number
|
||||||
type: string
|
type: string
|
||||||
attr: number
|
attr: number
|
||||||
}
|
}
|
||||||
export type WallpaperItem = {
|
export type WallpaperItem = {
|
||||||
id: string
|
id: string
|
||||||
hotNum: number
|
hotNum: number
|
||||||
time: number
|
time: number
|
||||||
typeId: string
|
typeId: string
|
||||||
url: string
|
url: string
|
||||||
}
|
}
|
||||||
export default defineComponent(() => {
|
export default defineComponent(() => {
|
||||||
const layout = useLayoutStore()
|
const layout = useLayoutStore()
|
||||||
const router = useRouterStore()
|
const router = useRouterStore()
|
||||||
const isGame = computed(() => layout.state.current === 0)
|
const isGame = computed(() => layout.state.current === 0)
|
||||||
const selectType = ref('')
|
const selectType = ref('')
|
||||||
const addTo = ref(layout.state.currentPage)
|
const typeList = ref<BackgroundType[]>([])
|
||||||
const typeList = ref<BackgroundType[]>([])
|
const wallpaperList = ref<WallpaperItem[]>([])
|
||||||
const wallpaperList = ref<WallpaperItem[]>([])
|
const selectAttr = ref(0)
|
||||||
const selectAttr = ref(0)
|
const userStore = useUserStore()
|
||||||
const userStore = useUserStore()
|
const sortBy = ref<'hotNum' | 'time'>('hotNum')
|
||||||
const backgroundStore = useBackgroundStore()
|
onMounted(() => {
|
||||||
const sortBy = ref<'hotNum' | 'time'>('hotNum')
|
request<BackgroundType[]>('GET', '/api/backgroundTypes').then((res) => {
|
||||||
onMounted(() => {
|
console.log(res)
|
||||||
request<BackgroundType[]>("GET", "/api/backgroundTypes").then(res => {
|
typeList.value = res
|
||||||
console.log(res);
|
selectType.value = res[0].id
|
||||||
typeList.value = res
|
|
||||||
selectType.value = res[0].id
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
watch(() => [selectType.value, sortBy.value], (e) => {
|
})
|
||||||
wallpaperList.value = []
|
watch(
|
||||||
request<WallpaperItem[]>("GET", `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(res => {
|
() => [selectType.value, sortBy.value],
|
||||||
console.log(res);
|
(e) => {
|
||||||
wallpaperList.value = res
|
wallpaperList.value = []
|
||||||
})
|
request<WallpaperItem[]>('GET', `/api/backgrounds?typeId=${e[0]}&sort=${sortBy.value}`).then(
|
||||||
}, {
|
(res) => {
|
||||||
immediate: true
|
console.log(res)
|
||||||
})
|
wallpaperList.value = res
|
||||||
watch(selectAttr, (e) => {
|
}
|
||||||
|
)
|
||||||
selectType.value = typeList.value.filter(val => val.attr === e)[0].id || ''
|
},
|
||||||
})
|
{
|
||||||
return () => (
|
immediate: true
|
||||||
<div class={clsx('w-full flex-col h-full relative flex px-7 py-7 text-[14px]', isGame.value ? 'bg-[#2c2e3e] text-white'
|
}
|
||||||
: 'text-[#333] bg-white'
|
)
|
||||||
|
watch(selectAttr, (e) => {
|
||||||
|
selectType.value = typeList.value.filter((val) => val.attr === e)[0].id || ''
|
||||||
|
})
|
||||||
|
return () => (
|
||||||
|
<div
|
||||||
|
class={clsx(
|
||||||
|
'w-full flex-col h-full relative flex px-7 py-7 text-[14px]',
|
||||||
|
isGame.value ? 'bg-[#2c2e3e] text-white' : 'text-[#333] bg-white'
|
||||||
|
)}
|
||||||
|
style={
|
||||||
|
isGame.value
|
||||||
|
? {
|
||||||
|
backgroundImage: `url('/bg/gameModel.png')`,
|
||||||
|
backgroundSize: '100% 100%'
|
||||||
|
}
|
||||||
|
: null
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class={clsx(
|
||||||
|
'flex w-full justify-between items-center border-b-[1px] border-solid pb-2',
|
||||||
|
isGame.value ? 'border-white/[.2]' : 'dark:border-black/[.2]'
|
||||||
)}
|
)}
|
||||||
style={isGame.value ? {
|
>
|
||||||
backgroundImage: `url('/bg/gameModel.png')`,
|
<OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
|
||||||
backgroundSize: '100% 100%',
|
<span class="font-bold text-[14px] ">壁纸库</span>
|
||||||
} : null}>
|
<button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
|
||||||
<div class={clsx("flex w-full justify-between items-center border-b-[1px] border-solid pb-2",
|
</div>
|
||||||
isGame.value ? "border-white/[.2]" : "dark:border-black/[.2]"
|
<div class="flex-1 h-0 relative">
|
||||||
)}>
|
<div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
|
||||||
<OhVueIcon name={BiChevronLeft.name} scale={1.4} class="cursor-pointer"></OhVueIcon>
|
<div class="flex justify-between items-center ">
|
||||||
<span class="font-bold text-[14px] ">壁纸库</span>
|
<div class="flex-1 w-0">
|
||||||
<button class="hover:bg-slate-50/60 px-3 py-2 rounded-xl text-white/[.9]">我的壁纸</button>
|
<CategoryTab
|
||||||
|
v-slots={{
|
||||||
|
select: (text: string) => (
|
||||||
|
<button
|
||||||
|
class={clsx(
|
||||||
|
'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
||||||
|
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
),
|
||||||
|
unSelect: (text: string) => (
|
||||||
|
<button
|
||||||
|
class={clsx(
|
||||||
|
'px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
||||||
|
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{text}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
list={typeList.value.filter((val) => val.attr === selectAttr.value)}
|
||||||
|
selectType={selectType.value}
|
||||||
|
onUpdate:type={(e) => {
|
||||||
|
selectType.value = e
|
||||||
|
}}
|
||||||
|
></CategoryTab>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-1 h-0 relative">
|
|
||||||
<div class="flex flex-col w-full h-full py-3 gap-y-3 relative">
|
|
||||||
<div class="flex justify-between items-center ">
|
|
||||||
<div class="flex-1 w-0">
|
|
||||||
<CategoryTab v-slots={{
|
|
||||||
select: (text: string) => <button
|
|
||||||
class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
|
||||||
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] bg-[#D6D6D6]')}>
|
|
||||||
{text}
|
|
||||||
</button>,
|
|
||||||
unSelect: (text: string) => <button
|
|
||||||
class={clsx('px-5 py-1 items-center justify-center duration-75 shrink-0 flex rounded-xl ',
|
|
||||||
isGame.value ? 'bg-white/30 text-white' : 'text-[#000] hover:bg-[#f0ecec]')}>
|
|
||||||
{text}
|
|
||||||
</button>
|
|
||||||
}} list={typeList.value.filter(val => val.attr === selectAttr.value)} selectType={selectType.value} onUpdate:type={(e) => {
|
|
||||||
selectType.value = e
|
|
||||||
}}></CategoryTab>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relative w-[100px]">
|
|
||||||
<select
|
|
||||||
onChange={(e: any) => {
|
|
||||||
sortBy.value = e.target.value
|
|
||||||
}}
|
|
||||||
value={sortBy.value}
|
|
||||||
class={clsx(
|
|
||||||
' block w-full appearance-none rounded-lg border-none py-1.5 px-3 text-sm/6 ',
|
|
||||||
'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
|
|
||||||
// Make the text of each option black on Windows
|
|
||||||
'*:text-black',
|
|
||||||
isGame.value ? "text-white bg-white/5" : "text-[#333] bg-black/5"
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<option value="hotNum">按热度</option>
|
|
||||||
<option value="time">按最新</option>
|
|
||||||
</select>
|
|
||||||
<OhVueIcon
|
|
||||||
fill={isGame.value ? 'white' : 'black'}
|
|
||||||
name={BiChevronDown.name}
|
|
||||||
class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-1 w-full h-0 flex relative">
|
|
||||||
<div class="w-full h-full overflow-y-scroll">
|
|
||||||
<div class="w-full grid grid-cols-3 gap-4 ">
|
|
||||||
{wallpaperList.value.map(item =>
|
|
||||||
<div
|
|
||||||
onClick={() => {
|
|
||||||
layout.changeBackground(item.url)
|
|
||||||
}}
|
|
||||||
class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden">
|
|
||||||
<img src={item.url + '?x-oss-process=image/resize,w_300'} class=" duration-150 absolute w-full h-full object-cover flex-grow-0 rounded-xl group-hover:scale-[1.2]" />
|
|
||||||
<div class="absolute top-0 left-0 right-0 bottom-0 " style={{
|
|
||||||
background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
|
|
||||||
}} />
|
|
||||||
</div>)}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
|
|
||||||
{
|
|
||||||
wallpaperAttrList.map((item, index) => (
|
|
||||||
<div key={index}
|
|
||||||
onClick={() => {
|
|
||||||
if (index === 2) {
|
|
||||||
|
|
||||||
if (!userStore.isLogin) {
|
|
||||||
router.go('global-login')
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
selectAttr.value = index
|
|
||||||
|
|
||||||
}}
|
|
||||||
class={clsx("px-8 py-2 rounded-[8px]",
|
|
||||||
index === selectAttr.value ? "bg-white text-[#333]" : "cursor-pointer text-white hover:bg-white/[.4]")}>{item}</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="relative w-[100px]">
|
||||||
|
<select
|
||||||
|
onChange={(e: any) => {
|
||||||
|
sortBy.value = e.target.value
|
||||||
|
}}
|
||||||
|
value={sortBy.value}
|
||||||
|
class={clsx(
|
||||||
|
' block w-full appearance-none rounded-lg border-none py-1.5 px-3 text-sm/6 ',
|
||||||
|
'focus:outline-none data-[focus]:outline-2 data-[focus]:-outline-offset-2 data-[focus]:outline-white/25',
|
||||||
|
// Make the text of each option black on Windows
|
||||||
|
'*:text-black',
|
||||||
|
isGame.value ? 'text-white bg-white/5' : 'text-[#333] bg-black/5'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<option value="hotNum">按热度</option>
|
||||||
|
<option value="time">按最新</option>
|
||||||
|
</select>
|
||||||
|
<OhVueIcon
|
||||||
|
fill={isGame.value ? 'white' : 'black'}
|
||||||
|
name={BiChevronDown.name}
|
||||||
|
class="group pointer-events-none absolute top-1/2 right-2.5 -translate-y-1/2 size-4 "
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 w-full h-0 flex relative">
|
||||||
|
<div class="w-full h-full overflow-y-scroll">
|
||||||
|
<div class="w-full grid grid-cols-3 gap-4 ">
|
||||||
|
{wallpaperList.value.map((item) => (
|
||||||
|
<div
|
||||||
|
onClick={() => {}}
|
||||||
|
class="h-[156px] relative cursor-pointer group w-full flex-grow-0 rounded-xl overflow-hidden"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={item.url + '?x-oss-process=image/resize,w_300'}
|
||||||
|
class=" duration-150 absolute w-full h-full object-cover flex-grow-0 rounded-xl group-hover:scale-[1.2]"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="absolute top-0 left-0 right-0 bottom-0 "
|
||||||
|
style={{
|
||||||
|
background: 'linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 100%)'
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex text-[#666] z-10 bg-black/[.4] p-1 rounded-[12px] gap-x-1">
|
||||||
|
{wallpaperAttrList.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
onClick={() => {
|
||||||
|
if (index === 2) {
|
||||||
|
if (!userStore.isLogin) {
|
||||||
|
router.go('global-login')
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
selectAttr.value = index
|
||||||
|
}}
|
||||||
|
class={clsx(
|
||||||
|
'px-8 py-2 rounded-[8px]',
|
||||||
|
index === selectAttr.value
|
||||||
|
? 'bg-white text-[#333]'
|
||||||
|
: 'cursor-pointer text-white hover:bg-white/[.4]'
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue