feat: build mini app frontend pages

2026-10-13 22:50:37 +08:00
1 parent ca36409e41
commit 869376979c
@@ -0,0 +1,82 @@
+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>
+  )
+}