wxservice-web/src/views/isolations/StudentInspection.vue

<template>
  <window-size :showBackNav="false">
    <div style="display: flex">
      <div>
        <van-image width="120" height="60" :src="logo"></van-image>
      </div>
      <div class="logo">学生体检信息录入</div>
    </div>
    <van-field v-model="student.name" required type="text" label="姓名" placeholder="请输入您的姓名" />
    <van-field v-model="student.idcard" required type="tel" label="身份证号" placeholder="请输入您的身份证号" />
    <van-field v-model="student.phone" required type="tel" label="电话" placeholder="请输入您的联系电话" />
    <van-field v-model="student.school" required type="text" label="学校" placeholder="请输入您在读的学校" />
    <van-field v-model="student.tclass" required type="text" label="班级" placeholder="请输入您所在的班级" />
    <van-field
      v-model="student.orderName"
      required
      label="套餐类型"
      readonly
      @click="showPickOrder = true"
      placeholder="请选择套餐类型"
    ></van-field>
    <van-popup v-model:show="showPickOrder" position="bottom" :style="{ height: '50%' }">
      <van-picker
        title="套餐类型"
        :columns="orderTypes"
        :columns-field-names="customFieldName"
        @cancel="showPickOrder = false"
        @confirm="confirmPickOrder"
      >
        <template #option="item"> {{ item.name }}（单价：￥{{ item.price }}） </template>
      </van-picker>
    </van-popup>
    <van-cell title="查看收款码" label="付款完成后点击下方保存按钮" center is-link @click="beforeShowQrcode"></van-cell>
    <div style="height: 8px"></div>
    <van-button type="primary" icon="certificate" block @click="saveTjInfo">保存</van-button>
    <van-dialog
      v-model:show="showQrcode"
      :show-cancel-button="false"
      :show-confirm-button="false"
      :close-on-click-overlay="true"
    >
      <van-image fit="contain" :src="wxPay" />
    </van-dialog>
  </window-size>
</template>

<script>
import logo from '../../assets/thyylogo.png'
import { reactive, ref } from 'vue'
import wxPay from '../../assets/isolations/wxpay-xh.png'
import { isValidIdcard, isValidPhone } from '../../utils/validate'
import { saveStudentInspection } from '../../api/isolations'
import { showToast } from 'vant'
export default {
  setup() {
    const student = reactive({})
    const showPickOrder = ref(false)
    const orderTypes = [
      { code: 'XSTJ', name: '学生体检', price: 55, value: 'XSTJ' },
      { code: 'PDD', name: 'PDD', price: 25, value: 'PDD' },
    ]
    const customFieldName = {
      code: 'code',
      text: 'name',
    }
    const confirmPickOrder = (val) => {
      student.orderCode = val.selectedOptions[0].code
      student.orderName = val.selectedOptions[0].name
      student.orderPrice = val.selectedOptions[0].price
      showPickOrder.value = false
    }
    const showQrcode = ref(false)

    const validate = () => {
      if (!student.name) {
        return '请输入您的姓名'
      }
      if (!isValidIdcard(student.idcard)) {
        return '请输入正确的身份证号码'
      }
      if (!isValidPhone(student.phone)) {
        return '请输入正确的电话号码'
      }
      if (!student.school) {
        return '请输入您在读学校的名称'
      }
      if (!student.tclass) {
        return '请输入您所在的班级'
      }
      if (!student.orderCode) {
        return '请选择套餐类型'
      }
      return null
    }

    const beforeShowQrcode = () => {
      const message = validate()
      if (message) {
        showToast({
          message,
          position: 'top',
        })
      } else {
        showQrcode.value = true
      }
    }

    const saveTjInfo = () => {
      const message = validate()
      if (message) {
        showToast({
          message,
          position: 'top',
        })
      } else {
        saveStudentInspection(student).then((res) => {
          showToast({
            message: res,
            position: 'top'
          })
        })
      }
    }

    return {
      logo,
      student,
      showPickOrder,
      orderTypes,
      customFieldName,
      confirmPickOrder,
      wxPay,
      showQrcode,
      beforeShowQrcode,
      saveTjInfo,
    }
  },
}
</script>
<style scoped>
.logo {
  color: #00525e;
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  font-size: 18px;
}
</style>