抽出日期范围组件

src/api/appointment.js

@@ -78,11 +78,11 @@ export function getDoctorQrCode(doctorCode) {
   })
 }
 
-export function getPaidMzGhList(patientId) {
+export function getPaidMzGhList(patientId, start, end) {
   return request({
     url: '/appointment/getPaidMzGhList',
     method: 'get',
-    params: { patientId },
+    params: { patientId, start, end },
   })
 }
 

src/api/pay-mz-fee.js

@@ -16,11 +16,11 @@ export function getUnPaidDetail(patientId, hisOrdNum) {
   })
 }
 
-export function getMzPaidList(patientId) {
+export function getMzPaidList(patientId, start, end) {
   return request({
     url: '/payMzFee/getMzPaidList',
     method: 'get',
-    params: { patientId },
+    params: { patientId, start, end },
   })
 }
 
@@ -39,3 +39,11 @@ export function getFundPayAmt(hisOrdNum) {
     params: { hisOrdNum },
   })
 }
+
+export function queryDzfp(hisOrdNum) {
+  return request({
+    url: '/payMzFee/queryDzfp',
+    method: 'get',
+    params: { hisOrdNum },
+  })
+}

src/components/date-range/index.vue

@@ -0,0 +1,92 @@
+<template>
+    <van-cell title="选择日期区间" :value="date" @click="showDateShortcuts = true" />
+    <van-dialog v-model:show="showDateShortcuts" @confirm="onConfirmShortcuts(true)">
+      <div style="display:flex; justify-content: center; padding: 30px 0 20px 0">
+        <van-radio-group v-model="chosenShortcut">
+          <van-radio name="oneWeek" style="margin-bottom: 12px">近一周</van-radio>
+          <van-radio name="threeMonths" style="margin-bottom: 12px">近三月</van-radio>
+          <van-radio name="halfYear" style="margin-bottom: 12px">近半年</van-radio>
+          <van-radio name="oneYear" style="margin-bottom: 12px">近一年</van-radio>
+          <van-radio name="diy">自定义</van-radio>
+        </van-radio-group>
+      </div>
+    </van-dialog>
+
+    <van-calendar
+        v-model:show="showDateRange"
+        :min-date="minDate"
+        :max-date="maxDate"
+        type="range"
+        @confirm="onConfirmDiyDateRange"
+    />
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {formatDate, getDateRangeByOffsetDays} from "@/utils/date";
+
+const props = defineProps({
+  emitOnMount: {
+    type: Boolean,
+    default: true
+  }
+})
+const emits = defineEmits(["finalConfirm"]);
+
+const date = ref('')
+const minDate = ref(new Date(2012, 0, 1))
+const maxDate = ref(new Date())
+
+const showDateShortcuts = ref(false)
+const chosenShortcut = ref('oneWeek')
+
+const onConfirmShortcuts = (doEmit) => {
+  switch (chosenShortcut.value) {
+    case 'oneWeek':
+      makeOffset(7, doEmit);
+      break;
+    case 'threeMonths':
+      makeOffset(90, doEmit);
+      break;
+    case 'halfYear':
+      makeOffset(183, doEmit);
+      break;
+    case 'oneYear':
+      makeOffset(365, doEmit);
+      break;
+    default:
+      showDateRange.value = true;
+      break;
+  }
+}
+
+function makeOffset(offsetDays, doEmit) {
+  const temp = getDateRangeByOffsetDays(offsetDays)
+  const dateRange = [temp.start, temp.end]
+  date.value = dateRange[0] + ' - ' + dateRange[1]
+  if (doEmit) {
+    emits('finalConfirm', dateRange)
+  }
+}
+
+function setDateStr(range) {
+  date.value = range[0] + ' - ' + range[1]
+}
+
+const showDateRange = ref(false)
+
+const onConfirmDiyDateRange = (values) => {
+  showDateRange.value = false
+  const start = formatDate(values[0])
+  const end = formatDate(values[1])
+  date.value = `${start} - ${end}`
+  emits('finalConfirm', [start, end])
+}
+
+onMounted(() => {
+  onConfirmShortcuts(props.emitOnMount)
+})
+
+defineExpose({makeOffset, setDateStr})
+
+</script>

