278 lines
8.3 KiB
TypeScript
278 lines
8.3 KiB
TypeScript
import CategoryTab from '@/utils/CategoryTab'
|
|
import request from '@/utils/request'
|
|
import { computed, defineComponent, inject, ref, watch } from 'vue'
|
|
import clsx from 'clsx'
|
|
import useLayoutStore from '../useLayoutStore'
|
|
import { AddToToken } from './AdderPage'
|
|
import { v4 as uuid } from 'uuid'
|
|
import { frontAddress, ossBase } from '@/config'
|
|
import dayjs from 'dayjs'
|
|
import { generateRandomString } from '@/utils/tool'
|
|
import MD5 from 'crypto-js/md5'
|
|
export const SECRET = 'A1Cv12olxT12dOE3xA1vPA=='
|
|
export const URL_ADDRESS = 'http://newfatfox.oss-cn-beijing.aliyuncs.com'
|
|
export interface GameType {
|
|
id: string
|
|
name: string
|
|
rom: string
|
|
playstation: string
|
|
hot: number
|
|
category: string
|
|
despt: string
|
|
icon: string
|
|
}
|
|
export interface OtherGame {
|
|
id: number // 游戏ID
|
|
category_ids: number[] // 分类ID数组
|
|
rank: number // 排名
|
|
name: string // 游戏名称
|
|
short_description: string // 简短描述
|
|
description: string // 详细描述
|
|
url: string // 游戏详情链接
|
|
icon: string // 图标URL
|
|
cover_url: string // 封面URL
|
|
corner_mark: number // 角标标识
|
|
}
|
|
export const DefautGameTypeList = [
|
|
{
|
|
id: 'fc',
|
|
type: '经典红白机',
|
|
attr: 0,
|
|
oridinal: 0
|
|
},
|
|
{
|
|
id: 'md',
|
|
type: '经典世嘉',
|
|
attr: 1,
|
|
oridinal: 1
|
|
},
|
|
{
|
|
id: 'yiqiyoo',
|
|
type: '休闲游戏',
|
|
attr: 1,
|
|
oridinal: 2
|
|
},
|
|
{
|
|
id: 'gba',
|
|
type: '经典GBA',
|
|
attr: 3,
|
|
oridinal: 3
|
|
}
|
|
]
|
|
export const GameItem = defineComponent({
|
|
props: {
|
|
content: {
|
|
type: Object as () => GameType,
|
|
required: true
|
|
}
|
|
},
|
|
setup(props) {
|
|
const layout = useLayoutStore()
|
|
const isGame = computed(() => layout.state.current === 0)
|
|
const addTo = inject(AddToToken)
|
|
return () => (
|
|
<div
|
|
class={clsx(' w-full h-full rounded-lg flex flex-col justify-between shadow p-4 relative', {
|
|
'bg-white/20': isGame.value,
|
|
'bg-white/80': !isGame.value
|
|
})}
|
|
key={props.content.name}
|
|
>
|
|
<div class="flex">
|
|
<img
|
|
loading="lazy"
|
|
src={
|
|
props.content.icon.startsWith('http')
|
|
? props.content.icon
|
|
: URL_ADDRESS + '/' + props.content.icon
|
|
}
|
|
class="w-[58px] h-[58px] bg-cover rounded-lg shadow-lg"
|
|
style={{
|
|
background: props.content.icon
|
|
}}
|
|
/>
|
|
|
|
<div class="px-2 w-0 flex-grow">
|
|
<div
|
|
class={clsx('text text-sm text-ellipsis overflow-hidden whitespace-nowrap', {
|
|
'text-white': isGame.value,
|
|
'text-black/80': !isGame.value
|
|
})}
|
|
>
|
|
{props.content.name}
|
|
</div>
|
|
<div
|
|
class={clsx('text-[12px] line-clamp-2 text-ellipsis', {
|
|
'text-white/80': isGame.value,
|
|
'text-black/60': !isGame.value
|
|
})}
|
|
>
|
|
{props.content.despt}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<button
|
|
class={clsx(
|
|
'rounded-2xl text-[12px] flex justify-center items-center w-[60px] h-[24px]',
|
|
{
|
|
'bg-[#eeeeee] text-[#333] ': isGame.value,
|
|
'bg-[#ffaa4e] text-white': !isGame.value
|
|
}
|
|
)}
|
|
onClick={() => {
|
|
layout.addBlock(
|
|
{
|
|
id: uuid(),
|
|
link: !props.content.rom.startsWith('http')
|
|
? `${frontAddress}/emu/#/home?params=${JSON.stringify({
|
|
...props.content,
|
|
rom: ossBase + '/' + props.content.rom
|
|
})}`
|
|
: props.content.rom,
|
|
name: '',
|
|
label: props.content.name,
|
|
icon: props.content.icon.startsWith('http')
|
|
? props.content.icon
|
|
: URL_ADDRESS + '/' + props.content.icon,
|
|
text: '',
|
|
background: '',
|
|
color: '',
|
|
w: props.content.rom.startsWith('http') ? 1 : 2,
|
|
h: 1
|
|
},
|
|
addTo?.value
|
|
)
|
|
}}
|
|
>
|
|
添加
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
})
|
|
|
|
export default defineComponent(() => {
|
|
const layout = useLayoutStore()
|
|
const loading = ref(false)
|
|
const isGame = computed(() => layout.state.current === 0)
|
|
const appList = ref<GameType[]>([])
|
|
const selectType = ref('fc')
|
|
const fetchGame = async (page: number) => {
|
|
const parems = `nonce=${generateRandomString(8)}&pid=PIDc8uT24mpo×tamp=${dayjs().unix()}`
|
|
const sign = MD5(parems + SECRET).toString()
|
|
const response = await fetch(
|
|
`https://ge.yiqiyoo.com/game/v2/third-part/games?${parems}&sign=${sign}&paginate.limit=99&paginate.page=${page}`
|
|
)
|
|
const res = await response.json()
|
|
return res.data.items
|
|
}
|
|
watch(
|
|
selectType,
|
|
(val) => {
|
|
loading.value = true
|
|
if (val !== 'yiqiyoo') {
|
|
request<GameType[]>('GET', `/api/games?type=${val}`)
|
|
.then((res) => {
|
|
appList.value = res
|
|
})
|
|
.finally(() => {
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 200)
|
|
})
|
|
} else {
|
|
try {
|
|
Promise.all([fetchGame(1), fetchGame(2), fetchGame(3)]).then((res) => {
|
|
const resData = res.flat() as OtherGame[]
|
|
appList.value = resData.map((el) => ({
|
|
id: el.id.toString(),
|
|
name: el.name,
|
|
despt: el.short_description,
|
|
icon: el.icon,
|
|
rom: el.url,
|
|
playstation: el.url,
|
|
hot: el.rank,
|
|
category: el.category_ids[0].toString()
|
|
}))
|
|
})
|
|
} catch (err) {
|
|
console.error(err)
|
|
} finally {
|
|
setTimeout(() => {
|
|
loading.value = false
|
|
}, 200)
|
|
}
|
|
}
|
|
},
|
|
{
|
|
immediate: true
|
|
}
|
|
)
|
|
return () => (
|
|
<div class={'w-full h-full flex flex-col gap-y-4'}>
|
|
<div class={'w-full '}>
|
|
<CategoryTab
|
|
list={DefautGameTypeList}
|
|
selectType={selectType.value}
|
|
onUpdate:type={(e) => {
|
|
selectType.value = e
|
|
}}
|
|
v-slots={{
|
|
select: (text: string) => (
|
|
<button
|
|
class={clsx(
|
|
'px-[20px] text-[14px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap ',
|
|
isGame.value
|
|
? 'bg-white/30 text-white bg-gradient-to-b from-[#ffaa4e] to-[#ff6227]'
|
|
: 'text-white bg-[#D6D6D6] bg-gradient-to-b from-[#ffaa4e] to-[#ff6227]'
|
|
)}
|
|
>
|
|
{text}
|
|
</button>
|
|
),
|
|
unSelect: (text: string) => (
|
|
<button
|
|
class={clsx(
|
|
'px-[20px] text-[14px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap',
|
|
isGame.value
|
|
? ' text-[#999] bg-white/10 hover:bg-white/20'
|
|
: 'text-[#666] hover:bg-black/10 bg-black/[0.05] hover:bg-[#f0ecec]'
|
|
)}
|
|
>
|
|
{text}
|
|
</button>
|
|
)
|
|
}}
|
|
></CategoryTab>
|
|
</div>
|
|
<div class={'h-0 flex-1 w-full'}>
|
|
<div class={'w-full h-full overflow-y-scroll scrollbar-hide'}>
|
|
{!loading.value ? (
|
|
<div class={'w-full grid grid-cols-3 gap-4 '} style="grid-auto-rows: 120px">
|
|
{appList.value.map((el) => (
|
|
<GameItem content={el}></GameItem>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div class={'w-full grid grid-cols-3 gap-4 '} style="grid-auto-rows: 120px">
|
|
{Array(12)
|
|
.fill(0)
|
|
.map((el, idx) => (
|
|
<div
|
|
class={clsx(
|
|
' relative cursor-pointer bg-white/20 group w-full flex-grow-0 rounded-lg overflow-hidden',
|
|
isGame.value ? 'bg-white/30 ' : ' bg-[#fff]/70'
|
|
)}
|
|
key={idx}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|