ChronicDisease_UniApp/src/pages/patient/profile/index.vue

<template>
  <CustomNav title="个人中心" leftType="none" />
  <view class="profile-container">
    <view class="header">
      <view class="avatar-section">
        <view class="avatar">
          <view class="avatar-frame">
            <image class="avatar-img" :src="avatarSrc" mode="aspectFill" />
          </view>
        </view>
        <view class="user-info">
          <text class="username">{{ user.nickname || '慢病患者' }}</text>
          <text class="user-id" v-if="user.openid">ID: {{ user.openid }}</text>
        </view>
      </view>
    </view>



    <view class="menu-list">
      <view class="menu-item" @click="onMenuClick('base-info')">
        <text class="menu-text">基本信息设定</text>
        <text class="menu-arrow"></text>
      </view>
      <view class="menu-item" @click="onMenuClick('settings')">
        <text class="menu-text">设置</text>
        <text class="menu-arrow"></text>
      </view>
      <view class="menu-item" @click="onMenuClick('about')">
        <text class="menu-text">关于我们</text>
        <text class="menu-arrow"></text>
      </view>
    </view>

    <view class="logout-section">
      <button class="logout-btn" @click="onLogout">退出登录</button>
    </view>
  </view>
  <TabBar />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import CustomNav from '@/components/custom-nav.vue'
import TabBar from '@/components/tab-bar.vue'
import { logout } from '@/composables/useAuth'
import { fetchUserInfo as fetchUserInfoApi, downloadAvatar as downloadAvatarApi } from '@/api/user'
import { avatarCache } from '@/utils/avatarCache'

const title = ref('个人中心')

const user = ref<{ avatar?: string; nickname?: string; openid?: string }>({})

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

// 计算一个安全的 avatar src：优先使用有效的 user.avatar，否则使用默认头像
const avatarSrc = computed(() => {
  const a = user.value?.avatar
  if (!a) return defaultAvatarUrl
  try {
    const s = String(a)
    // 常见有效前缀：http(s), data:, wxfile://, file://, /static
    if (/^(https?:\/\/|data:|wxfile:\/\/|file:\/\/|\/static\/)/i.test(s)) {
      return s
    }
    // 有时候小程序临时路径也以 / 开头或以 temp 开头，尽量允许以 ./ 或 / 开头
    if (/^(\.|\/|temp)/i.test(s)) return s
  } catch (e) {
    // fallback
  }
  return defaultAvatarUrl
})

const loadUser = () => {
  try {
    const u = uni.getStorageSync('user_info')
    if (u) {
      user.value = u
    }
  } catch (e) {
    // ignore
  }
}

const fetchUserInfo = async () => {
  try {
    const token = uni.getStorageSync('token')
    if (!token) return
    uni.showLoading({ title: '加载中...' })
    const response = await fetchUserInfoApi()
    uni.hideLoading()
    console.log('User info response:', response)
    const resp = response.data as any
    if (response.statusCode === 401) {
      // Token 无效，清除并跳转登录
      uni.removeStorageSync('token')
      uni.removeStorageSync('role')
      user.value = {}
      uni.reLaunch({ url: '/pages/public/login/index' })
      return
    }
    if (resp && resp.code === 200 && resp.data) {
      // 如果头像无效（不是有效的 http URL），则下载头像
      if (!resp.data.avatar || !resp.data.avatar.startsWith('http')) {
        const userIdRaw = resp.data.id || resp.data.userId
        const userId = userIdRaw ? String(userIdRaw) : ''
        if (userId) {
          // 检查是否有缓存的头像
          if (avatarCache.has(String(userId))) {
            resp.data.avatar = avatarCache.get(String(userId))
          } else {
            try {
              const downloadRes = await downloadAvatarApi(userId)
              if (downloadRes.statusCode === 200 && downloadRes.tempFilePath) {
                resp.data.avatar = downloadRes.tempFilePath
                // 缓存头像路径
                avatarCache.set(String(userId), downloadRes.tempFilePath)
              }
            } catch (e) {
              console.error('Download avatar error:', e)
            }
          }
        }
      }
      user.value = resp.data
      // 保存到本地存储
      uni.setStorageSync('user_info', resp.data)
      // 检查 nickname 和 avatar
      if (!resp.data.nickname || !resp.data.avatar) {
        uni.navigateTo({ url: '/pages/patient/profile/infos/base-info' })
      }
    }
  } catch (err) {
    uni.hideLoading()
    console.error('Fetch user info error:', err)
  }
}

// 如果在微信小程序端且未登录，自动跳转到登录页
onShow(() => {
  const token = uni.getStorageSync('token')
  if (!token) {
    // 使用 uni.reLaunch 替代 navigateTo，确保页面栈被清空
    uni.reLaunch({ url: '/pages/public/login/index' })
  } else {
    fetchUserInfo()
  }
})

const onMenuClick = (type: string) => {
  console.log('Menu clicked:', type)
  if (type === 'base-info') {
    // 跳转到修改个人信息页面
    uni.navigateTo({ url: '/pages/patient/profile/infos/base-info' })
    return
  }
  if (type === 'patient-filing') {
    // 跳转到建档信息设定页面
    uni.navigateTo({ url: '/pages/patient/profile/infos/patient-filing' })
    return
  }
  uni.showToast({
    title: `${type} 功能开发中`,
    icon: 'none'
  })
}

const onLogout = async () => {
  // 清空头像缓存
  avatarCache.clear()
  await logout({ after: () => { user.value = {} } })
}
</script>

<style>
.profile-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: calc(var(--status-bar-height) + 44px);
}

.header {
  background-color: #fff;
  padding: 40rpx;
  margin-bottom: 20rpx;
}

.avatar-section {
  display: flex;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  /* background-color: #007aff; */
  border: 1px solid rgba(128, 128, 128, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;
}

.avatar-frame {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden; /* 裁切超出部分，避免溢出 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 在部分平台下生效，保证图片填充同时裁切 */
}

.avatar-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: bold;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 28rpx;
  color: #666;
}

.menu-list {
  background-color: #fff;
  margin-bottom: 20rpx;
}

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

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

.menu-text {
  font-size: 32rpx;
  color: #333;
}

.menu-arrow {
  font-size: 28rpx;
  color: #ccc;
}

.logout-section {
  padding: 40rpx;
}

.logout-btn {
  width: 100%;
  background-color: #ff4757;
  color: #fff;
  border-radius: 8rpx;
  font-size: 32rpx;
  line-height: 80rpx;
}
</style>