新冠疫苗预约需要选择疫苗种类和厂家。

src/api/covid-vaccinate.js

@@ -15,3 +15,18 @@ export function submitVaccinateAppointment(data) {
     data,
   })
 }
+
+export function selectVaccinates() {
+  return request({
+    url: '/covidVaccinateAppointment/selectVaccinates',
+    method: 'get',
+  })
+}
+
+export function getVaccinateFactories(id) {
+  return request({
+    url: '/covidVaccinateAppointment/getVaccinateFactories',
+    method: 'get',
+    params: { id },
+  })
+}

src/router/index.js

@@ -121,6 +121,11 @@ export const constantRoutes = [
   {
     path: '/covidVaccinate/:patientId?',
     component: () => import('../views/hospital-service/covid-vaccinate/CovidVaccinate.vue'),
+    meta: { title: '选择新冠疫苗' },
+  },
+  {
+    path: '/excuteAppointment/:patientId?/:vaccinateId',
+    component: () => import('../views/hospital-service/covid-vaccinate/ExcuteAppointment.vue'),
     meta: { title: '新冠接种预约' },
   },
   {
@@ -153,17 +158,17 @@ export const constantRoutes = [
   {
     path: '/healthCartCategory/:patientId',
     component: () => import('../views/hospital-service/health-cart/HealthCartCategory.vue'),
-    meta: { title: '商品类别' },
+    meta: { title: '自助类别' },
   },
   {
     path: '/physicalExaminationPackage/:patientId',
-    component: () => import('../views/hospital-service/health-cart/PhysicalExaminationPackage.vue'),
-    meta: { title: '体检套餐' },
+    component: () => import('../views/hospital-service/health-cart/PhysicalExamination.vue'),
+    meta: { title: '检查项目' },
   },
   {
     path: '/vaccine/:patientId',
-    component: () => import('../views/hospital-service/health-cart/Vaccine.vue'),
-    meta: { title: '疫苗' },
+    component: () => import('../views/hospital-service/health-cart/ChemicalExamination.vue'),
+    meta: { title: '检验项目' },
   },
   {
     path: '/selectCovidBranch/:patientId',

src/views/hospital-service/HospitalServiceHome.vue

@@ -46,7 +46,7 @@
         </van-col>
         <van-col span="6" @click="routeTo(filterPath('/healthCartCategory/', '/selectHealthCartPatient'))">
           <img src="../../assets/hospital-service/gouwuche.png" />
-          <div class="icon-label">健康商城</div>
+          <div class="icon-label">自助预约</div>
         </van-col>
 
         <van-col span="6" @click="routeTo('/onlineConsult')">
@@ -173,11 +173,11 @@ export default {
     }
 
     const toVaccinateAppointment = () => {
-      Dialog.alert({
-        title: '提示',
-        message: '本院新冠疫苗已无库存，暂时无法预约，敬请谅解。',
-      })
-      // routeTo(filterPath('/covidVaccinate/', '/selectCovidVaccinatePatient'))
+      // Dialog.alert({
+      //   title: '提示',
+      //   message: '本院新冠疫苗已无库存，暂时无法预约，敬请谅解。',
+      // })
+      routeTo(filterPath('/covidVaccinate/', '/selectCovidVaccinatePatient'))
     }
     const loading = ref(false)
     onMounted(() => {

src/views/hospital-service/covid-vaccinate/CovidVaccinate.vue

@@ -1,289 +1,47 @@
 <template>
-  <div v-show="showTips" class="tip-wrapper">
-    <div class="tip-box">
-      <div class="tip-title">请仔细阅读以下内容：</div>
-      <p style="color: red; padding-right: 10px">
-        可接种年龄范围为<span class="tip-important">18岁-59岁</span>之间。目前阶段，以下情况建议<span
-          class="tip-important"
-          >暂缓</span
-        >接种新冠疫苗：
-      </p>
-      <div class="tip-body">
-        <p>
-          1）对疫苗中任何成分过敏者，既往发生过疫苗严重过敏反应者，如急性过敏反应、荨麻疹、皮肤湿疹、呼吸困难、血管神经性水肿或腹痛者；
-        </p>
-        <div class="tip-divide"></div>
-        <p>2）发热者、患急性疾病、严重慢性疾病、处于慢性疾病的急性发病期者；</p>
-        <div class="tip-divide"></div>
-        <p>3）妊娠期妇女和哺乳期妇女，接种3个月内有生育计划；</p>
-        <div class="tip-divide"></div>
-        <p>
-          4）有惊厥、癫痫、脑病或精神疾病史或家族史者；患未控制的癫痫和其他进行性神经系统疾病者，有格林巴利综合症病史者；
-        </p>
-        <div class="tip-divide"></div>
-        <p>5）已被诊断为患有先天性或获得性免疫缺陷、HIV感染、淋巴瘤、白血病或其他自身免疫疾病；</p>
-        <div class="tip-divide"></div>
-        <p>6）已知或怀疑患有严重呼吸系统疾病、严重心血管疾病、肝肾疾病、恶性肿瘤者；</p>
-        <div class="tip-divide"></div>
-        <p>7）使用抗肿瘤药物等免疫调节剂者；</p>
-        <div class="tip-divide"></div>
-        <p>8）有新冠病毒感染史者；</p>
-        <div class="tip-divide"></div>
-        <p>9）临床医师或接种工作人员认为不适合接种者。</p>
-      </div>
-      <div class="tip-footer">
-        <van-button block type="primary" size="small" :disabled="disableFinish" @click="showTips = false">
-          我已阅读完毕<span v-show="disableFinish">（{{ countdown }}）</span>
-        </van-button>
-      </div>
-    </div>
-  </div>
   <window-size>
-    <van-notice-bar left-icon="volume-o" text="可接种年龄为【18岁-59岁】之间。" />
-    <van-field v-model="vaccinate.name" required type="text" label="姓名" placeholder="请输入姓名" />
-    <van-field v-model="vaccinate.phone" required type="tel" label="电话" placeholder="请输入手机号" />
-    <van-field v-model="vaccinate.socialNo" required type="tel" label="身份证" placeholder="请输入身份证号" />
-    <van-field v-model="vaccinate.corpName" required type="text" label="工作单位" placeholder="请输入工作单位" />
-    <van-field
-      v-model="jobCategoryName"
-      required
-      type="textarea"
-      label="工作性质"
-      readonly
-      @click="showPickJobCategory = true"
-      placeholder="选择工作性质"
-    ></van-field>
-    <van-field
-      v-model="vaccinate.executeDate"
-      required
-      label="接种日期"
-      readonly
-      @click="showPickDatetime = true"
-      placeholder="选择接种日期"
-    ></van-field>
-    <van-popup v-model:show="showPickJobCategory" position="bottom" :style="{ height: '50%' }">
-      <van-picker
-        title="工作性质"
-        :columns="jobCategories"
-        :columns-field-names="customFieldName"
-        @confirm="confirmPickJobCategory"
-      />
-    </van-popup>
-    <van-popup v-model:show="showPickDatetime" position="bottom" :style="{ height: '50%' }">
-      <van-datetime-picker
-        v-model="currentDate"
-        type="date"
-        title="选择接种日期"
-        :min-date="minDate"
-        :max-date="maxDate"
-        :formatter="formatter"
-        @confirm="confirmPickDatetime"
-      />
-    </van-popup>
-    <div style="height: 10px"></div>
-    <van-button block type="primary" @click="submit">提交预约</van-button>
+    <div v-for="item in covidVaccinates" :key="item.code">
+      <van-cell is-link :title="item.name" @click="toCovidVaccinateAppointment(item)"></van-cell>
+    </div>
   </window-size>
 </template>
 
 <script>
-import { computed, onMounted, reactive, ref } from 'vue'
 import router from '../../../router'
-import { formatDate, getAWeekFromNow, getTomorrow } from '../../../utils/date'
-import { getPatientInfoAndJobCategories, submitVaccinateAppointment } from '../../../api/covid-vaccinate'
-import { Dialog, Toast } from 'vant'
-import { isValidIdcard, isValidPhone } from '../../../utils/validate'
+import { onMounted, ref } from 'vue'
+import { selectVaccinates } from '../../../api/covid-vaccinate'
+import { Dialog } from 'vant'
 export default {
   setup() {
     let patientId = router.currentRoute.value.params.patientId
-    const showTips = ref(true)
-    const countdown = ref(15)
-    const disableFinish = computed(() => {
-      return countdown.value > 0
-    })
-    const executeCountdown = () => {
-      setTimeout(() => {
-        countdown.value--
-        if (countdown.value > 0) {
-          executeCountdown()
-        }
-      }, 1000)
-    }
-
-    const showPickDatetime = ref(false)
-    const showPickJobCategory = ref(false)
-    const currentDate = ref(new Date())
-    const formatter = (type, val) => {
-      if (type === 'year') {
-        return val + '年'
-      }
-      if (type === 'month') {
-        return val + '月'
-      }
-      if (type === 'day') {
-        return val + '日'
-      }
-      return val
-    }
-    const confirmPickDatetime = (val) => {
-      vaccinate.executeDate = formatDate(val)
-      showPickDatetime.value = false
-    }
-    const jobCategoryName = ref('')
-    const jobCategories = ref([])
-    const customFieldName = {
-      code: 'code',
-      text: 'name',
-    }
-    const confirmPickJobCategory = (val) => {
-      vaccinate.jobCategory = val.code
-      jobCategoryName.value = val.name
-      showPickJobCategory.value = false
-    }
-    const vaccinate = reactive({
-      patientId: '',
-      name: '',
-      phone: '',
-      socialNo: '',
-      corpName: '',
-      jobCategory: '',
-      executeDate: '',
-    })
-
-    const submit = () => {
-      if (!vaccinate.name) {
-        Toast({
-          message: '请输入姓名！',
-          position: 'top',
-        })
-        return
-      }
-      if (!isValidPhone(vaccinate.phone)) {
-        Toast({
-          message: '请输入正确的手机号码',
-          position: 'top',
-        })
-        return
-      }
-      if (!isValidIdcard(vaccinate.socialNo)) {
-        Toast({
-          message: '请输入正确的身份证号码',
-          position: 'top',
-        })
-        return
-      }
-      if (!vaccinate.corpName) {
-        Toast({
-          message: '请输入工作单位，没有工作单位请填‘无’',
-          position: 'top',
-          duration: 3000,
-        })
-        return
-      }
-      if (!vaccinate.jobCategory) {
-        Toast({
-          message: '请选择工作性质，如不确定请选‘其他人员’，如无工作请选择‘家务及待业人员’',
-          position: 'top',
-          duration: 3000,
-        })
-        return
-      }
-      if (!vaccinate.executeDate) {
-        Toast({
-          message: '请选择接种日期',
-          position: 'top',
-        })
-        return
-      }
-      submitVaccinateAppointment(vaccinate).then((res) => {
-        Dialog.alert({
-          title: '提示',
-          message: res,
-        }).then(() => {
-          router.push('/hospitalService')
-        })
+    const covidVaccinates = ref([])
+    const toCovidVaccinateAppointment = (item) => {
+      Dialog.confirm({
+        title: '温馨提示',
+        message: item.bookTip,
+        messageAlign: 'left',
+        confirmButtonText: '继续预约',
+        cancelButtonText: '重选疫苗',
       })
+        .then(() => {
+          router.push('/excuteAppointment/' + patientId + '/' + item.id)
+        })
+        .catch(() => {})
     }
 
     onMounted(() => {
       if (!patientId) {
-        patientId = ''
+        patientId = null
       }
-      getPatientInfoAndJobCategories(patientId).then((res) => {
-        vaccinate.patientId = res.patientId
-        vaccinate.name = res.name
-        vaccinate.phone = res.phone
-        vaccinate.socialNo = res.socialNo
-        jobCategories.value = res.jobCategories
+      selectVaccinates().then((res) => {
+        covidVaccinates.value = res
       })
-      executeCountdown()
     })
+
     return {
-      showTips,
-      countdown,
-      disableFinish,
-      vaccinate,
-      showPickDatetime,
-      minDate: getTomorrow(),
-      maxDate: getAWeekFromNow(),
-      currentDate,
-      formatter,
-      confirmPickDatetime,
-      showPickJobCategory,
-      jobCategories,
-      confirmPickJobCategory,
-      customFieldName,
-      jobCategoryName,
-      submit,
+      covidVaccinates,
+      toCovidVaccinateAppointment,
     }
   },
 }
-</script>
-
-<style scoped>
-.tip-wrapper {
-  z-index: 3000;
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-}
-.tip-box {
-  position: fixed;
-  width: calc(80% - 30px);
-  height: calc(80% - 20px);
-  left: 10%;
-  top: 10%;
-  background: white;
-  border-radius: 10px;
-  padding: 10px 10px 10px 20px;
-}
-.tip-title {
-  font-size: 20px;
-  font-weight: bold;
-  height: 32px;
-  line-height: 32px;
-}
-.tip-body {
-  margin-top: 10px;
-  height: calc(100% - 150px);
-  overflow-y: auto;
-}
-.tip-important {
-  font-weight: bold;
-  color: darkred;
-}
-.tip-body p {
-  padding-right: 10px;
-}
-.tip-divide {
-  width: calc(100% - 10px);
-  height: 1px;
-  margin: 5px 0;
-  border-bottom: 1px dashed gray;
-}
-.tip-footer {
-  margin-top: 10px;
-}
-</style>
+</script>

src/views/hospital-service/covid-vaccinate/ExcuteAppointment.vue

@@ -0,0 +1,237 @@
+<template>
+  <window-size>
+    <van-notice-bar left-icon="volume-o" text="可接种年龄为【18岁-59岁】之间。" />
+    <van-field v-model="vaccinate.vaccinateName" required label="疫苗名称" readonly />
+    <van-field
+      v-model="vaccinate.vaccinateFactory"
+      required
+      type="text"
+      label="疫苗厂家"
+      readonly
+      @click="showPickFactory = true"
+      placeholder="选择疫苗厂家"
+    ></van-field>
+    <van-field v-model="vaccinate.name" required type="text" label="姓名" placeholder="请输入姓名" />
+    <van-field v-model="vaccinate.phone" required type="tel" label="电话" placeholder="请输入手机号" />
+    <van-field v-model="vaccinate.socialNo" required type="tel" label="身份证" placeholder="请输入身份证号" />
+    <van-field v-model="vaccinate.corpName" required type="text" label="工作单位" placeholder="请输入工作单位" />
+    <van-field
+      v-model="jobCategoryName"
+      required
+      type="textarea"
+      label="工作性质"
+      readonly
+      @click="showPickJobCategory = true"
+      placeholder="选择工作性质"
+    ></van-field>
+    <van-field
+      v-model="vaccinate.executeDate"
+      required
+      label="接种日期"
+      readonly
+      @click="showPickDatetime = true"
+      placeholder="选择接种日期"
+    ></van-field>
+
+    <van-popup v-model:show="showPickFactory" position="bottom" :style="{ height: '50%' }">
+      <van-picker
+        title="疫苗厂家"
+        :columns="vaccinateFactories"
+        :columns-field-names="customFieldName"
+        @confirm="confirmPickFactory"
+      />
+    </van-popup>
+
+    <van-popup v-model:show="showPickJobCategory" position="bottom" :style="{ height: '50%' }">
+      <van-picker
+        title="工作性质"
+        :columns="jobCategories"
+        :columns-field-names="customFieldName"
+        @confirm="confirmPickJobCategory"
+      />
+    </van-popup>
+    <van-popup v-model:show="showPickDatetime" position="bottom" :style="{ height: '50%' }">
+      <van-datetime-picker
+        v-model="currentDate"
+        type="date"
+        title="选择接种日期"
+        :min-date="minDate"
+        :max-date="maxDate"
+        :formatter="formatter"
+        @confirm="confirmPickDatetime"
+      />
+    </van-popup>
+    <div style="height: 10px"></div>
+    <van-button block type="primary" @click="submit">提交预约</van-button>
+  </window-size>
+</template>
+
+<script>
+import { onMounted, reactive, ref } from 'vue'
+import router from '../../../router'
+import { formatDate, getAWeekFromNow, getTomorrow } from '../../../utils/date'
+import {
+  getPatientInfoAndJobCategories,
+  getVaccinateFactories,
+  submitVaccinateAppointment,
+} from '../../../api/covid-vaccinate'
+import { Dialog, Toast } from 'vant'
+import { isValidIdcard, isValidPhone } from '../../../utils/validate'
+export default {
+  setup() {
+    let patientId = router.currentRoute.value.params.patientId
+    const vaccinateId = router.currentRoute.value.params.vaccinateId
+    const vaccinateFactories = ref([])
+    const showPickFactory = ref(false)
+    const showPickDatetime = ref(false)
+    const showPickJobCategory = ref(false)
+    const currentDate = ref(new Date())
+    const formatter = (type, val) => {
+      if (type === 'year') {
+        return val + '年'
+      }
+      if (type === 'month') {
+        return val + '月'
+      }
+      if (type === 'day') {
+        return val + '日'
+      }
+      return val
+    }
+    const confirmPickDatetime = (val) => {
+      vaccinate.executeDate = formatDate(val)
+      showPickDatetime.value = false
+    }
+    const jobCategoryName = ref('')
+    const jobCategories = ref([])
+    const customFieldName = {
+      code: 'code',
+      text: 'name',
+    }
+    const confirmPickFactory = (val) => {
+      vaccinate.vaccinateCode = val.code
+      vaccinate.vaccinateFactory = val.name
+      showPickFactory.value = false
+    }
+    const confirmPickJobCategory = (val) => {
+      vaccinate.jobCategory = val.code
+      jobCategoryName.value = val.name
+      showPickJobCategory.value = false
+    }
+    const vaccinate = reactive({
+      vaccinateId,
+      vaccinateCode: '',
+      vaccinateName: '',
+      vaccinateFactory: '',
+      patientId: '',
+      name: '',
+      phone: '',
+      socialNo: '',
+      corpName: '',
+      jobCategory: '',
+      executeDate: '',
+    })
+
+    const submit = () => {
+      if (!vaccinate.vaccinateCode || !vaccinate.vaccinateFactory) {
+        Toast({
+          message: '请选择疫苗厂家！',
+          position: 'top',
+        })
+        return
+      }
+      if (!vaccinate.name) {
+        Toast({
+          message: '请输入姓名！',
+          position: 'top',
+        })
+        return
+      }
+      if (!isValidPhone(vaccinate.phone)) {
+        Toast({
+          message: '请输入正确的手机号码',
+          position: 'top',
+        })
+        return
+      }
+      if (!isValidIdcard(vaccinate.socialNo)) {
+        Toast({
+          message: '请输入正确的身份证号码',
+          position: 'top',
+        })
+        return
+      }
+      if (!vaccinate.corpName) {
+        Toast({
+          message: '请输入工作单位，没有工作单位请填‘无’',
+          position: 'top',
+          duration: 3000,
+        })
+        return
+      }
+      if (!vaccinate.jobCategory) {
+        Toast({
+          message: '请选择工作性质，如不确定请选‘其他人员’，如无工作请选择‘家务及待业人员’',
+          position: 'top',
+          duration: 3000,
+        })
+        return
+      }
+      if (!vaccinate.executeDate) {
+        Toast({
+          message: '请选择接种日期',
+          position: 'top',
+        })
+        return
+      }
+      submitVaccinateAppointment(vaccinate).then((res) => {
+        Dialog.alert({
+          title: '提示',
+          message: res,
+        }).then(() => {
+          router.push('/hospitalService')
+        })
+      })
+    }
+    onMounted(() => {
+      if (!patientId) {
+        patientId = ''
+      }
+      getVaccinateFactories(vaccinateId).then((res) => {
+        vaccinateFactories.value = res.factories
+        vaccinate.vaccinateId = res.id
+        vaccinate.vaccinateName = res.name
+        if (res.factory) {
+          vaccinate.vaccinateCode = res.factory.code
+          vaccinate.vaccinateFactory = res.factory.name
+        }
+      })
+      getPatientInfoAndJobCategories(patientId).then((res) => {
+        vaccinate.patientId = res.patientId
+        vaccinate.name = res.name
+        vaccinate.phone = res.phone
+        vaccinate.socialNo = res.socialNo
+        jobCategories.value = res.jobCategories
+      })
+    })
+    return {
+      vaccinate,
+      vaccinateFactories,
+      showPickFactory,
+      showPickDatetime,
+      minDate: getTomorrow(),
+      maxDate: getAWeekFromNow(),
+      currentDate,
+      formatter,
+      confirmPickDatetime,
+      showPickJobCategory,
+      jobCategories,
+      confirmPickFactory,
+      confirmPickJobCategory,
+      customFieldName,
+      jobCategoryName,
+      submit,
+    }
+  },
+}
+</script>