添加预约亲冠疫苗接种功能。

src/api/covid-vaccinate.js

@@ -0,0 +1,17 @@
+import request from '../utils/request'
+
+export function getPatientInfoAndJobCategories(patientId) {
+  return request({
+    url: '/covidVaccinateAppointment/getPatientInfoAndJobCategories',
+    method: 'get',
+    params: { patientId },
+  })
+}
+
+export function submitVaccinateAppointment(data) {
+  return request({
+    url: '/covidVaccinateAppointment/submitVaccinateAppointment',
+    method: 'post',
+    data,
+  })
+}

src/router/index.js

@@ -113,6 +113,16 @@ export const constantRoutes = [
     component: () => import('../views/hospital-service/external-page/PhysicalExamination.vue'),
     meta: { title: '体检报告' },
   },
+  {
+    path: '/selectCovidVaccinatePatient',
+    component: () => import('../views/hospital-service/covid-vaccinate/SelectCovidVaccinatePatient.vue'),
+    meta: { title: '选择患者' },
+  },
+  {
+    path: '/covidVaccinate/:patientId?',
+    component: () => import('../views/hospital-service/covid-vaccinate/CovidVaccinate.vue'),
+    meta: { title: '新冠接种预约' },
+  },
   {
     path: '/selectInpatientCard',
     component: () => import('../views/hospital-service/inpatient-service/SelectInpatientCard.vue'),

src/utils/date.js

@@ -53,6 +53,16 @@ export function getOneWeekOffset(start) {
   return { start, end }
 }
 
+export function getTomorrow() {
+  const tomorrow = new Date().getTime() + 24 * 3600 * 1000
+  return new Date(tomorrow)
+}
+
+export function getAWeekFromNow() {
+  const weekAfter = new Date().getTime() + 7 * 24 * 3600 * 1000
+  return new Date(weekAfter)
+}
+
 export function getOneWeekText() {
   const day = new Date().getDay()
   const weeks = new Array('日', '一', '二', '三', '四', '五', '六')
@@ -85,3 +95,18 @@ function getDateByOffeset(offset) {
     date: day,
   }
 }
+
+export function formatDatetime(date) {
+  const year = date.getFullYear()
+  let month = date.getMonth() + 1
+  let day = date.getDate()
+  let hour = date.getHours()
+  let minute = date.getMinutes()
+  if (month < 10) {
+    month = '0' + month
+  }
+  if (day < 10) {
+    day = '0' + day
+  }
+  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':00'
+}

src/views/hospital-service/HospitalServiceHome.vue

@@ -7,11 +7,12 @@
         <h3>微信医疗服务平台</h3>
       </div>
     </div>
-    <div class="yuyueguahao" @click="routeTo('/appointment')">
+    <div class="yuyueguahao" @click="routeTo(filterPath('/covidVaccinate/', '/selectCovidVaccinatePatient'))">
       <div>
-        <img src="../../assets/hospital-service/yuyueguahao2.png" />
+        <img class="large-icon" src="../../assets/hospital-service/vaccinate.png" />
       </div>
-      <p>预约挂号&nbsp;<van-tag type="success" plain>快速、便捷</van-tag></p>
+      <p>预约新冠疫苗接种</p>
+      <img class="thumb-icon" src="../../assets/hospital-service/click2.png" />
     </div>
     <div id="router-lane">
       <div style="height: 10px"></div>
@@ -54,7 +55,7 @@
       @click="routeTo(filterPath('/selectCovidBranch/', '/selectOrderCovidPatient'))"
     >
       <div>
-        <img src="../../assets/hospital-service/xinguanjiance2.png" />
+        <img class="large-icon" src="../../assets/hospital-service/xinguanjiance2.png" />
       </div>
       <p>新冠检测快速下单与查询</p>
     </div>
@@ -193,7 +194,7 @@ export default {
   border-radius: 8px;
   display: flex;
 }
-.yuyueguahao img {
+.large-icon {
   margin-left: 10px;
   margin-top: 11px;
 }
@@ -205,6 +206,11 @@ export default {
   line-height: 70px;
   padding-left: 10px;
 }
+.thumb-icon {
+  margin-top: 19px;
+  width: 32px;
+  height: 32px;
+}
 
 .xinguanjiance {
   background: url('../../assets/hospital-service/xinguanjiancebackground.png') no-repeat !important;

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

@@ -28,7 +28,12 @@
     <div v-for="(item, index) in data.doctorSources" :key="index">
       <van-cell center :title="item.doctorName + ' | ' + item.chargeType" is-link @click="toDoctorArangement(item)">
         <template #icon>
-          <van-image round fit="cover" :src="'data:image/png;base64,' + item.portrait" />&nbsp;
+          <van-image
+            style="width: 44.11px; height: 60.36px"
+            round
+            fit="cover"
+            :src="'data:image/png;base64,' + item.portrait"
+          />&nbsp;
         </template>
         <template #label>
           <div :style="labelStyle" v-show="item.introduction">{{ item.introduction }}</div>

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

@@ -0,0 +1,289 @@
+<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>
+  </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'
+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')
+        })
+      })
+    }
+
+    onMounted(() => {
+      if (!patientId) {
+        patientId = ''
+      }
+      getPatientInfoAndJobCategories(patientId).then((res) => {
+        vaccinate.patientId = res.patientId
+        vaccinate.name = res.name
+        vaccinate.phone = res.phone
+        vaccinate.socialNo = res.socialNo
+        jobCategories.value = res.jobCategories
+      })
+      executeCountdown()
+    })
+    return {
+      showTips,
+      countdown,
+      disableFinish,
+      vaccinate,
+      showPickDatetime,
+      minDate: getTomorrow(),
+      maxDate: getAWeekFromNow(),
+      currentDate,
+      formatter,
+      confirmPickDatetime,
+      showPickJobCategory,
+      jobCategories,
+      confirmPickJobCategory,
+      customFieldName,
+      jobCategoryName,
+      submit,
+    }
+  },
+}
+</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>

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

@@ -0,0 +1,5 @@
+<template>
+  <window-size>
+    <select-card to="covidVaccinate"></select-card>
+  </window-size>
+</template>