novel-app/RuoYi-App/pages/user/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 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>
    
    <!-- 功能列表 -->
    <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="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>
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      user: {
        avatar: '',
        nickName: '',
      },
      isLogin: false
    }
  },
  onShow() {
    this.checkLoginStatus()
    if (this.isLogin) {
      this.loadUserInfo()
    }
  },
  methods: {
    checkLoginStatus() {
      const token = getToken()
      this.isLogin = !!token
      if (!this.isLogin) {
        this.user = {
          avatar: '',
          nickName: '未登录用户'
        }
      }
    },
    
    async loadUserInfo() {
      try {
        const userInfo = uni.getStorageSync('userInfo')
        if (userInfo) {
          this.user = userInfo
        }
      } catch (error) {
        console.error('获取用户信息失败', error)
      }
    },
    
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/index'
      })
    },
    
    logout() {
      uni.removeStorageSync('token')
      uni.removeStorageSync('userInfo')
      this.isLogin = false
      this.user = {
        avatar: '',
        nickName: '未登录用户'
      }
      uni.showToast({
        title: '已退出登录',
        icon: 'success'
      })
    },
    
    goToSettings() {
      uni.showToast({
        title: '设置功能开发中',
        icon: 'none'
      })
    },
    
    goToMyBooks() {
      uni.showToast({
        title: '我的收藏开发中',
        icon: 'none'
      })
    },
    
    goToHistory() {
      uni.showToast({
        title: '阅读历史开发中',
        icon: 'none'
      })
    }
  }
}
</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;
}

.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;
  padding: 20rpx;
}
</style>