akmon/pages/ec/doctor/patient-queue.uvue

<template>
  <view class="patient-queue">
    <view class="header">
      <text class="header-title">今日患者队列</text>
    </view>
    <scroll-view class="queue-list" scroll-y="true" :style="{ height: '600px' }">
      <view 
        v-for="appointment in queue" 
        :key="appointment.id"
        class="queue-item"
        :class="{ 'current': isCurrent(appointment), 'completed': appointment.status === 'completed' }"
        @click="openAppointment(appointment)"
      >
        <view class="queue-time">
          <text class="time-text">{{ formatTime(appointment.scheduled_time) }}</text>
          <text class="status-text" :class="appointment.status">{{ getStatusText(appointment.status) }}</text>
        </view>
        <view class="queue-details">
          <text class="patient-name">{{ appointment.elder_name }}</text>
          <text class="room-info" v-if="appointment.room_number">房间: {{ appointment.room_number }}</text>
        </view>
      </view>
      <view v-if="queue.length === 0" class="empty-state">
        <text class="empty-text">今日暂无预约</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup lang="uts">
import { ref, onMounted } from 'vue'
import supa from '@/components/supadb/aksupainstance.uts'
import { formatTime, getTodayStart, getTodayEnd } from '../types_new.uts'

type Appointment = {
  id: string
  elder_id: string
  elder_name: string
  scheduled_time: string
  status: string
  room_number: string
}

const queue = ref<Array<Appointment>>([])

onMounted(() => {
  loadQueue()
})

const loadQueue = async () => {
  try {
    const result = await supa
      .from('ec_appointments')
      .select('id, elder_id, elder_name, scheduled_time, status, room_number')
      .gte('scheduled_time', getTodayStart())
      .lte('scheduled_time', getTodayEnd())
      .order('scheduled_time', { ascending: true })
      .executeAs<Appointment[]>()
    if (result.error == null && result.data != null) {
      queue.value = result.data
    }
  } catch (error) {
    console.error('加载队列失败:', error)
  }
}

const getStatusText = (status: string): string => {
  const statusMap = new Map([
    ['scheduled', '待诊疗'],
    ['in_progress', '进行中'],
    ['completed', '已完成'],
    ['cancelled', '已取消'],
    ['no_show', '未到']
  ])
  return statusMap.get(status) ?? status
}

const isCurrent = (appointment: Appointment): boolean => {
  const now = new Date()
  const t = new Date(appointment.scheduled_time)
  return Math.abs(now.getTime() - t.getTime()) <= 30 * 60 * 1000 && appointment.status === 'in_progress'
}

const openAppointment = (appointment: Appointment) => {
  uni.navigateTo({ url: `/pages/ec/doctor/appointment-detail?id=${appointment.id}` })
}
</script>

<style scoped>
.patient-queue {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.header {
  margin-bottom: 16px;
}
.header-title {
  font-size: 20px;
  font-weight: bold;
}
.queue-list {
  background-color: #fff;
  border-radius: 10px;
}
.queue-item {
  padding: 14px 10px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.queue-item:last-child {
  border-bottom: none;
}
.queue-item.current {
  background-color: #e8f5e8;
  border-left: 4px solid #4caf50;
}
.queue-item.completed {
  opacity: 0.6;
}
.queue-time {
  width: 80px;
  flex-shrink: 0;
}
.time-text {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.status-text {
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}
.status-text.scheduled { color: #3498db; }
.status-text.in_progress { color: #f39c12; }
.status-text.completed { color: #27ae60; }
.status-text.cancelled { color: #e74c3c; }
.queue-details {
  flex: 1;
  margin-left: 10px;
}
.patient-name {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.room-info {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}
.empty-state {
  padding: 30px 0;
  text-align: center;
}
.empty-text {
  font-size: 13px;
  color: #999;
}
</style>