106 lines
3.7 KiB
TypeScript
106 lines
3.7 KiB
TypeScript
|
import { View, Text } from '@tarojs/components'
|
|||
|
|
import { useDidShow } from '@tarojs/taro'
|
|||
|
|
import { FC, useState } from 'react'
|
|||
|
|
import { Network } from '@/network'
|
|||
|
|
import './index.css'
|
|||
|
|
|
|||
|
|
interface SignInStatus {
|
|||
|
|
todaySignedIn: boolean
|
|||
|
|
continuousDays: number
|
|||
|
|
totalDays: number
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 个人中心页面
|
|||
|
|
*/
|
|||
|
|
const ProfilePage: FC = () => {
|
|||
|
|
const [signInStatus, setSignInStatus] = useState<SignInStatus>({
|
|||
|
|
todaySignedIn: false,
|
|||
|
|
continuousDays: 0,
|
|||
|
|
totalDays: 0
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 页面显示时获取签到统计
|
|||
|
|
useDidShow(async () => {
|
|||
|
|
await fetchSignInStatus()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取签到状态
|
|||
|
|
const fetchSignInStatus = async () => {
|
|||
|
|
try {
|
|||
|
|
const res = await Network.request({
|
|||
|
|
url: '/api/signin/status',
|
|||
|
|
method: 'GET'
|
|||
|
|
})
|
|||
|
|
console.log('签到状态:', res.data)
|
|||
|
|
if (res.data?.code === 200 && res.data?.data) {
|
|||
|
|
setSignInStatus(res.data.data)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取签到状态失败:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<View className="min-h-screen bg-gray-900 px-4 py-6">
|
|||
|
|
{/* 用户信息卡片 */}
|
|||
|
|
<View className="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl p-6 mb-6">
|
|||
|
|
<View className="flex flex-row items-center gap-4 mb-4">
|
|||
|
|
<View className="w-16 h-16 rounded-full bg-white bg-opacity-20 flex items-center justify-center">
|
|||
|
|
<Text className="text-white text-2xl">👤</Text>
|
|||
|
|
</View>
|
|||
|
|
<View className="flex-1">
|
|||
|
|
<Text className="block text-white text-xl font-bold">微博用户</Text>
|
|||
|
|
<Text className="block text-blue-200 text-sm mt-1">ID: default_user</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{/* 签到统计 */}
|
|||
|
|
<View className="mb-6">
|
|||
|
|
<Text className="block text-white text-lg font-bold mb-4">签到统计</Text>
|
|||
|
|
<View className="flex flex-row gap-3">
|
|||
|
|
<View className="flex-1 bg-gray-800 rounded-2xl p-4">
|
|||
|
|
<Text className="block text-gray-400 text-xs">连续签到</Text>
|
|||
|
|
<Text className="block text-white text-3xl font-bold mt-1">{signInStatus.continuousDays}</Text>
|
|||
|
|
<Text className="block text-gray-400 text-xs mt-1">天</Text>
|
|||
|
|
</View>
|
|||
|
|
<View className="flex-1 bg-gray-800 rounded-2xl p-4">
|
|||
|
|
<Text className="block text-gray-400 text-xs">累计签到</Text>
|
|||
|
|
<Text className="block text-white text-3xl font-bold mt-1">{signInStatus.totalDays}</Text>
|
|||
|
|
<Text className="block text-gray-400 text-xs mt-1">天</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{/* 今日状态 */}
|
|||
|
|
<View className="bg-gray-800 rounded-2xl p-4 mb-6">
|
|||
|
|
<View className="flex flex-row items-center justify-between">
|
|||
|
|
<View>
|
|||
|
|
<Text className="block text-white text-base font-semibold">今日签到</Text>
|
|||
|
|
<Text className="block text-gray-400 text-sm mt-1">
|
|||
|
|
{signInStatus.todaySignedIn ? '已完成' : '未完成'}
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
<View
|
|||
|
|
className={`w-12 h-12 rounded-full flex items-center justify-center ${
|
|||
|
|
signInStatus.todaySignedIn ? 'bg-green-500' : 'bg-gray-700'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<Text className="text-white text-xl">{signInStatus.todaySignedIn ? '✓' : '○'}</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
|
|||
|
|
{/* 提示信息 */}
|
|||
|
|
<View className="bg-gray-800 rounded-2xl p-4">
|
|||
|
|
<Text className="block text-gray-400 text-sm leading-relaxed">
|
|||
|
|
温馨提示：每天签到可以点亮一颗星星，连续签到让星空更加璀璨。坚持签到，养成好习惯！
|
|||
|
|
</Text>
|
|||
|
|
</View>
|
|||
|
|
</View>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default ProfilePage
|