|
|
|
|
@ -1,34 +1,161 @@
@@ -1,34 +1,161 @@
|
|
|
|
|
/** |
|
|
|
|
* 个人中心页 |
|
|
|
|
*/ |
|
|
|
|
import { View, Text } from '@tarojs/components' |
|
|
|
|
import { View, Text, Image } from '@tarojs/components' |
|
|
|
|
import { useLoad } from '@tarojs/taro' |
|
|
|
|
import Taro from '@tarojs/taro' |
|
|
|
|
import { observer } from 'mobx-react' |
|
|
|
|
import { Image as TaroifyImage } from '@taroify/core' |
|
|
|
|
import { userStore } from '../../store' |
|
|
|
|
import './index.scss' |
|
|
|
|
|
|
|
|
|
// 导入图片
|
|
|
|
|
import userBg from '../../assets/big/user_bg.png' |
|
|
|
|
import userEdite from '../../assets/icon/user_edite.png' |
|
|
|
|
import zuanIcon from '../../assets/icon/zuan.png' |
|
|
|
|
import sunIcon from '../../assets/icon/sun.png' |
|
|
|
|
import yueIcon from '../../assets/icon/yue.png' |
|
|
|
|
import startIcon from '../../assets/icon/start.png' |
|
|
|
|
import poleStorageIcon from '../../assets/icon/pole_storage.png' |
|
|
|
|
import orderListIcon from '../../assets/icon/order_list.png' |
|
|
|
|
import unsettledOrdersIcon from '../../assets/icon/unsettled_orders.png' |
|
|
|
|
import goodsConsIcon from '../../assets/icon/goods_cons.png' |
|
|
|
|
import helpCenterIcon from '../../assets/icon/help_center.png' |
|
|
|
|
import agreementIcon from '../../assets/icon/agreement.png'; |
|
|
|
|
import myAvatar from '../../assets/icon/my_avatar.png'; |
|
|
|
|
|
|
|
|
|
const UserIndex = observer(() => { |
|
|
|
|
useLoad(() => { |
|
|
|
|
console.log('个人中心页面加载') |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 成长值图标映射（根据实际业务逻辑调整）
|
|
|
|
|
const growthIcons = [zuanIcon, sunIcon, yueIcon, startIcon] |
|
|
|
|
|
|
|
|
|
// 服务项配置
|
|
|
|
|
const serviceItems = [ |
|
|
|
|
{ icon: poleStorageIcon, title: '存杆柜记录', path: '/pagesUser/poleStorage/index' }, |
|
|
|
|
{ icon: orderListIcon, title: '订单记录', path: '/pagesUser/orderList/index' }, |
|
|
|
|
{ icon: unsettledOrdersIcon, title: '未结算账单', path: '/pagesUser/unsettledOrders/index' }, |
|
|
|
|
{ icon: goodsConsIcon, title: '商品消费', path: '/pagesUser/goodsCons/index' }, |
|
|
|
|
{ icon: helpCenterIcon, title: '帮助中心', path: '/pagesUser/helpCenter/index' }, |
|
|
|
|
{ icon: agreementIcon, title: '协议', path: '/pagesUser/agreement/index' }, |
|
|
|
|
] |
|
|
|
|
|
|
|
|
|
// 点击编辑
|
|
|
|
|
const handleEdit = () => { |
|
|
|
|
Taro.navigateTo({ |
|
|
|
|
url: '/pagesUser/editProfile/index' |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 点击账户余额
|
|
|
|
|
const handleBalanceClick = () => { |
|
|
|
|
Taro.navigateTo({ |
|
|
|
|
url: '/pagesUser/accountBalance/index' |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 点击服务项
|
|
|
|
|
const handleServiceClick = (path: string) => { |
|
|
|
|
Taro.navigateTo({ |
|
|
|
|
url: path |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View className="user-page"> |
|
|
|
|
<View className="header"> |
|
|
|
|
<View className="avatar"> |
|
|
|
|
<Text className="avatar-text"> |
|
|
|
|
{userStore.userInfo?.nickname?.[0] || '未'} |
|
|
|
|
</Text> |
|
|
|
|
{/* 上部分：背景图和用户信息 */} |
|
|
|
|
<View className="user-header" style={{ backgroundImage: `url(${userBg})` }}> |
|
|
|
|
<View className="user-content"> |
|
|
|
|
{/* 用户信息模块 */} |
|
|
|
|
<View className="user-info"> |
|
|
|
|
{/* 上半部分：头像、名称、编辑按钮 */} |
|
|
|
|
<View className="user-profile"> |
|
|
|
|
{/* 头像 */} |
|
|
|
|
<View className="avatar-wrapper"> |
|
|
|
|
<TaroifyImage |
|
|
|
|
className="avatar" |
|
|
|
|
src={userStore.userInfo?.avatar || myAvatar} |
|
|
|
|
round |
|
|
|
|
mode="aspectFill" |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
{/* 右侧信息 */} |
|
|
|
|
<View className="profile-right"> |
|
|
|
|
{/* 用户名称和编辑按钮 */} |
|
|
|
|
<View className="name-row"> |
|
|
|
|
<View className="name-edit-wrapper"> |
|
|
|
|
<Text className="username">{userStore.userInfo?.nickname || '旋转跳跃的球圣'}</Text> |
|
|
|
|
<Image |
|
|
|
|
className="edit-icon" |
|
|
|
|
src={userEdite} |
|
|
|
|
onClick={handleEdit} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
<View className="vip-badge">VIP</View> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
{/* 成长值 */} |
|
|
|
|
<View className="growth-row"> |
|
|
|
|
<Text className="growth-label">成长值：</Text> |
|
|
|
|
{growthIcons.map((icon, index) => ( |
|
|
|
|
<Image |
|
|
|
|
key={index} |
|
|
|
|
className="growth-icon" |
|
|
|
|
src={icon} |
|
|
|
|
/> |
|
|
|
|
))} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
{/* 下半部分：账户余额、积分、优惠券 */} |
|
|
|
|
<View className="user-stats"> |
|
|
|
|
<View className="stat-item" onClick={handleBalanceClick}> |
|
|
|
|
<View className="stat-value"> |
|
|
|
|
<Text className="stat-symbol">¥</Text> |
|
|
|
|
<Text className="stat-number">{userStore.balance.toFixed(2)}</Text> |
|
|
|
|
</View> |
|
|
|
|
<Text className="stat-label">账户余额</Text> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View className="stat-item"> |
|
|
|
|
<View className="stat-value"> |
|
|
|
|
<Text className="stat-number">1000</Text> |
|
|
|
|
<Text className="stat-unit">分</Text> |
|
|
|
|
</View> |
|
|
|
|
<Text className="stat-label">积分</Text> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View className="stat-item"> |
|
|
|
|
<View className="stat-value"> |
|
|
|
|
<Text className="stat-number">6</Text> |
|
|
|
|
<Text className="stat-unit">张</Text> |
|
|
|
|
</View> |
|
|
|
|
<Text className="stat-label">优惠券</Text> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
<Text className="nickname"> |
|
|
|
|
{userStore.userInfo?.nickname || '未登录'} |
|
|
|
|
</Text> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View className="content"> |
|
|
|
|
<View className="info-card"> |
|
|
|
|
<Text className="label">账户余额</Text> |
|
|
|
|
<Text className="value">¥ {userStore.balance.toFixed(2)}</Text> |
|
|
|
|
|
|
|
|
|
{/* 下部分：其他服务 */} |
|
|
|
|
<View className="service-section"> |
|
|
|
|
<Text className="section-title">其他服务</Text> |
|
|
|
|
|
|
|
|
|
<View className="service-grid"> |
|
|
|
|
{serviceItems.map((item, index) => ( |
|
|
|
|
<View |
|
|
|
|
key={index} |
|
|
|
|
className="service-item" |
|
|
|
|
onClick={() => handleServiceClick(item.path)} |
|
|
|
|
> |
|
|
|
|
<Image className="service-icon" src={item.icon} /> |
|
|
|
|
<Text className="service-title">{item.title}</Text> |
|
|
|
|
</View> |
|
|
|
|
))} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
|
