门诊挂号时段切片

src/views/hospital-service/appointment/AppointmentConfirm.vue

@@ -3,13 +3,20 @@
         <van-cell title="医生姓名" :value="appointment.doctorName"/>
         <van-cell title="医生号别" :value="appointment.doctorTitle"/>
         <van-cell title="就诊科室" :value="appointment.deptName"/>
-        <van-cell title="就诊时段">
+        <van-cell title="就诊日期">
             <template #default>
                 <div style="color: orangered">
-                    {{ appointment.date }}&nbsp;&nbsp;{{ appointment.week }}&nbsp;&nbsp;{{ appointment.ampm }}
+                    {{ appointment.week }}&nbsp;&nbsp;{{ appointment.date }}
                 </div>
             </template>
         </van-cell>
+        <van-cell title="就诊时段">
+          <template #default>
+            <div style="color: orangered">
+              {{ appointment.ampm }}&nbsp;&nbsp;{{ appointment.apValue || '' }}
+            </div>
+          </template>
+        </van-cell>
         <div style="height: 5px"></div>
         <van-cell title="挂号金额">
             <template #default>

src/views/hospital-service/appointment/DoctorArrangement.vue

@@ -59,7 +59,7 @@
               </van-grid>
             </van-collapse-item>
           </van-collapse>
-          <div v-for="item in data.arrangements" :key="item.mzyRequestId" @click="toAppointConfirm(item)">
+          <div v-for="item in data.arrangements" :key="item.mzyRequestId" @click="beforeConfirmAppointment(item)">
             <van-cell center :title="item.ampm" is-link>
               <template #label>
                 <span v-html="hasLeftNum(item.leftNum)"></span>
@@ -81,10 +81,27 @@
       </van-grid>
     </van-popup>
     <van-empty :image="empty" v-show="data.arrangements.length === 0" description="暂未获取到医生排班信息" />
+    <van-action-sheet v-model:show="showTimeSections" title="请选择">
+      <div style="padding: 16px 16px 30px">
+        <van-radio-group v-model="currentAppointmentItem.apTime">
+          <van-cell-group inset>
+            <van-cell v-for="obj in timeSections" :title="'时段：' +　obj.apValue" :value="'余号：' + obj.apLeftNum" clickable
+                      @click="currentAppointmentItem.apTime = obj.apTime;currentAppointmentItem.apValue = obj.apValue"
+                      value-class="need-padding">
+              <template #right-icon>
+                <van-radio :name="obj.apTime" :disabled="obj.apLeftNum === '0'"/>
+              </template>
+            </van-cell>
+          </van-cell-group>
+        </van-radio-group>
+        <van-button style="margin-top: 20px" block type="primary" @click="toConfirmAppointment"
+                    :disabled="!currentAppointmentItem.apTime">确认</van-button>
+      </div>
+    </van-action-sheet>
   </window-size>
 </template>
 
-<script>
+<script setup>
 import empty from '../../../assets/empty.png'
 import store from '../../../store'
 import { useRouter } from 'vue-router'
@@ -100,156 +117,177 @@ import { getLocalOpenId } from '../../../utils/check-patient-id'
 import { genTextPortrait } from '../../../utils/portrait'
 import { getOneWeekText, getNextSevenDate } from '../../../utils/date'
 import { Toast } from 'vant'
