hms/apps/miniprogram-uniapp/src/pages/profile/index.vue

<template>
  <scroll-view scroll-y class="profile-scroll">
    <view :class="['profile-page', elderClass]">
      <!-- 已登录 -->
      <template v-if="authStore.user">
        <!-- 用户信息卡片 -->
        <view class="profile-card">
          <view class="avatar">
            <text class="avatar-text">{{ (authStore.user.display_name || authStore.user.username || '?')[0] }}</text>
          </view>
          <text class="profile-name">{{ authStore.user.display_name || authStore.user.username }}</text>
          <text class="profile-phone">{{ authStore.user.phone || '' }}</text>
        </view>

        <!-- 患者切换 -->
        <view v-if="authStore.patients.length > 0" class="card patient-card">
          <text class="section-title">就诊人</text>
          <view v-for="p in authStore.patients" :key="p.id"
            :class="['patient-item', { active: authStore.currentPatient?.id === p.id }]"
            @tap="authStore.setCurrentPatient(p)"
          >
            <text class="patient-name">{{ p.name }}</text>
            <text class="patient-relation">{{ p.relation }}</text>
          </view>
        </view>

        <!-- 菜单 -->
        <view class="card menu-card">
          <view class="menu-item" @tap="navigateTo('/pages-sub/appointment/index')">
            <text class="menu-label">我的预约</text>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @tap="navigateTo('/pages-sub/consultation/index')">
            <text class="menu-label">我的咨询</text>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @tap="navigateTo('/pages-sub/mall/index')">
            <text class="menu-label">积分商城</text>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @tap="navigateTo('/pages-sub/article/index')">
            <text class="menu-label">健康文章</text>
            <text class="menu-arrow">›</text>
          </view>
          <view class="menu-item" @tap="uiStore.toggleElderMode()">
            <text class="menu-label">{{ uiStore.elderMode ? '退出关怀模式' : '关怀模式' }}</text>
            <text class="menu-arrow">{{ uiStore.elderMode ? '✓' : '›' }}</text>
          </view>
        </view>

        <!-- 退出登录 -->
        <view class="logout-btn" @tap="handleLogout">
          退出登录
        </view>
      </template>

      <!-- 未登录 -->
      <template v-else>
        <view class="guest-profile">
          <view class="avatar avatar-placeholder">
            <text class="avatar-text">?</text>
          </view>
          <text class="guest-text">未登录</text>
          <view class="guest-login-btn" @tap="navigateTo('/pages/login/index')">
            去登录
          </view>
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useAuthStore } from '@/stores/auth'
import { useUIStore } from '@/stores/ui'
import { useElderClass } from '@/composables/useElderClass'

const authStore = useAuthStore()
const uiStore = useUIStore()
const { elderClass } = useElderClass()

function navigateTo(url: string) {
  uni.navigateTo({ url })
}

function handleLogout() {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: (res: any) => {
      if (res.confirm) authStore.logout()
    },
  })
}

onShow(() => {
  authStore.restore()
  if (authStore.user) authStore.loadPatients()
})
</script>

<style lang="scss" scoped>
.profile-scroll {
  height: 100vh;
  background: $bg;
}

.profile-page {
  padding: 28px 24px 120px;
}

.profile-card {
  @include flex-center;
  flex-direction: column;
  background: $card;
  border-radius: $r-lg;
  padding: 36px 24px;
  margin-bottom: 24px;
  box-shadow: $shadow-md;
}

.avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: $pri;
  @include flex-center;
  margin-bottom: 16px;
}

.avatar-text {
  font-size: var(--tk-font-h1);
  color: $white;
  font-weight: bold;
}

.avatar-placeholder {
  background: $bd;
}

.profile-name {
  font-size: var(--tk-font-h2);
  font-weight: bold;
  color: $tx;
}

.profile-phone {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
  margin-top: 4px;
}

.card {
  @include card;
}

.section-title {
  @include section-title;
}

.patient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  min-height: $touch-min;
  border-bottom: 1px solid $bd-l;

  &:last-child { border-bottom: none; }

  &.active {
    .patient-name { color: $pri; font-weight: 600; }
  }
}

.patient-name {
  font-size: var(--tk-font-body);
  color: $tx;
}

.patient-relation {
  font-size: var(--tk-font-body-sm);
  color: $tx3;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid $bd-l;
  min-height: $menu-item-h;

  &:last-child { border-bottom: none; }
}

.menu-label {
  font-size: var(--tk-font-body);
  color: $tx;
}

.menu-arrow {
  font-size: var(--tk-font-h2);
  color: $tx3;
}

.logout-btn {
  @include btn-outline;
  margin-top: 32px;
}

// 未登录
.guest-profile {
  @include flex-center;
  flex-direction: column;
  padding: 80px 0 40px;
}

.guest-text {
  font-size: var(--tk-font-body);
  color: $tx3;
  margin: 16px 0 32px;
}

.guest-login-btn {
  @include btn-primary;
  width: 200px;
}
</style>