src/views/hospital-service/check-exam/electrocardiogram/CheckElectroIndex.vue

@@ -1,27 +1,6 @@
 <template>
   <window-size>
-    <van-cell title="选择日期区间" :value="date" @click="showDateShortcuts = true" />
-
-    <van-dialog v-model:show="showDateShortcuts" @confirm="onConfirmShortcuts">
-      <div style="display:flex; justify-content: center; padding: 30px 0 20px 0">
-        <van-radio-group v-model="chosenShortcut">
-          <van-radio name="oneWeek" style="margin-bottom: 12px">近一周</van-radio>
-          <van-radio name="threeMonths" style="margin-bottom: 12px">近三月</van-radio>
-          <van-radio name="halfYear" style="margin-bottom: 12px">近半年</van-radio>
-          <van-radio name="oneYear" style="margin-bottom: 12px">近一年</van-radio>
-          <van-radio name="diy">自定义</van-radio>
-        </van-radio-group>
-      </div>
-    </van-dialog>
-
-    <van-calendar
-        v-model:show="showDateRange"
-        :min-date="minDate"
-        :max-date="maxDate"
-        type="range"
-        @confirm="onConfirm"
-    />
-
+    <my-date-range ref="rangeRef" @finalConfirm="onConfirmRange" :emit-on-mount="false" />
     <div v-show="electroIndex.length > 0">
       <div style="height: 5px"></div>
       <van-tag type="success" size="large" round plain>已发布报告</van-tag>
@@ -50,7 +29,7 @@ import empty from '@/assets/empty.png'
 import { useRouter } from 'vue-router'
 import { computed, onMounted, ref } from 'vue'
 import {checkElectroIndex} from '@/api/check-exam'
-import {formatDate, getDateRangeByOffsetDays} from '@/utils/date'
+import MyDateRange from "@/components/date-range/index.vue";
 
 const router = useRouter()
 const patientId = router.currentRoute.value.params.patientId
@@ -59,70 +38,18 @@ const scrollStyle = {
   height: store.state.screenSize.h - 125 + 'px',
   overflowY: 'auto',
 }
-const date = ref('')
-const minDate = ref(new Date(2012, 0, 1))
-const maxDate = ref(new Date())
-
-const showDateShortcuts = ref(false)
-const chosenShortcut = ref('oneWeek')
-
-const onConfirmShortcuts = () => {
-  switch (chosenShortcut.value) {
-    case 'oneWeek':
-      makeOffset(7).then((range) => {
-        queryElectroIndex(range[0], range[1])
-      })
-      return
-    case 'threeMonths':
-      makeOffset(90).then((range) => {
-        queryElectroIndex(range[0], range[1])
-      })
-      return;
-    case 'halfYear':
-      makeOffset(183).then((range) => {
-        queryElectroIndex(range[0], range[1])
-      })
-      return
-    case 'oneYear':
-      makeOffset(365).then((range) => {
-        queryElectroIndex(range[0], range[1])
-      })
-      return;
-    default:
-      showDateRange.value = true
-      return;
-  }
-}
+const rangeRef = ref()
 
-const makeOffset = (offsetDays) => {
-  return new Promise((resolve, reject) => {
-    const temp = getDateRangeByOffsetDays(offsetDays)
-    const dateRange = [temp.start, temp.end]
-    store.dispatch({
-      type: 'storeExamDateRange',
-      dateRange: dateRange
-    }).then(() => {
-      date.value = dateRange[0] + ' - ' + dateRange[1]
-      resolve(dateRange)
-    })
-  })
-}
-
-const showDateRange = ref(false)
 const electroIndex = computed(() => {
   return store.state.electroIndexArrayMap[patientId] || []
 })
 
