gupiao-web/src/pages/mine/mine.vue

<template>
  <view class="page-mine">
    <scroll-view class="scroll-view" scroll-y>
      <view class="content-wrapper">
        <!-- 用户信息卡片 -->
        <view class="user-info-card" @click="handleUserCardClick">
          <view class="user-header">
            <image 
              class="user-avatar" 
              :src="isLoggedIn && userInfo.avatar ? userInfo.avatar : '/static/images/head.png'" 
              mode="aspectFill"
            ></image>
            <view class="user-details">
              <text class="user-name">{{ isLoggedIn ? (userInfo.nickname || '微信用户') : '登录/注册' }}</text>
            </view>
            <view class="arrow-icon">›</view>
          </view>
        </view>

        <!-- 菜单列表 -->
        <view class="menu-list">
          <view class="menu-item" @click="handleSubscriptionRecord">
            <view class="menu-left">
              <text class="menu-icon">📝</text>
              <text class="menu-label">订阅记录</text>
            </view>
            <text class="menu-arrow">›</text>
          </view>
        </view>

        <!-- 退出登录按钮（仅登录后显示） -->
        <view class="logout-section" v-if="isLoggedIn">
          <button class="logout-btn" @click="handleLogout">
            退出登录
          </button>
        </view>

        <!-- 预留底部空间 -->
        <view class="bottom-safe-area"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { isLoggedIn as checkLogin, getUserInfo as getStoredUserInfo, logout, checkLogin as requireLogin } from '@/utils/auth.js'

const isLoggedIn = ref(false)
const showPhoneAuth = ref(false)
const userInfo = ref({
  nickname: '',
  avatar: '',
  phone: ''
})

/**
 * 页面加载时检查登录状态
 */
onMounted(() => {
  loadUserInfo()
})

/**
 * 页面显示时刷新用户信息
 */
onShow(() => {
  loadUserInfo()
  // 设置导航栏标题
  uni.setNavigationBarTitle({ title: '量化交易大师' })
})

/**
 * 加载用户信息
 */
const loadUserInfo = async () => {
  isLoggedIn.value = checkLogin()
  console.log('[个人中心] 登录状态:', isLoggedIn.value)
  if (isLoggedIn.value) {
    const storedInfo = getStoredUserInfo()
    if (storedInfo) {
      userInfo.value = storedInfo
      console.log('[个人中心] 加载用户信息:', userInfo.value)
    }
  }
}

/**
 * 点击用户卡片
 */
const handleUserCardClick = () => {
  if (!isLoggedIn.value) {
    handleLogin()
  }
}

/**
 * 处理登录
 */
const handleLogin = async () => {
  console.log('[我的] 开始登录流程')
  
  // 跳转到登录页面
  uni.navigateTo({
    url: '/pages/login/login'
  })
}

/**
 * 退出登录
 */
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        logout()
        isLoggedIn.value = false
        userInfo.value = { nickname: '', avatar: '', phone: '' }
        uni.showToast({ title: '已退出登录', icon: 'none' })
      }
    }
  })
}

/**
 * 订阅记录
 */
const handleSubscriptionRecord = () => {
  if (!requireLogin(() => {
    handleSubscriptionRecord()
  })) {
    return
  }
  
  // 跳转到订阅记录页面
  uni.navigateTo({
    url: '/pages/transaction/transaction'
  })
}
</script>

<style>
.page-mine {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f6fb;
}

.scroll-view {
  flex: 1;
  height: 0;
}

.content-wrapper {
  padding: 32rpx;
  background: #f5f6fb;
  min-height: 100%;
}

/* 用户信息卡片 */
.user-info-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
}

.user-header {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #f5f6fb;
  margin-right: 24rpx;
  border: 4rpx solid #f5f6fb;
}

.user-details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #222222;
  margin-bottom: 8rpx;
}

.arrow-icon {
  font-size: 48rpx;
  color: #9ca2b5;
  font-weight: 300;
}

/* 菜单列表 */
.menu-list {
  background: #ffffff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
  margin-bottom: 32rpx;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid #f5f6fb;
}

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

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  font-size: 36rpx;
  margin-right: 20rpx;
}

.menu-label {
  font-size: 28rpx;
  color: #222222;
}

.menu-arrow {
  font-size: 40rpx;
  color: #9ca2b5;
  font-weight: 300;
}

/* 退出登录按钮 */
.logout-section {
  margin-top: 20rpx;
}

.logout-btn {
  width: 100%;
  background: #5d55e8;
  color: #ffffff;
  border-radius: 16rpx;
  padding: 28rpx 0;
  text-align: center;
  font-size: 30rpx;
  font-weight: 600;
  box-shadow: 0 12rpx 24rpx rgba(93, 85, 232, 0.3);
  border: none;
  line-height: 1;
}

.logout-btn::after {
  border: none;
}

.logout-btn:active {
  opacity: 0.8;
}

.bottom-safe-area {
  height: 80rpx;
}
</style>