feat(mine): 个人中心改为展示登录返回的真实用户信息,移除 mock 数据源
This commit is contained in:
parent
86234d4f1f
commit
b1a9bef903
|
|
@ -1,24 +0,0 @@
|
|||
import { request } from '@/http'
|
||||
|
||||
const USE_MOCK = true
|
||||
|
||||
export interface UserInfo {
|
||||
id: string
|
||||
name: string
|
||||
avatar: string
|
||||
mobile: string
|
||||
loginType: 'mobile' | 'wechat'
|
||||
}
|
||||
|
||||
export function getUserInfo(): Promise<UserInfo> {
|
||||
if (USE_MOCK) {
|
||||
return Promise.resolve({
|
||||
id: 'u-001',
|
||||
name: '张大爷',
|
||||
avatar: '',
|
||||
mobile: '',
|
||||
loginType: 'mobile'
|
||||
})
|
||||
}
|
||||
return request.get<UserInfo>('/user/info')
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
// 白底绿字头像:与渐变头形成对比
|
||||
// 白底绿字头像:与渐变头形成对比(有微信头像时直接展示图片,复用同尺寸)
|
||||
.avatar {
|
||||
width: 132px;
|
||||
height: 132px;
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatarText {
|
||||
|
|
|
|||
|
|
@ -1,24 +1,18 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import { useAppDispatch } from '@/store/hooks'
|
||||
import { useDispatch } from 'react-redux'
|
||||
import { View, Text, Image } from '@tarojs/components'
|
||||
import { clearAuth } from '@/store/authSlice'
|
||||
import { Navbar } from '@/components/navbar'
|
||||
import { ListRow, ListRowGroup } from '@/components/list-row'
|
||||
import { getUserInfo, type UserInfo } from '@/api/user'
|
||||
import { useAppSelector } from '@/store/hooks'
|
||||
import { useToast } from '@/hooks/useToast'
|
||||
import { reLaunch, navigateTo } from '@/utils/navigation'
|
||||
import { ROUTES } from '@/constants/routes'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
export default function Mine() {
|
||||
const dispatch = useAppDispatch()
|
||||
const dispatch = useDispatch()
|
||||
const toast = useToast()
|
||||
const [user, setUser] = useState<UserInfo | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
getUserInfo().then(setUser).catch(() => toast.error('加载用户失败'))
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [])
|
||||
const user = useAppSelector((s) => s.auth.userInfo)
|
||||
|
||||
const logout = () => {
|
||||
dispatch(clearAuth())
|
||||
|
|
@ -30,14 +24,16 @@ export default function Mine() {
|
|||
<View className={styles.page}>
|
||||
<Navbar title="个人中心" autoBack={false} variant="hero" />
|
||||
<View className={styles.header}>
|
||||
{user?.avatar ? (
|
||||
<Image className={styles.avatar} src={user.avatar} mode="aspectFill" />
|
||||
) : (
|
||||
<View className={styles.avatar}>
|
||||
<Text className={styles.avatarText}>{user?.name?.[0] ?? '?'}</Text>
|
||||
<Text className={styles.avatarText}>{user?.nickName?.[0] ?? '?'}</Text>
|
||||
</View>
|
||||
)}
|
||||
<View className={styles.headerInfo}>
|
||||
<Text className={styles.name}>{user?.name ?? '加载中...'}</Text>
|
||||
<Text className={styles.uid}>
|
||||
{user?.loginType === 'mobile' ? '手机号验证码登录' : '微信登录'}
|
||||
</Text>
|
||||
<Text className={styles.name}>{user?.nickName ?? '未登录'}</Text>
|
||||
<Text className={styles.uid}>微信登录</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue