我的页面

pages/mine/index.vue

@@ -1,90 +1,96 @@
 <template>
-  <view class="mine-container" :style="{height: `${windowHeight}px`}">
-    <!--顶部个人信息栏-->
-    <view class="header-section">
-      <view class="flex padding justify-between">
-        <view class="flex align-center">
-          <view v-if="!avatar" class="cu-avatar xl round bg-white">
-            <view class="iconfont icon-people text-gray icon"></view>
-          </view>
-          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
-          </image>
-          <view v-if="!name" @click="handleToLogin" class="login-tip">
-            点击登录
-          </view>
-          <view v-if="name" @click="handleToInfo" class="user-info">
-            <view class="u_title">
-              用户名：{{ name }}
-            </view>
+  <view class="mine-container">
+    <!-- 顶部标题 -->
+    <view class="header-title">
+      <text class="title-text">我的</text>
+    </view>
+
+    <!-- 用户登录/注册卡片 -->
+    <view class="login-card" @click="handleLoginCardClick">
+      <view class="login-card-content">
+        <view class="avatar-section">
+          <view v-if="!avatar" class="avatar-placeholder">
+            <view class="iconfont icon-people avatar-icon"></view>
           </view>
+          <image v-if="avatar" :src="avatar" class="avatar-image" mode="aspectFill"></image>
         </view>
-        <view @click="handleToInfo" class="flex align-center">
-          <text>个人信息</text>
-          <view class="iconfont icon-right"></view>
+        <view class="login-info">
+          <view v-if="!name" class="login-text">点击登录/注册</view>
+          <view v-else class="user-name">{{ name }}</view>
+          <view v-if="!name" class="login-desc">登录后获取更多功能信息</view>
         </view>
       </view>
+      <view class="login-card-bg">
+        <!-- 背景装饰图案 -->
+      </view>
     </view>
 
-    <view class="content-section">
-      <view class="mine-actions grid col-4 text-center">
-        <view class="action-item" @click="handleJiaoLiuQun">
-          <view class="iconfont icon-friendfill text-pink icon"></view>
-          <text class="text">交流群</text>
-        </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-service text-blue icon"></view>
-          <text class="text">在线客服</text>
-        </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-community text-mauve icon"></view>
-          <text class="text">反馈社区</text>
+    <!-- 第一个菜单卡片 -->
+    <view class="menu-card">
+      <view class="menu-item" @click="handleToInfo">
+        <view class="menu-item-left">
+          <view class="menu-icon-wrapper account-icon">
+            <view class="iconfont icon-user menu-icon"></view>
+          </view>
+          <text class="menu-text">账号信息</text>
         </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-dianzan text-green icon"></view>
-          <text class="text">点赞我们</text>
+        <view class="iconfont icon-right arrow-icon"></view>
+      </view>
+      <view class="menu-divider"></view>
+      <view class="menu-item" @click="handleToOrderRevenue">
+        <view class="menu-item-left">
+          <view class="menu-icon-wrapper revenue-icon">
+            <text class="revenue-symbol">¥</text>
+          </view>
+          <text class="menu-text">订单收益</text>
         </view>
+        <view class="iconfont icon-right arrow-icon"></view>
       </view>
+    </view>
 
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
-          <view class="menu-item-box">
-            <view class="iconfont icon-user menu-icon"></view>
-            <view>编辑资料</view>
+    <!-- 第二个菜单卡片 -->
+    <view class="menu-card">
+      <view class="menu-item" @click="handleClearCache">
+        <view class="menu-item-left">
+          <view class="menu-icon-wrapper cache-icon">
+            <view class="iconfont icon-clean menu-icon"></view>
           </view>
+          <text class="menu-text">本地缓存</text>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleHelp">
-          <view class="menu-item-box">
+      </view>
+      <view class="menu-divider"></view>
+      <view class="menu-item" @click="handleAbout">
+        <view class="menu-item-left">
+          <view class="menu-icon-wrapper about-icon">
             <view class="iconfont icon-help menu-icon"></view>
-            <view>常见问题</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleAbout">
-          <view class="menu-item-box">
-            <view class="iconfont icon-aixin menu-icon"></view>
-            <view>关于我们</view>
           </view>
