wxservice-web/src/views/hospital-service/health-cart/BookExam.vue

<template>
  <div v-show="showTips" class="tip-wrapper">
    <div class="tip-box">
      <div class="tip-title">请仔细阅读以下内容：</div>
      <div class="tip-body">
        <div v-for="(tip, index) in bookTips" :key="index">
          <p>
            {{ tip }}
          </p>
          <div class="tip-divide"></div>
        </div>
      </div>
      <div class="tip-footer">
        <div style="height: 8px"></div>
        <van-button block type="primary" size="small" :disabled="disableFinish" @click="executeBook">
          确认预约<span v-show="disableFinish">（{{ countdown }}）</span>
        </van-button>
        <div style="height: 8px"></div>
        <van-button block type="primary" plain size="small" @click="cancelBook"> 取消预约 </van-button>
      </div>
    </div>
  </div>
  <window-size>
    <van-cell title="项目名称" :value="bookItem.name"></van-cell>
    <van-cell title="执行科室" :value="bookItem.execUnitName"></van-cell>
    <van-cell title="预约人" :value="bookItem.patientName"></van-cell>
    <van-cell title="预约日期" :value="bookItem.recordDate"></van-cell>
    <van-cell title="预约时间段" :value="bookItem.beginTime + ' - ' + bookItem.endTime"></van-cell>
    <div style="height: 8px"></div>
    <van-button block type="primary" icon="passed" @click="beforeExecuteBook">执行预约</van-button>
  </window-size>
</template>

<script setup>
import { showToast } from 'vant'
import { getBookTip, saveBookPrescription } from '../../../api/bookable'
import router from '../../../router'
import store from '../../../store'
import { computed, ref } from 'vue'

const bookItem = store.state.currentBook
const bookTips = ref([])
const showTips = ref(false)

const countdown = ref(0)
const disableFinish = computed(() => {
  return countdown.value > 0
})
const executeCountdown = () => {
  setTimeout(() => {
    countdown.value--
    if (countdown.value > 0) {
      executeCountdown()
    }
  }, 1000)
}
const beforeExecuteBook = () => {
  getBookTip(bookItem.tableName, bookItem.code).then((res) => {
    if (res) {
      bookTips.value = res
      countdown.value = 15
      showTips.value = true
      executeCountdown()
    } else {
      executeBook()
    }
  })
}
const executeBook = () => {
  showTips.value = false
  saveBookPrescription(bookItem).then((res) => {
    store.commit('SET_YJREQNO', res)
    showToast({
      message: '自助开单成功。',
      position: 'top',
    });
    router.push('/unPaidList/' + bookItem.patientId)
  })
}
const cancelBook = () => {
  showTips.value = false
  countdown.value = 0
  router.go(-2)
}
</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-body p {
  padding-right: 10px;
}
.tip-divide {
  width: calc(100% - 10px);
  height: 1px;
  margin: 5px 0;
  border-bottom: 1px dashed rgb(128, 128, 128);
}
.tip-footer {
  margin-top: 10px;
}
</style>