hn-hlw-app/pages/member/list.vue

<template>
  <full-page>
    <view class="page-container" :class="{ 'page-container--elder': elderMode }">
      <template v-if="logined">
        <view v-if="selfPatient" class="group-name" :class="elderMode ? 'group-name--elder' : ''">本人档案</view>
        <view v-if="selfPatient" class="user" :class="{ 'user--elder': elderMode }" @click="toDetail(selfPatient)">
          <image class="avatar" :src="userInfo.avatar"></image>
          <view class="text-info">
            <view class="name-bar" :class="{ 'name-bar--elder': elderMode }">
              <view class="name">{{ selfPatient.maskName }}</view>
              <view class="tag-group" :class="{ 'tag-group--elder': elderMode }">
                <view class="user-tag">本人</view>
                <view class="user-tag user-tag--warning">已实名</view>
              </view>
            </view>
            <view class="mobile">{{ selfPatient.maskMobile }}</view>
          </view>
          <uni-icons type="right" :size="elderMode ? 36 : 28" color="#0074ff"></uni-icons>
        </view>
        <template v-if="otherPatients.length">
          <view class="group-name" :class="elderMode ? 'group-name--elder' : ''">其他就诊人</view>
          <view v-for="item in otherPatients" :key="item.id" class="user" :class="{ 'user--elder': elderMode }"
            @click="toDetail(item)">
            <image class="avatar" src="/static/family-avatar.png"></image>
            <view class="text-info">
              <view class="name-bar" :class="{ 'name-bar--elder': elderMode }">
                <view class="name">{{ item.maskName }}</view>
                <!-- <view class="tag-group" :class="{ 'tag-group--elder': elderMode }">
                  <view class="user-tag user-tag--warning">已实名</view>
                </view> -->

              </view>
              <view class="mobile">{{ item.maskMobile }}</view>
            </view>
            <uni-icons type="right" :size="elderMode ? 36 : 28" color="#0074ff"></uni-icons>
          </view>
        </template>
      </template>
      <re-login v-else />
    </view>
    <template v-if="logined" #footer>
      <footer-button text="新增就诊人" @onClick="toDetail" />
    </template>
  </full-page>

</template>
<script setup>
import { computed, ref, onMounted, watch } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import useUser from '@/hooks/useUser';

import footerButton from '@/components/footer-button.vue';
import fullPage from "@/components/full-page.vue";
import reLogin from '@/components/re-login.vue';


const { userInfo, logined, patientList, loadPatientList } = useUser();

// 适老化模式状态
const elderMode = ref(false);
const selfPatient = computed(() => patientList.value.find(item => item.isSelf) || null);
const otherPatients = computed(() => patientList.value.filter(item => !item.isSelf));

onMounted(() => {
  // 从本地存储读取适老化模式状态
  elderMode.value = uni.getStorageSync('elderMode');
  const savedElderMode = uni.getStorageSync('elderMode')
  if (savedElderMode !== null && savedElderMode !== undefined) {
    elderMode.value = savedElderMode
  }
});

function toDetail(patient) {
  uni.navigateTo({
    url: `/pages/member/detail${patient && patient.id ? `?id=${patient.id}` : ''}`,
  });
}

onShow(() => {
  if (logined.value) loadPatientList();
});

watch(logined, value => {
  if (value) loadPatientList();
});

</script>
<style lang="scss" scoped>
.page-container {
  height: 100%;
  padding: 30rpx;
  box-sizing: border-box;

  // 标准模式CSS变量
  --font-scale: 1;
  --spacing-scale: 1;
  --touch-target: 40rpx;

  // 适老化模式CSS变量
  &--elder {
    --font-scale: 1.4;
    --spacing-scale: 1.2;
    --touch-target: 44rpx;
    padding: calc(30rpx * var(--spacing-scale));
  }
}

.group-name {
  font-size: 32rpx;
  color: #666;
  line-height: 60rpx;
  font-weight: 600;
  padding: 20rpx 0;
}

.group-name--elder {
  font-size: calc(36rpx * var(--font-scale));
  color: #555;
  margin-bottom: calc(20rpx * var(--spacing-scale));
}

.user {
  display: flex;
  align-items: center;
  padding: calc(24rpx * var(--spacing-scale)) calc(30rpx * var(--spacing-scale));
  background-color: white;
  border-radius: calc(16rpx * var(--spacing-scale));
  box-shadow: 0 0 calc(10rpx * var(--spacing-scale)) rgba(0, 0, 0, 0.1);

  &--elder {
    box-shadow: 0 0 calc(12rpx * var(--spacing-scale)) rgba(0, 0, 0, 0.15);
    min-height: calc(120rpx * var(--spacing-scale));
  }

  .avatar {
    flex-shrink: 0;
    width: calc(120rpx * var(--spacing-scale));
    height: calc(120rpx * var(--spacing-scale));
    border-radius: 50%;
  }

  .text-info {
    flex-grow: 1;
    margin: 0 calc(30rpx * var(--spacing-scale));
  }

  .name-bar {
    display: flex;
    align-items: center;
    font-size: calc(36rpx * var(--font-scale));
    font-weight: bold;
    color: #333333;
    flex-wrap: wrap;
    gap: calc(8rpx * var(--spacing-scale));

    &--elder {
      margin-bottom: calc(8rpx * var(--spacing-scale));
      flex-direction: column;
      align-items: flex-start;
      gap: calc(12rpx * var(--spacing-scale));
    }

    .name {
      flex-shrink: 0;
    }

    .tag-group {
      display: flex;
      gap: calc(8rpx * var(--spacing-scale));
      flex-wrap: wrap;
    }
  }

  .mobile {
    margin-top: calc(16rpx * var(--spacing-scale));
    font-size: calc(28rpx * var(--font-scale));
    color: #999999;
    line-height: calc(40rpx * var(--font-scale));
  }

  .user-tag {
    height: calc(var(--touch-target) * var(--spacing-scale));
    line-height: calc(var(--touch-target) * var(--spacing-scale));
    font-size: calc(24rpx * var(--font-scale));
    color: #fff;
    padding: 0 calc(20rpx * var(--spacing-scale));
    border-radius: calc(20rpx * var(--spacing-scale));
    background: #0074ff;
    min-height: var(--touch-target);
    white-space: nowrap;
    flex-shrink: 0;

    &--warning {
      background: #ff9900;
    }
  }
}
</style>