novel-app/RuoYi-App/pages/me/index.vue

<template>
  <view class="user-center">
    <!-- 用户信息 -->
    <view class="user-info">
      <image :src="user.avatar || '/static/default-avatar.png'" class="avatar" />
      <view class="info">
        <text class="name">{{ user.nickname || '未登录用户' }}</text>
        <text v-if="user.vipLevel" class="vip">VIP{{ user.vipLevel }}会员</text>
        <text v-else class="vip">普通用户</text>
      </view>
      <button v-if="!isLogin" class="login-btn" @click="goToLogin">登录/注册</button>
      <uni-icons v-else type="gear" size="28" color="#333" @click="goToSettings"></uni-icons>
    </view>
    
    <!-- VIP信息 -->
    <view v-if="isLogin" class="vip-card">
      <view class="vip-info">
        <text class="vip-title">VIP会员</text>
        <text v-if="user.vipExpire" class="vip-expire">有效期至: {{ user.vipExpire }}</text>
        <text v-else class="vip-expire">立即开通会员</text>
      </view>
      <button class="btn-upgrade">立即升级</button>
    </view>
    
    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-item" @click="goToMyBooks">
        <uni-icons type="star" size="24" color="#2a5caa" />
        <text>我的收藏</text>
        <uni-icons type="right" size="18" color="#999" />
      </view>
      <view class="menu-item" @click="goToHistory">
        <uni-icons type="time" size="24" color="#2a5caa" />
        <text>阅读历史</text>
        <uni-icons type="right" size="18" color="#999" />
      </view>
      <view class="menu-item" @click="goToWallet">
        <uni-icons type="wallet" size="24" color="#2a5caa" />
        <text>我的钱包</text>
        <uni-icons type="right" size="18" color="#999" />
      </view>
      <view class="menu-item" @click="goToSettings">
        <uni-icons type="gear" size="24" color="#2a5caa" />
        <text>设置</text>
        <uni-icons type="right" size="18" color="#999" />
      </view>
    </view>
    
    <!-- 退出登录 -->
    <button v-if="isLogin" class="btn-logout" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {
        avatar: '',
        nickname: '',
        vipLevel: 0,
        vipExpire: ''
      },
      isLogin: false
    }
  },
  onShow() {
    this.checkLoginStatus()
    if (this.isLogin) {
      this.loadUserInfo()
    }
  },
  methods: {
    checkLoginStatus() {
      this.isLogin = !!uni.getStorageSync('token')
    },
    
    async loadUserInfo() {
      try {
        const res = await this.$http.get('/user/info', {
          headers: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`
          }
        })
        
        if (res.data.code === 0) {
          this.user = res.data.data
        }
      } catch (error) {
        console.error('获取用户信息失败', error)
      }
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login'
      })
    },
    
    goToSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    },
    
    goToMyBooks() {
      uni.navigateTo({
        url: '/pages/collection/index'
      })
    },
    
    goToHistory() {
      uni.navigateTo({
        url: '/pages/history/index'
      })
    },
    
    goToWallet() {
      uni.navigateTo({
        url: '/pages/wallet/index'
      })
    },
    
    logout() {
      uni.removeStorageSync('token')
      uni.removeStorageSync('userInfo')
      this.isLogin = false
      this.user = {}
      uni.showToast({
        title: '已退出登录',
        icon: 'success'
      })
    }
  }
}
</script>

<style scoped>
.user-center {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: white;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.info {
  flex: 1;
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.vip {
  font-size: 28rpx;
  color: #e67e22;
  background: #fef9e7;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.login-btn {
  background: #2a5caa;
  color: white;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
  border-radius: 40rpx;
}

.vip-card {
  background: linear-gradient(to right, #f6d365, #fda085);
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  color: white;
}

.vip-title {
  font-size: 36rpx;
  font-weight: bold;
  display: block;
}

.vip-expire {
  font-size: 28rpx;
  opacity: 0.9;
}

.btn-upgrade {
  background: rgba(255,255,255,0.3);
  color: white;
  border: 1rpx solid white;
  border-radius: 40rpx;
  font-size: 28rpx;
  padding: 10rpx 30rpx;
}

.menu-list {
  background: white;
  border-radius: 16rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  text {
    flex: 1;
    margin-left: 20rpx;
    font-size: 32rpx;
  }
}

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

.btn-logout {
  margin-top: 50rpx;
  background: white;
  color: #e74c3c;
  border: 1rpx solid #e74c3c;
  border-radius: 40rpx;
}
</style>