hms/apps/miniprogram-uniapp/src/pages-sub/doctor/patients/detail/index.vue

<template>
  <Loading v-if="pageLoading" text="加载中..." />
  <view v-else-if="!patient" :class="['error-wrap', elderClass]">
    <text class="error-text">患者信息加载失败</text>
  </view>
  <scroll-view v-else scroll-y class="page-scroll">
    <view :class="['page-content', elderClass]">
      <!-- 基本信息 -->
      <view class="section">
        <text class="section-title">基本信息</text>
        <view class="info-grid">
          <view class="info-item">
            <text class="info-label">姓名</text>
            <text class="info-value">{{ patient.name }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">性别</text>
            <text class="info-value">{{ genderLabel(patient.gender) }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">年龄</text>
            <text class="info-value">{{ calcAge(patient.birth_date) }}岁</text>
          </view>
          <view v-if="patient.blood_type" class="info-item">
            <text class="info-label">血型</text>
            <text class="info-value">{{ patient.blood_type }}</text>
          </view>
        </view>
      </view>

      <!-- 医疗信息 -->
      <view v-if="patient.allergy_history || patient.medical_history_summary" class="section">
        <text class="section-title">医疗信息</text>
        <view v-if="patient.allergy_history" class="warning-card">
          <text class="warning-label">过敏史</text>
          <text class="warning-text">{{ patient.allergy_history }}</text>
        </view>
        <view v-if="patient.medical_history_summary" class="info-block">
          <text class="info-block-label">病史摘要</text>
          <text class="info-block-text">{{ patient.medical_history_summary }}</text>
        </view>
      </view>

      <!-- 健康概览 -->
      <view v-if="summary" class="section">
        <text class="section-title">健康概览</text>
        <view v-if="summary.latest_vital_signs" class="vitals-grid">
          <view
            v-if="summary.latest_vital_signs.systolic_bp != null"
            class="vital-item"
          >
            <text class="vital-value">{{ summary.latest_vital_signs.systolic_bp }}/{{ summary.latest_vital_signs.diastolic_bp }}</text>
            <text class="vital-label">血压 mmHg</text>
          </view>
          <view
            v-if="summary.latest_vital_signs.heart_rate != null"
            class="vital-item"
          >
            <text class="vital-value">{{ summary.latest_vital_signs.heart_rate }}</text>
            <text class="vital-label">心率 bpm</text>
          </view>
          <view
            v-if="summary.latest_vital_signs.weight != null"
            class="vital-item"
          >
            <text class="vital-value">{{ summary.latest_vital_signs.weight }}</text>
            <text class="vital-label">体重 kg</text>
          </view>
          <view
            v-if="summary.latest_vital_signs.blood_sugar != null"
            class="vital-item"
          >
            <text class="vital-value">{{ summary.latest_vital_signs.blood_sugar }}</text>
            <text class="vital-label">血糖 mmol/L</text>
          </view>
        </view>
        <view v-if="summary.pending_follow_ups != null && summary.pending_follow_ups > 0" class="stat-row">
          <text class="stat-label">待处理随访</text>
          <text class="stat-value stat-value--warn">{{ summary.pending_follow_ups }} 项</text>
        </view>
      </view>

      <!-- 近期化验 -->
      <view v-if="summary?.latest_lab_report" class="section">
        <text class="section-title">近期化验</text>
        <view
          class="lab-item"
          @tap="goReportDetail(summary!.latest_lab_report!.id)"
        >
          <view class="lab-item__header">
            <text class="lab-item__type">{{ summary.latest_lab_report.report_type }}</text>
            <text class="lab-item__date">{{ summary.latest_lab_report.report_date }}</text>
          </view>
          <text
            v-if="(summary.latest_lab_report.abnormal_count ?? 0) > 0"
            class="lab-item__abnormal"
          >{{ summary.latest_lab_report.abnormal_count }} 项异常</text>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="section">
        <text class="section-title">操作</text>
        <view class="action-buttons">
          <view class="action-btn" @tap="goReports">
            <text class="action-btn__text">查看化验报告</text>
          </view>
          <view class="action-btn" @tap="goFollowups">
            <text class="action-btn__text">随访记录</text>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useElderClass } from '@/composables/useElderClass'
import { getPatient, getHealthSummary } from '@/services/doctor/patient'
import type { PatientDetail, HealthSummary } from '@/services/doctor/patient'
import Loading from '@/components/Loading.vue'

const { elderClass } = useElderClass()

const patient = ref<PatientDetail | null>(null)
const summary = ref<HealthSummary | null>(null)
const pageLoading = ref(true)
const patientId = ref('')

function genderLabel(g?: string): string {
  if (g === 'male') return '男'
  if (g === 'female') return '女'
  return g || '-'
}

function calcAge(bd?: string): string {
  if (!bd) return '-'
  const diff = Date.now() - new Date(bd).getTime()
  return String(Math.floor(diff / (365.25 * 24 * 3600 * 1000)))
}

async function loadData() {
  if (!patientId.value) return
  pageLoading.value = true
  try {
    const [p, s] = await Promise.all([
      getPatient(patientId.value),
      getHealthSummary(patientId.value),
    ])
    patient.value = p
    summary.value = s
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    pageLoading.value = false
  }
}

function goReportDetail(reportId: string) {
  uni.navigateTo({
    url: `/pages-sub/doctor/report/detail/index?patientId=${patientId.value}&id=${reportId}`,
  })
}

function goReports() {
  uni.navigateTo({
    url: `/pages-sub/doctor/report/index?patientId=${patientId.value}`,
  })
}

function goFollowups() {
  uni.navigateTo({
    url: `/pages-sub/doctor/followup/index?patientId=${patientId.value}`,
  })
}

onLoad((query) => {
  patientId.value = query?.id || ''
  loadData()
})
</script>

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

.page-content {
  padding: 24px;
  padding-bottom: 120px;
}

.error-wrap {
  @include flex-center;
  height: 100vh;
  background: $bg;
}

.error-text {
  font-size: var(--tk-font-body-lg);
  color: $tx3;
}

// ── 通用区块 ──
.section {
  background: $card;
  border-radius: $r-lg;
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: $shadow-sm;
}

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

// ── 信息网格 ──
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

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

.info-value {
  font-size: var(--tk-font-body-lg);
  color: $tx;
  font-weight: 500;
}

// ── 过敏警告卡 ──
.warning-card {
  background: $wrn-l;
  border-radius: $r;
  padding: 20px;
  margin-bottom: 16px;
}

.warning-label {
  font-size: var(--tk-font-body);
  color: $wrn;
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.warning-text {
  font-size: var(--tk-font-h1);
  color: $pri-d;
}

// ── 病史摘要 ──
.info-block {
  margin-bottom: 12px;
}

.info-block-label {
  font-size: var(--tk-font-body);
  color: $tx3;
  display: block;
  margin-bottom: 8px;
}

.info-block-text {
  font-size: var(--tk-font-h1);
  color: $tx;
  line-height: 1.6;
}

// ── 体征网格 ──
.vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.vital-item {
  background: $pri-l;
  border-radius: $r;
  padding: 20px;
  text-align: center;
}

.vital-value {
  @include serif-number;
  font-size: var(--tk-font-num-lg);
  font-weight: 700;
  color: $pri;
  display: block;
  margin-bottom: 4px;
}

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

// ── 统计行 ──
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.stat-label {
  font-size: var(--tk-font-h1);
  color: $tx2;
}

.stat-value {
  @include serif-number;
  font-size: var(--tk-font-h1);
  font-weight: 600;
  color: $tx;

  &--warn {
    color: $wrn;
  }
}

// ── 化验卡片 ──
.lab-item {
  padding: 20px 0;
  min-height: $touch-min;
  border-bottom: 1px solid $bd-l;

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

  &:active {
    background: $bd-l;
  }

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }

  &__type {
    font-size: var(--tk-font-h1);
    font-weight: 500;
    color: $tx;
  }

  &__date {
    font-size: var(--tk-font-h2);
    color: $tx3;
  }

  &__abnormal {
    font-size: var(--tk-font-h2);
    color: $dan;
    font-weight: 500;
  }
}

// ── 操作按钮 ──
.action-buttons {
  display: flex;
  gap: 16px;
}

.action-btn {
  flex: 1;
  text-align: center;
  padding: 20px;
  min-height: $touch-min;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $r;
  background: $pri;

  &:active {
    opacity: 0.85;
  }

  &__text {
    color: $card;
    font-size: var(--tk-font-h1);
    font-weight: 500;
  }
}
</style>