个人中心静态界面0.5

enum/commonEnum.js

@@ -14,5 +14,12 @@ export const commonEnum = {
   LEASE_BACKGROUND: 'https://api.ccttiot.com/image-1755063111406.png',
   FIRE: 'https://api.ccttiot.com/image-1755063906561.png',
   DOWN_ARROW: 'https://api.ccttiot.com/image-1755068355306.png',
+  FIRE_BACKGROUND: 'https://api.ccttiot.com/image-1755070666020.png',
+  COIN_BACKGROUND: 'https://api.ccttiot.com/image-1755070887001.png',
+  REQUEST_AGENT: 'https://api.ccttiot.com/image-1755071317260.png',
+  AGENCY_INTERESTS: 'https://api.ccttiot.com/image-1755071348347.png',
+  ONLINE_CUSTOMER_SERVICE: 'https://api.ccttiot.com/image-1755071362176.png',
+  SET: 'https://api.ccttiot.com/image-1755071734792.png',
+  GIFT: 'https://api.ccttiot.com/image-1755071830648.png',
 }
 export default commonEnum

pages/profile/profile.vue

@@ -1,364 +1,453 @@
 <template>
   <view class="profile-page">
-    <!-- 状态栏 -->
+
-    <view class="status-bar">
+
-      <text class="time">9:41</text>
+    <!-- 页面标题 -->
-      <view class="status-icons">
+    <view class="page-title">
-        <text class="signal">📶</text>
+      <text class="title-text">个人中心</text>
-        <text class="wifi">📶</text>
-        <text class="battery">🔋</text>
-      </view>
     </view>
 
     <!-- 头部用户信息 -->
     <view class="user-header">
       <view class="user-info">
         <view class="avatar">
-          <text class="avatar-text">张</text>
+          <text class="avatar-text">昵</text>
         </view>
         <view class="user-details">
-          <text class="user-name">张珊珊</text>
+          <text class="user-name">昵称</text>
-          <text class="user-phone">138****8888</text>
+          <text class="user-id">123****8912</text>
+        </view>
+        <view class="settings-icon">
+          <image :src="commonEnum.SET" class="settings-img" mode="aspectFit"></image>
         </view>
       </view>
-      <view class="edit-btn">
+      <view class="share-btn">
-        <text class="edit-icon">✏️</text>
+        <image :src="commonEnum.GIFT" class="share-img" mode="aspectFit"></image>
+        <text class="share-text">分享推广</text>
       </view>
     </view>
 
-    <!-- 统计信息 -->
+    <!-- 财务摘要 -->
-    <view class="stats-section">
+    <view class="financial-summary">
-      <view class="stat-item">
+      <image :src="commonEnum.COIN_BACKGROUND" class="coin-background" mode="aspectFill"></image>
-        <text class="stat-number">2</text>
+      <view class="main-amount">
-        <text class="stat-label">租赁设备</text>
+        <text class="amount-number">18079.29</text>
+        <text class="amount-label">可提现(元)</text>
       </view>
-      <view class="stat-item">
+      <view class="action-buttons">
-        <text class="stat-number">¥200.20</text>
+        <view class="action-btn">
-        <text class="stat-label">累计租金</text>
+          <text class="btn-text">收支明细 ></text>
-      </view>
-      <view class="stat-item">
-        <text class="stat-number">365</text>
-        <text class="stat-label">租赁天数</text>
-      </view>
-    </view>
-
-    <!-- 功能菜单 -->
-    <view class="menu-section">
-      <view class="menu-group">
-        <view class="menu-item" @click="goToMyLeases">
-          <view class="menu-left">
-            <text class="menu-icon">📋</text>
-            <text class="menu-title">我的租赁</text>
-          </view>
-          <text class="menu-arrow">></text>
         </view>
-        
+        <view class="action-btn">
-        <view class="menu-item" @click="goToPayments">
+          <text class="btn-text">立即提现 ></text>
-          <view class="menu-left">
-            <text class="menu-icon">💰</text>
-            <text class="menu-title">支付记录</text>
-          </view>
-          <text class="menu-arrow">></text>
-        </view>
-        
-        <view class="menu-item" @click="goToAddress">
-          <view class="menu-left">
-            <text class="menu-icon">📍</text>
-            <text class="menu-title">收货地址</text>
-          </view>
-          <text class="menu-arrow">></text>
         </view>
       </view>
