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

<template>
  <view :class="['my-reports-page', elderClass]">
    <text class="page-title">检查报告</text>

    <view class="report-list">
      <view
        v-for="r in reports" :key="r.id"
        class="report-card"
        @tap="goToDetail(r.id)"
      >
        <view class="report-card-top">
          <view class="report-type-row">
            <view class="report-avatar">
              <text class="report-avatar-text">{{ typeInitial(r.report_type) }}</text>
            </view>
            <text class="report-type">{{ r.report_type }}</text>
          </view>
          <text :class="['report-status', formatStatus(r)]">
            {{ formatStatus(r) === 'normal' ? '正常' : formatStatus(r) === 'abnormal' ? '异常' : '未知' }}
          </text>
        </view>
        <text class="report-date">{{ r.report_date }}</text>
      </view>
    </view>

    <EmptyState
      v-if="reports.length === 0 && !loading"
      :text="authStore.currentPatient ? '暂无报告记录' : '请先在就诊人管理中选择就诊人'"
    />

    <Loading v-if="loading" text="加载中..." />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { listReports, type LabReport } from '@/services/report'
import { useAuthStore } from '@/stores/auth'
import { useElderClass } from '@/composables/useElderClass'
import EmptyState from '@/components/EmptyState.vue'
import Loading from '@/components/Loading.vue'

const { elderClass } = useElderClass()
const authStore = useAuthStore()
const reports = ref<LabReport[]>([])
const page = ref(1)
const total = ref(0)
const loading = ref(false)

const fetchData = async (p: number, append = false) => {
  if (!authStore.currentPatient) {
    reports.value = []
    return
  }
  loading.value = true
  try {
    const res = await listReports(authStore.currentPatient.id, p)
    const list = res.data || []
    reports.value = append ? [...reports.value, ...list] : list
    total.value = res.total
    page.value = p
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const loadMore = () => {
  if (!loading.value && reports.value.length < total.value) {
    fetchData(page.value + 1, true)
  }
}

const goToDetail = (id: string) => {
  uni.navigateTo({ url: `/pages-sub/report/detail/index?id=${id}` })
}

const formatStatus = (report: LabReport) => {
  const indicators = report.indicators
  if (!indicators || typeof indicators !== 'object') return 'unknown'
  const vals = Object.values(indicators) as Array<{ status?: string }>
  const hasAbnormal = vals.some((v) => v.status === 'high' || v.status === 'low')
  return hasAbnormal ? 'abnormal' : 'normal'
}

const typeInitial = (type: string) => {
  return type ? type.charAt(0) : '报'
}

onShow(() => { fetchData(1) })
onPullDownRefresh(() => { fetchData(1).finally(() => uni.stopPullDownRefresh()) })
</script>

<style lang="scss" scoped>
.my-reports-page {
  min-height: 100vh;
  background: $bg;
  padding: 32px 24px;
  padding-bottom: 40px;
}
.page-title { @include section-title; padding-left: 4px; }
.report-list { display: flex; flex-direction: column; gap: 16px; }
.report-card {
  background: $card;
  border-radius: $r;
  padding: 28px;
  box-shadow: $shadow-sm;
  &:active { box-shadow: $shadow-md; }
}
.report-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.report-type-row { display: flex; align-items: center; }
.report-avatar {
  @include flex-center;
  width: 56px; height: 56px;
  border-radius: $r-sm;
  background: $pri-l;
  margin-right: 16px;
  flex-shrink: 0;
}
.report-avatar-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-body-lg);
  font-weight: bold;
  color: $pri-d;
}
.report-type {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-num);
  font-weight: bold;
  color: $tx;
}
.report-status {
  @include tag($bd-l, $tx2);
  &.normal { @include tag($acc-l, $acc); }
  &.abnormal { @include tag($dan-l, $dan); }
}
.report-date {
  @include serif-number;
  font-size: var(--tk-font-h1);
  color: $tx2;
  display: block;
  padding-left: 72px;
}
</style>