预约流程

src/router/index.js

@@ -20,6 +20,13 @@ const routes = [
         component: () =>
           import(/* webpackChunkName: "Index" */ "../views/index"),
       },
+      {
+        // 预约流程
+        path: "/flow",
+        name: "Flow",
+        component: () =>
+          import(/* webpackChunkName: "Index" */ "../views/flow"),
+      },
     ],
   },
   {

src/views/flow/index.vue

+<template>
+  <div>预约流程</div>
+</template>
+
+<script>
+export default {
+  name: "componentName",
+  components: {},
+  props: {},
+  data() {
+    return {};
+  },
+
+  methods: {},
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/index/components/form.vue

+<template>
+  <div>
+    <a-form-model
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+      :label-col="labelCol"
+      :wrapper-col="wrapperCol"
+    >
+      <a-form-model-item ref="name" label="姓名" prop="name">
+        <a-input
+          v-model="form.name"
+          @blur="
+            () => {
+              $refs.name.onFieldBlur();
+            }
+          "
+        />
+      </a-form-model-item>
+      <a-form-model-item label="证件类型" prop="card">
+        <a-input v-model="form.card" :readonly="true" />
+      </a-form-model-item>
+      <a-form-model-item label="性别" prop="gender">
+        <a-radio-group v-model="form.gender">
+          <a-radio value="1"> 男 </a-radio>
+          <a-radio value="2"> 女</a-radio>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item label="生日日期" required prop="date">
+        <a-date-picker
+          v-model="form.date"
+          show-time
+          type="date"
+          placeholder="选择生日"
+          style="width: 100%"
+        />
+      </a-form-model-item>
+      <a-form-model-item label="婚姻状况" prop="marriage">
+        <a-radio-group v-model="form.gender">
+          <a-radio value="1">未婚 </a-radio>
+          <a-radio value="2">已婚</a-radio>
+        </a-radio-group>
+      </a-form-model-item>
+      <a-form-model-item ref="name" label="联系电话" prop="phone">
+        <a-input
+          v-model="form.phone"
+          @blur="
+            () => {
+              $refs.name.onFieldBlur();
+            }
+          "
+        />
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="onSubmit">立即预约</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "self-form",
+  components: {},
+  data() {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      other: "",
+      form: {
+        name: "",
+        card: "身份证",
+        date: undefined,
+        gender: "1",
+        marriage: "1",
+        phone: "",
+      },
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入姓名",
+            trigger: "blur",
+          },
+          {
+            max: 5,
+            message: "姓名长度不低于3",
+            trigger: "blur",
+          },
+        ],
+        phone: [
+          {
+            required: true,
+            message: "请输入手机号吗",
+            trigger: "blur",
+          },
+        ],
+
+        date: [{ required: true, message: "请选择日期", trigger: "change" }],
+      },
+    };
+  },
+  computed: {},
+  methods: {
+    onSubmit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+::v-deep .ant-btn {
+  position: relative;
+  left: 100px;
+  width: 120px;
+}
+::v-deep .ant-form-item-control {
+  width: 360px;
+}
+</style>

src/views/index/index.vue

@@ -12,15 +12,27 @@
         <Item v-for="(item, index) in itemb" :item="item" :key="index" />
       </div>
     </div>
+    <!-- 新卡-初始对话框 -->
+    <a-modal
+      v-model="visible"
+      title="个人基本信息填写"
+      @ok="handleOk"
+      :footer="null"
+    >
+      <Form />
+    </a-modal>
   </div>
 </template>
 
 <script>
 import Item from "./components/item.vue";
+import Form from "./components/form.vue";
 export default {
-  components: { Item },
+  components: { Item, Form },
   data() {
     return {
+      visible: true,
+
       items: [
         {
           name: "体检套餐名称-某某单位-某某套餐",
@@ -75,6 +87,15 @@ export default {
       ],
     };
   },
+  methods: {
+    showModal() {
+      this.visible = true;
+    },
+    handleOk(e) {
+      console.log(e);
+      this.visible = false;
+    },
+  },
 };
 </script>
 
@@ -83,6 +104,12 @@ export default {
   padding-bottom: 48px;
   padding-top: 20px;
   background-color: #fafafa;
+  ::v-deep .ant-modal {
+    background-color: saddlebrown;
+  }
+  ::v-deep .ant-modal-footer {
+    display: none;
+  }
   .appointment,
   .appointmented {
     padding: 19.5px 14.5px 33.5px 14.5px;