group_lawyer_app/pages/mine/index.vue

<template>
  <view class="mine-container">
    <!-- 顶部渐变背景 -->
    <view class="top-gradient">
    <!-- 页面背景图 -->
    <view class="page-bg">
      <image src="/static/mine/minebg.png" class="bg-image" mode="aspectFit"></image>
    </view>
    </view>



    <!-- 自定义导航栏 -->
    <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+50 + '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>

    <!-- 第一个菜单卡片 -->
    <view class="menu-card">
      <view class="menu-item" @click="handleToInfo">
        <view class="menu-item-left">
          <view class="menu-icon-wrapper account-icon">
            <image src="/static/mine/account.png" class="menu-icon-image" mode="aspectFit"></image>
          </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">
            <image src="/static/mine/order.png" class="menu-icon-image" mode="aspectFit"></image>
          </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">
            <image src="/static/mine/local.png" class="menu-icon-image" mode="aspectFit"></image>
          </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">
            <image src="/static/mine/about.png" class="menu-icon-image" mode="aspectFit"></image>
          </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">
            <image src="/static/mine/exit.png" class="menu-icon-image" mode="aspectFit"></image>
          </view>
          <text class="menu-text">退出登录</text>
        </view>
      </view>
    </view>

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

    <!-- 退出登录确认对话框 -->
    <view v-if="showLogoutDialog" class="logout-dialog-mask" @click="closeLogoutDialog">
      <view class="logout-dialog" @click.stop>
        <view class="dialog-title">确认退出该账号吗?</view>
        <view class="dialog-buttons">
          <view class="dialog-btn logout-btn" @click="confirmLogout">退出登录</view>
          <view class="dialog-btn cancel-btn" @click="closeLogoutDialog">取消</view>
        </view>
      </view>
    </view>

    <!-- 清理缓存确认对话框 -->
    <view v-if="showClearCacheDialog" class="clear-cache-dialog-mask" @click="closeClearCacheDialog">
      <view class="clear-cache-dialog" @click.stop>
        <view class="cache-dialog-content">{{ clearCacheContent }}</view>
        <view class="cache-dialog-buttons">
          <view class="cache-dialog-btn cancel-btn" @click="closeClearCacheDialog">取消</view>
          <view class="cache-dialog-btn confirm-btn" @click="confirmClearCache">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

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

  export default {
    components: {
      BarNavigasiHandap
    },
    data() {
      return {
        name: this.$store.state.user.name,
        statusBarHeight: 0,
        showLogoutDialog: false,
        showClearCacheDialog: false,
        clearCacheContent: ''
      }
    },
    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() {
        // 计算当前缓存大小
        const getCacheSize = () => {
          try {
            const storageInfo = uni.getStorageInfoSync()
            let totalSize = 0
            if (storageInfo.keys && storageInfo.keys.length > 0) {
              storageInfo.keys.forEach(key => {
                try {
                  const value = uni.getStorageSync(key)
                  // 计算存储数据的大小（字节）
                  const size = JSON.stringify(value).length
                  totalSize += size
                } catch (e) {
                  console.error('获取存储项失败:', key, e)
                }
              })
            }
            // 转换为KB，保留2位小数
            const sizeKB = (totalSize / 1024).toFixed(2)
            return parseFloat(sizeKB)
          } catch (e) {
            console.error('计算缓存大小失败:', e)
            return 0
          }
        }

        const cacheSize = getCacheSize()
        this.clearCacheContent = cacheSize > 0 
          ? `当前缓存 ${cacheSize} KB，确定清除？`
          : '确定要清理本地缓存吗？'
        this.showClearCacheDialog = true
      },
      closeClearCacheDialog() {
        this.showClearCacheDialog = false
      },
      confirmClearCache() {
        // 清理缓存的逻辑
        uni.clearStorageSync()
        this.showClearCacheDialog = false
        uni.showToast({
          title: '缓存清理成功'
        })
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      handleLogout() {
        if (!this.name) {
          this.$tab.reLaunch('/pages/login')
          return
        }
        this.showLogoutDialog = true
      },
      closeLogoutDialog() {
        this.showLogoutDialog = false
      },
      confirmLogout() {
        this.showLogoutDialog = false
        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;
    position: relative;

    // 顶部渐变背景
    .top-gradient {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 800rpx;
      background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.05) 50%, transparent 100%);
      z-index: 0;
      pointer-events: none;
    }

    // 页面背景图
    .page-bg {
      position: fixed;
      right: -60rpx;
      pointer-events: none;
      width: 400rpx;
      height: 600rpx;
      z-index: 0;

      .bg-image {
        width: 100%;
        height: 100%;
        opacity: 0.6;
      }
    }

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

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

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

    // 登录卡片
    .login-card {
      min-height: 200rpx;
      position: relative;
      margin: 0 30rpx 40rpx 30rpx;
      padding: 30rpx 30rpx;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 24rpx;
      overflow: visible;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
      z-index: 10;

      .login-card-content {
        display: flex;
        position: relative;
        z-index: 2;

        .avatar-section {
          position: relative;
          width: 160rpx;
          height: 160rpx;
          flex-shrink: 0;

          .avatar-placeholder {
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
            background-color: #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: -100rpx;
            left: 0;

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

          .avatar-image {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            position: absolute;
            top: -80rpx;
            left: 0;
          }
        }

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

          .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:400rpx;
        height: 600rpx;
        opacity: 0.6;
      }
    }

    // 菜单卡片
    .menu-card {
      position: relative;
      margin: 0 30rpx 30rpx 30rpx;
      background-color: rgba(255, 255, 255, 0.4);
      border-radius: 24rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
      z-index: 10;

      .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32rpx 30rpx;
        background-color: rgba(255, 255, 255, 0.4);

        .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;
            background-color: transparent;

            .menu-icon-image {
              width: 40rpx;
              height: 40rpx;
            }
          }

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

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

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

    // 退出登录对话框
    .logout-dialog-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .logout-dialog {
      width: 100%;
      background-color: #ffffff;
      border-radius: 32rpx 32rpx 0 0;
      padding: 40rpx 30rpx;
      padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
      box-sizing: border-box;

      .dialog-title {
        font-size: 24rpx;
        font-weight: 400;
        color: #666666;
        text-align: center;
        margin-bottom: 60rpx;
        line-height: 1.5;
      }

      .dialog-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;

        .dialog-btn {
          width: 100%;
          height: 100rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 34rpx;
          font-weight: 400;
          background-color: transparent;
          border: none;

          &.logout-btn {
            color: #EF2C54;
            margin-bottom: 40rpx;
          }

          &.cancel-btn {
            color: #333333;
          }
        }
      }
    }

    // 清理缓存对话框
    .clear-cache-dialog-mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .clear-cache-dialog {
      width: 600rpx;
      background-color: #ffffff;
      border-radius: 24rpx;
      padding: 60rpx 40rpx 40rpx;
      box-sizing: border-box;
      min-height: 280rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .cache-dialog-content {
        font-size: 32rpx;
        font-weight: 400;
        color: #333333;
        text-align: center;
        line-height: 1.6;
        padding: 20rpx 0;
        min-height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cache-dialog-buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-top: 40rpx;
        gap: 20rpx;

        .cache-dialog-btn {
          flex: 1;
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32rpx;
          font-weight: 400;
          background-color: transparent;
          border: none;

          &.cancel-btn {
            color: #666666;
          }

          &.confirm-btn {
            color: #2652C2;
          }
        }
      }
    }
  }
</style>