monisuo/app/pages/mine/mine.uvue

<template>
  <view class="mine-container">
    <!-- 用户信息 -->
    <view class="user-card">
      <view class="avatar">
        <text class="avatar-text">{{ avatarText }}</text>
      </view>
      <view class="user-info">
        <text class="username">{{ username }}</text>
        <text class="user-level">普通用户</text>
      </view>
    </view>

    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToKyc">
        <text class="menu-icon">实名</text>
        <text class="menu-text">实名认证</text>
        <text class="menu-arrow">></text>
      </view>

      <view class="menu-item" @click="goToSecurity">
        <text class="menu-icon">安全</text>
        <text class="menu-text">安全设置</text>
        <text class="menu-arrow">></text>
      </view>

      <view class="menu-item" @click="goToAbout">
        <text class="menu-icon">关于</text>
        <text class="menu-text">关于我们</text>
        <text class="menu-arrow">></text>
      </view>
    </view>

    <!-- 退出按钮 -->
    <button class="logout-btn" @click="handleLogout">退出登录</button>
  </view>
</template>

<script lang="uts">
export default {
  data() {
    return {
      username: '' as string
    }
  },
  computed: {
    avatarText(): string {
      if (this.username !== null && this.username.length > 0) {
        return this.username.substring(0, 1).toUpperCase()
      }
      return 'U'
    }
  },
  onShow() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      const userInfoStr = uni.getStorageSync('userInfo') as string
      if (userInfoStr !== null && userInfoStr !== '') {
        try {
          const userInfo = JSON.parse(userInfoStr) as UTSJSONObject
          this.username = userInfo['username'] as string
        } catch (e) {
          this.username = '用户'
        }
      } else {
        this.username = '用户'
      }
    },
    goToKyc() {
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    goToSecurity() {
      uni.showToast({ title: '功能开发中', icon: 'none' })
    },
    goToAbout() {
      uni.showToast({ title: '模拟所 v1.0.0', icon: 'none' })
    },
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token')
            uni.removeStorageSync('userInfo')
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.mine-container {
  min-height: 100vh;
  background: $bg-color-dark;
  padding: $spacing-base;
  box-sizing: border-box;
}

.user-card {
  display: flex;
  align-items: center;
  padding: $spacing-lg;
  background: $bg-color-card;
  border-radius: $border-radius-lg;
  margin-bottom: $spacing-lg;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background: $primary-color;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: $spacing-base;
}

.avatar-text {
  font-size: 48rpx;
  color: #FFFFFF;
  font-weight: bold;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: $font-size-xl;
  color: $text-color;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.user-level {
  font-size: $font-size-sm;
  color: $text-color-secondary;
}

.menu-list {
  background: $bg-color-card;
  border-radius: $border-radius-lg;
  overflow: hidden;
  margin-bottom: $spacing-lg;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: $spacing-base $spacing-lg;
  border-bottom: 1rpx solid $border-color;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.menu-icon {
  width: 64rpx;
  height: 64rpx;
  background: $primary-color;
  border-radius: $border-radius-base;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: $font-size-sm;
  color: #FFFFFF;
  margin-right: $spacing-base;
}

.menu-text {
  flex: 1;
  font-size: $font-size-base;
  color: $text-color;
}

.menu-arrow {
  font-size: $font-size-base;
  color: $text-color-secondary;
}

.logout-btn {
  width: 100%;
  height: 88rpx;
  background: $error-color;
  border-radius: $border-radius-base;
  color: #FFFFFF;
  font-size: $font-size-lg;
  border: none;
  margin-top: 48rpx;
}

.logout-btn:active {
  opacity: 0.8;
}
</style>