-const onConfirm = (values) => {
-  showDateRange.value = false
-  const start = formatDate(values[0])
-  const end = formatDate(values[1])
+function onConfirmRange(range) {
   store.dispatch({
     type: 'storeExamDateRange',
-    dateRange: [start, end]
+    dateRange: range
   }).then(() => {
-    date.value = `${start} - ${end}`
-    queryElectroIndex(start, end)
+    queryElectroIndex(range[0], range[1])
   })
 }
 
@@ -153,12 +80,9 @@ function handleClickElectroIndex(item) {
 onMounted(() => {
   let storeRange = store.state.examDateRange
   if (storeRange.length === 0) {
-    makeOffset(30).then((range) => {
-      date.value = range[0] + ' - ' + range[1]
-      queryElectroIndex(range[0], range[1])
-    })
+    rangeRef.value.makeOffset(30, true)
   } else {
-    date.value = storeRange[0] + ' - ' + storeRange[1]
+    rangeRef.value.setDateStr(storeRange)
     if (electroIndex.value.length === 0) {
       queryElectroIndex(storeRange[0], storeRange[1])
     }

src/views/hospital-service/check-exam/exam/CheckExamIndex.vue

@@ -1,24 +1,7 @@
 <template>
   <window-size>
-    <van-cell title="选择日期区间" :value="date" @click="showDateShortcuts = true" />
+    <my-date-range ref="rangeRef" @finalConfirm="onConfirmRange" :emit-on-mount="false" />
 
-    <van-dialog v-model:show="showDateShortcuts" @confirm="onConfirmShortcuts">
-      <div style="display:flex; justify-content: center; padding: 30px 0 20px 0">
-        <van-radio-group v-model="chosenShortcut">
-          <van-radio name="oneWeek" style="margin-bottom: 12px">近一周</van-radio>
-          <van-radio name="threeMonths" style="margin-bottom: 12px">近三月</van-radio>
-          <van-radio name="halfYear" style="margin-bottom: 12px">近半年</van-radio>
-          <van-radio name="oneYear" style="margin-bottom: 12px">近一年</van-radio>
-          <van-radio name="diy">自定义</van-radio>
-        </van-radio-group>
-      </div>
-    </van-dialog>
-
-    <van-calendar v-model:show="showDateRange"
-                  :min-date="minDate"
-                  :max-date="maxDate"
-                  type="range"
-                  @confirm="onConfirm" />
     <div v-show="examIndex.length > 0">
       <div style="height: 5px"></div>
       <van-tag type="success" size="large" round plain>已发布报告</van-tag>
@@ -44,10 +27,10 @@
 <script setup>
 import store from '@/store'
 import empty from '@/assets/empty.png'
+import MyDateRange from "@/components/date-range/index.vue";
 import { useRouter } from 'vue-router'
-import { computed, onMounted, ref } from 'vue'
+import {computed, onMounted, ref} from 'vue'
 import { checkExamIndex } from '@/api/check-exam'
-import {formatDate, getDateRangeByOffsetDays} from '@/utils/date'
 
 const router = useRouter()
 const patientId = router.currentRoute.value.params.patientId
@@ -55,73 +38,22 @@ const scrollStyle = {
   height: store.state.screenSize.h - 125 + 'px',
   overflowY: 'auto',
 }
-const date = ref('')
-const minDate = ref(new Date(2012, 0, 1))
-const maxDate = ref(new Date())
-
-const showDateShortcuts = ref(false)
-const chosenShortcut = ref('oneWeek')
 
-const onConfirmShortcuts = () => {
-  switch (chosenShortcut.value) {
-    case 'oneWeek':
-      makeOffset(7).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return
-    case 'threeMonths':
-      makeOffset(90).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return;
-    case 'halfYear':
-      makeOffset(183).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return
-    case 'oneYear':
-      makeOffset(365).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return;
-    default:
-      showDateRange.value = true
-      return;
-  }
-}
+const rangeRef = ref()
 
-const makeOffset = (offsetDays) => {
-  return new Promise((resolve, reject) => {
-    const temp = getDateRangeByOffsetDays(offsetDays)
-    const dateRange = [temp.start, temp.end]
-    store.dispatch({
-      type: 'storeExamDateRange',
-      dateRange: dateRange
-    }).then(() => {
-      date.value = dateRange[0] + ' - ' + dateRange[1]
-      resolve(dateRange)
-    })
+function onConfirmRange(range) {
+  store.dispatch({
+    type: 'storeExamDateRange',
+    dateRange: range
+  }).then(() => {
+    queryInspectionIndex(range[0], range[1])
   })
 }
 
-const showDateRange = ref(false)
 const examIndex = computed(() => {
   return store.state.examIndexArrayMap[patientId] || []
 })
 
-const onConfirm = (values) => {
-  showDateRange.value = false
-  const start = formatDate(values[0])
-  const end = formatDate(values[1])
-  store.dispatch({
-    type: 'storeExamDateRange',
-    dateRange: [start, end]
-  }).then(() => {
-    date.value = `${start} - ${end}`
-    queryInspectionIndex(start, end)
-  })
-}
-
 const queryInspectionIndex = (start, end) => {
   const param = {
     patientId,
@@ -149,12 +81,9 @@ function handleClickExamIndex(item) {
 onMounted(() => {
   let storeRange = store.state.examDateRange
   if (storeRange.length === 0) {
-    makeOffset(30).then((range) => {
-      date.value = range[0] + ' - ' + range[1]
-      queryInspectionIndex(range[0], range[1])
-    })
+    rangeRef.value.makeOffset(30, true)
   } else {
-    date.value = storeRange[0] + ' - ' + storeRange[1]
+    rangeRef.value.setDateStr(storeRange)
     if (examIndex.value.length === 0) {
       queryInspectionIndex(storeRange[0], storeRange[1])
     }

src/views/hospital-service/check-exam/pathology/CheckPathologyIndex.vue

@@ -1,27 +1,6 @@
 <template>
   <window-size>
-    <van-cell title="选择日期区间" :value="date" @click="showDateShortcuts = true" />
-
-    <van-dialog v-model:show="showDateShortcuts" @confirm="onConfirmShortcuts">
-      <div style="display:flex; justify-content: center; padding: 30px 0 20px 0">
-        <van-radio-group v-model="chosenShortcut">
-          <van-radio name="oneWeek" style="margin-bottom: 12px">近一周</van-radio>
-          <van-radio name="threeMonths" style="margin-bottom: 12px">近三月</van-radio>
-          <van-radio name="halfYear" style="margin-bottom: 12px">近半年</van-radio>
-          <van-radio name="oneYear" style="margin-bottom: 12px">近一年</van-radio>
-          <van-radio name="diy">自定义</van-radio>
-        </van-radio-group>
-      </div>
-    </van-dialog>
-
-    <van-calendar
-        v-model:show="showDateRange"
-        :min-date="minDate"
-        :max-date="maxDate"
-        type="range"
-        @confirm="onConfirm"
-    />
-
+    <my-date-range ref="rangeRef" @finalConfirm="onConfirmRange" :emit-on-mount="false" />
     <div v-show="pathologyIndex.length > 0">
       <div style="height: 5px"></div>
       <van-tag type="success" size="large" round plain>已发布报告</van-tag>
@@ -50,79 +29,27 @@ import empty from '@/assets/empty.png'
 import { useRouter } from 'vue-router'
 import { computed, onMounted, ref } from 'vue'
 import {checkPathologyIndex} from '@/api/check-exam'
-import {formatDate, getDateRangeByOffsetDays} from '@/utils/date'
+import MyDateRange from "@/components/date-range/index.vue";
 
 const router = useRouter()
 const patientId = router.currentRoute.value.params.patientId
+const rangeRef = ref()
 
 const scrollStyle = {
   height: store.state.screenSize.h - 125 + 'px',
   overflowY: 'auto',
 }
-const date = ref('')
-const minDate = ref(new Date(2012, 0, 1))
-const maxDate = ref(new Date())
-
-const showDateShortcuts = ref(false)
-const chosenShortcut = ref('oneWeek')
-
-const onConfirmShortcuts = () => {
-  switch (chosenShortcut.value) {
-    case 'oneWeek':
-      makeOffset(7).then((range) => {
-        queryPathologyIndex(range[0], range[1])
-      })
-      return
-    case 'threeMonths':
-      makeOffset(90).then((range) => {
-        queryPathologyIndex(range[0], range[1])
-      })
-      return;
-    case 'halfYear':
-      makeOffset(183).then((range) => {
-        queryPathologyIndex(range[0], range[1])
-      })
-      return
-    case 'oneYear':
-      makeOffset(365).then((range) => {
-        queryPathologyIndex(range[0], range[1])
-      })
-      return;
-    default:
-      showDateRange.value = true
-      return;
-  }
-}
 
-const makeOffset = (offsetDays) => {
-  return new Promise((resolve, reject) => {
-    const temp = getDateRangeByOffsetDays(offsetDays)
-    const dateRange = [temp.start, temp.end]
-    store.dispatch({
-      type: 'storeExamDateRange',
-      dateRange: dateRange
-    }).then(() => {
-      date.value = dateRange[0] + ' - ' + dateRange[1]
-      resolve(dateRange)
-    })
-  })
-}
-
-const showDateRange = ref(false)
 const pathologyIndex = computed(() => {
   return store.state.pathologyIndexArrayMap[patientId] || []
 })
 
-const onConfirm = (values) => {
-  showDateRange.value = false
-  const start = formatDate(values[0])
-  const end = formatDate(values[1])
+function onConfirmRange(range) {
   store.dispatch({
     type: 'storeExamDateRange',
-    dateRange: [start, end]
+    dateRange: range
   }).then(() => {
-    date.value = `${start} - ${end}`
-    queryPathologyIndex(start, end)
+    queryPathologyIndex(range[0], range[1])
   })
 }
 
@@ -153,12 +80,9 @@ function handleClickPathologyIndex(item) {
 onMounted(() => {
   let storeRange = store.state.examDateRange
   if (storeRange.length === 0) {
-    makeOffset(30).then((range) => {
-      date.value = range[0] + ' - ' + range[1]
-      queryPathologyIndex(range[0], range[1])
-    })
+    rangeRef.value.makeOffset(30, true)
   } else {
-    date.value = storeRange[0] + ' - ' + storeRange[1]
+    rangeRef.value.setDateStr(storeRange)
     if (pathologyIndex.value.length === 0) {
       queryPathologyIndex(storeRange[0], storeRange[1])
     }

src/views/hospital-service/check-exam/test/CheckTestIndex.vue

@@ -1,27 +1,6 @@
 <template>
   <window-size>
-    <van-cell title="选择日期区间" :value="date" @click="showDateShortcuts = true" />
-
-    <van-dialog v-model:show="showDateShortcuts" @confirm="onConfirmShortcuts">
-      <div style="display:flex; justify-content: center; padding: 30px 0 20px 0">
-        <van-radio-group v-model="chosenShortcut">
-          <van-radio name="oneWeek" style="margin-bottom: 12px">近一周</van-radio>
-          <van-radio name="threeMonths" style="margin-bottom: 12px">近三月</van-radio>
-          <van-radio name="halfYear" style="margin-bottom: 12px">近半年</van-radio>
-          <van-radio name="oneYear" style="margin-bottom: 12px">近一年</van-radio>
-          <van-radio name="diy">自定义</van-radio>
-        </van-radio-group>
-      </div>
-    </van-dialog>
-
-    <van-calendar
-        v-model:show="showDateRange"
-        :min-date="minDate"
-        :max-date="maxDate"
-        type="range"
-        @confirm="onConfirm"
-    />
-
+    <my-date-range ref="rangeRef" @finalConfirm="onConfirmRange" :emit-on-mount="false" />
     <div v-show="testIndex.length > 0">
       <div style="height: 5px"></div>
       <van-tag type="success" size="large" round plain>已发布报告</van-tag>
@@ -50,7 +29,7 @@ import empty from '@/assets/empty.png'
 import { useRouter } from 'vue-router'
 import { computed, onMounted, ref } from 'vue'
 import { checkTestIndex } from '@/api/check-exam'
-import {formatDate, getDateRangeByOffsetDays} from '@/utils/date'
+import MyDateRange from "@/components/date-range/index.vue";
 
 const router = useRouter()
 const patientId = router.currentRoute.value.params.patientId
@@ -58,70 +37,18 @@ const scrollStyle = {
   height: store.state.screenSize.h - 125 + 'px',
   overflowY: 'auto',
 }
-const date = ref('')
-const minDate = ref(new Date(2012, 0, 1))
-const maxDate = ref(new Date())
-
-const showDateShortcuts = ref(false)
-const chosenShortcut = ref('oneWeek')
-
-const onConfirmShortcuts = () => {
-  switch (chosenShortcut.value) {
-    case 'oneWeek':
-      makeOffset(7).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return
-    case 'threeMonths':
-      makeOffset(90).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return;
-    case 'halfYear':
-      makeOffset(183).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return
-    case 'oneYear':
-      makeOffset(365).then((range) => {
-        queryInspectionIndex(range[0], range[1])
-      })
-      return;
-    default:
-      showDateRange.value = true
-      return;
-  }
-}
+const rangeRef = ref()
 
-const makeOffset = (offsetDays) => {
-  return new Promise((resolve, reject) => {
-    const temp = getDateRangeByOffsetDays(offsetDays)
-    const dateRange = [temp.start, temp.end]
-    store.dispatch({
-      type: 'storeExamDateRange',
-      dateRange: dateRange
-    }).then(() => {
-      date.value = dateRange[0] + ' - ' + dateRange[1]
-      resolve(dateRange)
-    })
-  })
-}
-
-const showDateRange = ref(false)
 const testIndex = computed(() => {
   return store.state.testIndexArrayMap[patientId] || []
 })
 
-const onConfirm = (values) => {
-  showDateRange.value = false
-  const start = formatDate(values[0])
-  const end = formatDate(values[1])
+function onConfirmRange(range) {
   store.dispatch({
     type: 'storeExamDateRange',
-    dateRange: [start, end]
+    dateRange: range
   }).then(() => {
-    date.value = `${start} - ${end}`
-    queryInspectionIndex(start, end)
+    queryInspectionIndex(range[0], range[1])
   })
 }
 
@@ -143,12 +70,9 @@ const queryInspectionIndex = (start, end) => {
 onMounted(() => {
   let storeRange = store.state.examDateRange
   if (storeRange.length === 0) {
-    makeOffset(30).then((range) => {
-      date.value = range[0] + ' - ' + range[1]
-      queryInspectionIndex(range[0], range[1])
-    })
+    rangeRef.value.makeOffset(30, true)
   } else {
-    date.value = storeRange[0] + ' - ' + storeRange[1]
+    rangeRef.value.setDateStr(storeRange)
     if (testIndex.value.length === 0) {
       queryInspectionIndex(storeRange[0], storeRange[1])
     }

src/views/hospital-service/pay-mz-fee/MzFeeList.vue

@@ -7,8 +7,9 @@
         </div>
       </van-tab>
       <van-tab title="已缴费" name="paid">
+        <my-date-range @finalConfirm="confirmDateRange"/>
         <div class="box-wrapper">
-          <MzFeePaymentRecords :patient-id="patientId"/>
+          <MzFeePaymentRecords ref="paidList" />
         </div>
       </van-tab>
     </van-tabs>
@@ -20,20 +21,26 @@ import {useRouter} from "vue-router";
 import {ref} from "vue";
 import UnPaidList from "@/views/hospital-service/pay-mz-fee/UnPaidList.vue";
 import MzFeePaymentRecords from "@/views/mine/mz-pay-record/MzFeePaymentRecords.vue";
+import MyDateRange from "@/components/date-range/index.vue";
 
 const router = useRouter()
 const params = router.currentRoute.value.params
 const patientId = params.patientId
 const activeTab = ref(params.active || 'unpaid')
+const paidList = ref()
 
 const handleTabChange = (val) => {
   activeTab.value = val.name
 }
+
+function confirmDateRange(range) {
+  paidList.value.confirmDateRange(patientId, range)
+}
 </script>
 
 <style scoped>
 .box-wrapper {
-  height: calc(100vh - 96px);
+  height: calc(100vh - 140px);
   overflow-y: auto;
   margin-top: 2px;
 }

src/views/mine/appointment-record/AppointmentRecords.vue

@@ -1,34 +1,39 @@
 <template>
   <window-size>
+    <my-date-range @finalConfirm="confirmRange" />
     <van-empty v-if="showEmpty" :image="empty" description="未查询到您的挂号记录"></van-empty>
-    <div v-for="(item, index) in records" :key="index">
-      <van-cell center>
-        <template #title>
-          <div style="font-size: 12px; color: rgb(128, 128, 128)">
-            <div>挂号科室：{{ item.unitName }}</div>
-            <div>挂号医生：{{ item.doctorName }}</div>
-            <div>挂号号别：{{ item.chargeType }}</div>
-          </div>
-        </template>
-        <template #default>
-          <div style="font-size: 12px">
-            <div>
-              挂号金额：<span style="color: orangered">￥ {{ item.fee }}</span>
+    <div style="height: calc(100vh - 96px); overflow-y: auto">
+      <div v-for="(item, index) in records" :key="index">
+        <van-cell center>
+          <template #title>
+            <div style="font-size: 12px; color: rgb(128, 128, 128)">
+              <div>挂号科室：{{ item.unitName }}</div>
+              <div>挂号医生：{{ item.doctorName }}</div>
+              <div>挂号号别：{{ item.chargeType }}</div>
             </div>
-            <div>挂号日期：{{ item.opDay.split(' ')[0] }}</div>
-            <div>就诊日期：{{ item.requestDay.split(' ')[0] }}</div>
-          </div>
-        </template>
-      </van-cell>
+          </template>
+          <template #default>
+            <div style="font-size: 12px">
+              <div>
+                挂号金额：<span style="color: orangered">￥ {{ item.fee }}</span>
+              </div>
+              <div>挂号日期：{{ item.opDay.split(' ')[0] }}</div>
+              <div>就诊日期：{{ item.requestDay.split(' ')[0] }}</div>
+            </div>
+          </template>
+        </van-cell>
+      </div>
     </div>
   </window-size>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import empty from '@/assets/empty.png'
 import { getPaidMzGhList } from '@/api/appointment'
+import { queryDzfp} from '@/api/pay-mz-fee';
+import MyDateRange from '@/components/date-range'
 
 const router = useRouter()
 const patientId = router.currentRoute.value.params.patientId
@@ -36,9 +41,11 @@ const records = ref([])
 const showEmpty = computed(() => {
   return records.value.length === 0
 })
-onMounted(() => {
-  getPaidMzGhList(patientId).then((res) => {
+
+function confirmRange(range) {
+  getPaidMzGhList(patientId, range[0], range[1]).then((res) => {
     records.value = res
   })
-})
+}
+
 </script>

src/views/mine/mz-pay-record/MzFeePaymentRecords.vue

@@ -16,18 +16,11 @@
 </template>
 
 <script setup>
-import {computed, onMounted, ref} from 'vue'
+import {computed, ref} from 'vue'
 import {useRouter} from 'vue-router'
 import empty from '@/assets/empty.png'
 import {getMzPaidList} from '@/api/pay-mz-fee'
 
-const props = defineProps({
-  patientId: {
-    type: String,
-    required: true
-  }
-})
-
 const router = useRouter()
 const records = ref([])
 const showEmpty = computed(() => {
@@ -45,9 +38,13 @@ const toDetail = (item) => {
     },
   })
 }
-onMounted(() => {
-  getMzPaidList(props.patientId).then((res) => {
+
+function confirmDateRange(patientId, range) {
+  getMzPaidList(patientId, range[0], range[1]).then((res) => {
     records.value = res
   })
-})
+}
+
+defineExpose({confirmDateRange})
+
 </script>