瀏覽代碼

添加学生体检预约。

lighter 4 年之前
父節點
當前提交
5c141ade34
共有 5 個文件被更改,包括 163 次插入1 次删除
  1. 1 1
      package.json
  2. 9 0
      src/api/isolations.js
  3. 二進制
      src/assets/isolations/wxpay-xh.png
  4. 7 0
      src/router/index.js
  5. 146 0
      src/views/isolations/StudentInspection.vue

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "wxservice-web",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

+ 9 - 0
src/api/isolations.js

@@ -0,0 +1,9 @@
+import request from '../utils/request'
+
+export function saveStudentInspection(data) {
+  return request({
+    url: '/isolations/saveStudentInspection',
+    method: 'post',
+    data,
+  })
+}

二進制
src/assets/isolations/wxpay-xh.png


+ 7 - 0
src/router/index.js

@@ -276,6 +276,13 @@ export const constantRoutes = [
       title: '在线咨询',
     },
   },
+  {
+    path: '/studentInspection',
+    component: () => import('../views/isolations/StudentInspection.vue'),
+    meta: {
+      title: '学生体检',
+    },
+  },
   {
     path: '/500',
     component: () => import('../views/500.vue'),

+ 146 - 0
src/views/isolations/StudentInspection.vue

@@ -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>