|
@@ -0,0 +1,146 @@
|
|
|
+<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 { Toast } from 'vant'
|
|
|
+export default {
|
|
|
+ setup() {
|
|
|
+ const student = reactive({})
|
|
|
+ const showPickOrder = ref(false)
|
|
|
+ const orderTypes = [
|
|
|
+ { code: 'XSTJ', name: '学生体检', price: 55 },
|
|
|
+ { code: 'PDD', name: 'PDD', price: 25 },
|
|
|
+ ]
|
|
|
+ const customFieldName = {
|
|
|
+ code: 'code',
|
|
|
+ text: 'name',
|
|
|
+ }
|
|
|
+ const confirmPickOrder = (val) => {
|
|
|
+ student.orderCode = val.code
|
|
|
+ student.orderName = val.name
|
|
|
+ student.orderPrice = val.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 = () => {
|
|
|
+ console.log(student)
|
|
|
+ const message = validate()
|
|
|
+ if (message) {
|
|
|
+ Toast({
|
|
|
+ message,
|
|
|
+ position: 'top',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ showQrcode.value = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ const saveTjInfo = () => {
|
|
|
+ const message = validate()
|
|
|
+ if (message) {
|
|
|
+ Toast({
|
|
|
+ message,
|
|
|
+ position: 'top',
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ saveStudentInspection(student).then((res) => {
|
|
|
+ Toast.success(res)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ 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>
|