taimed-international-app/pages/user/index.vue

<template>
  <view class="user-page">
    <!-- 设置图标 -->
    <view class="settings-icon" @click="goSettings">
      <wd-icon name="setting1" size="24px" color="#666" />
      <text>{{ $t('user.settings') }}</text>
    </view>

    <!-- 用户信息区域 -->
    <view class="user-info-section">
      <view class="user-info">
        <image 
          :src="userInfo.avatar || defaultAvatar" 
          class="avatar"
          @click="goProfile"
        />
        <view class="user-details">
          <text class="nickname">{{ userInfo.nickname || $t('user.notSet') }}</text>
          <text v-if="userInfo.email" class="email">{{ userInfo.email }}</text>
          <text v-if="vipInfo.endTime && platform === 'ios'" class="vip-time">
            VIP {{ vipInfo.endTime.split(' ')[0] }} {{ $t('user.vipExpireTime') }}
          </text>
        </view>
      </view>
    </view>

    <!-- VIP订阅卡片 -->
    <view class="vip-card-section">
      <view class="vip-card">
        <view v-if="vipInfo.id" class="vip-info">
          <text class="label">{{ $t('user.vip') }}</text>
          <text class="value">{{ vipInfo.endTime ? vipInfo.endTime.split(' ')[0] : '' }}</text>
        </view>
        <wd-button 
          v-else 
          type="success"
          size="small"
          @click="goSubscribe"
        >
          {{ $t('user.subscribe') }}
        </wd-button>
      </view>
    </view>

    <!-- 功能菜单列表 -->
    <view class="menu-section">
      <view class="menu-list">
        <view 
          v-for="item in menuItems" 
          :key="item.id" 
          class="menu-item" 
          @click="handleMenuClick(item)"
        >
          <text class="menu-text">{{ item.name }}</text>
          <wd-icon name="arrow-right" size="16px" color="#aaa" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { getUserInfo, getVipInfo } from '@/api/modules/user'
import type { IVipInfo } from '@/types/user'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const userStore = useUserStore()

// 默认头像
const defaultAvatar = '/static/home_icon.png'

// 用户信息
const userInfo = computed(() => userStore.userInfo)

// VIP信息
const vipInfo = ref<IVipInfo>({
  id: 0,
  endTime: '',
  vipType: 0
})

// 平台信息
const platform = ref('')

// 菜单项
const menuItems = computed(() => [
  {
    id: 1,
    name: t('user.myOrders'),
    url: '/pages/user/order/index',
    type: 'pageJump'
  },
  {
    id: 2,
    name: t('user.myBooklist'),
    url: '/pages/book/index',
    type: 'switchTab'
  },
  {
    id: 3,
    name: t('user.profile'),
    url: '/pages/user/profile/index',
    type: 'pageJump'
  },
  {
    id: 4,
    name: t('user.about'),
    url: '/pages/user/about/index',
    type: 'pageJump'
  },
  {
    id: 5,
    name: t('user.feedback'),
    url: '/pages/user/feedback/index',
    type: 'pageJump'
  }
])

/**
 * 获取平台信息
 */
const getPlatform = () => {
  const systemInfo = uni.getSystemInfoSync()
  platform.value = systemInfo.platform === 'android' ? 'android' : 'ios'
}

/**
 * 获取数据
 */
const getData = async () => {
  try {
    // 获取用户信息
    const userRes = await getUserInfo()
    if (userRes.user) {
      userStore.setUserInfo(userRes.user)
    }

    // 获取VIP信息
    const vipRes = await getVipInfo()
    if (vipRes.vipInfo) {
      vipInfo.value = vipRes.vipInfo
    }
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}

/**
 * 跳转到设置页面
 */
const goSettings = () => {
  uni.navigateTo({
    url: '/pages/user/settings/index'
  })
}

/**
 * 跳转到个人资料页面
 */
const goProfile = () => {
  uni.navigateTo({
    url: '/pages/user/profile/index'
  })
}

/**
 * 跳转到订阅页面
 */
const goSubscribe = () => {
  uni.navigateTo({
    url: '/pages/user/wallet/index'
  })
}

/**
 * 处理菜单点击
 */
const handleMenuClick = (item: any) => {
  switch (item.type) {
    case 'pageJump':
      uni.navigateTo({
        url: item.url
      })
      break
    case 'switchTab':
      uni.switchTab({
        url: item.url
      })
      break
  }
}

onMounted(() => {
  getPlatform()
  getData()
})
</script>

<style lang="scss" scoped>
$theme-color: #54a966;

.user-page {
  min-height: 100vh;
  background-color: #f7faf9;
  padding-top: 130rpx;
}

.settings-icon {
  position: absolute;
  right: 40rpx;
  top: 60rpx;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  
  text {
    display: block;
    font-size: 28rpx;
    color: #333;
  }
}

.user-info-section {
  padding: 0 30rpx;
  margin-bottom: 50rpx;
}

.user-info {
  display: flex;
  align-items: center;
  
  .avatar {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
    margin-right: 30rpx;
  }
  
  .user-details {
    flex: 1;
    
    .nickname {
      display: block;
      font-size: 38rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .email {
      display: block;
      font-size: 28rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .vip-time {
      display: block;
      font-size: 28rpx;
      color: #333;
    }
  }
}

.vip-card-section {
  padding: 0 20rpx;
  margin-bottom: 20rpx;
}

.vip-card {
  background: #fff;
  border-radius: 15rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .vip-info {
    text-align: center;
    
    .label {
      display: block;
      font-size: 32rpx;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .value {
      display: block;
      font-size: 30rpx;
      color: $theme-color;
    }
  }
}

.menu-section {
  padding: 20rpx 20rpx 0;
}

.menu-list {
  background: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f5f5f5;
  }
  
  .menu-text {
    font-size: 30rpx;
    color: #333;
    line-height: 40rpx;
  }
}
</style>