From d12bf9005070a9827b83e1b1783333982cb14614 Mon Sep 17 00:00:00 2001
From: bot5 <bot5@intc.com>
Date: Wed, 18 Mar 2026 20:39:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(health):=20=E6=96=B0=E5=A2=9E=E7=94=A8?=
 =?UTF-8?q?=E8=8D=AF=E8=AE=A1=E5=88=92=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增用药计划和用药记录API接口
- 新增用药计划列表/详情/新增编辑页面
- 新增用药记录列表页面(含今日待服药快捷卡片)
- 支持服药/跳过操作
- 更新pages.json路由配置
---
 src/api/health/medicationPlan.js              |  86 +++
 src/api/health/medicationRecord.js            |  79 +++
 src/pages.json                                |  24 +
 .../work/health/medicationPlan/addEdit.vue    | 398 +++++++++++
 .../work/health/medicationPlan/details.vue    | 354 ++++++++++
 src/pages/work/health/medicationPlan/list.vue | 569 +++++++++++++++
 .../work/health/medicationRecord/index.vue    | 663 ++++++++++++++++++
 7 files changed, 2173 insertions(+)
 create mode 100644 src/api/health/medicationPlan.js
 create mode 100644 src/api/health/medicationRecord.js
 create mode 100644 src/pages/work/health/medicationPlan/addEdit.vue
 create mode 100644 src/pages/work/health/medicationPlan/details.vue
 create mode 100644 src/pages/work/health/medicationPlan/list.vue
 create mode 100644 src/pages/work/health/medicationRecord/index.vue

