完成游戏添加，接入第三方游戏列表
This commit is contained in:
expdsn
parent
4f571eed13
commit
583b296ace
|
|
@ -7,6 +7,11 @@ import useLayoutStore from '../useLayoutStore'
|
|||
import { AddToToken } from './AdderPage'
|
||||
import { v4 as uuid } from 'uuid'
|
||||
import { Button } from 'ant-design-vue'
|
||||
import { frontAddress, ossBase } from '@/config'
|
||||
import dayjs from 'dayjs'
|
||||
import { generateRandomString } from '@/utils/tool'
|
||||
import MD5 from 'crypto-js/md5'
|
||||
const SECRET = 'A1Cv12olxT12dOE3xA1vPA=='
|
||||
const URL_ADDRESS = 'http://newfatfox.oss-cn-beijing.aliyuncs.com'
|
||||
interface GameType {
|
||||
id: string
|
||||
|
|
@ -18,6 +23,18 @@ interface GameType {
|
|||
despt: string
|
||||
icon: string
|
||||
}
|
||||
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 GameItem = defineComponent({
|
||||
props: {
|
||||
content: {
|
||||
|
|
@ -31,7 +48,7 @@ export const GameItem = defineComponent({
|
|||
const addTo = inject(AddToToken)
|
||||
return () => (
|
||||
<div
|
||||
class={clsx(' w-full h-full rounded-lg flex flex-col justify-between shadow p-4', {
|
||||
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
|
||||
})}
|
||||
|
|
@ -39,7 +56,12 @@ export const GameItem = defineComponent({
|
|||
>
|
||||
<div class="flex">
|
||||
<img
|
||||
src={props.content.icon.replace('res/game', URL_ADDRESS)}
|
||||
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
|
||||
|
|
@ -48,7 +70,7 @@ export const GameItem = defineComponent({
|
|||
|
||||
<div class="px-2 w-0 flex-grow">
|
||||
<div
|
||||
class={clsx('text text-sm', {
|
||||
class={clsx('text text-sm text-ellipsis overflow-hidden whitespace-nowrap', {
|
||||
'text-white': isGame.value,
|
||||
'text-black/80': !isGame.value
|
||||
})}
|
||||
|
|
@ -78,14 +100,21 @@ export const GameItem = defineComponent({
|
|||
layout.addBlock(
|
||||
{
|
||||
id: uuid(),
|
||||
link: '',
|
||||
name: props.content.name,
|
||||
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: '',
|
||||
icon: props.content.icon.startsWith('http')
|
||||
? props.content.icon
|
||||
: URL_ADDRESS + '/' + props.content.icon,
|
||||
text: '',
|
||||
background: '',
|
||||
color: '',
|
||||
w: 1,
|
||||
w: props.content.rom.startsWith('http') ? 1 : 2,
|
||||
h: 1
|
||||
},
|
||||
addTo?.value
|
||||
|
|
@ -106,21 +135,53 @@ export default defineComponent(() => {
|
|||
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
|
||||
|
||||
request<GameType[]>('GET', `/api/games?type=${val}`)
|
||||
.then((res) => {
|
||||
appList.value = res
|
||||
})
|
||||
.finally(() => {
|
||||
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) => {
|
||||
console.log(res.flat())
|
||||
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
|
||||
|
|
@ -144,7 +205,13 @@ export default defineComponent(() => {
|
|||
oridinal: 1
|
||||
},
|
||||
{
|
||||
id: 'gma',
|
||||
id: 'yiqiyoo',
|
||||
type: '休闲游戏',
|
||||
attr: 1,
|
||||
oridinal: 2
|
||||
},
|
||||
{
|
||||
id: 'gba',
|
||||
type: '经典GBA',
|
||||
attr: 3,
|
||||
oridinal: 3
|
||||
|
|
@ -158,10 +225,10 @@ export default defineComponent(() => {
|
|||
select: (text: string) => (
|
||||
<button
|
||||
class={clsx(
|
||||
'px-[20px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap ',
|
||||
'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-[#000] bg-[#D6D6D6]'
|
||||
: 'text-white bg-[#D6D6D6] bg-gradient-to-b from-[#ffaa4e] to-[#ff6227]'
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
|
|
@ -170,10 +237,10 @@ export default defineComponent(() => {
|
|||
unSelect: (text: string) => (
|
||||
<button
|
||||
class={clsx(
|
||||
'px-[20px] py-1 items-center justify-center duration-75 shrink-0 flex rounded-2xl whitespace-nowrap',
|
||||
'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-[#000] hover:bg-[#f0ecec]'
|
||||
: 'text-[#666] hover:bg-black/10 bg-black/[0.05] hover:bg-[#f0ecec]'
|
||||
)}
|
||||
>
|
||||
{text}
|
||||
|
|
@ -196,9 +263,10 @@ export default defineComponent(() => {
|
|||
.fill(0)
|
||||
.map((el, idx) => (
|
||||
<div
|
||||
class={
|
||||
' relative cursor-pointer bg-gray-500 group w-full flex-grow-0 rounded-xl overflow-hidden'
|
||||
}
|
||||
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}
|
||||
/>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -7,3 +7,19 @@
|
|||
export function randomNum(min: number, max: number) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
/**
|
||||
* 生成一个长度在 0 到 n 之间的随机字符串。
|
||||
* @param n 最大字符串长度。
|
||||
* @returns 随机生成的字符串。
|
||||
*/
|
||||
export function generateRandomString(n: number): string {
|
||||
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
const length = Math.floor(Math.random() * (n + 1));
|
||||
let result = '';
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
result += characters.charAt(Math.floor(Math.random() * characters.length));
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
Loading…
Reference in New Issue