82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
|
import { useEffect, useState } from 'react'
|
||
|
|
import Taro from '@tarojs/taro'
|
||
|
|
import { Button, Image, Text, View } from '@tarojs/components'
|
||
|
|
import avatarAsset from '../../assets/fortune/avatar.jpg'
|
||
|
|
import fortuneAsset from '../../assets/tiangong/fortune.png'
|
||
|
|
import longevityAsset from '../../assets/tiangong/longevity.png'
|
||
|
|
import matchmakerAsset from '../../assets/tiangong/matchmaker.png'
|
||
|
|
import wealthAsset from '../../assets/tiangong/wealth.png'
|
||
|
|
import wenchangAsset from '../../assets/tiangong/wenchang.png'
|
||
|
|
import { api, TiangongItem } from '../../services/request'
|
||
|
|
import './index.scss'
|
||
|
|
|
||
|
|
const mockTiangong: TiangongItem[] = [
|
||
|
|
{ id: 'wealth', name: '财神', imageUrl: wealthAsset, unlocked: true },
|
||
|
|
{ id: 'fortune', name: '禄星', imageUrl: fortuneAsset, unlocked: false },
|
||
|
|
{ id: 'longevity', name: '寿星', imageUrl: longevityAsset, unlocked: false },
|
||
|
|
{ id: 'wenchang', name: '文昌星', imageUrl: wenchangAsset, unlocked: false },
|
||
|
|
{ id: 'matchmaker', name: '月老', imageUrl: matchmakerAsset, unlocked: false }
|
||
|
|
]
|
||
|
|
|
||
|
|
export default function FortunePage() {
|
||
|
|
const [items, setItems] = useState<TiangongItem[]>(mockTiangong)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
api.tiangong()
|
||
|
|
.then(setItems)
|
||
|
|
.catch(() => setItems(mockTiangong))
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const go = (url: string) => Taro.redirectTo({ url })
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View className='tiangong-page'>
|
||
|
|
<View className='tiangong-content'>
|
||
|
|
<Text className='tiangong-title'>天宫</Text>
|
||
|
|
<Text className='tiangong-subtitle'>供奉神祇，收集属于你的福运</Text>
|
||
|
|
<View className='deity-grid'>
|
||
|
|
{items.map((item) => (
|
||
|
|
<Button
|
||
|
|
className={item.unlocked ? 'deity-card unlocked' : 'deity-card locked'}
|
||
|
|
key={item.id}
|
||
|
|
onClick={() => {
|
||
|
|
if (item.unlocked) {
|
||
|
|
Taro.navigateTo({ url: `/pages/tiangong-detail/index?id=${item.id}` })
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
Taro.showToast({
|
||
|
|
title: `${item.name}暂未解锁`,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Image className='deity-image' src={item.imageUrl} mode='aspectFit' />
|
||
|
|
<View className='deity-name'>
|
||
|
|
<Text>{item.name}</Text>
|
||
|
|
</View>
|
||
|
|
</Button>
|
||
|
|
))}
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
|
||
|
|
<View className='tiangong-tabbar'>
|
||
|
|
<Button className='tabbar-item' onClick={() => go('/pages/home/index')}>
|
||
|
|
<View className='home-tab-icon' />
|
||
|
|
<Text>首页</Text>
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
className='center-tab active'
|
||
|
|
onClick={() => Taro.showToast({ title: '天宫', icon: 'none' })}
|
||
|
|
>
|
||
|
|
<Image className='center-avatar' src={avatarAsset} mode='aspectFill' />
|
||
|
|
<Text>天宫</Text>
|
||
|
|
</Button>
|
||
|
|
<Button className='tabbar-item' onClick={() => go('/pages/my/index')}>
|
||
|
|
<View className='mine-tab-icon' />
|
||
|
|
<Text>我的</Text>
|
||
|
|
</Button>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|