diff --git a/src/app.config.ts b/src/app.config.ts index 58d5929..ee068e1 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -15,6 +15,20 @@ export default defineAppConfig({ pages: [ 'mapStore/index', // 地图找店页面 ] + }, + { + root: 'pagesUser', + name: 'user-package', + pages: [ + 'poleStorage/index', // 存杆柜记录 + 'orderList/index', // 订单记录 + 'unsettledOrders/index', // 未结算账单 + 'goodsCons/index', // 商品消费 + 'helpCenter/index', // 帮助中心 + 'agreement/index', // 协议 + 'editProfile/index', // 编辑资料 + 'accountBalance/index', // 账户余额 + ] } ], // 分包预下载规则 @@ -22,6 +36,10 @@ export default defineAppConfig({ 'pages/store/index': { network: 'all', packages: ['store-package'] + }, + 'pages/user/index': { + network: 'all', + packages: ['user-package'] } }, window: { diff --git a/src/assets/big/user_bg.png b/src/assets/big/user_bg.png new file mode 100644 index 0000000..948b914 Binary files /dev/null and b/src/assets/big/user_bg.png differ diff --git a/src/assets/icon/agreement.png b/src/assets/icon/agreement.png new file mode 100644 index 0000000..e4e53f8 Binary files /dev/null and b/src/assets/icon/agreement.png differ diff --git a/src/assets/icon/goods_cons.png b/src/assets/icon/goods_cons.png new file mode 100644 index 0000000..fe0ae58 Binary files /dev/null and b/src/assets/icon/goods_cons.png differ diff --git a/src/assets/icon/half_star.png b/src/assets/icon/half_star.png new file mode 100644 index 0000000..3b78d83 Binary files /dev/null and b/src/assets/icon/half_star.png differ diff --git a/src/assets/icon/help_center.png b/src/assets/icon/help_center.png new file mode 100644 index 0000000..8d800f4 Binary files /dev/null and b/src/assets/icon/help_center.png differ diff --git a/src/assets/icon/my_avatar.png b/src/assets/icon/my_avatar.png new file mode 100644 index 0000000..dfec43e Binary files /dev/null and b/src/assets/icon/my_avatar.png differ diff --git a/src/assets/icon/order_list.png b/src/assets/icon/order_list.png new file mode 100644 index 0000000..b491051 Binary files /dev/null and b/src/assets/icon/order_list.png differ diff --git a/src/assets/icon/pole_storage.png b/src/assets/icon/pole_storage.png new file mode 100644 index 0000000..1d49b10 Binary files /dev/null and b/src/assets/icon/pole_storage.png differ diff --git a/src/assets/icon/start.png b/src/assets/icon/start.png new file mode 100644 index 0000000..85624bf Binary files /dev/null and b/src/assets/icon/start.png differ diff --git a/src/assets/icon/sun.png b/src/assets/icon/sun.png new file mode 100644 index 0000000..4e1322c Binary files /dev/null and b/src/assets/icon/sun.png differ diff --git a/src/assets/icon/unsettled_orders.png b/src/assets/icon/unsettled_orders.png new file mode 100644 index 0000000..5bafefd Binary files /dev/null and b/src/assets/icon/unsettled_orders.png differ diff --git a/src/assets/icon/user_edite.png b/src/assets/icon/user_edite.png new file mode 100644 index 0000000..27bf9e1 Binary files /dev/null and b/src/assets/icon/user_edite.png differ diff --git a/src/assets/icon/yue.png b/src/assets/icon/yue.png new file mode 100644 index 0000000..37683b8 Binary files /dev/null and b/src/assets/icon/yue.png differ diff --git a/src/assets/icon/zuan.png b/src/assets/icon/zuan.png new file mode 100644 index 0000000..411216a Binary files /dev/null and b/src/assets/icon/zuan.png differ diff --git a/src/pages/user/index.scss b/src/pages/user/index.scss index 0f7669b..f9eb6a9 100644 --- a/src/pages/user/index.scss +++ b/src/pages/user/index.scss @@ -2,55 +2,207 @@ min-height: 100vh; background-color: #121212; - .header { - padding: 60px 32px; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - text-align: center; - - .avatar { - width: 120px; - height: 120px; - border-radius: 50%; - background: rgba(255, 255, 255, 0.3); - margin: 0 auto 20px; - display: flex; - align-items: center; - justify-content: center; + // 上部分：背景图和用户信息 + .user-header { + height: 520px; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + position: relative; - .avatar-text { - font-size: 48px; - color: #fff; - font-weight: bold; - } - } + .user-content { + padding: 0 30px; + height: 100%; + + // 用户信息模块 + .user-info { + padding-top: 180px; + + // 上半部分：头像、名称、编辑按钮 + .user-profile { + display: flex; + align-items: flex-start; + + // 头像包裹器 + .avatar-wrapper { + width: 125px; + height: 125px; + margin-right: 40px; + flex-shrink: 0; + + .avatar { + width: 100%; + height: 100%; + display: block; + } + + :global { + .taroify-image { + width: 100%; + height: 100%; + display: block; + } + + .taroify-image__img { + width: 100%; + height: 100%; + object-fit: cover; + } + } + } + + // 右侧信息 + .profile-right { + flex: 1; + min-width: 0; // 关键：确保flex子元素可以收缩 + + // 用户名称和编辑按钮 + .name-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 30px; + + .name-edit-wrapper { + display: flex; + align-items: center; + flex: 1; + min-width: 0; // 关键：确保内容可以收缩 + + .username { + font-weight: 400; + font-size: 33rpx; + color: #FFFFFF; + white-space: nowrap; // 不换行 + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + .edit-icon { + width: 30px; + height: 30px; + margin-left: 25px; + flex-shrink: 0; + } + } + + .vip-badge { + margin-left: 20px; + padding: 5px 20px; + background: linear-gradient(90deg, #FFD700, #FFA500); + border-radius: 20px; + font-size: 25rpx; + font-weight: bold; + color: #000; + flex-shrink: 0; + } + } - .nickname { - font-size: 32px; - color: #fff; - font-weight: 500; + // 成长值 + .growth-row { + display: flex; + align-items: center; + + .growth-label { + font-size: 25rpx; + color: #999999; + margin-right: 10px; + flex-shrink: 0; + } + + .growth-icon { + width: 30px; + height: 30px; + margin-right: 10px; + flex-shrink: 0; + } + } + } + } + + // 下半部分：账户余额、积分、优惠券 + .user-stats { + margin-top: 40px; + display: flex; + justify-content: space-between; + align-items: center; + + .stat-item { + width: 217rpx; + height: 142rpx; + background: linear-gradient(180deg, #282832, #0E0D0D); + border-radius: 13rpx; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + .stat-value { + display: flex; + align-items: baseline; + + .stat-symbol, + .stat-unit { + font-size: 25px; + color: #FFFFFF; + } + + .stat-number { + font-size: 40rpx; + color: #FFFFFF; + font-weight: 500; + } + } + + .stat-label { + margin-top: 27px; + font-size: 25rpx; + color: #B8B8B8; + } + } + } + } } } - .content { - padding: 32px; + // 下部分：其他服务 + .service-section { + background-color: #121212; + padding: 33px 30px 0; + border-radius: 16px 16px 0 0; + + .section-title { + font-weight: bold; + font-size: 31rpx; + color: #999999; + display: block; + margin-bottom: 30px; + } - .info-card { - background: #fff; - border-radius: 16px; - padding: 32px; + .service-grid { display: flex; - justify-content: space-between; - align-items: center; + flex-wrap: wrap; + justify-content: flex-start; - .label { - font-size: 28px; - color: #666; - } + .service-item { + width: 25%; + display: flex; + flex-direction: column; + align-items: center; + margin-bottom: 50px; + + .service-icon { + width: 90px; + height: 90px; + margin-bottom: 25px; + } - .value { - font-size: 36px; - font-weight: bold; - color: #667eea; + .service-title { + font-size: 30px; + color: #FFFFFF; + text-align: center; + } } } } diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index d597ed3..09da671 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -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 ( - - - - {userStore.userInfo?.nickname?.[0] || '未'} - + {/* 上部分：背景图和用户信息 */} + + + {/* 用户信息模块 */} + + {/* 上半部分：头像、名称、编辑按钮 */} + + {/* 头像 */} + + + + + {/* 右侧信息 */} + + {/* 用户名称和编辑按钮 */} + + + {userStore.userInfo?.nickname || '旋转跳跃的球圣'} + + + VIP + + + {/* 成长值 */} + + 成长值： + {growthIcons.map((icon, index) => ( + + ))} + + + + + {/* 下半部分：账户余额、积分、优惠券 */} + + + + ¥ + {userStore.balance.toFixed(2)} + + 账户余额 + + + + + 1000 + 分 + + 积分 + + + + + 6 + 张 + + 优惠券 + + + - - {userStore.userInfo?.nickname || '未登录'} - - - - - 账户余额 - ¥ {userStore.balance.toFixed(2)} + + {/* 下部分：其他服务 */} + + 其他服务 + + + {serviceItems.map((item, index) => ( + handleServiceClick(item.path)} + > + + {item.title} + + ))} diff --git a/src/pagesUser/accountBalance/index.config.ts b/src/pagesUser/accountBalance/index.config.ts new file mode 100644 index 0000000..4811985 --- /dev/null +++ b/src/pagesUser/accountBalance/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '账户余额', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/accountBalance/index.scss b/src/pagesUser/accountBalance/index.scss new file mode 100644 index 0000000..471fdbb --- /dev/null +++ b/src/pagesUser/accountBalance/index.scss @@ -0,0 +1,5 @@ +.account-balance-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/accountBalance/index.tsx b/src/pagesUser/accountBalance/index.tsx new file mode 100644 index 0000000..114c116 --- /dev/null +++ b/src/pagesUser/accountBalance/index.tsx @@ -0,0 +1,20 @@ +/** + * 账户余额详情页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const AccountBalance = () => { + useLoad(() => { + console.log('账户余额详情页面加载') + }) + + return ( + + 账户余额 + + ) +} + +export default AccountBalance diff --git a/src/pagesUser/agreement/index.config.ts b/src/pagesUser/agreement/index.config.ts new file mode 100644 index 0000000..a947c9a --- /dev/null +++ b/src/pagesUser/agreement/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '用户协议', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/agreement/index.scss b/src/pagesUser/agreement/index.scss new file mode 100644 index 0000000..c1f6542 --- /dev/null +++ b/src/pagesUser/agreement/index.scss @@ -0,0 +1,5 @@ +.agreement-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/agreement/index.tsx b/src/pagesUser/agreement/index.tsx new file mode 100644 index 0000000..0169c72 --- /dev/null +++ b/src/pagesUser/agreement/index.tsx @@ -0,0 +1,20 @@ +/** + * 协议页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const Agreement = () => { + useLoad(() => { + console.log('协议页面加载') + }) + + return ( + + 用户协议 + + ) +} + +export default Agreement diff --git a/src/pagesUser/editProfile/index.config.ts b/src/pagesUser/editProfile/index.config.ts new file mode 100644 index 0000000..bda938d --- /dev/null +++ b/src/pagesUser/editProfile/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '编辑资料', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/editProfile/index.scss b/src/pagesUser/editProfile/index.scss new file mode 100644 index 0000000..68cecc1 --- /dev/null +++ b/src/pagesUser/editProfile/index.scss @@ -0,0 +1,5 @@ +.edit-profile-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/editProfile/index.tsx b/src/pagesUser/editProfile/index.tsx new file mode 100644 index 0000000..2b91266 --- /dev/null +++ b/src/pagesUser/editProfile/index.tsx @@ -0,0 +1,20 @@ +/** + * 编辑个人信息页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const EditProfile = () => { + useLoad(() => { + console.log('编辑个人信息页面加载') + }) + + return ( + + 编辑个人信息 + + ) +} + +export default EditProfile diff --git a/src/pagesUser/goodsCons/index.config.ts b/src/pagesUser/goodsCons/index.config.ts new file mode 100644 index 0000000..0e7f4ed --- /dev/null +++ b/src/pagesUser/goodsCons/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '商品消费', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/goodsCons/index.scss b/src/pagesUser/goodsCons/index.scss new file mode 100644 index 0000000..c38251f --- /dev/null +++ b/src/pagesUser/goodsCons/index.scss @@ -0,0 +1,5 @@ +.goods-cons-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/goodsCons/index.tsx b/src/pagesUser/goodsCons/index.tsx new file mode 100644 index 0000000..aefa19e --- /dev/null +++ b/src/pagesUser/goodsCons/index.tsx @@ -0,0 +1,20 @@ +/** + * 商品消费页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const GoodsCons = () => { + useLoad(() => { + console.log('商品消费页面加载') + }) + + return ( + + 商品消费 + + ) +} + +export default GoodsCons diff --git a/src/pagesUser/helpCenter/index.config.ts b/src/pagesUser/helpCenter/index.config.ts new file mode 100644 index 0000000..15fdb13 --- /dev/null +++ b/src/pagesUser/helpCenter/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '帮助中心', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/helpCenter/index.scss b/src/pagesUser/helpCenter/index.scss new file mode 100644 index 0000000..fb70232 --- /dev/null +++ b/src/pagesUser/helpCenter/index.scss @@ -0,0 +1,5 @@ +.help-center-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/helpCenter/index.tsx b/src/pagesUser/helpCenter/index.tsx new file mode 100644 index 0000000..8045663 --- /dev/null +++ b/src/pagesUser/helpCenter/index.tsx @@ -0,0 +1,20 @@ +/** + * 帮助中心页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const HelpCenter = () => { + useLoad(() => { + console.log('帮助中心页面加载') + }) + + return ( + + 帮助中心 + + ) +} + +export default HelpCenter diff --git a/src/pagesUser/orderList/index.config.ts b/src/pagesUser/orderList/index.config.ts new file mode 100644 index 0000000..41493a2 --- /dev/null +++ b/src/pagesUser/orderList/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '订单记录', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/orderList/index.scss b/src/pagesUser/orderList/index.scss new file mode 100644 index 0000000..5486525 --- /dev/null +++ b/src/pagesUser/orderList/index.scss @@ -0,0 +1,5 @@ +.order-list-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/orderList/index.tsx b/src/pagesUser/orderList/index.tsx new file mode 100644 index 0000000..b34c865 --- /dev/null +++ b/src/pagesUser/orderList/index.tsx @@ -0,0 +1,20 @@ +/** + * 订单记录页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const OrderList = () => { + useLoad(() => { + console.log('订单记录页面加载') + }) + + return ( + + 订单记录 + + ) +} + +export default OrderList diff --git a/src/pagesUser/poleStorage/index.config.ts b/src/pagesUser/poleStorage/index.config.ts new file mode 100644 index 0000000..3410d0e --- /dev/null +++ b/src/pagesUser/poleStorage/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '存杆柜记录', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/poleStorage/index.scss b/src/pagesUser/poleStorage/index.scss new file mode 100644 index 0000000..cf5387b --- /dev/null +++ b/src/pagesUser/poleStorage/index.scss @@ -0,0 +1,5 @@ +.pole-storage-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/poleStorage/index.tsx b/src/pagesUser/poleStorage/index.tsx new file mode 100644 index 0000000..63ef758 --- /dev/null +++ b/src/pagesUser/poleStorage/index.tsx @@ -0,0 +1,20 @@ +/** + * 存杆柜记录页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const PoleStorage = () => { + useLoad(() => { + console.log('存杆柜记录页面加载') + }) + + return ( + + 存杆柜记录 + + ) +} + +export default PoleStorage diff --git a/src/pagesUser/unsettledOrders/index.config.ts b/src/pagesUser/unsettledOrders/index.config.ts new file mode 100644 index 0000000..bb2dd3a --- /dev/null +++ b/src/pagesUser/unsettledOrders/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '未结算账单', + navigationBarBackgroundColor: '#FFFFFF', + navigationBarTextStyle: 'black', +} diff --git a/src/pagesUser/unsettledOrders/index.scss b/src/pagesUser/unsettledOrders/index.scss new file mode 100644 index 0000000..aa5dddd --- /dev/null +++ b/src/pagesUser/unsettledOrders/index.scss @@ -0,0 +1,5 @@ +.unsettled-orders-page { + min-height: 100vh; + background-color: #F2F3F5; + padding: 30px; +} diff --git a/src/pagesUser/unsettledOrders/index.tsx b/src/pagesUser/unsettledOrders/index.tsx new file mode 100644 index 0000000..0ccbec1 --- /dev/null +++ b/src/pagesUser/unsettledOrders/index.tsx @@ -0,0 +1,20 @@ +/** + * 未结算账单页 + */ +import { View, Text } from '@tarojs/components' +import { useLoad } from '@tarojs/taro' +import './index.scss' + +const UnsettledOrders = () => { + useLoad(() => { + console.log('未结算账单页面加载') + }) + + return ( + + 未结算账单 + + ) +} + +export default UnsettledOrders