+          <text class="menu-text">关于我们</text>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleToSetting">
-          <view class="menu-item-box">
-            <view class="iconfont icon-setting menu-icon"></view>
-            <view>应用设置</view>
+        <view class="iconfont icon-right arrow-icon"></view>
+      </view>
+      <view class="menu-divider"></view>
+      <view class="menu-item" @click="handleLogout">
+        <view class="menu-item-left">
+          <view class="menu-icon-wrapper logout-icon">
+            <view class="iconfont icon-logout menu-icon"></view>
           </view>
+          <text class="menu-text">退出登录</text>
         </view>
       </view>
-
     </view>
-	
-	<!-- 底部导航栏 - 放在 content 外面，确保固定在底部 -->
-	<bar-navigasi-handap></bar-navigasi-handap>
+
+    <!-- 底部导航栏 -->
+    <bar-navigasi-handap></bar-navigasi-handap>
   </view>
 </template>
 
 <script>
   import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
+
   export default {
-	components: {
-	  BarNavigasiHandap
-	},
+    components: {
+      BarNavigasiHandap
+    },
     data() {
       return {
         name: this.$store.state.user.name
@@ -93,38 +99,50 @@
     computed: {
       avatar() {
         return this.$store.state.user.avatar
-      },
-      windowHeight() {
-        return uni.getSystemInfoSync().windowHeight - 50
       }
     },
     methods: {
+      handleLoginCardClick() {
+        if (!this.name) {
+          this.$tab.reLaunch('/pages/login')
+        } else {
+          this.$tab.navigateTo('/pages/mine/info/index')
+        }
+      },
       handleToInfo() {
+        if (!this.name) {
+          this.$tab.reLaunch('/pages/login')
+          return
+        }
         this.$tab.navigateTo('/pages/mine/info/index')
       },
-      handleToEditInfo() {
-        this.$tab.navigateTo('/pages/mine/info/edit')
-      },
-      handleToSetting() {
-        this.$tab.navigateTo('/pages/mine/setting/index')
-      },
-      handleToLogin() {
-        this.$tab.reLaunch('/pages/login')
-      },
-      handleToAvatar() {
-        this.$tab.navigateTo('/pages/mine/avatar/index')
+      handleToOrderRevenue() {
+        if (!this.name) {
+          this.$tab.reLaunch('/pages/login')
+          return
+        }
+        this.$modal.showToast('模块建设中~')
       },
-      handleHelp() {
-        this.$tab.navigateTo('/pages/mine/help/index')
+      handleClearCache() {
+        this.$modal.confirm('确定要清理本地缓存吗？').then(() => {
+          // 清理缓存的逻辑
+          uni.clearStorageSync()
+          this.$modal.msgSuccess('缓存清理成功')
+        })
       },
       handleAbout() {
         this.$tab.navigateTo('/pages/mine/about/index')
       },
-      handleJiaoLiuQun() {
-        this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
-      },
-      handleBuilding() {
-        this.$modal.showToast('模块建设中~')
+      handleLogout() {
+        if (!this.name) {
+          this.$tab.reLaunch('/pages/login')
+          return
+        }
+        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
+          this.$store.dispatch('LogOut').then(() => {}).finally(() => {
+            this.$tab.reLaunch('/pages/index')
+          })
+        })
       }
     }
   }
@@ -132,63 +150,199 @@
 
 <style lang="scss" scoped>
   page {
-    background-color: #f5f6f7;
+    background-color: #f5f5f5;
   }
 
   .mine-container {
     width: 100%;
-    height: 100%;
+    min-height: 100vh;
+    padding-bottom: 120rpx;
+    background-color: #f5f5f5;
 
+    // 顶部标题
+    .header-title {
+      padding: 20rpx 0;
+      text-align: center;
+      background-color: #ffffff;
 
-    .header-section {
-      padding: 15px 15px 45px 15px;
-      background-color: #3c96f3;
-      color: white;
-
-      .login-tip {
-        font-size: 18px;
-        margin-left: 10px;
+      .title-text {
+        font-size: 36rpx;
+        font-weight: 500;
+        color: #000000;
       }
+    }
+
+    // 登录卡片
+    .login-card {
+      position: relative;
+      margin: 30rpx 30rpx 40rpx 30rpx;
+      padding: 40rpx 30rpx;
+      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+      border-radius: 24rpx;
+      overflow: hidden;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+      .login-card-content {
+        display: flex;
+        align-items: center;
+        position: relative;
+        z-index: 2;
 
-      .cu-avatar {
-        border: 2px solid #eaeaea;
+        .avatar-section {
+          .avatar-placeholder {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 50%;
+            background-color: #e0e0e0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
 
-        .icon {
-          font-size: 40px;
+            .avatar-icon {
+              font-size: 60rpx;
+              color: #999999;
+            }
+          }
+
+          .avatar-image {
+            width: 120rpx;
+            height: 120rpx;
+            border-radius: 50%;
+          }
         }
-      }
 
-      .user-info {
-        margin-left: 15px;
+        .login-info {
+          margin-left: 30rpx;
+          flex: 1;
 
-        .u_title {
-          font-size: 18px;
-          line-height: 30px;
+          .login-text {
+            font-size: 36rpx;
+            font-weight: 600;
+            color: #000000;
+            margin-bottom: 12rpx;
+          }
+
+          .user-name {
+            font-size: 36rpx;
+            font-weight: 600;
+            color: #000000;
+            margin-bottom: 12rpx;
+          }
+
+          .login-desc {
+            font-size: 26rpx;
+            color: #999999;
+          }
         }
       }
+
+      .login-card-bg {
+        position: absolute;
+        right: -60rpx;
+        top: -60rpx;
+        width: 240rpx;
+        height: 240rpx;
+        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 197, 253, 0.15) 100%);
+        border-radius: 50%;
+        z-index: 1;
+        opacity: 0.6;
+      }
     }
 
-    .content-section {
-      position: relative;
-      top: -50px;
+    // 菜单卡片
+    .menu-card {
+      margin: 0 30rpx 30rpx 30rpx;
+      background-color: #ffffff;
+      border-radius: 24rpx;
+      overflow: hidden;
+      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
 
-      .mine-actions {
-        margin: 15px 15px;
-        padding: 20px 0px;
-        border-radius: 8px;
-        background-color: white;
+      .menu-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 32rpx 30rpx;
+        background-color: #ffffff;
 
-        .action-item {
-          .icon {
-            font-size: 28px;
+        .menu-item-left {
+          display: flex;
+          align-items: center;
+          flex: 1;
+
+          .menu-icon-wrapper {
+            width: 64rpx;
+            height: 64rpx;
+            border-radius: 16rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 24rpx;
+
+            &.account-icon {
+              background-color: #e3f2fd;
+
+              .menu-icon {
+                color: #1976d2;
+              }
+            }
+
+            &.revenue-icon {
+              background-color: #fff3e0;
+              position: relative;
+
+              .revenue-symbol {
+                font-size: 32rpx;
+                font-weight: 600;
+                color: #ff9800;
+              }
+            }
+
+            &.cache-icon {
+              background-color: #f3e5f5;
+
+              .menu-icon {
+                color: #9c27b0;
+              }
+            }
+
+            &.about-icon {
+              background-color: #e8f5e9;
+
+              .menu-icon {
+                color: #4caf50;
+              }
+            }
+
+            &.logout-icon {
+              background-color: #ffebee;
+
+              .menu-icon {
+                color: #f44336;
+              }
+            }
+
+            .menu-icon {
+              font-size: 36rpx;
+              color: #333333;
+            }
           }
 
-          .text {
-            display: block;
-            font-size: 13px;
-            margin: 8px 0px;
+          .menu-text {
+            font-size: 32rpx;
+            color: #000000;
           }
         }
+
+        .arrow-icon {
+          font-size: 28rpx;
+          color: #cccccc;
+        }
+      }
+
+      .menu-divider {
+        height: 1rpx;
+        background-color: #f0f0f0;
+        margin: 0 30rpx;
       }
     }
   }