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

<template>
  <view :class="['my-followups-page', elderClass]">
    <view class="tab-bar">
      <view
        v-for="tab in TABS" :key="tab.key"
        :class="['tab-item', activeTab === tab.key ? 'active' : '']"
        @tap="handleTabChange(tab.key)"
      >
        <text :class="['tab-text', activeTab === tab.key ? 'active' : '']">{{ tab.label }}</text>
        <view v-if="activeTab === tab.key" class="tab-indicator" />
      </view>
    </view>

    <view class="task-list">
      <view
        v-for="t in tasks" :key="t.id"
        class="task-card"
        @tap="goToDetail(t.id)"
      >
        <view class="task-top">
          <text class="task-name">{{ t.follow_up_type }}</text>
          <text :class="['task-status', getStatusClass(t.status)]">
            {{ getStatusLabel(t.status) }}
          </text>
        </view>
        <text class="task-desc">{{ t.content_template }}</text>
        <text class="task-due">截止: {{ t.planned_date }}</text>
      </view>
    </view>

    <EmptyState
      v-if="tasks.length === 0 && !loading"
      :text="'暂无' + (TABS.find(t => t.key === activeTab)?.label || '') + '任务'"
    />

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

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

const TABS = [
  { key: 'pending', label: '待完成' },
  { key: 'completed', label: '已完成' },
  { key: 'overdue', label: '已过期' },
]

const { elderClass } = useElderClass()
const authStore = useAuthStore()
const activeTab = ref('pending')
const tasks = ref<FollowUpTask[]>([])
const loading = ref(false)

const fetchTasks = async (status: string) => {
  loading.value = true
  try {
    const patientId = authStore.currentPatient?.id
    const res = await listTasks(patientId, status)
    tasks.value = res.data || []
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

const handleTabChange = (key: string) => {
  activeTab.value = key
  fetchTasks(key)
}

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

const getStatusClass = (status: string) => {
  if (status === 'completed') return 'completed'
  if (status === 'overdue') return 'overdue'
  return 'pending'
}

const getStatusLabel = (status: string) => {
  if (status === 'completed') return '已完成'
  if (status === 'overdue') return '已过期'
  return '待完成'
}

onShow(() => { fetchTasks(activeTab.value) })
</script>

<style lang="scss" scoped>
.my-followups-page { min-height: 100vh; background: $bg; }
.tab-bar { display: flex; background: $card; padding: 0; box-shadow: $shadow-sm; }
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px 0 20px;
  position: relative;
}
.tab-text {
  font-size: var(--tk-font-body-lg);
  color: $tx2;
  margin-bottom: 8px;
  &.active { color: $pri; font-weight: bold; }
}
.tab-indicator { width: 32px; height: 4px; background: $pri; border-radius: $r-xs; }
.task-list { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.task-card {
  background: $card;
  border-radius: $r;
  padding: 28px;
  box-shadow: $shadow-sm;
  &:active { box-shadow: $shadow-md; }
}
.task-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.task-name {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--tk-font-num);
  font-weight: bold;
  color: $tx;
}
.task-status {
  @include tag($bd-l, $tx2);
  &.pending { @include tag($wrn-l, $wrn); }
  &.completed { @include tag($acc-l, $acc); }
  &.overdue { @include tag($dan-l, $dan); }
}
.task-desc {
  font-size: var(--tk-font-h1);
  color: $tx2;
  display: block;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-due {
  @include serif-number;
  font-size: var(--tk-font-h2);
  color: $tx3;
  display: block;
}
</style>