diff --git a/src/api/health/medicationPlan.js b/src/api/health/medicationPlan.js
new file mode 100644
index 0000000..455b3dc
--- /dev/null
+++ b/src/api/health/medicationPlan.js
@@ -0,0 +1,86 @@
+import request from '@/utils/request'
+
+// 查询用药计划列表
+export function listMedicationPlan(query) {
+  return request({
+    url: '/health/medicationPlan/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询用药计划详细
+export function getMedicationPlan(id) {
+  return request({
+    url: '/health/medicationPlan/' + id,
+    method: 'get'
+  })
+}
+
+// 新增用药计划
+export function addMedicationPlan(data) {
+  return request({
+    url: '/health/medicationPlan',
+    method: 'post',
+    data
+  })
+}
+
+// 修改用药计划
+export function updateMedicationPlan(data) {
+  return request({
+    url: '/health/medicationPlan',
+    method: 'put',
+    data
+  })
+}
+
+// 删除用药计划
+export function delMedicationPlan(id) {
+  return request({
+    url: '/health/medicationPlan/' + id,
+    method: 'delete'
+  })
+}
+
+// 暂停用药计划
+export function pauseMedicationPlan(id) {
+  return request({
+    url: '/health/medicationPlan/pause/' + id,
+    method: 'put'
+  })
+}
+
+// 恢复用药计划
+export function resumeMedicationPlan(id) {
+  return request({
+    url: '/health/medicationPlan/resume/' + id,
+    method: 'put'
+  })
+}
+
+// 结束用药计划
+export function endMedicationPlan(id) {
+  return request({
+    url: '/health/medicationPlan/end/' + id,
+    method: 'put'
+  })
+}
+
+// 查询成员列表
+export function listPerson(query) {
+  return request({
+    url: '/health/person/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询药品列表
+export function listMedicineBasic(query) {
+  return request({
+    url: '/health/medicineBasic/list',
+    method: 'get',
+    params: query
+  })
+}
\ No newline at end of file
diff --git a/src/api/health/medicationRecord.js b/src/api/health/medicationRecord.js
new file mode 100644
index 0000000..42cd863
--- /dev/null
+++ b/src/api/health/medicationRecord.js
@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+
+// 查询用药记录列表
+export function listMedicationRecord(query) {
+  return request({
+    url: '/health/medicationRecord/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询今日用药记录
+export function getTodayRecords(personId) {
+  return request({
+    url: '/health/medicationRecord/today',
+    method: 'get',
+    params: { personId }
+  })
+}
+
+// 查询某计划某天的用药记录
+export function getRecordsByPlanAndDate(planId, date) {
+  return request({
+    url: '/health/medicationRecord/plan/' + planId + '/date/' + date,
+    method: 'get'
+  })
+}
+
+// 查询用药记录详细
+export function getMedicationRecord(id) {
+  return request({
+    url: '/health/medicationRecord/' + id,
+    method: 'get'
+  })
+}
+
+// 新增用药记录
+export function addMedicationRecord(data) {
+  return request({
+    url: '/health/medicationRecord',
+    method: 'post',
+    data
+  })
+}
+
+// 修改用药记录
+export function updateMedicationRecord(data) {
+  return request({
+    url: '/health/medicationRecord',
+    method: 'put',
+    data
+  })
+}
+
+// 删除用药记录
+export function delMedicationRecord(id) {
+  return request({
+    url: '/health/medicationRecord/' + id,
+    method: 'delete'
+  })
+}
+
+// 服药（标记为已服用）
+export function takeMedication(id, dosage, remark) {
+  return request({
+    url: '/health/medicationRecord/take/' + id,
+    method: 'put',
+    params: { dosage, remark }
+  })
+}
+
+// 跳过服药
+export function skipMedication(id, remark) {
+  return request({
+    url: '/health/medicationRecord/skip/' + id,
+    method: 'put',
+    params: { remark }
+  })
+}
\ No newline at end of file
diff --git a/src/pages.json b/src/pages.json
index 3059d24..65a2421 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -816,6 +816,30 @@
       "style": {
         "navigationBarTitleText": "慢性疾病档案"
       }
+    },
+    {
+      "path": "pages/work/health/medicationPlan/list",
+      "style": {
+        "navigationBarTitleText": "用药计划"
+      }
+    },
+    {
+      "path": "pages/work/health/medicationPlan/details",
+      "style": {
+        "navigationBarTitleText": "用药计划详情"
+      }
+    },
+    {
+      "path": "pages/work/health/medicationPlan/addEdit",
+      "style": {
+        "navigationBarTitleText": "用药计划"
+      }
+    },
+    {
+      "path": "pages/work/health/medicationRecord/index",
+      "style": {
+        "navigationBarTitleText": "用药记录"
+      }
     }
   ],
   "subPackages": [
diff --git a/src/pages/work/health/medicationPlan/addEdit.vue b/src/pages/work/health/medicationPlan/addEdit.vue
new file mode 100644
index 0000000..7bc8e33
--- /dev/null
+++ b/src/pages/work/health/medicationPlan/addEdit.vue
@@ -0,0 +1,398 @@
+<template>
+  <view class="container">
+    <u-navbar
+      leftIconSize="40rpx"
+      leftIconColor="#333333"
+      :title="isEdit ? '编辑用药计划' : '新增用药计划'"
+    >
+    </u-navbar>
+    
+    <view class="form-card">
+      <u--form labelPosition="left" :model="form" :rules="rules" ref="formRef" labelWidth="160rpx">
+        <u-form-item label="计划名称" prop="planName">
+          <u--input v-model="form.planName" placeholder="请输入计划名称（可选）" border="none"></u--input>
+        </u-form-item>
+        
+        <u-form-item label="人员" prop="personId" @click="showPersonPicker = true">
+          <u--input v-model="form.personName" disabled placeholder="请选择人员" border="none"></u--input>
+          <template #right>
+            <u-icon name="arrow-right"></u-icon>
+          </template>
+        </u-form-item>
+        
+        <u-form-item label="药品" prop="medicineId" @click="showMedicinePicker = true">
+          <u--input v-model="form.medicineName" disabled placeholder="请选择药品" border="none"></u--input>
+          <template #right>
+            <u-icon name="arrow-right"></u-icon>
+          </template>
+        </u-form-item>
+        
+        <u-form-item label="每次剂量" prop="dosage">
+          <view class="dosage-row">
+            <u--input v-model="form.dosage" type="digit" placeholder="剂量" border="none" style="flex:1"></u--input>
+            <u--input v-model="form.dosageUnit" disabled placeholder="单位" border="none" style="width:120rpx;margin-left:16rpx"></u--input>
+          </view>
+        </u-form-item>
+        
+        <u-form-item label="每日次数" prop="frequency">
+          <view class="stepper">
+            <view class="stepper-btn" @click="decreaseFrequency">-</view>
+            <text class="stepper-value">{{ form.frequency }}</text>
+            <view class="stepper-btn" @click="increaseFrequency">+</view>
+          </view>
+        </u-form-item>
+        
+        <u-form-item label="频率类型" prop="frequencyType" @click="showFrequencyPicker = true">
+          <u--input v-model="frequencyText" disabled placeholder="请选择频率类型" border="none"></u--input>
+          <template #right>
+            <u-icon name="arrow-right"></u-icon>
+          </template>
+        </u-form-item>
+        
+        <u-form-item label="服药时间点" prop="timePoints">
+          <view class="time-points-box">
+            <view v-for="(time, idx) in form.timePointList" :key="idx" class="time-tag">
+              <text>{{ time }}</text>
+              <uni-icons type="closeempty" size="14" color="#909399" @click="removeTimePoint(idx)"></uni-icons>
+            </view>
+            <view class="time-add" @click="showTimePicker = true">
+              <uni-icons type="plusempty" size="16" color="#667eea"></uni-icons>
+            </view>
+          </view>
+        </u-form-item>
+        
+        <u-form-item label="开始日期" prop="startDate" @click="showStartDatePicker = true">
+          <u--input v-model="form.startDate" disabled placeholder="请选择开始日期" border="none"></u--input>
+          <template #right>
+            <u-icon name="arrow-right"></u-icon>
+          </template>
+        </u-form-item>
+        
+        <u-form-item label="结束日期" prop="endDate" @click="showEndDatePicker = true">
+          <u--input v-model="form.endDate" disabled placeholder="可选，不填则长期" border="none"></u--input>
+          <template #right>
+            <u-icon name="arrow-right"></u-icon>
+          </template>
+        </u-form-item>
+        
+        <u-form-item label="启用提醒" prop="reminderEnabled">
+          <u-switch v-model="reminderSwitch" activeColor="#667eea" @change="handleReminderChange"></u-switch>
+        </u-form-item>
+        
+        <u-form-item label="提前提醒" prop="reminderMinutes" v-if="form.reminderEnabled === '1'">
+          <view class="stepper">
+            <view class="stepper-btn" @click="form.reminderMinutes = Math.max(0, form.reminderMinutes - 5)">-</view>
+            <text class="stepper-value">{{ form.reminderMinutes }}分钟</text>
+            <view class="stepper-btn" @click="form.reminderMinutes += 5">+</view>
+          </view>
+        </u-form-item>
+        
+        <u-form-item label="备注" prop="remark">
+          <u--textarea v-model="form.remark" placeholder="请输入备注" count maxlength="500"></u--textarea>
+        </u-form-item>
+      </u--form>
+    </view>
+    
+    <!-- 提交按钮 -->
+    <view class="submit-btn" @click="handleSubmit">
+      <text>提交</text>
+    </view>
+    
+    <!-- 选择器 -->
+    <u-picker :show="showPersonPicker" :columns="personColumns" keyName="name" @confirm="onPersonConfirm" @cancel="showPersonPicker = false"></u-picker>
+    <u-picker :show="showMedicinePicker" :columns="medicineColumns" keyName="shortNameBrand" @confirm="onMedicineConfirm" @cancel="showMedicinePicker = false"></u-picker>
+    <u-picker :show="showFrequencyPicker" :columns="frequencyColumns" keyName="label" @confirm="onFrequencyConfirm" @cancel="showFrequencyPicker = false"></u-picker>
+    <u-datetime-picker :show="showStartDatePicker" mode="date" @confirm="onStartDateConfirm" @cancel="showStartDatePicker = false" :maxDate="maxDate"></u-datetime-picker>
+    <u-datetime-picker :show="showEndDatePicker" mode="date" @confirm="onEndDateConfirm" @cancel="showEndDatePicker = false" :maxDate="maxDate"></u-datetime-picker>
+    <u-datetime-picker :show="showTimePicker" mode="time" @confirm="onTimeConfirm" @cancel="showTimePicker = false"></u-datetime-picker>
+    
+    <u-toast ref="uToast"></u-toast>
+  </view>
+</template>
+
+<script setup>
+import { getMedicationPlan, addMedicationPlan, updateMedicationPlan, listPerson, listMedicineBasic } from '@/api/health/medicationPlan'
+import { onLoad } from "@dcloudio/uni-app"
+import { reactive, toRefs, ref, computed } from "vue"
+import dayjs from 'dayjs'
+
+const id = ref('')
+const isEdit = ref(false)
+const formRef = ref(null)
+const showPersonPicker = ref(false)
+const showMedicinePicker = ref(false)
+const showFrequencyPicker = ref(false)
+const showStartDatePicker = ref(false)
+const showEndDatePicker = ref(false)
+const showTimePicker = ref(false)
+
+const personList = ref([])
+const medicineList = ref([])
+
+const personColumns = computed(() => [personList.value])
+const medicineColumns = computed(() => [medicineList.value])
+
+const frequencyColumns = ref([
+  [
+    { value: '1', label: '每日' },
+    { value: '2', label: '隔日' },
+    { value: '3', label: '每周' },
+    { value: '4', label: '自定义' }
+  ]
+])
+
+const maxDate = ref(Date.now() + 365 * 24 * 60 * 60 * 1000)
+
+const data = reactive({
+  form: {
+    id: null,
+    personId: null,
+    personName: '',
+    medicineId: null,
+    medicineName: '',
+    dosage: 1,
+    dosageUnit: '片',
+    frequency: 3,
+    frequencyType: '1',
+    timePointList: ['08:00', '12:00', '18:00'],
+    startDate: '',
+    endDate: '',
+    reminderEnabled: '0',
+    reminderMinutes: 15,
+    remark: ''
+  },
+  rules: {
+    personId: [{ required: true, message: '请选择人员', trigger: ['blur', 'change'] }],
+    medicineId: [{ required: true, message: '请选择药品', trigger: ['blur', 'change'] }],
+    dosage: [{ required: true, message: '请输入剂量', trigger: 'blur' }],
+    frequency: [{ required: true, message: '请设置每日次数', trigger: 'change' }],
+    startDate: [{ required: true, message: '请选择开始日期', trigger: 'change' }]
+  }
+})
+
+const { form, rules } = toRefs(data)
+
+const frequencyText = computed(() => {
+  const item = frequencyColumns.value[0].find(f => f.value === form.value.frequencyType)
+  return item ? item.label : ''
+})
+
+const reminderSwitch = computed({
+  get: () => form.value.reminderEnabled === '1',
+  set: (val) => { form.value.reminderEnabled = val ? '1' : '0' }
+})
+
+onLoad((options) => {
+  if (options.id) {
+    id.value = options.id
+    isEdit.value = true
+    getDetail()
+  }
+  getPersonList()
+  getMedicineList()
+})
+
+function getDetail() {
+  getMedicationPlan(id.value).then(res => {
+    form.value = {
+      ...res.data,
+      personName: res.data.personName,
+      medicineName: res.data.shortName ? `${res.data.shortName}-${res.data.brand}` : '',
+      timePointList: res.data.timePoints ? JSON.parse(res.data.timePoints) : [],
+      startDate: res.data.startDate ? res.data.startDate.substring(0, 10) : '',
+      endDate: res.data.endDate ? res.data.endDate.substring(0, 10) : ''
+    }
+  })
+}
+
+function getPersonList() {
+  listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
+    personList.value = res.rows || []
+  })
+}
+
+function getMedicineList() {
+  listMedicineBasic({ pageNum: 1, pageSize: 1000 }).then(res => {
+    medicineList.value = (res.rows || []).map(item => ({
+      ...item,
+      shortNameBrand: `${item.shortName}-${item.brand}`
+    }))
+  })
+}
+
+function onPersonConfirm(e) {
+  const selected = e.value[0]
+  form.value.personId = selected.id
+  form.value.personName = selected.name
+  showPersonPicker.value = false
+}
+
+function onMedicineConfirm(e) {
+  const selected = e.value[0]
+  form.value.medicineId = selected.id
+  form.value.medicineName = selected.shortNameBrand
+  form.value.dosageUnit = selected.unit || '片'
+  showMedicinePicker.value = false
+}
+
+function onFrequencyConfirm(e) {
+  form.value.frequencyType = e.value[0].value
+  showFrequencyPicker.value = false
+}
+
+function onStartDateConfirm(e) {
+  form.value.startDate = dayjs(e.value).format('YYYY-MM-DD')
+  showStartDatePicker.value = false
+}
+
+function onEndDateConfirm(e) {
+  form.value.endDate = dayjs(e.value).format('YYYY-MM-DD')
+  showEndDatePicker.value = false
+}
+
+function onTimeConfirm(e) {
+  const time = dayjs(e.value).format('HH:mm')
+  if (!form.value.timePointList.includes(time)) {
+    form.value.timePointList.push(time)
+    form.value.timePointList.sort()
+  }
+  showTimePicker.value = false
+}
+
+function removeTimePoint(idx) {
+  form.value.timePointList.splice(idx, 1)
+}
+
+function decreaseFrequency() {
+  if (form.value.frequency > 1) form.value.frequency--
+}
+
+function increaseFrequency() {
+  if (form.value.frequency < 10) form.value.frequency++
+}
+
+function handleReminderChange(val) {
+  form.value.reminderEnabled = val ? '1' : '0'
+}
+
+function handleSubmit() {
+  formRef.value.validate().then(() => {
+    const data = {
+      ...form.value,
+      timePoints: JSON.stringify(form.value.timePointList)
+    }
+    
+    if (isEdit.value) {
+      updateMedicationPlan(data).then(() => {
+        uni.showToast({ title: '修改成功', icon: 'success' })
+        setTimeout(() => uni.navigateBack(), 1000)
+      })
+    } else {
+      addMedicationPlan(data).then(() => {
+        uni.showToast({ title: '新增成功', icon: 'success' })
+        setTimeout(() => uni.navigateBack(), 1000)
+      })
+    }
+  }).catch(err => {
+    console.log('验证失败', err)
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  background: #f5f7fa;
+  min-height: 100vh;
+  padding-bottom: 120rpx;
+}
+
+.form-card {
+  margin: 24rpx;
+  padding: 24rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+}
+
+.dosage-row {
+  display: flex;
+  width: 100%;
+}
+
+.stepper {
+  display: flex;
+  align-items: center;
+  
+  .stepper-btn {
+    width: 64rpx;
+    height: 64rpx;
+    background: #f5f7fa;
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 36rpx;
+    color: #667eea;
+    font-weight: 600;
+  }
+  
+  .stepper-value {
+    min-width: 120rpx;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+.time-points-box {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  
+  .time-tag {
+    display: flex;
+    align-items: center;
+    padding: 12rpx 20rpx;
+    background: rgba(102, 126, 234, 0.1);
+    border-radius: 8rpx;
+    border: 1rpx solid rgba(102, 126, 234, 0.3);
+    
+    text {
+      font-size: 28rpx;
+      color: #667eea;
+      margin-right: 8rpx;
+    }
+  }
+  
+  .time-add {
+    width: 64rpx;
+    height: 64rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border: 2rpx dashed #667eea;
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.submit-btn {
+  position: fixed;
+  bottom: 40rpx;
+  left: 24rpx;
+  right: 24rpx;
+  height: 88rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  text {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #fff;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/health/medicationPlan/details.vue b/src/pages/work/health/medicationPlan/details.vue
new file mode 100644
index 0000000..122daa9
--- /dev/null
+++ b/src/pages/work/health/medicationPlan/details.vue
@@ -0,0 +1,354 @@
+<template>
+  <view class="container">
+    <view class="detail-card">
+      <view class="card-header">
+        <view class="header-left">
+          <view class="icon-box">
+            <uni-icons type="calendar" size="24" color="#667eea"></uni-icons>
+          </view>
+          <view class="header-info">
+            <text class="plan-name">{{ detail.planName || '用药计划' }}</text>
+            <view class="status-tag" :class="getStatusClass(detail.status)">
+              {{ getStatusText(detail.status) }}
+            </view>
+          </view>
+        </view>
+      </view>
+      
+      <view class="info-section">
+        <view class="section-title">基本信息</view>
+        <view class="info-grid">
+          <view class="info-item">
+            <text class="label">人员</text>
+            <text class="value">{{ detail.personName || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="label">药品</text>
+            <text class="value">{{ detail.medicineDisplayName || '--' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="label">每次剂量</text>
+            <text class="value">{{ detail.dosage }}{{ detail.dosageUnit }}</text>
+          </view>
+          <view class="info-item">
+            <text class="label">每日次数</text>
+            <text class="value">{{ detail.frequency }}次</text>
+          </view>
+          <view class="info-item">
+            <text class="label">频率类型</text>
+            <text class="value">{{ getFrequencyText(detail.frequencyType) }}</text>
+          </view>
+          <view class="info-item">
+            <text class="label">开始日期</text>
+            <text class="value">{{ formatDate(detail.startDate) }}</text>
+          </view>
+          <view class="info-item">
+            <text class="label">结束日期</text>
+            <text class="value">{{ detail.endDate ? formatDate(detail.endDate) : '长期' }}</text>
+          </view>
+          <view class="info-item">
+            <text class="label">提醒</text>
+            <text class="value">{{ detail.reminderEnabled === '1' ? '开启 (提前' + detail.reminderMinutes + '分钟)' : '关闭' }}</text>
+          </view>
+        </view>
+      </view>
+      
+      <view class="info-section" v-if="detail.status === '1'">
+        <view class="section-title">今日进度</view>
+        <view class="progress-box">
+          <view class="progress-bar">
+            <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
+          </view>
+          <text class="progress-text">{{ detail.todayTakenCount || 0 }}/{{ detail.todayTotalCount || 0 }} 次</text>
+        </view>
+        <view class="time-points">
+          <view v-for="(time, idx) in timePointList" :key="idx" class="time-item" 
+            :class="takenTimes.includes(idx) ? 'taken' : ''">
+            <text class="time">{{ time }}</text>
+            <text class="status">{{ takenTimes.includes(idx) ? '已服' : '待服' }}</text>
+          </view>
+        </view>
+      </view>
+      
+      <view class="info-section" v-if="detail.remark">
+        <view class="section-title">备注</view>
+        <text class="remark-text">{{ detail.remark }}</text>
+      </view>
+    </view>
+    
+    <view class="action-btns">
+      <view class="btn-primary" v-if="detail.status === '1'" @click="handleTodayRecords">
+        <uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
+        <text>今日记录</text>
+      </view>
+      <view class="btn-default" @click="handleEdit">
+        <uni-icons type="compose" size="18" color="#667eea"></uni-icons>
+        <text>修改计划</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { getMedicationPlan } from '@/api/health/medicationPlan'
+import { getRecordsByPlanAndDate } from '@/api/health/medicationRecord'
+import { onLoad } from "@dcloudio/uni-app"
+import { ref, computed } from "vue"
+
+const detail = ref({})
+const timePointList = ref([])
+const takenTimes = ref([])
+
+onLoad((options) => {
+  if (options.id) {
+    getDetail(options.id)
+  }
+})
+
+function getDetail(id) {
+  getMedicationPlan(id).then(res => {
+    detail.value = res.data
+    if (res.data.timePoints) {
+      try {
+        timePointList.value = JSON.parse(res.data.timePoints)
+      } catch (e) {
+        timePointList.value = []
+      }
+    }
+    if (res.data.status === '1') {
+      const today = new Date().toISOString().substring(0, 10)
+      getRecordsByPlanAndDate(id, today).then(records => {
+        takenTimes.value = (records.data || []).map((r, idx) => r.status === '2' ? idx : -1).filter(i => i >= 0)
+      })
+    }
+  })
+}
+
+const progressPercent = computed(() => {
+  if (!detail.value.todayTotalCount) return 0
+  return Math.round((detail.value.todayTakenCount || 0) / detail.value.todayTotalCount * 100)
+})
+
+function formatDate(date) {
+  if (!date) return '--'
+  return date.substring(0, 10)
+}
+
+function getStatusClass(status) {
+  const map = { '1': 'status-active', '2': 'status-ended', '3': 'status-paused' }
+  return map[status] || ''
+}
+
+function getStatusText(status) {
+  const map = { '1': '进行中', '2': '已结束', '3': '已暂停' }
+  return map[status] || '--'
+}
+
+function getFrequencyText(type) {
+  const map = { '1': '每日', '2': '隔日', '3': '每周', '4': '自定义' }
+  return map[type] || '--'
+}
+
+function handleTodayRecords() {
+  uni.navigateTo({ url: `/pages/work/health/medicationRecord/index?planId=${detail.value.id}` })
+}
+
+function handleEdit() {
+  uni.navigateTo({ url: `/pages/work/health/medicationPlan/addEdit?id=${detail.value.id}` })
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  padding: 24rpx;
+  background: #f5f7fa;
+  min-height: 100vh;
+}
+
+.detail-card {
+  background: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  
+  .card-header {
+    padding: 32rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .header-left {
+      display: flex;
+      align-items: center;
+      
+      .icon-box {
+        width: 72rpx;
+        height: 72rpx;
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20rpx;
+      }
+      
+      .header-info {
+        flex: 1;
+        
+        .plan-name {
+          font-size: 36rpx;
+          font-weight: 700;
+          color: #fff;
+          display: block;
+        }
+        
+        .status-tag {
+          display: inline-block;
+          margin-top: 12rpx;
+          padding: 6rpx 16rpx;
+          border-radius: 20rpx;
+          font-size: 24rpx;
+          font-weight: 600;
+          background: rgba(255, 255, 255, 0.2);
+          color: #fff;
+          
+          &.status-active { background: rgba(82, 196, 26, 0.3); }
+          &.status-ended { background: rgba(140, 140, 140, 0.3); }
+          &.status-paused { background: rgba(250, 173, 20, 0.3); }
+        }
+      }
+    }
+  }
+  
+  .info-section {
+    padding: 24rpx;
+    border-bottom: 1rpx solid #f0f2f5;
+    
+    .section-title {
+      font-size: 30rpx;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 20rpx;
+      padding-left: 16rpx;
+      border-left: 6rpx solid #667eea;
+    }
+    
+    .info-grid {
+      display: flex;
+      flex-wrap: wrap;
+      
+      .info-item {
+        width: 50%;
+        padding: 12rpx 0;
+        
+        .label {
+          font-size: 24rpx;
+          color: #909399;
+          display: block;
+        }
+        
+        .value {
+          font-size: 28rpx;
+          color: #333;
+          font-weight: 500;
+          margin-top: 6rpx;
+        }
+      }
+    }
+    
+    .remark-text {
+      font-size: 28rpx;
+      color: #666;
+      line-height: 1.6;
+    }
+  }
+}
+
+.progress-box {
+  margin-bottom: 24rpx;
+  
+  .progress-bar {
+    height: 16rpx;
+    background: #f0f2f5;
+    border-radius: 8rpx;
+    overflow: hidden;
+    
+    .progress-fill {
+      height: 100%;
+      background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+      border-radius: 8rpx;
+      transition: width 0.3s ease;
+    }
+  }
+  
+  .progress-text {
+    display: block;
+    text-align: center;
+    font-size: 28rpx;
+    color: #666;
+    margin-top: 12rpx;
+  }
+}
+
+.time-points {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16rpx;
+  
+  .time-item {
+    flex: 1;
+    min-width: 140rpx;
+    padding: 20rpx;
+    background: #f5f7fa;
+    border-radius: 12rpx;
+    text-align: center;
+    border: 2rpx solid #e8edf3;
+    
+    &.taken {
+      background: rgba(82, 196, 26, 0.1);
+      border-color: #52c41a;
+      
+      .time, .status { color: #52c41a; }
+    }
+    
+    .time {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #333;
+      display: block;
+    }
+    
+    .status {
+      font-size: 24rpx;
+      color: #909399;
+      margin-top: 6rpx;
+    }
+  }
+}
+
+.action-btns {
+  margin-top: 32rpx;
+  display: flex;
+  gap: 20rpx;
+  
+  .btn-primary, .btn-default {
+    flex: 1;
+    height: 88rpx;
+    border-radius: 12rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 30rpx;
+    font-weight: 600;
+  }
+  
+  .btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+  }
+  
+  .btn-default {
+    background: #fff;
+    border: 2rpx solid #667eea;
+    color: #667eea;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/health/medicationPlan/list.vue b/src/pages/work/health/medicationPlan/list.vue
new file mode 100644
index 0000000..c6f9f51
--- /dev/null
+++ b/src/pages/work/health/medicationPlan/list.vue
@@ -0,0 +1,569 @@
+<template>
+  <view class="container">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.keys" border="false" placeholder="搜索计划/药品名称" class="search-input"
+          @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <u-transition :show="filterPanel" mode="fade">
+          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+            <view class="filter-panel-content">
+              <view class="filter-title">成员</view>
+              <view class="state-list">
+                <view v-for="item in memberList" :key="item.id" class="state-item"
+                  :class="item.selected ? 'active' : ''" @click="selectMember(item)">{{ item.name }}</view>
+              </view>
+              <view class="filter-title">状态</view>
+              <view class="state-list">
+                <view v-for="item in statusList" :key="item.value" class="state-item"
+                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.label }}</view>
+              </view>
+            </view>
+            <view class="btn-box">
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
+            </view>
+          </view>
+        </u-transition>
+      </view>
+    </u-sticky>
+    
+    <u-list @scrolltolower="loadmore" :spaceHeight="116" lowerThreshold="100">
+      <u-list-item v-for="(item, index) in listData" :key="index">
+        <view class="list-item" @click="enterDetails(item)">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="plan-icon">
+                <uni-icons type="calendar" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="plan-name">{{ item.planName || item.medicineDisplayName || '用药计划' }}</text>
+              <text class="status-tag" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
+            </view>
+            <view class="info-row">
+              <text class="member-name">{{ item.personName || '--' }}</text>
+              <text class="medicine-name">{{ item.shortName }}-{{ item.brand }}</text>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">剂量</text>
+                <text class="info-value">{{ item.dosage }}{{ item.dosageUnit }} × {{ item.frequency }}次/日</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">今日进度</text>
+                <text class="info-value" v-if="item.status === '1'">{{ item.todayTakenCount || 0 }}/{{ item.todayTotalCount || 0 }}</text>
+                <text class="info-value" v-else>--</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">开始日期</text>
+                <text class="info-value">{{ formatDate(item.startDate) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">结束日期</text>
+                <text class="info-value">{{ item.endDate ? formatDate(item.endDate) : '长期' }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="operate" v-if="item.status === '1'" @click.stop>
+            <view class="btn-today" @click="handleTodayRecords(item)">
+              <uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
+              <text>今日记录</text>
+            </view>
+            <view class="btn-pause" @click="handlePause(item)">
+              <uni-icons type="hand-up" size="16" color="#faad14"></uni-icons>
+              <text>暂停</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+    
+    <!-- 新增按钮 -->
+    <view class="add-btn" @click="handleAdd">
+      <uni-icons type="plus" size="24" color="#ffffff"></uni-icons>
+    </view>
+  </view>
+  
+  <suspend></suspend>
+  <refresh></refresh>
+  <u-toast ref="uToast"></u-toast>
+</template>
+
+<script setup>
+import { listMedicationPlan, listPerson, pauseMedicationPlan, resumeMedicationPlan, endMedicationPlan, delMedicationPlan } from '@/api/health/medicationPlan'
+import { onLoad, onShow } from "@dcloudio/uni-app"
+import { reactive, toRefs, ref, computed } from "vue"
+
+const pageNum = ref(1)
+const listData = ref([])
+const isShow = ref(false)
+const status = ref('loadmore')
+const memberList = ref([])
+const filterPanel = ref(false)
+
+const statusList = ref([
+  { value: '1', label: '进行中', selected: false },
+  { value: '2', label: '已结束', selected: false },
+  { value: '3', label: '已暂停', selected: false }
+])
+
+const data = reactive({
+  queryParams: {
+    keys: null,
+    personId: null,
+    status: null
+  }
+})
+
+const { queryParams } = toRefs(data)
+
+const windowHeight = computed(() => {
+  return uni.getSystemInfoSync().windowHeight - 50
+})
+
+onLoad(() => {
+  getMemberList()
+  getList()
+})
+
+onShow(() => {
+  if (isShow.value) {
+    listData.value = []
+    pageNum.value = 1
+    getList()
+    isShow.value = false
+  }
+})
+
+function loadmore() {
+  pageNum.value += 1
+  if (status.value == 'loadmore') {
+    getList()
+  }
+}
+
+function getList() {
+  status.value = 'loading'
+  listMedicationPlan({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
+    listData.value = listData.value.concat(res.rows)
+    if (listData.value.length < res.total) {
+      status.value = 'loadmore'
+    } else {
+      status.value = 'nomore'
+    }
+  }).catch(() => {
+    status.value = 'nomore'
+  })
+}
+
+function getMemberList() {
+  listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
+    memberList.value = res.rows.map(item => ({
+      ...item,
+      selected: false
+    }))
+  })
+}
+
+function selectMember(item) {
+  queryParams.value.personId = item.selected ? null : item.id
+  memberList.value.forEach(ele => {
+    ele.selected = ele.id === item.id && !item.selected
+  })
+}
+
+function selectStatus(item) {
+  queryParams.value.status = item.selected ? null : item.value
+  statusList.value.forEach(ele => {
+    ele.selected = ele.value === item.value && !item.selected
+  })
+}
+
+function searchSubmit() {
+  pageNum.value = 1
+  listData.value = []
+  getList()
+  filterPanel.value = false
+}
+
+function searchBlur() {
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
+
+function resetQuery() {
+  queryParams.value.keys = null
+  queryParams.value.personId = null
+  queryParams.value.status = null
+  memberList.value.forEach(ele => ele.selected = false)
+  statusList.value.forEach(ele => ele.selected = false)
+}
+
+function formatDate(date) {
+  if (!date) return '--'
+  return date.substring(0, 10)
+}
+
+function getStatusClass(status) {
+  const classes = { '1': 'status-active', '2': 'status-ended', '3': 'status-paused' }
+  return classes[status] || ''
+}
+
+function getStatusText(status) {
+  const texts = { '1': '进行中', '2': '已结束', '3': '已暂停' }
+  return texts[status] || '--'
+}
+
+function enterDetails(item) {
+  uni.navigateTo({ url: `/pages/work/health/medicationPlan/details?id=${item.id}` })
+}
+
+function handleAdd() {
+  uni.navigateTo({ url: '/pages/work/health/medicationPlan/addEdit' })
+  isShow.value = true
+}
+
+function handleTodayRecords(item) {
+  uni.navigateTo({ url: `/pages/work/health/medicationRecord/index?planId=${item.id}` })
+}
+
+function handlePause(item) {
+  uni.showModal({
+    title: '确认暂停',
+    content: '确定暂停该用药计划？',
+    confirmText: '暂停',
+    cancelText: '取消',
+    confirmColor: '#faad14',
+    success: function (res) {
+      if (res.confirm) {
+        pauseMedicationPlan(item.id).then(() => {
+          uni.showToast({ title: '已暂停', icon: 'success' })
+          listData.value = []
+          pageNum.value = 1
+          getList()
+        })
+      }
+    }
+  })
+}
+
+function handleResume(item) {
+  resumeMedicationPlan(item.id).then(() => {
+    uni.showToast({ title: '已恢复', icon: 'success' })
+    listData.value = []
+    pageNum.value = 1
+    getList()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.search-view {
+  padding: 12rpx 32rpx;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+
+  .search-input {
+    background: rgba(102, 126, 234, 0.08);
+    color: #333333;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+
+  .filter-panel {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 96rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+
+    .filter-panel-content {
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
+
+      .filter-title {
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+        }
+      }
+
+      .state-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16rpx;
+
+        .state-item {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          color: #666666;
+          background: #ffffff;
+        }
+
+        .active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .btn-box {
+      display: flex;
+      gap: 20rpx;
+      padding: 24rpx 30rpx;
+      background-color: #fff;
+      
+      .btn-reset, .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        flex: 1;
+      }
+      
+      .btn-reset {
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        text { color: #606266; }
+      }
+      
+      .btn-confirm {
+        background: #667eea;
+        text { color: #ffffff; }
+      }
+    }
+  }
+}
+
+.list-item {
+  margin: 10rpx 24rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .item-header {
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 10rpx;
+    }
+    
+    .plan-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .plan-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .status-tag {
+      font-size: 22rpx;
+      font-weight: 500;
+      padding: 4rpx 16rpx;
+      border-radius: 16rpx;
+      
+      &.status-active {
+        background: rgba(82, 196, 26, 0.25);
+        color: #52c41a;
+      }
+      
+      &.status-ended {
+        background: rgba(140, 140, 140, 0.25);
+        color: #bfbfbf;
+      }
+      
+      &.status-paused {
+        background: rgba(250, 173, 20, 0.25);
+        color: #faad14;
+      }
+    }
+    
+    .info-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 12rpx;
+      padding-top: 12rpx;
+      border-top: 1rpx solid rgba(255, 255, 255, 0.2);
+      margin-top: 12rpx;
+    }
+    
+    .member-name {
+      font-size: 24rpx;
+      color: rgba(255, 255, 255, 0.85);
+    }
+    
+    .medicine-name {
+      font-size: 24rpx;
+      color: #ffffff;
+      font-weight: 500;
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fafbfc;
+    border: 2rpx solid #f0f2f5;
+    margin: 15rpx 16rpx;
+    border-radius: 12rpx;
+
+    .info-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 24rpx;
+
+      .info-item {
+        flex: 0 0 calc(50% - 12rpx);
+        display: flex;
+        flex-direction: column;
+        gap: 4rpx;
+
+        .info-label {
+          font-size: 24rpx;
+          color: #667eea;
+          font-weight: 500;
+          background: rgba(102, 126, 234, 0.08);
+          padding: 6rpx 12rpx;
+          border-radius: 8rpx;
+          align-self: flex-start;
+        }
+
+        .info-value {
+          font-size: 26rpx;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  
+  .operate {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx;
+    gap: 16rpx;
+    
+    .btn-today, .btn-pause {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+    }
+    
+    .btn-today {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+    }
+    
+    .btn-pause {
+      background: rgba(250, 173, 20, 0.1);
+      color: #faad14;
+    }
+  }
+}
+
+.add-btn {
+  position: fixed;
+  right: 32rpx;
+  bottom: 120rpx;
+  width: 100rpx;
+  height: 100rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
+  z-index: 100;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/work/health/medicationRecord/index.vue b/src/pages/work/health/medicationRecord/index.vue
new file mode 100644
index 0000000..568bc11
--- /dev/null
+++ b/src/pages/work/health/medicationRecord/index.vue
@@ -0,0 +1,663 @@
+<template>
+  <view class="container">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="search-view">
+        <u--input v-model="queryParams.keys" border="false" placeholder="搜索药品名称" class="search-input"
+          @blur="searchBlur" suffixIcon="search" suffixIconStyle="color: #909399">
+        </u--input>
+        <view class="filter-btn" @click="filterPanel = !filterPanel">
+          <uni-icons type="list" size="18" color="#667eea"></uni-icons>
+          <text>筛选</text>
+        </view>
+        <u-transition :show="filterPanel" mode="fade">
+          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+            <view class="filter-panel-content">
+              <view class="filter-title">成员</view>
+              <view class="state-list">
+                <view v-for="item in memberList" :key="item.id" class="state-item"
+                  :class="item.selected ? 'active' : ''" @click="selectMember(item)">{{ item.name }}</view>
+              </view>
+              <view class="filter-title">状态</view>
+              <view class="state-list">
+                <view v-for="item in statusList" :key="item.value" class="state-item"
+                  :class="item.selected ? 'active' : ''" @click="selectStatus(item)">{{ item.label }}</view>
+              </view>
+            </view>
+            <view class="btn-box">
+              <view class="btn-reset" @click="resetQuery()">
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
+              </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
+            </view>
+          </view>
+        </u-transition>
+      </view>
+    </u-sticky>
+    
+    <!-- 今日待服药快捷卡片 -->
+    <view class="today-card" v-if="todayRecords.length > 0">
+      <view class="today-header">
+        <text class="today-title">今日待服药</text>
+        <text class="today-count">{{ pendingCount }}项</text>
+      </view>
+      <scroll-view scroll-x class="today-scroll">
+        <view v-for="(item, idx) in pendingRecords" :key="idx" class="today-item" @click="handleTake(item)">
+          <view class="medicine-info">
+            <text class="medicine-name">{{ item.shortName }}</text>
+            <text class="dosage">{{ item.dosage }}{{ item.dosageUnit }}</text>
+          </view>
+          <view class="time-info">
+            <text class="time">{{ formatTime(item.scheduledTime) }}</text>
+            <view class="take-btn">点击服药</view>
+          </view>
+        </view>
+      </scroll-view>
+    </view>
+    
+    <u-list @scrolltolower="loadmore" :spaceHeight="todayRecords.length > 0 ? 280 : 116" lowerThreshold="100">
+      <u-list-item v-for="(item, index) in listData" :key="index">
+        <view class="list-item">
+          <view class="item-header">
+            <view class="header-row">
+              <view class="record-icon" :class="getStatusClass(item.status)">
+                <uni-icons :type="getStatusIcon(item.status)" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <text class="medicine-name">{{ item.shortName }}-{{ item.brand }}</text>
+              <text class="status-tag" :class="getStatusClass(item.status)">{{ getStatusText(item.status) }}</text>
+            </view>
+          </view>
+          
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">计划时间</text>
+                <text class="info-value">{{ formatDateTime(item.scheduledTime) }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">实际时间</text>
+                <text class="info-value">{{ item.actualTime ? formatDateTime(item.actualTime) : '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">剂量</text>
+                <text class="info-value">{{ item.dosage }}{{ item.dosageUnit }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">人员</text>
+                <text class="info-value">{{ item.personName }}</text>
+              </view>
+            </view>
+          </view>
+          
+          <view class="operate" v-if="item.status === '1'" @click.stop>
+            <view class="btn-take" @click="handleTake(item)">
+              <uni-icons type="checkmarkempty" size="16" color="#52c41a"></uni-icons>
+              <text>服药</text>
+            </view>
+            <view class="btn-skip" @click="handleSkip(item)">
+              <uni-icons type="closeempty" size="16" color="#faad14"></uni-icons>
+              <text>跳过</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+  </view>
+  
+  <suspend></suspend>
+  <refresh></refresh>
+  <u-toast ref="uToast"></u-toast>
+</template>
+
+<script setup>
+import { listMedicationRecord, getTodayRecords, takeMedication, skipMedication } from '@/api/health/medicationRecord'
+import { listPerson } from '@/api/health/medicationPlan'
+import { onLoad, onShow } from "@dcloudio/uni-app"
+import { reactive, toRefs, ref, computed } from "vue"
+
+const pageNum = ref(1)
+const listData = ref([])
+const todayRecords = ref([])
+const isShow = ref(false)
+const status = ref('loadmore')
+const memberList = ref([])
+const filterPanel = ref(false)
+
+const statusList = ref([
+  { value: '', label: '全部', selected: false },
+  { value: '1', label: '待服用', selected: false },
+  { value: '2', label: '已服用', selected: false },
+  { value: '3', label: '已跳过', selected: false },
+  { value: '4', label: '已过期', selected: false }
+])
+
+const data = reactive({
+  queryParams: {
+    keys: null,
+    personId: null,
+    status: null
+  }
+})
+
+const { queryParams } = toRefs(data)
+
+const windowHeight = computed(() => {
+  return uni.getSystemInfoSync().windowHeight - 50
+})
+
+const pendingRecords = computed(() => {
+  return todayRecords.value.filter(r => r.status === '1')
+})
+
+const pendingCount = computed(() => {
+  return pendingRecords.value.length
+})
+
+onLoad((options) => {
+  if (options.planId) {
+    queryParams.value.planId = options.planId
+  }
+  getMemberList()
+  getList()
+  getToday()
+})
+
+onShow(() => {
+  if (isShow.value) {
+    listData.value = []
+    pageNum.value = 1
+    getList()
+    getToday()
+    isShow.value = false
+  }
+})
+
+function getMemberList() {
+  listPerson({ pageNum: 1, pageSize: 100 }).then(res => {
+    memberList.value = res.rows.map(item => ({
+      ...item,
+      selected: false
+    }))
+  })
+}
+
+function getToday() {
+  getTodayRecords().then(res => {
+    todayRecords.value = res.data || []
+  })
+}
+
+function loadmore() {
+  pageNum.value += 1
+  if (status.value == 'loadmore') {
+    getList()
+  }
+}
+
+function getList() {
+  status.value = 'loading'
+  listMedicationRecord({ pageSize: 10, pageNum: pageNum.value, ...queryParams.value }).then(res => {
+    listData.value = listData.value.concat(res.rows)
+    if (listData.value.length < res.total) {
+      status.value = 'loadmore'
+    } else {
+      status.value = 'nomore'
+    }
+  }).catch(() => {
+    status.value = 'nomore'
+  })
+}
+
+function selectMember(item) {
+  queryParams.value.personId = item.selected ? null : item.id
+  memberList.value.forEach(ele => {
+    ele.selected = ele.id === item.id && !item.selected
+  })
+}
+
+function selectStatus(item) {
+  queryParams.value.status = item.selected ? null : item.value
+  statusList.value.forEach(ele => {
+    ele.selected = ele.value === item.value && !item.selected
+  })
+}
+
+function searchSubmit() {
+  pageNum.value = 1
+  listData.value = []
+  getList()
+  filterPanel.value = false
+}
+
+function searchBlur() {
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
+
+function resetQuery() {
+  queryParams.value.keys = null
+  queryParams.value.personId = null
+  queryParams.value.status = null
+  memberList.value.forEach(ele => ele.selected = false)
+  statusList.value.forEach(ele => ele.selected = false)
+}
+
+function formatDateTime(datetime) {
+  if (!datetime) return '--'
+  return datetime.substring(0, 16)
+}
+
+function formatTime(datetime) {
+  if (!datetime) return '--'
+  return datetime.substring(11, 16)
+}
+
+function getStatusClass(status) {
+  const classes = { '1': 'status-pending', '2': 'status-taken', '3': 'status-skipped', '4': 'status-expired' }
+  return classes[status] || ''
+}
+
+function getStatusText(status) {
+  const texts = { '1': '待服用', '2': '已服用', '3': '已跳过', '4': '已过期' }
+  return texts[status] || '--'
+}
+
+function getStatusIcon(status) {
+  const icons = { '1': 'clock', '2': 'checkmarkempty', '3': 'closeempty', '4': 'info' }
+  return icons[status] || 'clock'
+}
+
+function handleTake(item) {
+  uni.showModal({
+    title: '确认服药',
+    content: `确认已服用 ${item.shortName} ${item.dosage}${item.dosageUnit}？`,
+    confirmText: '确认',
+    cancelText: '取消',
+    success: function (res) {
+      if (res.confirm) {
+        takeMedication(item.id, item.dosage, null).then(() => {
+          uni.showToast({ title: '已记录', icon: 'success' })
+          listData.value = []
+          pageNum.value = 1
+          getList()
+          getToday()
+        })
+      }
+    }
+  })
+}
+
+function handleSkip(item) {
+  uni.showModal({
+    title: '跳过服药',
+    content: '确定跳过本次服药？',
+    confirmText: '跳过',
+    confirmColor: '#faad14',
+    cancelText: '取消',
+    success: function (res) {
+      if (res.confirm) {
+        skipMedication(item.id, '用户主动跳过').then(() => {
+          uni.showToast({ title: '已跳过', icon: 'none' })
+          listData.value = []
+          pageNum.value = 1
+          getList()
+          getToday()
+        })
+      }
+    }
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.search-view {
+  padding: 12rpx 32rpx;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  z-index: 100;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+
+  .search-input {
+    background: rgba(102, 126, 234, 0.08);
+    color: #333333;
+    flex: 1;
+    margin-right: 16rpx;
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    height: 66rpx !important;
+    display: flex;
+    align-items: center;
+  }
+  
+  .filter-btn {
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+    padding: 12rpx 24rpx;
+    background: rgba(102, 126, 234, 0.08);
+    border-radius: 24rpx;
+    border: 2rpx solid rgba(102, 126, 234, 0.3);
+    
+    text {
+      color: #667eea;
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+
+  .filter-panel {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 96rpx;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+
+    .filter-panel-content {
+      background-color: #ffffff;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
+
+      .filter-title {
+        color: #2c3e50;
+        font-size: 32rpx;
+        font-weight: 600;
+        padding: 32rpx 0 24rpx 20rpx;
+        position: relative;
+        display: flex;
+        align-items: center;
+        
+        &::before {
+          content: '';
+          width: 6rpx;
+          height: 32rpx;
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border-radius: 3rpx;
+          margin-right: 12rpx;
+        }
+      }
+
+      .state-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16rpx;
+
+        .state-item {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          color: #666666;
+          background: #ffffff;
+        }
+
+        .active {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .btn-box {
+      display: flex;
+      gap: 20rpx;
+      padding: 24rpx 30rpx;
+      background-color: #fff;
+      
+      .btn-reset, .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        flex: 1;
+      }
+      
+      .btn-reset {
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        text { color: #606266; }
+      }
+      
+      .btn-confirm {
+        background: #667eea;
+        text { color: #ffffff; }
+      }
+    }
+  }
+}
+
+.today-card {
+  margin: 24rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 16rpx;
+  overflow: hidden;
+  
+  .today-header {
+    padding: 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .today-title {
+      font-size: 32rpx;
+      font-weight: 600;
+      color: #fff;
+    }
+    
+    .today-count {
+      font-size: 28rpx;
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+  
+  .today-scroll {
+    white-space: nowrap;
+    padding: 0 24rpx 24rpx;
+  }
+  
+  .today-item {
+    display: inline-flex;
+    flex-direction: column;
+    width: 200rpx;
+    padding: 20rpx;
+    margin-right: 16rpx;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 12rpx;
+    
+    .medicine-info {
+      .medicine-name {
+        font-size: 28rpx;
+        font-weight: 600;
+        color: #fff;
+        display: block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      
+      .dosage {
+        font-size: 24rpx;
+        color: rgba(255, 255, 255, 0.8);
+        margin-top: 4rpx;
+      }
+    }
+    
+    .time-info {
+      margin-top: 12rpx;
+      
+      .time {
+        font-size: 32rpx;
+        font-weight: 700;
+        color: #fff;
+      }
+      
+      .take-btn {
+        margin-top: 8rpx;
+        padding: 8rpx 16rpx;
+        background: rgba(255, 255, 255, 0.25);
+        border-radius: 20rpx;
+        font-size: 22rpx;
+        color: #fff;
+        text-align: center;
+      }
+    }
+  }
+}
+
+.list-item {
+  margin: 10rpx 24rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+
+  .item-header {
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    
+    .header-row {
+      display: flex;
+      align-items: center;
+      gap: 10rpx;
+    }
+    
+    .record-icon {
+      width: 40rpx;
+      height: 40rpx;
+      background: rgba(255, 255, 255, 0.25);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      
+      &.status-pending { background: #faad14; }
+      &.status-taken { background: #52c41a; }
+      &.status-skipped { background: #8c8c8c; }
+      &.status-expired { background: #ff4d4f; }
+    }
+    
+    .medicine-name {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #ffffff;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    
+    .status-tag {
+      font-size: 22rpx;
+      font-weight: 500;
+      padding: 4rpx 16rpx;
+      border-radius: 16rpx;
+      
+      &.status-pending {
+        background: rgba(250, 173, 20, 0.25);
+        color: #ffc53d;
+      }
+      
+      &.status-taken {
+        background: rgba(82, 196, 26, 0.25);
+        color: #73d13d;
+      }
+      
+      &.status-skipped {
+        background: rgba(140, 140, 140, 0.25);
+        color: #bfbfbf;
+      }
+      
+      &.status-expired {
+        background: rgba(255, 77, 79, 0.25);
+        color: #ff7875;
+      }
+    }
+  }
+
+  .card-body {
+    padding: 24rpx;
+    background: #fafbfc;
+    border: 2rpx solid #f0f2f5;
+    margin: 15rpx 16rpx;
+    border-radius: 12rpx;
+
+    .info-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 24rpx;
+
+      .info-item {
+        flex: 0 0 calc(50% - 12rpx);
+        display: flex;
+        flex-direction: column;
+        gap: 4rpx;
+
+        .info-label {
+          font-size: 24rpx;
+          color: #667eea;
+          font-weight: 500;
+          background: rgba(102, 126, 234, 0.08);
+          padding: 6rpx 12rpx;
+          border-radius: 8rpx;
+          align-self: flex-start;
+        }
+
+        .info-value {
+          font-size: 26rpx;
+          color: #333;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  
+  .operate {
+    display: flex;
+    justify-content: flex-end;
+    padding: 16rpx 24rpx;
+    gap: 16rpx;
+    
+    .btn-take, .btn-skip {
+      display: flex;
+      align-items: center;
+      gap: 6rpx;
+      padding: 12rpx 24rpx;
+      border-radius: 12rpx;
+      font-size: 26rpx;
+      font-weight: 500;
+    }
+    
+    .btn-take {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+    }
+    
+    .btn-skip {
+      background: rgba(250, 173, 20, 0.1);
+      color: #faad14;
+    }
+  }
+}
+</style>
\ No newline at end of file