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

<template>
  <view :class="['page-scroll', elderClass]">
    <view class="page-content">
      <text class="page-title">化验报告</text>

      <!-- Search bar -->
      <view class="search-bar">
        <input
          class="search-input"
          placeholder="搜索患者姓名"
          :value="searchText"
          @input="(e: any) => searchText = e.detail.value"
          @confirm="handleSearch"
          confirm-type="search"
        />
      </view>

      <!-- Loading -->
      <Loading v-if="loading && reports.length === 0" text="加载中..." />

      <!-- Empty -->
      <EmptyState v-else-if="reports.length === 0 && !loading" icon="📋" title="暂无化验报告" />

      <!-- Report list -->
      <scroll-view v-else scroll-y class="list-scroll" @scrolltolower="loadMore">
        <view
          v-for="item in reports" :key="item.id"
          class="report-card"
          @tap="goDetail(item.id)"
        >
          <view class="card-header">
            <text class="report-type">{{ item.report_type }}</text>
            <text class="status-tag" :style="getStatusInlineStyle(item.status)">
              {{ getStatusLabel(item.status) }}
            </text>
          </view>

          <view class="card-body">
            <text class="report-date">报告日期：{{ item.report_date }}</text>

            <view v-if="item.abnormal_count != null && item.abnormal_count > 0" class="abnormal-badge">
              <text class="abnormal-text">{{ item.abnormal_count }} 项异常</text>
            </view>
          </view>
        </view>

        <Loading v-if="loading" text="加载中..." />
        <view v-if="!loading && reports.length >= total && total > 0" class="no-more">
          <text class="no-more-text">没有更多了</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
import * as doctorApi from '@/services/doctor/labReport'
import { listPatients } from '@/services/doctor/patient'
import { getStatusInlineStyle, getStatusLabel } from '@/utils/statusTag'
import { useElderClass } from '@/composables/useElderClass'
import EmptyState from '@/components/EmptyState.vue'
import Loading from '@/components/Loading.vue'

const { elderClass } = useElderClass()
const reports = ref<doctorApi.LabReportItem[]>([])
const total = ref(0)
const page = ref(1)
const loading = ref(false)
const searchText = ref('')
let patientId = ''
let currentPatientId = ''
let loadingGuard = false

async function fetchReports(pageNum: number, isRefresh = false) {
  if (loadingGuard || !currentPatientId) return
  loadingGuard = true
  loading.value = true
  try {
    const res = await doctorApi.listLabReports(currentPatientId, {
      page: pageNum,
      page_size: 20,
    })
    const list = res.data || []
    reports.value = isRefresh ? list : [...reports.value, ...list]
    total.value = res.total
    page.value = pageNum
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loadingGuard = false
    loading.value = false
  }
}

async function handleSearch() {
  const keyword = searchText.value.trim()
  if (!keyword) return

  loading.value = true
  try {
    const res = await listPatients({ search: keyword, page_size: 1 })
    const patients = res.data || []
    if (patients.length > 0) {
      currentPatientId = patients[0].id
      fetchReports(1, true)
    } else {
      uni.showToast({ title: '未找到该患者', icon: 'none' })
      loading.value = false
    }
  } catch {
    uni.showToast({ title: '搜索失败', icon: 'none' })
    loading.value = false
  }
}

function loadMore() {
  if (!loading.value && reports.value.length < total.value) {
    fetchReports(page.value + 1)
  }
}

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

onLoad((query) => {
  patientId = query?.patientId || ''
  if (patientId) {
    currentPatientId = patientId
    fetchReports(1, true)
  }
})

onPullDownRefresh(() => {
  if (currentPatientId) {
    fetchReports(1, true).finally(() => uni.stopPullDownRefresh())
  } else {
    uni.stopPullDownRefresh()
  }
})
</script>

<style lang="scss" scoped>
.page-scroll { min-height: 100vh; background: $bg; }
.page-content { padding: 28px 0 120px; }
.page-title { @include section-title; margin-left: 24px; }

// Search bar
.search-bar {
  padding: 0 24px 16px;
}

.search-input {
  height: 48px;
  background: $card;
  border-radius: $r;
  padding: 0 16px;
  font-size: var(--tk-font-body);
  color: $tx;
  box-shadow: $shadow-sm;
}

// List
.list-scroll { height: calc(100vh - 180px); }

.report-card {
  background: $card;
  border-radius: $r;
  padding: 20px 24px;
  margin: 0 24px 16px;
  box-shadow: $shadow-sm;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.report-type {
  font-size: var(--tk-font-body);
  font-weight: 600;
  color: $tx;
}

.status-tag {
  @include status-inline;
}

.card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-date {
  font-size: var(--tk-font-cap);
  color: $tx3;
}

.abnormal-badge {
  padding: 2px 10px;
  border-radius: $r-pill;
  background: $dan-l;
}

.abnormal-text {
  font-size: var(--tk-font-cap);
  color: $dan;
  font-weight: 500;
}

.no-more { @include flex-center; padding: 20px; }
.no-more-text { font-size: var(--tk-font-cap); color: $tx3; }
</style>