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

<template>
  <window-size>
    <van-cell title="医生姓名" :value="data.appointment.doctorName" />
    <van-cell title="医生号别" :value="data.appointment.doctorTitle" />
    <van-cell title="就诊科室" :value="data.appointment.deptName" />
    <van-cell title="就诊时段">
      <template #default>
        <div style="color: orangered">
          {{ data.appointment.date }}&nbsp;&nbsp;{{ data.week }}&nbsp;&nbsp;{{ data.appointment.ampm }}
        </div>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <van-cell title="挂号金额">
      <template #default>
        <div style="color: orangered">￥{{ data.appointment.fee }}</div>
      </template>
    </van-cell>
    <div style="height: 5px"></div>
    <van-radio-group v-model="data.appointment.patientId">
      <van-cell-group>
        <div v-for="item in patientCards" :key="item.patientId">
          <van-cell
            center
            icon="user-o"
            :label="item.patientId"
            clickable
            @click="data.appointment.patientId = item.patientId"
          >
            <template #title>
              <span class="custom-title">{{ item.name }}</span>
              &nbsp;
              <van-tag type="primary" plain v-if="item.isDefault === 1">默认</van-tag>
            </template>
            <template #right-icon>
              <van-radio :name="item.patientId" />
            </template>
          </van-cell>
        </div>
      </van-cell-group>
    </van-radio-group>
    <van-cell
      v-if="showAddCard"
      icon="add-o"
      title="添加就诊人"
      :value="addCardText"
      is-link
      @click="showCreatedCardMethod = true"
    ></van-cell>
    <div style="height: 10px"></div>
    <van-button type="primary" block @click="confirmAppointment" :disabled="disableGhBtn">确认挂号</van-button>
    <van-dialog
      v-model:show="showCreatedCardMethod"
      title="请选择绑定方式"
      :show-confirm-button="false"
      show-cancel-button
    >
      <div style="padding: 20px">
        <van-button type="primary" block to="/bindPatientCard">绑定就诊卡</van-button>
        <div style="height: 10px"></div>
        <van-button type="primary" plain block to="/createPatientCard">新建就诊卡</van-button>
      </div>
    </van-dialog>
  </window-size>
</template>

<script>
import store from '../../../store'
import { computed, onMounted, reactive, ref, watchEffect } from 'vue'
import Cookies from 'js-cookie'
import { getGhFee, hasValidCovidAssessment } from '../../../api/appointment'
import router from '../../../router'
export default {
  name: 'AppointConfirm',
  setup() {
    const showCreatedCardMethod = ref(false)
    const week = Cookies.get('week')
    const data = reactive({
      week: week ? week : localStorage.week,
      appointment: store.state.appointmentInfo,
    })
    const patientCards = computed(() => {
      return store.state.patientCards
    })
    watchEffect(() => {
      patientCards.value.forEach((item) => {
        if (item.isDefault === 1) {
          data.appointment.patientId = item.patientId
        }
      })
    })
    const showAddCard = computed(() => {
      return patientCards.value.length < 5
    })
    const addCardText = computed(() => {
      return '还可添加' + (5 - patientCards.value.length) + '人'
    })
    const confirmAppointment = () => {
      if (Cookies.get('appointmentDeptCode') !== '1260000') {
        hasValidCovidAssessment(data.appointment.patientId).then((res) => {
          if (res === 'no valid assessment') {
            router.push('/assessments/covid/' + data.appointment.patientId)
          } else {
            toPayPage()
          }
        })
      } else {
        toPayPage()
      }
    }
    const toPayPage = () => {
      data.appointment.week = data.week
      patientCards.value.forEach((item) => {
        if (item.patientId === data.appointment.patientId) {
          data.appointment.patientName = item.name
        }
      })
      store.commit('SET_APPOINTMENTINFO', data.appointment)
      router.push('/payAppointmentFee')
    }
    const disableGhBtn = ref(true)
    onMounted(() => {
      getGhFee(data.appointment)
        .then((res) => {
          data.appointment.fee = res
          disableGhBtn.value = false
        })
        .catch(() => {
          data.appointment.fee = '获取失败'
          disableGhBtn.value = true
        })
    })
    return {
      showCreatedCardMethod,
      data,
      patientCards,
      showAddCard,
      addCardText,
      confirmAppointment,
      disableGhBtn,
    }
  },
}
</script>