27 lines
1.4 KiB
TypeScript
27 lines
1.4 KiB
TypeScript
|
import Taro from '@tarojs/taro'
|
||
|
|
import { Button, Image, Text, View } from '@tarojs/components'
|
||
|
|
import spirit from '../assets/home/spirit.png'
|
||
|
|
import './AppTabBar.scss'
|
||
|
|
|
||
|
|
export function AppTabBar({ active }: { active: 'home' | 'my' }) {
|
||
|
|
const navigate = (page: 'home' | 'my') => {
|
||
|
|
if (page === active) return
|
||
|
|
const url = `/pages/${page}/index`
|
||
|
|
if (process.env.TARO_ENV === 'weapp') Taro.switchTab({ url })
|
||
|
|
else Taro.redirectTo({ url })
|
||
|
|
}
|
||
|
|
return <View className='app-tabbar'>
|
||
|
|
<Button className={`app-tabbar-item ${active === 'home' ? 'active' : ''}`} onClick={() => navigate('home')}>
|
||
|
|
<View className='app-home-symbol'><View className='app-home-roof' /><View className='app-home-body'><View /></View></View>
|
||
|
|
<Text className='app-tabbar-label'>首页</Text>
|
||
|
|
</Button>
|
||
|
|
<Button className='app-tabbar-realm' onClick={() => Taro.navigateTo({ url: '/pages/fortune/index' })}>
|
||
|
|
<View className='app-realm-symbol'><View className='app-spirit-frame'><Image className='app-spirit-image' src={spirit} mode='aspectFit' /></View></View>
|
||
|
|
<Text className='app-tabbar-label'>天宫</Text>
|
||
|
|
</Button>
|
||
|
|
<Button className={`app-tabbar-item ${active === 'my' ? 'active' : ''}`} onClick={() => navigate('my')}>
|
||
|
|
<View className='app-person-symbol'><View className='app-person-head' /><View className='app-person-body' /></View>
|
||
|
|
<Text className='app-tabbar-label'>我的</Text>
|
||
|
|
</Button>
|
||
|
|
</View>
|
||
|
|
}
|