|
@@ -1,15 +1,129 @@
|
|
|
-import { View, Text } from '@tarojs/components'
|
|
|
|
|
-import { useLoad } from '@tarojs/taro'
|
|
|
|
|
|
|
+import { View, Text, Button, Image } from '@tarojs/components'
|
|
|
|
|
+import { useLoad, useDidShow } from '@tarojs/taro'
|
|
|
|
|
+import { useState } from 'react'
|
|
|
|
|
+import Taro from '@tarojs/taro'
|
|
|
|
|
+import { authManager, User } from '../../utils/auth'
|
|
|
import './index.css'
|
|
import './index.css'
|
|
|
|
|
|
|
|
-export default function Index () {
|
|
|
|
|
|
|
+export default function Index() {
|
|
|
|
|
+ const [user, setUser] = useState<User | null>(null)
|
|
|
|
|
+ const [loading, setLoading] = useState(false)
|
|
|
|
|
+
|
|
|
useLoad(() => {
|
|
useLoad(() => {
|
|
|
- console.log('Page loaded.')
|
|
|
|
|
|
|
+ console.log('Index Page loaded.')
|
|
|
|
|
+ checkLoginStatus()
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ useDidShow(() => {
|
|
|
|
|
+ checkLoginStatus()
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
+ const checkLoginStatus = async () => {
|
|
|
|
|
+ if (authManager.isLoggedIn()) {
|
|
|
|
|
+ const userInfo = authManager.getUserInfo()
|
|
|
|
|
+ setUser(userInfo)
|
|
|
|
|
+ } else {
|
|
|
|
|
+ setUser(null)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleLogin = () => {
|
|
|
|
|
+ Taro.navigateTo({ url: '/pages/login/index' })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleLogout = async () => {
|
|
|
|
|
+ setLoading(true)
|
|
|
|
|
+ try {
|
|
|
|
|
+ await authManager.logout()
|
|
|
|
|
+ setUser(null)
|
|
|
|
|
+ Taro.showToast({
|
|
|
|
|
+ title: '退出成功',
|
|
|
|
|
+ icon: 'success'
|
|
|
|
|
+ })
|
|
|
|
|
+ } catch (error) {
|
|
|
|
|
+ console.error('Logout error:', error)
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ setLoading(false)
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const handleProfile = () => {
|
|
|
|
|
+ Taro.navigateTo({ url: '/pages/profile/index' })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const goToRegister = () => {
|
|
|
|
|
+ Taro.navigateTo({ url: '/pages/register/index' })
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
return (
|
|
return (
|
|
|
- <View className='index'>
|
|
|
|
|
- <Text>Hello world!2222</Text>
|
|
|
|
|
|
|
+ <View className="index-container">
|
|
|
|
|
+ {user ? (
|
|
|
|
|
+ <View className="user-welcome">
|
|
|
|
|
+ <View className="user-avatar">
|
|
|
|
|
+ <Image
|
|
|
|
|
+ className="avatar-image"
|
|
|
|
|
+ src={user.avatar || 'https://via.placeholder.com/100x100'}
|
|
|
|
|
+ mode="aspectFill"
|
|
|
|
|
+ />
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ <Text className="welcome-text">欢迎回来,{user.username}!</Text>
|
|
|
|
|
+
|
|
|
|
|
+ <View className="user-info">
|
|
|
|
|
+ <Text className="info-item">ID: {user.id}</Text>
|
|
|
|
|
+ {user.email && <Text className="info-item">邮箱: {user.email}</Text>}
|
|
|
|
|
+ <Text className="info-item">注册时间: {new Date(user.createdAt).toLocaleDateString()}</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ <View className="action-buttons">
|
|
|
|
|
+ <Button className="action-button" type="primary" onClick={handleProfile}>
|
|
|
|
|
+ 查看资料
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ className="action-button"
|
|
|
|
|
+ type="warn"
|
|
|
|
|
+ loading={loading}
|
|
|
|
|
+ onClick={handleLogout}
|
|
|
|
|
+ >
|
|
|
|
|
+ 退出登录
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ ) : (
|
|
|
|
|
+ <View className="login-prompt">
|
|
|
|
|
+ <View className="welcome-section">
|
|
|
|
|
+ <Text className="welcome-title">欢迎使用小程序</Text>
|
|
|
|
|
+ <Text className="welcome-subtitle">请先登录以使用完整功能</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ <View className="login-buttons">
|
|
|
|
|
+ <Button
|
|
|
|
|
+ className="login-button"
|
|
|
|
|
+ type="primary"
|
|
|
|
|
+ onClick={handleLogin}
|
|
|
|
|
+ >
|
|
|
|
|
+ 立即登录
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ <Button
|
|
|
|
|
+ className="register-button"
|
|
|
|
|
+ plain
|
|
|
|
|
+ onClick={goToRegister}
|
|
|
|
|
+ >
|
|
|
|
|
+ 注册新账号
|
|
|
|
|
+ </Button>
|
|
|
|
|
+ </View>
|
|
|
|
|
+
|
|
|
|
|
+ <View className="features-section">
|
|
|
|
|
+ <Text className="features-title">功能特色</Text>
|
|
|
|
|
+ <View className="features-list">
|
|
|
|
|
+ <Text className="feature-item">✅ 安全的用户认证</Text>
|
|
|
|
|
+ <Text className="feature-item">✅ 完整的用户管理</Text>
|
|
|
|
|
+ <Text className="feature-item">✅ 响应式界面设计</Text>
|
|
|
|
|
+ <Text className="feature-item">✅ 实时数据同步</Text>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ </View>
|
|
|
|
|
+ )}
|
|
|
</View>
|
|
</View>
|
|
|
)
|
|
)
|
|
|
}
|
|
}
|