-export default {
-  name: 'DoctorArangement',
-  setup() {
-    const router = useRouter()
-    const deptCode = router.currentRoute.value.params.dept
-    const doctorCode = router.currentRoute.value.params.doctor
-    const date = router.currentRoute.value.params.date
-    const data = reactive({
-      activeCollapse: ['1', '2'],
-      activeDate: '',
-      doctorInfo: {},
-      arrangements: [],
-      showQr: false,
-      date: date,
-      currentIndex: 0,
-      oneWeekText: getOneWeekText(),
-      nextSevenDate: getNextSevenDate(),
-      nextSevenDaySources: new Array(7).fill(4001),
-      qrcode: '',
-    })
-    const toAppointConfirm = (item) => {
-      item.deptCode = data.doctorInfo.deptCode
-      item.deptName = data.doctorInfo.deptName
-      item.date = data.date
-      item.week = weekText.value
-      store.commit('SET_APPOINTMENTINFO', item)
-      router.push('/appointmentConfirm')
-    }
-    const collected = computed(() => {
-      const icon = data.doctorInfo.collected > 0 ? 'star' : 'star-o'
-      const text = data.doctorInfo.collected > 0 ? '已收藏' : '未收藏'
-      return { icon, text }
-    })
 
-    const openId = getLocalOpenId()
-    const collectAction = () => {
-      const param = {
-        openId,
-        doctorCode,
-        deptCode,
-      }
-      if (data.doctorInfo.collected === 0) {
-        collectDoctor(param).then(() => {
-          Toast.success('已收藏')
-          getDoctorInfo(doctorCode, openId).then((res) => {
-            data.doctorInfo = res
-            if (!res.portrait) {
-              data.doctorInfo.portrait = genTextPortrait(res.doctorName)
-            }
-          })
-        })
-      } else {
-        disCollectDoctor(param).then(() => {
-          Toast.success('已取消收藏')
-          getDoctorInfo(doctorCode, openId).then((res) => {
-            data.doctorInfo = res
-            if (!res.portrait) {
-              data.doctorInfo.portrait = genTextPortrait(res.doctorName)
-            }
-          })
-        })
-      }
-    }
-    const getSelectDate = computed(() => {
-      return data.date
+const router = useRouter()
+const deptCode = router.currentRoute.value.params.dept
+const doctorCode = router.currentRoute.value.params.doctor
+const date = router.currentRoute.value.params.date
+const data = reactive({
+  activeCollapse: ['1', '2'],
+  activeDate: '',
+  doctorInfo: {},
+  arrangements: [],
+  showQr: false,
+  date: date,
+  currentIndex: 0,
+  oneWeekText: getOneWeekText(),
+  nextSevenDate: getNextSevenDate(),
+  nextSevenDaySources: new Array(7).fill(4001),
+  qrcode: '',
+})
+
+const currentAppointmentItem = ref({})
+const timeSections = ref([])
+const showTimeSections = ref(false)
+const amSectionLabel = [
+  {apTime: 'a1', apValue: '08:00-08:30'},
+  {apTime: 'a2', apValue: '08:30-09:00'},
+  {apTime: 'a3', apValue: '09:00-09:30'},
+  {apTime: 'a4', apValue: '09:30-10:00'},
+  {apTime: 'a5', apValue: '10:00-10:30'},
+  {apTime: 'a6', apValue: '10:30-11:00'},
+  {apTime: 'a7', apValue: '11:00-11:30'},
+  {apTime: 'a8', apValue: '11:30-12:00'}]
+const pmSectionLabel = [
+  {apTime: 'p1', apValue: '14:00-14:30'},
+  {apTime: 'p2', apValue: '14:30-15:00'},
+  {apTime: 'p3', apValue: '15:00-15:30'},
+  {apTime: 'p4', apValue: '15:30-16:00'},
+  {apTime: 'p5', apValue: '16:00-16:30'},
+  {apTime: 'p6', apValue: '16:30-17:00'}
+]
+const beforeConfirmAppointment = (item) => {
+  currentAppointmentItem.value = item
+  currentAppointmentItem.value.deptCode = data.doctorInfo.deptCode
+  currentAppointmentItem.value.deptName = data.doctorInfo.deptName
+  currentAppointmentItem.value.date = data.date
+  currentAppointmentItem.value.week = weekText.value
+  if (item.ampm !== '上午' && item.ampm !== '下午') {
+    toConfirmAppointment()
+  } else {
+    timeSections.value = []
+    const sectionLabels = item.ampm === '上午' ? amSectionLabel : pmSectionLabel
+    sectionLabels.forEach(section => {
+      let temp = { apTime: section.apTime, apValue: section.apValue, apLeftNum: item[section.apTime]}
+      timeSections.value.push(temp)
     })
-    const getType = (index) => {
-      return index === data.currentIndex ? 'primary' : 'default'
-    }
-    const hasSource = (index) => {
-      return data.nextSevenDaySources[index] === 200 ? '有' : '无'
-    }
-    const badgeColor = (index) => {
-      return data.nextSevenDaySources[index] === 200 ? 'green' : 'red'
-    }
-    const hasLeftNum = (val) => {
-      return val > 0
-        ? '<span style="font-size: 12px;color:green">有号</span>'
-        : '<span style="font-size: 12px;color:red">无号</span>'
-    }
-    const weekText = ref('')
-    const handleClickDate = (index) => {
-      if (index > 6) {
-        return
-      }
-      weekText.value = '星期' + data.oneWeekText[index]
-      data.currentIndex = index
-      data.date = data.nextSevenDate[index].fullDate
-      const param = {
-        date: data.date,
-        deptCode: deptCode,
-        doctorCode: doctorCode,
-      }
-      getDoctorArrangement(param)
-        .then((res) => {
-          data.arrangements = res
-        })
-        .catch(() => {
-          handleClickDate(++index)
-        })
-    }
+    showTimeSections.value = true
+  }
+}
 
-    const showDoctorQrCode = () => {
-      getDoctorQrCode(doctorCode).then((res) => {
-        data.qrcode = res
-        data.showQr = true
-      })
-    }
+const toConfirmAppointment = () => {
+  store.commit('SET_APPOINTMENTINFO', currentAppointmentItem.value)
+  router.push('/appointmentConfirm')
+}
 
-    onMounted(() => {
+const collected = computed(() => {
+  const icon = data.doctorInfo.collected > 0 ? 'star' : 'star-o'
+  const text = data.doctorInfo.collected > 0 ? '已收藏' : '未收藏'
+  return { icon, text }
+})
+
+const openId = getLocalOpenId()
+const collectAction = () => {
+  const param = {
+    openId,
+    doctorCode,
+    deptCode,
+  }
+  if (data.doctorInfo.collected === 0) {
+    collectDoctor(param).then(() => {
+      Toast.success('已收藏')
       getDoctorInfo(doctorCode, openId).then((res) => {
         data.doctorInfo = res
         if (!res.portrait) {
           data.doctorInfo.portrait = genTextPortrait(res.doctorName)
         }
       })
-      const param = {
-        date: data.nextSevenDate[0].fullDate,
-        deptCode: deptCode,
-        doctorCode: doctorCode,
-      }
-      getSourcesByDateAndDoctor(param).then((res) => {
-        data.nextSevenDaySources = res
-        for (let i = 0; i < 7; i++) {
-          if (data.nextSevenDate[i].fullDate === date) {
-            handleClickDate(i)
-          }
+    })
+  } else {
+    disCollectDoctor(param).then(() => {
+      Toast.success('已取消收藏')
+      getDoctorInfo(doctorCode, openId).then((res) => {
+        data.doctorInfo = res
+        if (!res.portrait) {
+          data.doctorInfo.portrait = genTextPortrait(res.doctorName)
         }
       })
     })
-    return {
-      empty,
-      data,
-      collected,
-      collectAction,
-      toAppointConfirm,
-      getSelectDate,
-      getType,
-      hasSource,
-      badgeColor,
-      handleClickDate,
-      showDoctorQrCode,
-      hasLeftNum,
-    }
-  },
+  }
+}
+const getSelectDate = computed(() => {
+  return data.date
+})
+const getType = (index) => {
+  return index === data.currentIndex ? 'primary' : 'default'
+}
+const hasSource = (index) => {
+  return data.nextSevenDaySources[index] === 200 ? '有' : '无'
+}
+const badgeColor = (index) => {
+  return data.nextSevenDaySources[index] === 200 ? 'green' : 'red'
 }
+const hasLeftNum = (val) => {
+  return val > 0
+      ? '<span style="font-size: 12px;color:green">有号</span>'
+      : '<span style="font-size: 12px;color:red">无号</span>'
+}
+const weekText = ref('')
+const handleClickDate = (index) => {
+  if (index > 6) {
+    return
+  }
+  weekText.value = '星期' + data.oneWeekText[index]
+  data.currentIndex = index
+  data.date = data.nextSevenDate[index].fullDate
+  const param = {
+    date: data.date,
+    deptCode: deptCode,
+    doctorCode: doctorCode,
+  }
+  getDoctorArrangement(param).then((res) => {
+    data.arrangements = res
+  }).catch(() => {
+    handleClickDate(++index)
+  })
+}
+
+const showDoctorQrCode = () => {
+  getDoctorQrCode(doctorCode).then((res) => {
+    data.qrcode = res
+    data.showQr = true
+  })
+}
+
+onMounted(() => {
+  getDoctorInfo(doctorCode, openId).then((res) => {
+    data.doctorInfo = res
+    if (!res.portrait) {
+      data.doctorInfo.portrait = genTextPortrait(res.doctorName)
+    }
+  })
+  const param = {
+    date: data.nextSevenDate[0].fullDate,
+    deptCode: deptCode,
+    doctorCode: doctorCode,
+  }
+  getSourcesByDateAndDoctor(param).then((res) => {
+    data.nextSevenDaySources = res
+    for (let i = 0; i < 7; i++) {
+      if (data.nextSevenDate[i].fullDate === date) {
+        handleClickDate(i)
+      }
+    }
+  })
+})
+
 </script>
 
 <style>
 #noPadding .van-collapse-item__content {
   padding: 0;
 }
+.need-padding {
+  padding-right: 8px;
+}
 </style>

src/views/hospital-service/appointment/PayAppointmentFee.vue

@@ -33,8 +33,8 @@
     <van-cell title="费用类型" value="当班挂号"></van-cell>
     <van-cell title="就诊科室" :value="data.appointment.deptName"></van-cell>
     <van-cell title="医生姓名" :value="data.appointment.doctorName"></van-cell>
-    <van-cell title="就诊日期" :value="data.appointment.date + '  ' + data.appointment.week"></van-cell>
-    <van-cell title="就诊时段" :value="data.appointment.ampm"></van-cell>
+    <van-cell title="就诊日期" :value="data.appointment.week + '  ' + data.appointment.date"></van-cell>
+    <van-cell title="就诊时段" :value="data.appointment.ampm + '  ' + (data.appointment.apValue || '')"></van-cell>
     <van-cell title="就诊人" :value="data.appointment.patientName"></van-cell>
     <van-cell title="就诊卡号" :value="data.appointment.patientId"></van-cell>
     <div style="height: 10px"></div>
@@ -68,22 +68,21 @@ export default {
         openId: getLocalOpenId(),
         patientId: data.appointment.patientId,
         mzyRequestId: data.appointment.mzyRequestId,
+        apTime: data.appointment.apTime
       }
-      wxPay(param)
-        .then((result) => {
-          Toast.success(result)
-          if (data.appointment.extra === 'covid19-exam') {
-            savePrescription(data.appointment.patientId, 1).then(() => {
-              router.push(`/unPaidList/${data.appointment.patientId}`)
-            })
-          } else {
-            router.push('/hospitalService');
-          }
-        })
-        .catch((result) => {
-          Toast.success(result)
-          router.push('/hospitalService')
-        })
+      wxPay(param).then((result) => {
+        Toast.success(result)
+        if (data.appointment.extra === 'covid19-exam') {
+          savePrescription(data.appointment.patientId, 1).then(() => {
+            router.push(`/unPaidList/${data.appointment.patientId}`)
+          })
+        } else {
+          router.push('/hospitalService');
+        }
+      }).catch((result) => {
+        Toast.success(result)
+        router.push('/hospitalService')
+      })
     }
     return {
       data,