添加时间组件

src/views/attestation/form.vue

@@ -4,13 +4,12 @@
       <div class="tips">注：以下信息请用英文大写字母填写，提交后请下载打印，签字确认信息后上传图片。</div>
       <!-- 通过 pattern 进行正则校验 -->
       <div class="item">
-        <p class="txt">姓名 Name<span> (请保证与护照名字顺序一样)</span></p>
+        <p class="txt">姓名 Name<span> (请保证与护照名字完全一致，包括名字顺序和标点符号)</span></p>
         <van-field
           class="bor"
           v-model="form.name"
           name="pattern"
           placeholder="请填写"
-          :rules="[{ pattern, message: '输入有误，请检查并重新填写' }]"
         />
       </div>
       <div class="item">
@@ -36,11 +35,12 @@
       <div class="item">
         <p class="txt">出生日期 Date of birth (yyyy-mm-dd)</p>
         <van-field
+          @click="seleDateShow = true"
           class="bor"
+          disabled
           v-model="form.birth_date"
           name="validator"
-          placeholder="请填写"
-          :rules="[{ validator, message: '请填写正确日期' }]"
+          placeholder="请选择"
         />
       </div>
       <div class="item">
@@ -161,12 +161,21 @@
         @cancel="seleIsShow = false"
       />
     </div>
-
+    <div class="get-date" v-if="seleDateShow">
+      <van-datetime-picker
+        class="pop"
+        v-model="currentDate"
+        type="date"
+        title="选择年月日"
+        @confirm="confirmDate"
+        @cancel="seleDateShow = false"
+      />
+    </div>
   </div>
 </template>
 <script>
 import * as api from '@/api/attestation'
-import { Form, Button, Dialog, Toast, Picker } from 'vant'
+import { Form, Button, Dialog, Toast, Picker, DatetimePicker } from 'vant'
 export default {
   metaInfo: {
     title: '三级认证个人信息填写'
@@ -176,10 +185,13 @@ export default {
     [Button.name]: Button,
     [Dialog.name]: Dialog,
     [Toast.name]: Toast,
-    [Picker.name]: Picker
+    [Picker.name]: Picker,
+    [DatetimePicker.name]: DatetimePicker
   },
   data() {
     return {
+      seleDateShow: false,
+      currentDate: new Date(),
       seleIsShow: false,
       columns: ['男 MALE', '女 FEMALE'],
       form: {
@@ -211,6 +223,11 @@ export default {
     }
   },
   methods: {
+    confirmDate(val) {
+      const date = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
+      this.form.birth_date = date
+      this.seleDateShow = false
+    },
     getCertificationDetail() {
       api.getAttestationDetail(this.$route.query.id).then(response => {
         this.form = response
@@ -304,6 +321,20 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.get-date{
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgba(0,0,0, 0.5);
+  .pop{
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}
 .sele{
   width: 100%;
   height: 100%;