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

<template>
  <view :class="['detail-page', elderClass]">
    <Loading v-if="loading" text="加载中..." />
    <ErrorState v-else-if="error || !task" text="任务不存在" />
    <template v-else>
      <view class="detail-card">
        <text class="detail-title">{{ task.follow_up_type }}</text>
        <view class="detail-row">
          <text class="detail-label">状态</text>
          <text :class="['detail-value', getStatusClass(task.status)]">{{ getStatusLabel(task.status) }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">截止日期</text>
          <text class="detail-value">{{ task.planned_date }}</text>
        </view>
        <view v-if="countdown" :class="['countdown', countdown.urgent ? 'countdown-urgent' : '']">
          <text class="countdown-text">{{ countdown.text }}</text>
        </view>
        <view v-if="task.content_template" class="detail-desc">
          <text class="detail-desc-text">{{ task.content_template }}</text>
        </view>
      </view>

      <view v-if="task.status !== 'completed'" class="submit-card">
        <text class="section-title">填写随访记录</text>
        <textarea class="submit-textarea" placeholder="请输入随访内容..." :value="content" @input="(e: any) => content = e.detail.value" :maxlength="500" />
        <view :class="['submit-btn', submitting ? 'disabled' : '']" @tap="submitting ? undefined : handleSubmit">
          <text class="submit-btn-text">{{ submitting ? '提交中...' : '提交' }}</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTaskDetail, submitRecord, type FollowUpTask } from '@/services/followup'
import { trackEvent } from '@/services/analytics'
import ErrorState from '@/components/ErrorState.vue'
import Loading from '@/components/Loading.vue'
import { useElderClass } from '@/composables/useElderClass'

const { elderClass } = useElderClass()
const task = ref<FollowUpTask | null>(null)
const content = ref('')
const submitting = ref(false)
const loading = ref(true)
const error = ref(false)
let id = ''

const getStatusLabel = (status: string) => status === 'completed' ? '已完成' : status === 'overdue' ? '已过期' : '待完成'
const getStatusClass = (status: string) => status === 'completed' ? 'status-completed' : status === 'overdue' ? 'status-overdue' : 'status-pending'

const countdown = computed(() => {
  if (!task.value || task.value.status === 'completed') return null
  const now = new Date()
  const due = new Date(task.value.planned_date)
  const diffMs = due.getTime() - now.getTime()
  const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24))
  if (diffDays < 0) return { text: `已过期 ${Math.abs(diffDays)} 天`, urgent: true }
  if (diffDays === 0) return { text: '今天截止', urgent: true }
  if (diffDays <= 3) return { text: `还剩 ${diffDays} 天`, urgent: true }
  return { text: `还剩 ${diffDays} 天`, urgent: false }
})

const handleSubmit = async () => {
  if (!content.value.trim()) { uni.showToast({ title: '请输入内容', icon: 'none' }); return }
  submitting.value = true
  try {
    await submitRecord(id, { result: content.value.trim(), patient_condition: content.value.trim() })
    uni.showToast({ title: '提交成功', icon: 'success' })
    trackEvent('followup_submit', { task_id: id })
    content.value = ''
  } catch { uni.showToast({ title: '提交失败', icon: 'none' }) }
  finally { submitting.value = false }
}

onLoad((query) => {
  id = query?.id || ''
  if (!id) { error.value = true; loading.value = false; return }
  loading.value = true
  getTaskDetail(id).then(data => { task.value = data }).catch(() => { error.value = true }).finally(() => { loading.value = false })
})
</script>

<style lang="scss" scoped>
.detail-page { min-height: 100vh; background: $bg; padding: 24px; }
.detail-card { @include card; margin-bottom: 16px; }
.detail-title { font-size: var(--tk-font-title); font-weight: 600; color: $tx; display: block; margin-bottom: 12px; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; }
.detail-label { font-size: var(--tk-font-cap); color: $tx3; }
.detail-value { font-size: var(--tk-font-body); color: $tx; }
.status-completed { color: $acc; }
.status-overdue { color: $dan; }
.status-pending { color: $pri; }
.countdown { margin-top: 8px; padding: 8px 12px; border-radius: $r; background: rgba(250,173,20,0.08); }
.countdown-urgent { background: rgba(255,77,79,0.08); }
.countdown-text { font-size: var(--tk-font-cap); color: $wrn; }
.countdown-urgent .countdown-text { color: $dan; }
.detail-desc { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); }
.detail-desc-text { font-size: var(--tk-font-cap); color: $tx2; line-height: 1.6; }
.submit-card { @include card; }
.section-title { font-size: var(--tk-font-body); font-weight: 500; color: $tx; margin-bottom: 12px; display: block; }
.submit-textarea { width: 100%; min-height: 120px; border: 1px solid rgba(0,0,0,0.08); border-radius: $r; padding: 12px; font-size: var(--tk-font-body); box-sizing: border-box; }
.submit-btn { margin-top: 16px; height: $touch-min; background: $pri; border-radius: $r; @include flex-center; }
.submit-btn.disabled { opacity: 0.5; }
.submit-btn-text { color: $white; font-size: var(--tk-font-body); font-weight: 500; }
</style>