blind-select/frontend-app/pages/user/profile.vue

<template>
  <view class="page-profile">
    <!-- 头像区 -->
    <view class="profile-header">
      <image class="avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
      <text class="nickname">{{ userInfo.nickname || '用户' }}</text>
      <text class="member-tag" v-if="hasMember">👑 VIP</text>
    </view>

    <!-- 统计 -->
    <view class="stats card">
      <view class="stat-item">
        <text class="stat-num">{{ blindCount }}</text>
        <text class="stat-label">盲选次数</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ collectedCount }}</text>
        <text class="stat-label">收藏</text>
      </view>
      <view class="stat-item">
        <text class="stat-num">{{ reviewCount }}</text>
        <text class="stat-label">评价</text>
      </view>
    </view>

    <!-- 菜单 -->
    <view class="menu-list">
      <view class="menu-item" @click="goTo('/pages/user/preferences')">
        <text class="menu-icon">🎯</text>
        <text class="menu-text">我的偏好</text>
        <text class="menu-arrow">›</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/user/history')">
        <text class="menu-icon">📋</text>
        <text class="menu-text">盲选记录</text>
        <text class="menu-arrow">›</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/coupon/list')">
        <text class="menu-icon">🎫</text>
        <text class="menu-text">我的优惠券</text>
        <text class="menu-arrow">›</text>
      </view>
      <view class="menu-item" @click="goTo('/pages/member/member')">
        <text class="menu-icon">👑</text>
        <text class="menu-text">会员中心</text>
        <text class="menu-arrow">›</text>
      </view>
    </view>

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

<script setup>
import { ref, computed } from 'vue'
import { useUserStore } from '@/store/user.js'

const userStore = useUserStore()
const userInfo = computed(() => userStore.userInfo)
const hasMember = computed(() => userStore.hasMember)
const blindCount = ref(42)
const collectedCount = ref(8)
const reviewCount = ref(15)

function goTo(url) {
  uni.navigateTo({ url })
}

function logout() {
  userStore.logout()
  uni.reLaunch({ url: '/pages/index/index' })
}
</script>

<style lang="scss" scoped>
.page-profile {
  min-height: 100vh;
  background: #f5f5f5;
}

.profile-header {
  background: linear-gradient(135deg, #FF6B35, #FF8C42);
  padding: 80rpx 30rpx 50rpx;
  text-align: center;
  color: #fff;
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 60rpx;
    border: 4rpx solid rgba(255,255,255,0.3);
    margin-bottom: 16rpx;
  }
  .nickname {
    font-size: 36rpx;
    font-weight: 700;
    display: block;
  }
  .member-tag {
    font-size: 22rpx;
    margin-top: 8rpx;
    display: block;
  }
}

.card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin: 20rpx 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
}

.stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
  .stat-num {
    font-size: 40rpx;
    font-weight: 700;
    color: #FF6B35;
    display: block;
  }
  .stat-label {
    font-size: 22rpx;
    color: #999;
  }
}

.menu-list {
  margin: 20rpx 24rpx;
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 28rpx 24rpx;
  border-bottom: 1rpx solid #f5f5f5;
  .menu-icon { font-size: 32rpx; width: 40rpx; }
  .menu-text {
    flex: 1;
    font-size: 28rpx;
    color: #333;
  }
  .menu-arrow { font-size: 32rpx; color: #ccc; }
}

.logout-area {
  padding: 40rpx 40rpx 100rpx;
}

.logout-btn {
  background: #fff;
  color: #ff4444;
  border: 2rpx solid #ff4444;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>