-
+      <view class="financial-stats">
-      <view class="menu-group">
+        <view class="stat-item">
-        <view class="menu-item" @click="goToSettings">
+          <text class="stat-number">399.59</text>
-          <view class="menu-left">
+          <text class="stat-label">待入账(元)</text>
-            <text class="menu-icon">⚙️</text>
-            <text class="menu-title">设置</text>
-          </view>
-          <text class="menu-arrow">></text>
         </view>
-        
+        <view class="stat-item">
-        <view class="menu-item" @click="goToHelp">
+          <text class="stat-number">9.59</text>
-          <view class="menu-left">
+          <text class="stat-label">提现中(元)</text>
-            <text class="menu-icon">❓</text>
-            <text class="menu-title">帮助中心</text>
-          </view>
-          <text class="menu-arrow">></text>
         </view>
-        
+        <view class="stat-item">
-        <view class="menu-item" @click="goToAbout">
+          <text class="stat-number">999.59</text>
-          <view class="menu-left">
+          <text class="stat-label">已提现(元)</text>
-            <text class="menu-icon">ℹ️</text>
-            <text class="menu-title">关于我们</text>
-          </view>
-          <text class="menu-arrow">></text>
         </view>
       </view>
     </view>
 
-    <!-- 退出登录 -->
+    <!-- 我的用户 -->
-    <view class="logout-section">
+    <view class="my-users-section">
-      <button class="logout-btn" @click="handleLogout">退出登录</button>
+      <view class="section-header">
+        <text class="section-title">我的用户</text>
+        <view class="view-details">
+          <text class="details-text">查看详情 ></text>
+        </view>
+      </view>
+      <view class="user-stats">
+        <view class="stat-item">
+          <text class="stat-number">30</text>
+          <text class="stat-label">名下用户(个)</text>
+        </view>
+        <view class="stat-item">
+          <text class="stat-number">30</text>
+          <text class="stat-label">租赁数量(个)</text>
+        </view>
+        <view class="stat-item">
+          <text class="stat-number">3000</text>
+          <text class="stat-label">租赁金额(元)</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 其他功能 -->
+    <view class="other-functions">
+      <view class="section-header">
+        <text class="section-title">其他功能</text>
+      </view>
+      <view class="function-grid">
+        <view class="function-item" @click="goToAgentApply">
+          <view class="function-icon">
+            <image :src="commonEnum.REQUEST_AGENT" class="function-img" mode="aspectFit"></image>
+          </view>
+          <text class="function-text">申请代理</text>
+        </view>
+        <view class="function-item" @click="goToAgentBenefits">
+          <view class="function-icon">
+            <image :src="commonEnum.AGENCY_INTERESTS" class="function-img" mode="aspectFit"></image>
+          </view>
+          <text class="function-text">代理权益</text>
+        </view>
+        <view class="function-item" @click="goToCustomerService">
+          <view class="function-icon">
+            <image
+              :src="commonEnum.ONLINE_CUSTOMER_SERVICE"
+              class="function-img"
+              mode="aspectFit"
+            ></image>
+          </view>
+          <text class="function-text">在线客服</text>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
+import { commonEnum } from '@/enum/commonEnum.js'
+
 export default {
   name: 'ProfilePage',
   data() {
     return {
+      commonEnum,
       userInfo: {
-        name: '张珊珊',
+        name: '昵称',
-        phone: '138****8888',
+        id: '123****8912',
-        avatar: '张'
+      },
+      financialData: {
+        withdrawable: '18079.29',
+        pending: '399.59',
+        withdrawing: '9.59',
+        withdrawn: '999.59',
+      },
+      userStats: {
+        users: 30,
+        leases: 30,
+        amount: 3000,
       },
-      stats: {
-        leaseCount: 2,
-        totalRent: '¥200.20',
-        leaseDays: 365
-      }
     }
   },
   methods: {
-    goToMyLeases() {
+    goToAgentApply() {
       uni.showToast({
-        title: '我的租赁',
+        title: '申请代理',
-        icon: 'none'
+        icon: 'none',
       })
     },
-    goToPayments() {
+    goToAgentBenefits() {
       uni.showToast({
-        title: '支付记录',
+        title: '代理权益',
-        icon: 'none'
+        icon: 'none',
       })
     },
-    goToAddress() {
+    goToCustomerService() {
       uni.showToast({
-        title: '收货地址',
+        title: '在线客服',
-        icon: 'none'
+        icon: 'none',
       })
     },
-    goToSettings() {
+  },
-      uni.showToast({
-        title: '设置',
-        icon: 'none'
-      })
-    },
-    goToHelp() {
-      uni.showToast({
-        title: '帮助中心',
-        icon: 'none'
-      })
-    },
-    goToAbout() {
-      uni.showToast({
-        title: '关于我们',
-        icon: 'none'
-      })
-    },
-    handleLogout() {
-      uni.showModal({
-        title: '确认退出',
-        content: '确定要退出登录吗？',
-        success: (res) => {
-          if (res.confirm) {
-            uni.showToast({
-              title: '已退出登录',
-              icon: 'success'
-            })
-            // 跳转到登录页
-            setTimeout(() => {
-              uni.reLaunch({
-                url: '/pages/login/login'
-              })
-            }, 1500)
-          }
-        }
-      })
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .profile-page {
   min-height: 100vh;
-  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+  background: #f5f5f5;
-  padding-bottom: 120rpx; /* 为tabBar留出空间 */
+  padding-bottom: 120rpx;
 }
 
-// 状态栏
+// 页面标题
-.status-bar {
+.page-title {
-  display: flex;
+  text-align: center;
-  justify-content: space-between;
+  padding: 40rpx 0 20rpx 0;
-  align-items: center;
-  padding: 20rpx 40rpx;
-  color: #fff;
-  font-size: 28rpx;
   
-  .status-icons {
+  .title-text {
-    display: flex;
+    font-size: 36rpx;
-    gap: 10rpx;
+    font-weight: bold;
+    color: #333;
   }
 }
 
 // 用户头部
 .user-header {
-  display: flex;
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
-  justify-content: space-between;
-  align-items: center;
   padding: 40rpx;
-  color: #fff;
+  margin: 20rpx;
-  
+  border-radius: 20rpx;
+  position: relative;
+
   .user-info {
     display: flex;
     align-items: center;
-    
+    margin-bottom: 30rpx;
+
     .avatar {
-      width: 120rpx;
+      width: 100rpx;
-      height: 120rpx;
+      height: 100rpx;
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba(255, 255, 255, 0.3);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-right: 30rpx;
-      
+
       .avatar-text {
-        font-size: 48rpx;
+        font-size: 40rpx;
         font-weight: bold;
         color: #fff;
       }
     }
-    
+
     .user-details {
+      flex: 1;
+
       .user-name {
         display: block;
-        font-size: 36rpx;
+        font-size: 32rpx;
         font-weight: bold;
+        color: #fff;
         margin-bottom: 10rpx;
       }
-      
+
-      .user-phone {
+      .user-id {
         font-size: 28rpx;
-        opacity: 0.8;
+        color: rgba(255, 255, 255, 0.8);
       }
     }
-  }
-  
-  .edit-btn {
-    width: 60rpx;
-    height: 60rpx;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
-    .edit-icon {
-      font-size: 32rpx;
-    }
-  }
-}
 
-// 统计信息
+    .settings-icon {
-.stats-section {
+      width: 60rpx;
-  background: #fff;
+      height: 60rpx;
-  margin: 0 40rpx;
+      background: rgba(255, 255, 255, 0.2);
-  border-radius: 20rpx;
+      border-radius: 50%;
-  padding: 40rpx;
-  display: flex;
-  justify-content: space-around;
-  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
-  
-  .stat-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    
-    .stat-number {
-      font-size: 36rpx;
-      font-weight: bold;
-      color: #ff9a9e;
-      margin-bottom: 10rpx;
-    }
-    
-    .stat-label {
-      font-size: 24rpx;
-      color: #666;
-    }
-  }
-}
-
-// 菜单区域
-.menu-section {
-  margin: 40rpx;
-  
-  .menu-group {
-    background: #fff;
-    border-radius: 20rpx;
-    margin-bottom: 30rpx;
-    overflow: hidden;
-    box-shadow: 0 5rpx 20rpx rgba(0, 0, 0, 0.05);
-    
-    .menu-item {
       display: flex;
-      justify-content: space-between;
       align-items: center;
-      padding: 30rpx 40rpx;
+      justify-content: center;
-      border-bottom: 2rpx solid #f5f5f5;
+
-      
+      .settings-img {
-      &:last-child {
+        width: 40rpx;
-        border-bottom: none;
+        height: 40rpx;
-      }
-      
-      .menu-left {
-        display: flex;
-        align-items: center;
-        
-        .menu-icon {
-          font-size: 40rpx;
-          margin-right: 30rpx;
-        }
-        
-        .menu-title {
-          font-size: 32rpx;
-          color: #333;
-        }
-      }
-      
-      .menu-arrow {
-        font-size: 28rpx;
-        color: #999;
-      }
-      
-      &:active {
-        background: #f8f9fa;
       }
     }
   }
-}
 
-// 退出登录
+  .share-btn {
-.logout-section {
+    position: absolute;
-  margin: 40rpx;
+    top: 40rpx;
-  
+    right: 40rpx;
-  .logout-btn {
+    background: rgba(255, 255, 255, 0.2);
-    width: 100%;
+    padding: 20rpx 30rpx;
-    height: 100rpx;
+    border-radius: 30rpx;
-    background: #fff;
+    display: flex;
-    color: #ff4757;
+    align-items: center;
-    border: 2rpx solid #ff4757;
+
-    border-radius: 50rpx;
+    .share-img {
-    font-size: 32rpx;
+      width: 32rpx;
-    font-weight: bold;
+      height: 32rpx;
-    
+      margin-right: 10rpx;
-    &:active {
+    }
-      background: #ff4757;
+
+    .share-text {
+      font-size: 24rpx;
       color: #fff;
     }
   }
 }
-</style> 
+
+// 财务摘要
+.financial-summary {
+  background: #f15a04;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  padding: 40rpx;
+  color: #fff;
+  position: relative;
+  overflow: hidden;
+
+  .coin-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.1;
+    z-index: 1;
+  }
+
+  .main-amount {
+    text-align: center;
+    margin-bottom: 40rpx;
+    position: relative;
+    z-index: 2;
+
+    .amount-number {
+      display: block;
+      font-size: 60rpx;
+      font-weight: bold;
+      margin-bottom: 10rpx;
+    }
+
+    .amount-label {
+      font-size: 28rpx;
+      opacity: 0.9;
+    }
+  }
+
+  .action-buttons {
+    position: absolute;
+    top: 40rpx;
+    right: 40rpx;
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+    z-index: 2;
+
+    .action-btn {
+      background: rgba(255, 255, 255, 0.2);
+      padding: 15rpx 25rpx;
+      border-radius: 20rpx;
+
+      .btn-text {
+        font-size: 24rpx;
+        color: #fff;
+      }
+    }
+  }
+
+  .financial-stats {
+    display: flex;
+    justify-content: space-around;
+    position: relative;
+    z-index: 2;
+
+    .stat-item {
+      text-align: center;
+
+      .stat-number {
+        display: block;
+        font-size: 32rpx;
+        font-weight: bold;
+        margin-bottom: 5rpx;
+      }
+
+      .stat-label {
+        font-size: 24rpx;
+        opacity: 0.8;
+      }
+    }
+  }
+}
+
+// 我的用户
+.my-users-section {
+  background: #fff;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  padding: 40rpx;
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30rpx;
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333;
+    }
+
+    .view-details {
+      .details-text {
+        font-size: 28rpx;
+        color: #f15a04;
+      }
+    }
+  }
+
+  .user-stats {
+    display: flex;
+    justify-content: space-around;
+
+    .stat-item {
+      text-align: center;
+
+      .stat-number {
+        display: block;
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #f15a04;
+        margin-bottom: 10rpx;
+      }
+
+      .stat-label {
+        font-size: 24rpx;
+        color: #666;
+      }
+    }
+  }
+}
+
+// 其他功能
+.other-functions {
+  background: #fff;
+  margin: 20rpx;
+  border-radius: 20rpx;
+  padding: 40rpx;
+
+  .section-header {
+    margin-bottom: 30rpx;
+
+    .section-title {
+      font-size: 32rpx;
+      font-weight: bold;
+      color: #333;
+    }
+  }
+
+  .function-grid {
+    display: flex;
+    justify-content: space-around;
+
+    .function-item {
+      text-align: center;
+      flex: 1;
+
+      .function-icon {
+        width: 80rpx;
+        height: 80rpx;
+        background: #f5f5f5;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto 20rpx;
+
+        .function-img {
+          width: 50rpx;
+          height: 50rpx;
+        }
+      }
+
+      .function-text {
+        font-size: 24rpx;
+        color: #333;
+      }
+    }
+  }
+}
+</style>