我的页面，及分包页面

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: {

src/pages/user/index.scss

@@ -2,55 +2,207 @@
   min-height: 100vh;
   background-color: #121212;
 
-  .header {
+  // 上部分：背景图和用户信息
-    padding: 60px 32px;
+  .user-header {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    height: 520px;
-    text-align: center;
+    background-size: cover;
-
+    background-position: center;
-    .avatar {
+    background-repeat: no-repeat;
-      width: 120px;
+    position: relative;
-      height: 120px;
-      border-radius: 50%;
-      background: rgba(255, 255, 255, 0.3);
-      margin: 0 auto 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
 
-      .avatar-text {
+    .user-content {
-        font-size: 48px;
+      padding: 0 30px;
-        color: #fff;
+      height: 100%;
-        font-weight: bold;
+
-      }
+      // 用户信息模块
-    }
+      .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;
+            .growth-row {
-      color: #fff;
+              display: flex;
-      font-weight: 500;
+              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 {
+    .service-grid {
-      background: #fff;
-      border-radius: 16px;
-      padding: 32px;
       display: flex;
-      justify-content: space-between;
+      flex-wrap: wrap;
-      align-items: center;
+      justify-content: flex-start;
 
-      .label {
+      .service-item {
-        font-size: 28px;
+        width: 25%;
-        color: #666;
+        display: flex;
-      }
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 50px;
+
+        .service-icon {
+          width: 90px;
+          height: 90px;
+          margin-bottom: 25px;
+        }
 
-      .value {
+        .service-title {
-        font-size: 36px;
+          font-size: 30px;
-        font-weight: bold;
+          color: #FFFFFF;
-        color: #667eea;
+          text-align: center;
+        }
       }
     }
   }

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 (
     <View className="user-page">
-      <View className="header">
+      {/* 上部分：背景图和用户信息 */}
-        <View className="avatar">
+      <View className="user-header" style={{ backgroundImage: `url(${userBg})` }}>
-          <Text className="avatar-text">
+        <View className="user-content">
-            {userStore.userInfo?.nickname?.[0] || '未'}
+          {/* 用户信息模块 */}
-          </Text>
+          <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">
+      <View className="service-section">
-          <Text className="label">账户余额</Text>
+        <Text className="section-title">其他服务</Text>
-          <Text className="value">¥ {userStore.balance.toFixed(2)}</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>

src/pagesUser/accountBalance/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '账户余额',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/accountBalance/index.scss

@@ -0,0 +1,5 @@
+.account-balance-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="account-balance-page">
+      <Text>账户余额</Text>
+    </View>
+  )
+}
+
+export default AccountBalance

src/pagesUser/agreement/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '用户协议',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/agreement/index.scss

@@ -0,0 +1,5 @@
+.agreement-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="agreement-page">
+      <Text>用户协议</Text>
+    </View>
+  )
+}
+
+export default Agreement

src/pagesUser/editProfile/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '编辑资料',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/editProfile/index.scss

@@ -0,0 +1,5 @@
+.edit-profile-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="edit-profile-page">
+      <Text>编辑个人信息</Text>
+    </View>
+  )
+}
+
+export default EditProfile

src/pagesUser/goodsCons/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '商品消费',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/goodsCons/index.scss

@@ -0,0 +1,5 @@
+.goods-cons-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="goods-cons-page">
+      <Text>商品消费</Text>
+    </View>
+  )
+}
+
+export default GoodsCons

src/pagesUser/helpCenter/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '帮助中心',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/helpCenter/index.scss

@@ -0,0 +1,5 @@
+.help-center-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="help-center-page">
+      <Text>帮助中心</Text>
+    </View>
+  )
+}
+
+export default HelpCenter

src/pagesUser/orderList/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '订单记录',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/orderList/index.scss

@@ -0,0 +1,5 @@
+.order-list-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="order-list-page">
+      <Text>订单记录</Text>
+    </View>
+  )
+}
+
+export default OrderList

src/pagesUser/poleStorage/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '存杆柜记录',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/poleStorage/index.scss

@@ -0,0 +1,5 @@
+.pole-storage-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="pole-storage-page">
+      <Text>存杆柜记录</Text>
+    </View>
+  )
+}
+
+export default PoleStorage

src/pagesUser/unsettledOrders/index.config.ts

@@ -0,0 +1,5 @@
+export default {
+  navigationBarTitleText: '未结算账单',
+  navigationBarBackgroundColor: '#FFFFFF',
+  navigationBarTextStyle: 'black',
+}

src/pagesUser/unsettledOrders/index.scss

@@ -0,0 +1,5 @@
+.unsettled-orders-page {
+  min-height: 100vh;
+  background-color: #F2F3F5;
+  padding: 30px;
+}

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 (
+    <View className="unsettled-orders-page">
+      <Text>未结算账单</Text>
+    </View>
+  )
+}
+
+export default UnsettledOrders