e209fe02a4
- 实现签到主页面，包含签到按钮、连续天数、今日状态展示 - 实现签到记录页面，包含日历视图和签到历史列表 - 实现个人中心页面，包含用户信息和签到统计 - 后端实现签到、查询状态、查询历史三个接口 - 使用 Supabase 存储签到记录数据 - 采用星空主题设计，深蓝紫渐变背景 + 金色星光强调色 - 完成所有接口测试和前后端匹配验证 - 通过 ESLint 检查和编译验证
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
|