fix: 就医记录，新增费用明细功能。

2026-05-26 00:09:27 +08:00
parent edbbe2006f
commit 65ff9768c7
5 changed files with 1115 additions and 1 deletions
--- a/src/api/health/doctorRecordCost.js
+++ b/src/api/health/doctorRecordCost.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询就医记录费用明细列表
+export function listDoctorRecordCost(query) {
+  return request({
+    url: '/health/doctorRecordCost/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询就医记录费用明细详细
+export function getDoctorRecordCost(id) {
+  return request({
+    url: '/health/doctorRecordCost/' + id,
+    method: 'get'
+  })
+}
+
+// 新增就医记录费用明细
+export function addDoctorRecordCost(data) {
+  return request({
+    url: '/health/doctorRecordCost',
+    method: 'post',
+    data
+  })
+}
+
+// 修改就医记录费用明细
+export function updateDoctorRecordCost(data) {
+  return request({
+    url: '/health/doctorRecordCost',
+    method: 'put',
+    data
+  })
+}
+
+// 删除就医记录费用明细
+export function delDoctorRecordCost(id) {
+  return request({
+    url: '/health/doctorRecordCost/' + id,
+    method: 'delete'
+  })
+}
--- a/src/pages.json
+++ b/src/pages.json
@@ -76,6 +76,18 @@
        "navigationBarTitleText": "就医记录"
      }
    },
+    {
+      "path": "pages/health/doctorRecord/costList",
+      "style": {
+        "navigationBarTitleText": "费用明细"
+      }
+    },
+    {
+      "path": "pages/health/doctorRecord/costAddEdit",
+      "style": {
+        "navigationBarTitleText": "费用明细"
+      }
+    },
    {
      "path": "pages/health/healthRecord/list",
      "style": {
--- a/src/pages/health/doctorRecord/costAddEdit.vue
+++ b/src/pages/health/doctorRecord/costAddEdit.vue
@@ -0,0 +1,578 @@
+<template>
+  <view class="container" style="paddingBottom:1rpx;">
+    <view class="section">
+      <view class="section-title">{{ title }}</view>
+      <view class="form-view">
+        <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" label-width="160rpx"
+          :labelStyle="{ color: '#333333', fontSize: '30rpx', marginRight: '24rpx' }">
+          <u-form-item label="费用类型" prop="typeName" required @click="handleType">
+            <view class="input-with-arrow">
+              <u--input v-model="form.typeName" disabled disabledColor="#ffffff" placeholder="请选择费用类型"
+                inputAlign="left" :customStyle="getInputStyle('typeName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item label="产生时间" prop="costTime" required @click="selectCostTime">
+            <view class="input-with-arrow">
+              <u--input v-model="form.costTime" disabled disabledColor="#ffffff" placeholder="请选择产生时间"
+                inputAlign="left" :customStyle="getInputStyle('costTime')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item v-if="showMedicine" label="治疗类型" prop="treatTypeName" @click="handleTreatType">
+            <view class="input-with-arrow">
+              <u--input v-model="form.treatTypeName" disabled disabledColor="#ffffff" placeholder="请选择治疗类型"
+                inputAlign="left" :customStyle="getInputStyle('treatTypeName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item v-if="showMedicine" label="药品名称" prop="medicineName" @click="handleMedicine">
+            <view class="input-with-arrow">
+              <u--input v-model="form.medicineName" disabled disabledColor="#ffffff" placeholder="请选择药品名称"
+                inputAlign="left" :customStyle="getInputStyle('medicineName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item v-if="showCheckType" label="检查类型" prop="checkTypeName" @click="handleCheckType">
+            <view class="input-with-arrow">
+              <u--input v-model="form.checkTypeName" disabled disabledColor="#ffffff" placeholder="请选择检查类型"
+                inputAlign="left" :customStyle="getInputStyle('checkTypeName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item v-if="showNursingType" label="护理治疗" prop="checkTypeName" @click="handleNursingType">
+            <view class="input-with-arrow">
+              <u--input v-model="form.checkTypeName" disabled disabledColor="#ffffff" placeholder="请选择护理治疗"
+                inputAlign="left" :customStyle="getInputStyle('checkTypeName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item label="费用名称" prop="costName" required>
+            <u--input v-model="form.costName" placeholder="请填写费用名称" inputAlign="left" :customStyle="getInputStyle('costName')"></u--input>
+          </u-form-item>
+          <u-form-item label="单价" prop="price" required>
+            <u--input v-model="form.price" type="number" placeholder="请填写单价" inputAlign="left"
+              :customStyle="getInputStyle('price')" @change="handlePriceChange">
+              <template #suffix>
+                <up-text text="元"></up-text>
+              </template>
+            </u--input>
+          </u-form-item>
+          <u-form-item label="数量" prop="count" required>
+            <u--input v-model="form.count" type="number" placeholder="请填写数量" inputAlign="left"
+              :customStyle="getInputStyle('count')" @change="handleCountChange"></u--input>
+          </u-form-item>
+          <u-form-item label="单位" prop="unitName" required @click="handleUnit">
+            <view class="input-with-arrow">
+              <u--input v-model="form.unitName" disabled disabledColor="#ffffff" placeholder="请选择单位"
+                inputAlign="left" :customStyle="getInputStyle('unitName')"></u--input>
+              <text class="arrow-icon">▼</text>
+            </view>
+          </u-form-item>
+          <u-form-item label="总价" prop="totalCost" required>
+            <u--input v-model="form.totalCost" type="number" placeholder="请填写总价" inputAlign="left"
+              :customStyle="getInputStyle('totalCost')">
+              <template #suffix>
+                <up-text text="元"></up-text>
+              </template>
+            </u--input>
+          </u-form-item>
+          <u-form-item label="备注" prop="remark" labelPosition="top">
+            <u--textarea v-model="form.remark" placeholder="请填写备注" inputAlign="left"
+              style="border: 2rpx solid #dcdfe6 !important; height: 160rpx;" :customStyle="getTextareaStyle('remark')"></u--textarea>
+          </u-form-item>
+        </u--form>
+        <view class="form-btn">
+          <u-button type="primary" text="提交" @click="submit"></u-button>
+        </view>
+      </view>
+    </view>
+
+    <u-toast ref="uToast"></u-toast>
+    <u-picker itemHeight="88" :show="showTypePicker" :columns="costTypeColumns" keyName="dictLabel" @cancel="showTypePicker = false"
+      @confirm="handleTypeConfirm"></u-picker>
+    <u-picker itemHeight="88" :show="showTreatTypePicker" :columns="treatTypeColumns" keyName="dictLabel" @cancel="showTreatTypePicker = false"
+      @confirm="handleTreatTypeConfirm"></u-picker>
+    <u-picker itemHeight="88" :show="showMedicinePicker" :columns="medicineColumns" keyName="shortNameBrandPackaging" @cancel="showMedicinePicker = false"
+      @confirm="handleMedicineConfirm"></u-picker>
+    <u-picker itemHeight="88" :show="showCheckTypePicker" :columns="checkTypeColumns" keyName="dictLabel" @cancel="showCheckTypePicker = false"
+      @confirm="handleCheckTypeConfirm"></u-picker>
+    <u-picker itemHeight="88" :show="showNursingTypePicker" :columns="nursingTypeColumns" keyName="dictLabel" @cancel="showNursingTypePicker = false"
+      @confirm="handleNursingTypeConfirm"></u-picker>
+    <u-picker itemHeight="88" :show="showUnitPicker" :columns="packageUnitColumns" keyName="dictLabel" @cancel="showUnitPicker = false"
+      @confirm="handleUnitConfirm"></u-picker>
+    <u-datetime-picker
+      :show="datePickShow"
+      mode="datetime"
+      ref="costTimeRef"
+      @cancel="datePickShow = false"
+      @confirm="datePickConfirm"
+      itemHeight="88"
+    ></u-datetime-picker>
+  </view>
+</template>
+
+<script setup>
+import { addDoctorRecordCost, getDoctorRecordCost, updateDoctorRecordCost } from '@/api/health/doctorRecordCost'
+import { getDoctorRecord } from '@/api/health/doctorRecord'
+import { getMedicineBasic, listMedicineBasic } from '@/api/health/medicineBasic'
+import { getDicts } from '@/api/system/dict/data.js'
+import { onLoad, onReady } from '@dcloudio/uni-app'
+import dayjs from 'dayjs'
+import { getCurrentInstance, reactive, ref, toRefs } from 'vue'
+
+const { proxy } = getCurrentInstance()
+const title = ref('费用明细')
+const flag = ref('add')
+const doctorRecord = ref({})
+const datePickShow = ref(false)
+const showTypePicker = ref(false)
+const showTreatTypePicker = ref(false)
+const showMedicinePicker = ref(false)
+const showCheckTypePicker = ref(false)
+const showNursingTypePicker = ref(false)
+const showUnitPicker = ref(false)
+const showMedicine = ref(false)
+const showCheckType = ref(false)
+const showNursingType = ref(false)
+const costTypeList = ref([])
+const packageUnitList = ref([])
+const checkTypeList = ref([])
+const nursingTypeList = ref([])
+const treatTypeList = ref([])
+const medicineList = ref([])
+const costTypeColumns = ref([])
+const packageUnitColumns = ref([])
+const checkTypeColumns = ref([])
+const nursingTypeColumns = ref([])
+const treatTypeColumns = ref([])
+const medicineColumns = ref([])
+const errorFields = ref([])
+
+const data = reactive({
+  form: {
+    id: null,
+    doctorRecordId: null,
+    type: null,
+    costTime: null,
+    costName: null,
+    personId: null,
+    healthRecordId: null,
+    totalCost: null,
+    price: null,
+    count: null,
+    unit: null,
+    medicineId: null,
+    checkType: null,
+    remark: null
+  },
+  queryMedicineParams: {
+    pageNum: 1,
+    treatmentType: null,
+    pageSize: 1000
+  },
+  rules: {
+    typeName: [{ required: true, message: '费用类型不能为空', trigger: ['change', 'blur'] }],
+    costTime: [{ required: true, message: '产生时间不能为空', trigger: ['change', 'blur'] }],
+    costName: [{ required: true, message: '费用名称不能为空', trigger: ['change', 'blur'] }],
+    price: [{ required: true, message: '单价不能为空', trigger: ['change', 'blur'] }],
+    count: [{ required: true, message: '数量不能为空', trigger: ['change', 'blur'] }],
+    unitName: [{ required: true, message: '单位不能为空', trigger: ['change', 'blur'] }],
+    totalCost: [{ required: true, message: '总价不能为空', trigger: ['change', 'blur'] }]
+  }
+})
+
+const { form, queryMedicineParams, rules } = toRefs(data)
+
+const inputBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+const inputErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c',
+  borderRadius: '8rpx',
+  padding: '0 24rpx',
+  height: '68rpx',
+  width: '100%',
+  boxSizing: 'border-box'
+}
+
+const textareaBaseStyle = {
+  background: '#ffffff',
+  border: '2rpx solid #dcdfe6'
+}
+
+const textareaErrorStyle = {
+  background: '#fef0f0',
+  border: '2rpx solid #f56c6c'
+}
+
+const getInputStyle = (field) => {
+  return errorFields.value.includes(field) ? inputErrorStyle : inputBaseStyle
+}
+
+const getTextareaStyle = (field) => {
+  return errorFields.value.includes(field) ? textareaErrorStyle : textareaBaseStyle
+}
+
+onLoad((option) => {
+  form.value.id = option.id
+  form.value.doctorRecordId = option.doctorRecordId
+  flag.value = option.flag
+  if (flag.value == null) {
+    title.value = form.value.id != null ? '费用明细-修改' : '费用明细-新增'
+  } else {
+    title.value = '费用明细-复制'
+  }
+  getData()
+})
+
+onReady(() => {
+  if (!form.value.costTime) {
+    form.value.costTime = dayjs(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
+  }
+})
+
+function dictStr(val, arr) {
+  let str = ''
+  arr.map(item => {
+    if (item.dictValue === val) {
+      str = item.dictLabel
+    }
+  })
+  return str
+}
+
+function getData() {
+  const dictTasks = [
+    getDicts('cost_type').then(res => {
+      costTypeList.value = res.data
+      costTypeColumns.value = [res.data]
+    }),
+    getDicts('package_unit').then(res => {
+      packageUnitList.value = res.data
+      packageUnitColumns.value = [res.data]
+    }),
+    getDicts('check_type').then(res => {
+      checkTypeList.value = res.data
+      checkTypeColumns.value = [res.data]
+    }),
+    getDicts('nursing_type').then(res => {
+      nursingTypeList.value = res.data
+      nursingTypeColumns.value = [res.data]
+    }),
+    getDicts('mar_type').then(res => {
+      treatTypeList.value = res.data
+      treatTypeColumns.value = [res.data]
+    })
+  ]
+  if (form.value.doctorRecordId) {
+    getDoctorRecord(form.value.doctorRecordId).then(res => {
+      doctorRecord.value = res.data
+      form.value.personId = res.data.personId
+      form.value.healthRecordId = res.data.healthRecordId
+    })
+  }
+  if (form.value.id != null) {
+    Promise.all(dictTasks).then(() => getDoctorRecordCost(form.value.id)).then(res => {
+      form.value = res.data
+      form.value.doctorRecordId = form.value.doctorRecordId || doctorRecord.value.id
+      form.value.typeName = dictStr(form.value.type, costTypeList.value)
+      form.value.unitName = dictStr(form.value.unit, packageUnitList.value)
+      form.value.checkTypeName = dictStr(form.value.checkType, checkTypeList.value) || dictStr(form.value.checkType, nursingTypeList.value)
+      applyTypeState(form.value.type)
+      if (flag.value != null) {
+        form.value.id = null
+      }
+    })
+  }
+}
+
+function selectCostTime() {
+  datePickShow.value = true
+  proxy.$refs['costTimeRef'].innerValue = new Date().getTime()
+}
+
+function datePickConfirm(e) {
+  form.value.costTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
+  datePickShow.value = false
+}
+
+function handleType() {
+  showTypePicker.value = true
+}
+
+function handleTypeConfirm(e) {
+  form.value.typeName = e.value[0].dictLabel
+  form.value.type = e.value[0].dictValue
+  showTypePicker.value = false
+  applyTypeState(form.value.type)
+}
+
+function applyTypeState(type) {
+  if (type === '1') {
+    showCheckType.value = false
+    showNursingType.value = false
+    showMedicine.value = false
+    form.value.costName = form.value.costName || '挂号费'
+    form.value.count = form.value.count || 1
+    form.value.unit = form.value.unit || '6'
+  } else if (type === '2') {
+    showCheckType.value = true
+    showNursingType.value = false
+    showMedicine.value = false
+    form.value.count = form.value.count || 1
+    form.value.unit = form.value.unit || '5'
+  } else if (type === '3') {
+    showCheckType.value = false
+    showNursingType.value = false
+    showMedicine.value = true
+    form.value.count = form.value.count || 1
+    getMedicineList()
+  } else if (type === '4') {
+    showCheckType.value = false
+    showNursingType.value = true
+    showMedicine.value = false
+    form.value.unit = form.value.unit || '6'
+    form.value.count = form.value.count || 1
+  } else if (type === '5') {
+    showCheckType.value = false
+    showNursingType.value = false
+    showMedicine.value = false
+    form.value.costName = form.value.costName || '交通费'
+    form.value.unit = form.value.unit || '6'
+    form.value.count = form.value.count || 1
+  } else if (type === '6') {
+    showCheckType.value = false
+    showNursingType.value = false
+    showMedicine.value = false
+    form.value.costName = form.value.costName || '餐饮'
+    form.value.unit = form.value.unit || '6'
+    form.value.count = form.value.count || 1
+  } else {
+    showCheckType.value = false
+    showNursingType.value = false
+    showMedicine.value = false
+    form.value.costName = form.value.costName || '其他'
+    form.value.count = form.value.count || 1
+  }
+  form.value.unitName = dictStr(form.value.unit, packageUnitList.value)
+  calcTotalCost()
+}
+
+function handleTreatType() {
+  showTreatTypePicker.value = true
+}
+
+function handleTreatTypeConfirm(e) {
+  form.value.treatTypeName = e.value[0].dictLabel
+  queryMedicineParams.value.treatmentType = e.value[0].dictValue
+  showTreatTypePicker.value = false
+  getMedicineList()
+}
+
+function getMedicineList() {
+  listMedicineBasic(queryMedicineParams.value).then(res => {
+    medicineList.value = res.rows
+    medicineColumns.value = [res.rows]
+  })
+}
+
+function handleMedicine() {
+  if (medicineColumns.value.length === 0) {
+    getMedicineList()
+  }
+  showMedicinePicker.value = true
+}
+
+function handleMedicineConfirm(e) {
+  const medicine = e.value[0]
+  form.value.medicineId = medicine.id
+  form.value.medicineName = medicine.shortNameBrandPackaging
+  form.value.costName = medicine.shortNameBrandPackaging
+  showMedicinePicker.value = false
+  getMedicineBasic(medicine.id).then(res => {
+    form.value.unit = res.data.packageUnit
+    form.value.unitName = dictStr(form.value.unit, packageUnitList.value)
+  })
+}
+
+function handleCheckType() {
+  showCheckTypePicker.value = true
+}
+
+function handleCheckTypeConfirm(e) {
+  form.value.checkTypeName = e.value[0].dictLabel
+  form.value.checkType = e.value[0].dictValue
+  form.value.costName = e.value[0].dictLabel
+  showCheckTypePicker.value = false
+}
+
+function handleNursingType() {
+  showNursingTypePicker.value = true
+}
+
+function handleNursingTypeConfirm(e) {
+  form.value.checkTypeName = e.value[0].dictLabel
+  form.value.checkType = e.value[0].dictValue
+  form.value.costName = e.value[0].dictLabel
+  showNursingTypePicker.value = false
+}
+
+function handleUnit() {
+  showUnitPicker.value = true
+}
+
+function handleUnitConfirm(e) {
+  form.value.unitName = e.value[0].dictLabel
+  form.value.unit = e.value[0].dictValue
+  showUnitPicker.value = false
+}
+
+function handlePriceChange() {
+  calcTotalCost()
+}
+
+function handleCountChange() {
+  calcTotalCost()
+}
+
+function calcTotalCost() {
+  if (form.value.price != null && form.value.count != null && form.value.price !== '' && form.value.count !== '') {
+    form.value.totalCost = parseFloat(Number(form.value.price) * Number(form.value.count)).toFixed(2)
+  }
+}
+
+function submit() {
+  errorFields.value = []
+  form.value.personId = form.value.personId || doctorRecord.value.personId
+  form.value.healthRecordId = form.value.healthRecordId || doctorRecord.value.healthRecordId
+  form.value.doctorRecordId = form.value.doctorRecordId || doctorRecord.value.id
+  proxy.$refs['uForm'].validate().then(() => {
+    if (form.value.id != null) {
+      updateDoctorRecordCost(form.value).then(() => {
+        proxy.$refs['uToast'].show({
+          message: '修改成功',
+          complete() {
+            uni.navigateBack()
+          }
+        })
+      })
+    } else {
+      addDoctorRecordCost(form.value).then(() => {
+        proxy.$refs['uToast'].show({
+          message: '新增成功',
+          complete() {
+            uni.navigateBack()
+          }
+        })
+      })
+    }
+  }).catch(errors => {
+    if (errors && errors.length > 0) {
+      errorFields.value = errors.map(err => err.field)
+    }
+    uni.showToast({
+      title: '请填写完整信息',
+      icon: 'none'
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.section {
+  margin: 24rpx;
+  padding: 0;
+  background-color: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+
+  .section-title {
+    padding: 16rpx 24rpx;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #ffffff;
+    line-height: 1.2;
+    font-size: 28rpx;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+
+    &::before {
+      content: '';
+      width: 6rpx;
+      height: 28rpx;
+      background: #ffffff;
+      border-radius: 3rpx;
+      margin-right: 12rpx;
+    }
+  }
+
+  .form-view {
+    padding: 24rpx;
+
+    .form-btn {
+      padding-top: 16rpx;
+    }
+
+    .input-with-arrow {
+      position: relative;
+      width: 100%;
+
+      .arrow-icon {
+        position: absolute;
+        right: 20rpx;
+        top: 50%;
+        transform: translateY(-50%);
+        color: #c0c4cc;
+        font-size: 20rpx;
+        pointer-events: none;
+        z-index: 10;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.form-btn .u-button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  border: none !important;
+  border-radius: 24rpx !important;
+  height: 80rpx !important;
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4) !important;
+}
+
+.form-btn .u-button__text {
+  font-size: 30rpx !important;
+  font-weight: 500 !important;
+  letter-spacing: 2rpx !important;
+}
+
+.u-form-item--error .u--input,
+.u-form-item--error .u-input,
+.u-form-item--error .u-input__content,
+.u-form-item--error .u-input__content__field-wrapper {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+
+.u-form-item--error .u--textarea,
+.u-form-item--error .u-textarea {
+  border: 2rpx solid #f56c6c !important;
+  background: #fef0f0 !important;
+}
+</style>
--- a/src/pages/health/doctorRecord/costList.vue
+++ b/src/pages/health/doctorRecord/costList.vue
@@ -0,0 +1,464 @@
+<template>
+  <view class="container">
+    <u-sticky offsetTop="0rpx" customNavHeight="0rpx">
+      <view class="toolbar">
+        <view class="summary">
+          <text class="summary-label">明细合计</text>
+          <text class="summary-value">{{ detailTotalCost }} 元</text>
+        </view>
+        <view class="toolbar-actions">
+          <view class="toolbar-btn" @click="handleAdd">
+            <uni-icons type="plusempty" size="18" color="#667eea"></uni-icons>
+            <text>新增</text>
+          </view>
+          <view class="toolbar-btn primary" @click="handleUpdateCost">
+            <uni-icons type="checkmarkempty" size="18" color="#ffffff"></uni-icons>
+            <text>汇总</text>
+          </view>
+        </view>
+      </view>
+    </u-sticky>
+
+    <u-list @scrolltolower="loadmore" :spaceHeight="104" lowerThreshold="100">
+      <u-list-item v-for="item in listData" :key="item.id">
+        <view class="list-item">
+          <view class="item-header">
+            <view class="card-name-section">
+              <view class="card-icon">
+                <uni-icons type="list" size="20" color="#ffffff"></uni-icons>
+              </view>
+              <view class="card-info">
+                <text class="card-name">{{ item.costName || dictStr(item.type, costTypeList) || '费用明细' }}</text>
+                <text class="card-code">{{ item.costTime || '--' }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="card-body">
+            <view class="info-row">
+              <view class="info-item">
+                <text class="info-label">费用类型</text>
+                <text class="info-value">{{ dictStr(item.type, costTypeList) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">费用名称</text>
+                <text class="info-value">{{ item.costName || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">单价</text>
+                <text class="info-value">{{ item.price || '--' }} 元</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">数量</text>
+                <text class="info-value">{{ item.count || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">单位</text>
+                <text class="info-value">{{ dictStr(item.unit, packageUnitList) || '--' }}</text>
+              </view>
+              <view class="info-item">
+                <text class="info-label">总价</text>
+                <text class="info-value cost">{{ item.totalCost || '--' }} 元</text>
+              </view>
+              <view class="info-item info-item-full" v-if="item.remark">
+                <text class="info-label">备注</text>
+                <text class="info-value">{{ item.remark }}</text>
+              </view>
+            </view>
+          </view>
+
+          <view class="operate" @click.stop>
+            <view class="btn-edit" @click="handleEdit(item)">
+              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
+              <text>修改</text>
+            </view>
+            <view class="btn-copy" @click="handleCopy(item)">
+              <uni-icons type="copy" size="16" color="#fa8c16"></uni-icons>
+              <text>复制</text>
+            </view>
+            <view class="btn-delete" @click="handleDelete(item)">
+              <uni-icons type="trash" size="16" color="#f5576c"></uni-icons>
+              <text>删除</text>
+            </view>
+          </view>
+        </view>
+      </u-list-item>
+      <u-empty v-if="listData.length === 0 && status === 'nomore'" mode="data" text="暂无费用明细"></u-empty>
+      <u-loadmore :status="status" loadingIcon="semicircle" height="88" fontSize="32rpx" @loadmore="loadmore" />
+    </u-list>
+
+    <u-toast ref="uToast"></u-toast>
+    <suspend></suspend>
+  </view>
+</template>
+
+<script setup>
+import { listDoctorRecordCost, delDoctorRecordCost } from '@/api/health/doctorRecordCost'
+import { getDoctorRecord, updateDoctorRecord } from '@/api/health/doctorRecord'
+import { getDicts } from '@/api/system/dict/data.js'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { computed, ref } from 'vue'
+
+const pageNum = ref(1)
+const listData = ref([])
+const status = ref('loadmore')
+const doctorRecordId = ref(null)
+const doctorRecord = ref({})
+const isShow = ref(false)
+const costTypeList = ref([])
+const packageUnitList = ref([])
+
+const detailTotalCost = computed(() => {
+  return listData.value
+    .reduce((sum, item) => {
+      return sum + Number(item.totalCost || 0)
+    }, 0)
+    .toFixed(2)
+})
+
+onLoad((option) => {
+  doctorRecordId.value = option.doctorRecordId
+  getData()
+})
+
+onShow(() => {
+  if (isShow.value) {
+    refreshList()
+    isShow.value = false
+  }
+})
+
+function getData() {
+  getDicts('cost_type').then(res => {
+    costTypeList.value = res.data
+  })
+  getDicts('package_unit').then(res => {
+    packageUnitList.value = res.data
+  })
+  if (doctorRecordId.value) {
+    getDoctorRecord(doctorRecordId.value).then(res => {
+      doctorRecord.value = res.data
+    })
+  }
+  getList()
+}
+
+function dictStr(val, arr) {
+  let str = ''
+  arr.map(item => {
+    if (item.dictValue === val) {
+      str = item.dictLabel
+    }
+  })
+  return str
+}
+
+function loadmore() {
+  pageNum.value += 1
+  if (status.value === 'loadmore') {
+    getList()
+  }
+}
+
+function refreshList() {
+  pageNum.value = 1
+  listData.value = []
+  getList()
+}
+
+function getList() {
+  if (!doctorRecordId.value) {
+    status.value = 'nomore'
+    return
+  }
+  status.value = 'loading'
+  listDoctorRecordCost({ pageSize: 1000, pageNum: pageNum.value, doctorRecordId: doctorRecordId.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 handleAdd() {
+  uni.navigateTo({ url: `/pages/health/doctorRecord/costAddEdit?doctorRecordId=${doctorRecordId.value}` })
+  isShow.value = true
+}
+
+function handleEdit(item) {
+  uni.navigateTo({ url: `/pages/health/doctorRecord/costAddEdit?doctorRecordId=${doctorRecordId.value}&id=${item.id}` })
+  isShow.value = true
+}
+
+function handleCopy(item) {
+  uni.navigateTo({ url: `/pages/health/doctorRecord/costAddEdit?doctorRecordId=${doctorRecordId.value}&flag=copy&id=${item.id}` })
+  isShow.value = true
+}
+
+function handleDelete(item) {
+  uni.showModal({
+    title: '确认删除',
+    content: '确定要删除这条费用明细吗？',
+    confirmText: '删除',
+    cancelText: '取消',
+    confirmColor: '#f5576c',
+    cancelColor: '#909399',
+    success: function (res) {
+      if (res.confirm) {
+        delDoctorRecordCost(item.id).then(() => {
+          uni.showToast({
+            title: '删除成功',
+            icon: 'success'
+          })
+          refreshList()
+        })
+      }
+    }
+  })
+}
+
+function handleUpdateCost() {
+  if (!doctorRecord.value.id) {
+    uni.showToast({
+      title: '就医记录不存在',
+      icon: 'none'
+    })
+    return
+  }
+  updateDoctorRecord({
+    ...doctorRecord.value,
+    totalCost: Number(detailTotalCost.value)
+  }).then(() => {
+    doctorRecord.value.totalCost = Number(detailTotalCost.value)
+    uni.showToast({
+      title: '汇总成功',
+      icon: 'success'
+    })
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+page {
+  height: 100%;
+  overflow: auto;
+}
+
+.toolbar {
+  padding: 16rpx 24rpx;
+  background-color: #ffffff;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16rpx;
+}
+
+.summary {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+
+  .summary-label {
+    color: #606266;
+    font-size: 24rpx;
+  }
+
+  .summary-value {
+    color: #2c3e50;
+    font-size: 34rpx;
+    font-weight: 700;
+  }
+}
+
+.toolbar-actions {
+  display: flex;
+  gap: 12rpx;
+  flex-shrink: 0;
+}
+
+.toolbar-btn {
+  display: flex;
+  align-items: center;
+  gap: 6rpx;
+  padding: 12rpx 22rpx;
+  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;
+  }
+
+  &.primary {
+    background: #667eea;
+    border-color: #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 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+  .card-name-section {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .card-icon {
+    width: 40rpx;
+    height: 40rpx;
+    background: rgba(255, 255, 255, 0.25);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
+    flex-shrink: 0;
+  }
+
+  .card-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12rpx;
+  }
+
+  .card-name {
+    color: #ffffff;
+    font-size: 30rpx;
+    font-weight: 700;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .card-code {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 24rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+  }
+}
+
+.card-body {
+  padding: 24rpx;
+  background: #fafbfc;
+  border: 2rpx solid #f0f2f5;
+  margin: 15rpx 16rpx 2rpx;
+  border-radius: 12rpx;
+}
+
+.info-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -12rpx;
+
+  .info-item {
+    width: 50%;
+    padding: 0 12rpx;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20rpx;
+
+    &.info-item-full {
+      width: 100%;
+    }
+  }
+
+  .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;
+    margin-bottom: 8rpx;
+  }
+
+  .info-value {
+    font-size: 26rpx;
+    color: #333;
+    font-weight: 500;
+    line-height: 1.5;
+    word-break: break-all;
+
+    &.cost {
+      color: #f5576c;
+      font-weight: 700;
+    }
+  }
+}
+
+.operate {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16rpx 24rpx 24rpx;
+  gap: 16rpx;
+  flex-wrap: wrap;
+}
+
+.btn-edit,
+.btn-copy,
+.btn-delete {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6rpx;
+  padding: 0 24rpx;
+  height: 64rpx;
+  border-radius: 12rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+}
+
+.btn-edit {
+  background: rgba(102, 126, 234, 0.1);
+  color: #667eea;
+  border: 1rpx solid rgba(102, 126, 234, 0.3);
+}
+
+.btn-copy {
+  background: rgba(250, 140, 22, 0.1);
+  color: #fa8c16;
+  border: 1rpx solid rgba(250, 140, 22, 0.3);
+}
+
+.btn-delete {
+  background: rgba(245, 87, 108, 0.1);
+  color: #f5576c;
+  border: 1rpx solid rgba(245, 87, 108, 0.3);
+}
+</style>
--- a/src/pages/health/doctorRecord/list.vue
+++ b/src/pages/health/doctorRecord/list.vue
@@ -171,6 +171,10 @@
            </view>
          </view>
          <view class="operate" @click.stop>
+            <view class="btn-detail" @click="handleCostDetail(item)">
+              <uni-icons type="list" size="16" color="#13c2c2"></uni-icons>
+              <text>费用明细</text>
+            </view>
            <view class="btn-edit" @click="handleEdit(item)">
              <uni-icons type="compose" size="16" color="#667eea"></uni-icons>
              <text>修改</text>
@@ -436,6 +440,10 @@ function settingCancel() {
      uni.navigateTo({ url: `/pages/health/doctorRecord/addEdit` })
      isShow.value = true
    }
+    function handleCostDetail(item) {
+      uni.navigateTo({ url: `/pages/health/doctorRecord/costList?doctorRecordId=${item.id}` })
+      isShow.value = true
+    }
    function handleDelete(item) {
      uni.showModal({
        title: '确认删除',
@@ -811,7 +819,9 @@ page {
    justify-content: flex-end;
    padding: 16rpx 24rpx 24rpx;
    gap: 16rpx;
+    flex-wrap: wrap;

+    .btn-detail,
    .btn-edit,
    .btn-copy,
    .btn-delete {
@@ -831,6 +841,12 @@ page {
      }
    }

+    .btn-detail {
+      background: rgba(19, 194, 194, 0.1);
+      color: #13c2c2;
+      border: 1rpx solid rgba(19, 194, 194, 0.3);
+    }
+    
    .btn-edit {
      background: rgba(102, 126, 234, 0.1);
      color: #667eea;