hms/apps/miniprogram-uniapp/src/pages-sub/pkg-health/alerts/index.vue

<template>
  <view :class="['alerts-page', elderClass]">
    <template v-if="!authStore.currentPatient">
      <view class="alerts-empty">
        <text class="alerts-empty-text">请先完善个人档案</text>
        <view class="alerts-empty-action" @tap="goAddFamily">
          <text class="alerts-empty-action-text">去建档</text>
        </view>
      </view>
    </template>
    <template v-else>
      <view class="alerts-tabs">
        <view
          v-for="tab in STATUS_TABS" :key="tab.key"
          :class="['alerts-tab', status === tab.key ? 'active' : '']"
          @tap="handleTabChange(tab.key)"
        >
          <text :class="['alerts-tab-text', status === tab.key ? 'active' : '']">{{ tab.label }}</text>
        </view>
      </view>

      <view v-if="alerts.length === 0 && !loading" class="alerts-empty">
        <text class="alerts-empty-text">暂无告警记录</text>
        <text class="alerts-empty-hint">您的各项指标正常</text>
      </view>

      <scroll-view v-else scroll-y class="alerts-scroll" @scrolltolower="loadMore">
        <view class="alert-card" v-for="item in alerts" :key="item.id">
          <view class="alert-header">
            <view :class="['alert-badge', (SEVERITY_MAP[item.severity] || SEVERITY_MAP.warning).className]">
              <text class="alert-badge-text">{{ (SEVERITY_MAP[item.severity] || SEVERITY_MAP.warning).label }}</text>
            </view>
            <text class="alert-time">{{ formatDate(item.created_at) }}</text>
          </view>
          <text class="alert-title">{{ item.title }}</text>
        </view>
        <Loading v-if="loading" text="加载中..." />
        <view v-if="!loading && alerts.length >= total && total > 0" class="no-more"><text class="no-more-text">没有更多了</text></view>
      </scroll-view>
    </template>
  </view>
</template>

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

const SEVERITY_MAP: Record<string, { label: string; className: string }> = {
  info: { label: '提示', className: 'sev-info' },
  warning: { label: '警告', className: 'sev-warning' },
  critical: { label: '严重', className: 'sev-critical' },
  urgent: { label: '紧急', className: 'sev-urgent' },
}
const STATUS_TABS = [
  { key: '', label: '全部' },
  { key: 'pending', label: '待处理' },
  { key: 'acknowledged', label: '已确认' },
  { key: 'resolved', label: '已恢复' },
]

const { elderClass } = useElderClass()
const authStore = useAuthStore()
const alerts = ref<Alert[]>([])
const total = ref(0)
const page = ref(1)
const status = ref('')
const loading = ref(false)
let loadingGuard = false

const fetchAlerts = async (pageNum: number, s: string, isRefresh = false) => {
  if (!authStore.currentPatient || loadingGuard) return
  loadingGuard = true
  loading.value = true
  try {
    const res = await listPatientAlerts(authStore.currentPatient.id, { page: pageNum, page_size: 20, status: s || undefined })
    const list = res.data || []
    alerts.value = isRefresh ? list : [...alerts.value, ...list]
    total.value = res.total
    page.value = pageNum
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loadingGuard = false
    loading.value = false
  }
}

const handleTabChange = (key: string) => { status.value = key; fetchAlerts(1, key, true) }
const loadMore = () => { if (!loading.value && alerts.value.length < total.value) fetchAlerts(page.value + 1, status.value) }
const goAddFamily = () => uni.navigateTo({ url: '/pages-sub/pkg-profile/family-add/index' })
const formatDate = (d: string) => new Date(d).toLocaleDateString()

onShow(() => { fetchAlerts(1, status.value, true) })
onPullDownRefresh(() => { fetchAlerts(1, status.value, true).finally(() => uni.stopPullDownRefresh()) })
</script>

<style lang="scss" scoped>
.alerts-page { min-height: 100vh; background: $bg; }
.alerts-tabs { display: flex; padding: 12px 24px; gap: 8px; background: $card; }
.alerts-tab { padding: 6px 16px; min-height: $touch-min; display: flex; align-items: center; border-radius: 20px; background: rgba(0,0,0,0.04); }
.alerts-tab.active { background: $pri; }
.alerts-tab-text { font-size: var(--tk-font-cap); color: $tx2; }
.alerts-tab-text.active { color: $white; }
.alerts-scroll { height: calc(100vh - 52px); }
.alert-card { @include card; margin: 0 24px 12px; }
.alert-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.alert-badge { padding: 2px 8px; border-radius: 4px; }
.sev-info { background: rgba(0,0,0,0.05); }
.sev-warning { background: rgba(250,173,20,0.15); }
.sev-critical { background: rgba(255,77,79,0.15); }
.sev-urgent { background: rgba(114,46,209,0.15); }
.alert-badge-text { font-size: var(--tk-font-micro); color: $tx2; }
.alert-time { font-size: var(--tk-font-cap); color: $tx3; }
.alert-title { font-size: var(--tk-font-body); color: $tx; line-height: 1.5; }
.alerts-empty { @include flex-center; flex-direction: column; padding: 80px 40px; }
.alerts-empty-text { font-size: var(--tk-font-body); color: $tx2; }
.alerts-empty-hint { font-size: var(--tk-font-cap); color: $tx3; margin-top: 8px; }
.alerts-empty-action { margin-top: 20px; padding: 8px 24px; min-height: $touch-min; display: flex; align-items: center; background: $pri; border-radius: $r; }
.alerts-empty-action-text { color: $white; font-size: var(--tk-font-body); }
.no-more { @include flex-center; padding: 20px; }
.no-more-text { font-size: var(--tk-font-cap); color: $tx3; }
</style>