group_lawyer_app/pages/mine/index.vue

<template>
  <view class="mine-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
      <view class="navbar-content">
        <text class="navbar-title">我的</text>
      </view>
    </view>

    <!-- 用户登录/注册卡片 -->
    <view class="login-card" :style="{marginTop: navbarHeight + 'rpx'}" @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 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="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="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-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>
      <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>
          <text class="menu-text">关于我们</text>
        </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>

    <!-- 底部导航栏 -->
    <bar-navigasi-handap></bar-navigasi-handap>
  </view>
</template>

<script>
  import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"

  export default {
    components: {
      BarNavigasiHandap
    },
    data() {
      return {
        name: this.$store.state.user.name,
        statusBarHeight: 0
      }
    },
    onLoad() {
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
      navbarHeight() {
        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(30rpx)
        return (this.statusBarHeight * 2) + 88 + 30
      }
    },
    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')
      },
      handleToOrderRevenue() {
        if (!this.name) {
          this.$tab.reLaunch('/pages/login')
          return
        }
        this.$modal.showToast('模块建设中~')
      },
      handleClearCache() {
        this.$modal.confirm('确定要清理本地缓存吗？').then(() => {
          // 清理缓存的逻辑
          uni.clearStorageSync()
          this.$modal.msgSuccess('缓存清理成功')
        })
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      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')
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }

  .mine-container {
    width: 100%;
    min-height: 100vh;
    padding-bottom: 120rpx;
    background-color: #f5f5f5;

    // 自定义导航栏
    .custom-navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background-color: transparent;

      .navbar-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88rpx;

        .navbar-title {
          font-size: 36rpx;
          font-weight: 500;
          color: #000000;
        }
      }
    }

    // 登录卡片
    .login-card {
      position: relative;
      margin: 0 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;

        .avatar-section {
          .avatar-placeholder {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            background-color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;

            .avatar-icon {
              font-size: 60rpx;
              color: #999999;
            }
          }

          .avatar-image {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }
        }

        .login-info {
          margin-left: 30rpx;
          flex: 1;

          .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;
      }
    }

    // 菜单卡片
    .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);

      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32rpx 30rpx;
        background-color: #ffffff;

        .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;
            }
          }

          .menu-text {
            font-size: 32rpx;
            color: #000000;
          }
        }

        .arrow-icon {
          font-size: 28rpx;
          color: #cccccc;
        }
      }

      .menu-divider {
        height: 1rpx;
        background-color: #f0f0f0;
        margin: 0 30rpx;
      }
    }
  }
</style>