AssetManager.UniApp/pages/me/me.vue

<template>
  <view class="page-container">
    <view class="profile-header">
      <view class="avatar-container">
        <view class="avatar-circle"></view>
        <view class="online-badge"></view>
      </view>
      <text class="user-name">{{ userInfo.userName }}</text>
      <text class="user-info">会员等级: {{ userInfo.memberLevel }} | 连续运行 {{ userInfo.runningDays }}天</text>
    </view>

    <view class="stats-grid">
      <view class="stat-card">
        <text class="stat-label">已捕获信号</text>
        <text class="stat-val">{{ userStats.signalsCaptured.toLocaleString() }}</text>
      </view>
      <view class="stat-card">
        <text class="stat-label">模拟胜率</text>
        <text class="stat-val">{{ userStats.winRate }}%</text>
      </view>
    </view>

    <view class="menu-list">
      <view class="menu-item">
        <view class="flex-row items-center gap-3">
          <uni-icons type="checkbox" size="20" color="#9CA3AF"></uni-icons>
          <text class="menu-text">账户安全中心</text>
        </view>
        <uni-icons type="right" size="16" color="#D1D5DB"></uni-icons>
      </view>
      
      <view class="menu-item">
        <view class="flex-row items-center gap-3">
          <uni-icons type="gear" size="20" color="#9CA3AF"></uni-icons>
          <text class="menu-text">全局执行偏好</text>
        </view>
        <uni-icons type="right" size="16" color="#D1D5DB"></uni-icons>
      </view>

      <view class="menu-item">
        <view class="flex-row items-center gap-3">
          <uni-icons type="staff" size="20" color="#EF4444"></uni-icons>
          <text class="menu-text text-red">退出登录</text>
        </view>
      </view>
    </view>
    
    <view class="version-info">
      <text class="v-text">ASSET STRATEGY ADVISOR {{ appInfo.version }}</text>
      <text class="v-text">当前日期: {{ appInfo.currentDate }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { api } from '../../utils/api';

// 用户信息
const userInfo = ref({
  userName: '',
  memberLevel: '',
  runningDays: 0
});

// 用户统计数据
const userStats = ref({
  signalsCaptured: 0,
  winRate: 0
});

// 应用信息
const appInfo = ref({
  version: '',
  currentDate: ''
});

// 从后端API获取用户信息的函数
const fetchUserInfo = async () => {
  try {
    const response = await api.user.getUserInfo();
    if (response.code === 200) {
      userInfo.value = response.data;
    }
  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

// 从后端API获取用户统计数据的函数
const fetchUserStats = async () => {
  try {
    const response = await api.user.getUserStats();
    if (response.code === 200) {
      userStats.value = response.data;
    }
  } catch (error) {
    console.error('获取用户统计数据失败:', error);
  }
};

// 从后端API获取应用信息的函数
const fetchAppInfo = async () => {
  try {
    const response = await api.app.getAppInfo();
    if (response.code === 200) {
      appInfo.value = response.data;
    }
  } catch (error) {
    console.error('获取应用信息失败:', error);
  }
};

// 页面加载时获取数据
onMounted(async () => {
  await Promise.all([
    fetchUserInfo(),
    fetchUserStats(),
    fetchAppInfo()
  ]);
});
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  padding: 40rpx;
  padding-top: 100rpx;
  background-color: #F9FAFB;
  /* 浅灰色背景，与其他页面保持一致 */
}
.profile-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 60rpx; }
.avatar-container { position: relative; margin-bottom: 24rpx; }
.avatar-circle { width: 160rpx; height: 160rpx; border-radius: 50%; background-color: #E5E7EB; border: 4rpx solid #fff; box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.1); }
.online-badge { width: 32rpx; height: 32rpx; background-color: #10B981; border: 4rpx solid #fff; border-radius: 50%; position: absolute; bottom: 8rpx; right: 8rpx; }
.user-name { font-size: 40rpx; font-weight: 700; color: #111827; }
.user-info { font-size: 24rpx; color: #9CA3AF; margin-top: 8rpx; }

.stats-grid { display: flex; gap: 32rpx; margin-bottom: 64rpx; }
.stat-card {
  flex: 1;
  background: #FFFFFF;
  padding: 32rpx;
  border-radius: 32rpx;
  text-align: center;
  border: 1rpx solid #E5E7EB;
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.stat-card:active {
  transform: translateY(2rpx);
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.04);
}
.stat-label { font-size: 20rpx; color: #9CA3AF; display: block; margin-bottom: 8rpx; }
.stat-val { font-size: 36rpx; font-weight: 700; color: #111827; }

.menu-list {
  background: #FFFFFF;
  border-radius: 32rpx;
  padding: 0 32rpx;
  border: 1rpx solid #E5E7EB;
  box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.06);
}
.menu-item { display: flex; justify-content: space-between; align-items: center; padding: 32rpx 0; border-bottom: 1rpx solid #F3F4F6; }
.menu-item:last-child { border-bottom: none; }
.menu-text { font-size: 28rpx; font-weight: 500; color: #374151; margin-left: 20rpx; }
.text-red { color: #EF4444; }

.version-info { text-align: center; margin-top: 80rpx; }
.v-text { display: block; font-size: 20rpx; color: #D1D5DB; line-height: 1.5; }
</style>