xinadmin/xin-school-taro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录注册

Browse Source
This commit is contained in:
liu
2026-07-15 12:24:06 +08:00
parent 4ac9193ed5
commit 81add5d8b7
19 changed files with 1368 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile/index.tsx
+107 -21
View File
@@ -1,7 +1,10 @@
import { useMemo } from 'react'
import { useMemo, useCallback } from 'react'
import Taro from '@tarojs/taro'
import { View, Text, Image, ScrollView } from '@tarojs/components'
import { Cell, CellGroup, Icon } from '@antmjs/vantui'
import useAuthStore from '@/stores/auth/useAuthStore'
import { GENDER_MAP } from '@/types/user'
import type { Gender } from '@/types/user'
import './index.less'
/** 状态栏高度 */
@@ -13,13 +16,13 @@ function getStatusBarHeight(): number {
}
}
/** 用户信息（后续接入 API） */
const USER_INFO = {
/** 默认用户信息（未登录时展示占位） */
const DEFAULT_USER = {
avatar: 'https://picsum.photos/seed/avatar/200/200',
name: '张三',
className: '计算机科学与技术 2022级',
name: '未登录',
className: '点击登录体验更多功能',
gender: '男' as const,
stats: { likes: 128, comments: 46, favorites: 89 },
stats: { likes: '-', comments: '-', favorites: '-' },
}
/** 订单入口 */
@@ -37,32 +40,80 @@ const FEATURE_LIST = [
{ key: 'address', label: '地址管理', icon: 'location-o' },
{ key: 'about', label: '关于我们', icon: 'info-o' },
{ key: 'feedback', label: '意见反馈', icon: 'chat-o' },
{ key: 'settings', label: '系统设置', icon: 'setting-o' },
] as const
export default function Profile() {
const statusBarH = useMemo(getStatusBarHeight, [])
const user = useAuthStore(s => s.user)
const logout = useAuthStore(s => s.logout)
const isLoggedIn = useAuthStore(s => !!s.token && !!s.user)
/** 跳转登录页 */
const handleGoToLogin = useCallback(() => {
Taro.navigateTo({ url: '/pages/login/index' })
}, [])
const handleSettings = () => {
Taro.showToast({ title: '设置页面即将上线', icon: 'none' })
}
const handleEditProfile = () => {
Taro.showToast({ title: '编辑资料即将上线', icon: 'none' })
if (isLoggedIn) {
Taro.navigateTo({ url: '/pages/profile-edit/index' })
} else {
handleGoToLogin()
}
}
const handleOrderTab = (key: string) => {
if (!isLoggedIn) {
handleGoToLogin()
return
}
Taro.showToast({ title: `${ORDER_TABS.find(t => t.key === key)?.label || ''}订单即将上线`, icon: 'none' })
}
const handleFeature = (item: typeof FEATURE_LIST[number]) => {
if (!isLoggedIn) {
handleGoToLogin()
return
}
Taro.showToast({ title: `${item.label}即将上线`, icon: 'none' })
}
const handleAllOrders = () => {
if (!isLoggedIn) {
handleGoToLogin()
return
}
Taro.showToast({ title: '全部订单即将上线', icon: 'none' })
}
/** 退出登录 */
const handleLogout = useCallback(() => {
Taro.showModal({
title: '提示',
content: '确定要退出登录吗？',
success: (res) => {
if (res.confirm) {
logout()
Taro.showToast({ title: '已退出登录', icon: 'success' })
}
},
})
}, [logout])
// 根据登录状态决定展示的用户信息
const displayUser = isLoggedIn && user
? {
avatar: user.avatar,
name: user.nickname,
className: '在校学生', // 后续可扩展班级字段
gender: GENDER_MAP[user.gender] || '未知',
stats: { likes: '-', comments: '-', favorites: '-' }, // 暂用占位，后续从 API 获取
}
: DEFAULT_USER
return (
<View className='profile-page'>
{/* ========== 背景图区域 ========== */}
@@ -78,30 +129,50 @@ export default function Profile() {
</View>
{/* 头像 + 用户信息 */}
<View className='user-card' onClick={handleEditProfile}>
<Image className='avatar' src={USER_INFO.avatar} mode='aspectFill' />
<View className='user-info'>
<View className='name-row'>
<Text className='name'>{USER_INFO.name}</Text>
<Text className='gender-tag'>{USER_INFO.gender === '男' ? '♂' : '♀'}</Text>
</View>
<Text className='class-name'>{USER_INFO.className}</Text>
</View>
<Icon name='arrow' size={18} color='rgba(255,255,255,0.7)' />
<View
className={`user-card ${!isLoggedIn ? 'user-card--login' : ''}`}
onClick={isLoggedIn ? handleEditProfile : handleGoToLogin}
>
{isLoggedIn ? (
<>
<Image className='avatar' src={displayUser.avatar} mode='aspectFill' />
<View className='user-info'>
<View className='name-row'>
<Text className='name'>{displayUser.name}</Text>
<Text className='gender-tag'>{displayUser.gender === '男' ? '♂' : displayUser.gender === '女' ? '♀' : ''}</Text>
</View>
<Text className='class-name'>{displayUser.className}</Text>
</View>
<Icon name='arrow' size={18} color='rgba(255,255,255,0.7)' />
</>
) : (
<>
<View className='avatar-placeholder'>
<Icon name='user-circle-o' size={48} color='rgba(255,255,255,0.7)' />
</View>
<View className='user-info'>
<View className='name-row'>
<Text className='name login-text'>点击登录账号</Text>
</View>
<Text className='class-name'>登录后体验更多功能</Text>
</View>
<Icon name='arrow' size={18} color='rgba(255,255,255,0.7)' />
</>
)}
</View>
{/* 点赞/评论/收藏 */}
<View className='stats-row'>
<View className='stat-item'>
<Text className='stat-num'>{USER_INFO.stats.likes}</Text>
<Text className='stat-num'>{displayUser.stats.likes}</Text>
<Text className='stat-label'>点赞</Text>
</View>
<View className='stat-item'>
<Text className='stat-num'>{USER_INFO.stats.comments}</Text>
<Text className='stat-num'>{displayUser.stats.comments}</Text>
<Text className='stat-label'>评论</Text>
</View>
<View className='stat-item'>
<Text className='stat-num'>{USER_INFO.stats.favorites}</Text>
<Text className='stat-num'>{displayUser.stats.favorites}</Text>
<Text className='stat-label'>收藏</Text>
</View>
</View>
@@ -148,6 +219,21 @@ export default function Profile() {
</CellGroup>
</View>
{/* ========== 退出登录（仅登录后显示） ========== */}
{isLoggedIn && (
<View className='section-card feature-list'>
<CellGroup inset>
<Cell
title='退出登录'
icon='cross'
isLink
border={false}
onClick={handleLogout}
/>
</CellGroup>
</View>
)}
{/* ========== 底部信息 ========== */}
<View className='footer-info'>
<Text className='footer-icp'>湘ICP备2024000000号-1</Text>