|
|
@@ -3,55 +3,37 @@
|
|
|
<m-header />
|
|
|
<m-step :number="2" />
|
|
|
|
|
|
- <!-- <van-form ref="form" :show-error="false" validate-first @submit="onSubmit" @failed="onFailed"> -->
|
|
|
<div class="title">基本信息</div>
|
|
|
- <van-field v-model="form.idCardNo" readonly required name="idCardNo" label="身份证号" placeholder="请输入身份证号" >
|
|
|
+ <van-field v-model="form.idCardNo" @blur="onCardNo" required name="idCardNo" label="身份证号" placeholder="请输入身份证号" >
|
|
|
<template #button>
|
|
|
- <!-- <span class="codeText">上传</span> -->
|
|
|
- <!-- <van-uploader :before-read="beforeRead2"
|
|
|
- :after-read="afterReadOCR"
|
|
|
- accept="image/*"
|
|
|
- :max-count="1">
|
|
|
- <span class="codeText">上传</span>
|
|
|
- </van-uploader> -->
|
|
|
<div class="cropper">
|
|
|
- <span>上传</span>
|
|
|
- <h5-cropper
|
|
|
+ <!-- <van-icon name="scan" /> -->
|
|
|
+ <i class="icon-scan"></i>
|
|
|
+ <h5-cropper
|
|
|
@getFile="getFile"
|
|
|
:option="option"
|
|
|
></h5-cropper>
|
|
|
</div>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
- <!-- <div class="cardTips">如有括号，请用英文括号()</div> -->
|
|
|
- <van-field readonly required v-model="form.realName" name="realName" label="姓名" placeholder="请输入姓名" />
|
|
|
+ <van-field required v-model="form.realName" name="realName" label="姓名" placeholder="请输入姓名" />
|
|
|
|
|
|
- <van-field name="radio" required label="性别">
|
|
|
+ <van-field required name="radio" label="性别">
|
|
|
<template #input>
|
|
|
<van-radio-group v-model="form.gender" direction="horizontal">
|
|
|
- <van-radio disabled checked-color="@--main-color" :name="1">男</van-radio>
|
|
|
- <van-radio disabled checked-color="@--main-color" :name="0">女</van-radio>
|
|
|
+ <van-radio checked-color="@--main-color" :name="1">男</van-radio>
|
|
|
+ <van-radio checked-color="@--main-color" :name="0">女</van-radio>
|
|
|
</van-radio-group>
|
|
|
</template>
|
|
|
</van-field>
|
|
|
|
|
|
- <van-field readonly required name="birthdate" v-model="form.birthdate" label="生日" placeholder="请选择" />
|
|
|
+ <van-field required readonly name="birthdate" @click="onChangeDate" v-model="form.birthdate" is-link label="生日" placeholder="请选择生日" />
|
|
|
|
|
|
- <van-field readonly required name="nation" v-model="form.nation" label="民族" placeholder="请选择" />
|
|
|
+ <van-field required name="nation" v-model="form.nation" label="民族" placeholder="请输入民族" />
|
|
|
|
|
|
<div class="title">证件照上传</div>
|
|
|
|
|
|
<div class="upload-img">
|
|
|
- <!-- <van-uploader v-model="certificatePhoto" :before-read="beforeRead"
|
|
|
- :before-delete="beforeDelete"
|
|
|
- :after-read="afterRead"
|
|
|
- accept="image/*"
|
|
|
- :max-count="1">
|
|
|
- <div class="upload-container">
|
|
|
- <i class="icon-upload-add"></i>
|
|
|
- <p>点击上传</p>
|
|
|
- </div>
|
|
|
- </van-uploader> -->
|
|
|
<div class="cropper2">
|
|
|
<van-image
|
|
|
width="100%"
|
|
|
@@ -80,7 +62,19 @@
|
|
|
</div>
|
|
|
|
|
|
<m-button class="step-btn" @click="onSubmit" text="下一步" />
|
|
|
- <!-- </van-form> -->
|
|
|
+
|
|
|
+ <van-popup v-model="birthdateShow" position="bottom">
|
|
|
+ <van-datetime-picker
|
|
|
+ v-model="currentDate"
|
|
|
+ type="date"
|
|
|
+ title="选择月日"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ :formatter="formatter"
|
|
|
+ @cancel="birthdateShow = false"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -90,6 +84,7 @@ import MButton from '@/components/MButton'
|
|
|
import setLoading from '@/utils/loading'
|
|
|
import H5Cropper from 'vue-cropper-h5'
|
|
|
import { getStudent, ocr, uploadFile, updateStudentInfo, getExamIngOrder, closeOrder } from './SignUpApi'
|
|
|
+import { validateCardNo } from '@/utils/validateRules'
|
|
|
import dayjs from 'dayjs'
|
|
|
export default {
|
|
|
name: 'signupBaseInfo',
|
|
|
@@ -97,8 +92,12 @@ export default {
|
|
|
data () {
|
|
|
const examId = localStorage.getItem('examId')
|
|
|
return {
|
|
|
+ birthdateShow: false,
|
|
|
examId: examId,
|
|
|
certificatePhoto: [],
|
|
|
+ minDate: new Date(1940, 0, 1),
|
|
|
+ maxDate: new Date(2050, 10, 1),
|
|
|
+ currentDate: new Date(),
|
|
|
form: {
|
|
|
idCardNo: null,
|
|
|
realName: null,
|
|
|
@@ -155,6 +154,60 @@ export default {
|
|
|
this.__init()
|
|
|
},
|
|
|
methods: {
|
|
|
+ formatter(type, val) {
|
|
|
+ if (type === 'year') {
|
|
|
+ return `${val}年`;
|
|
|
+ } else if (type === 'month') {
|
|
|
+ return `${val}月`;
|
|
|
+ } else if (type === 'day') {
|
|
|
+ return `${val}日`;
|
|
|
+ }
|
|
|
+ return val;
|
|
|
+ },
|
|
|
+ onCardNo() {
|
|
|
+ let form = this.form
|
|
|
+ // 身份证号检验
|
|
|
+ if(!validateCardNo(form.idCardNo)) {
|
|
|
+ this.$toast('输入身份证号有误')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let birthday = this.getBirth(form.idCardNo)
|
|
|
+ let sex = this.getSex(form.idCardNo)
|
|
|
+ form.gender = sex
|
|
|
+ form.birthdate = birthday
|
|
|
+ },
|
|
|
+ getBirth(idCard) {
|
|
|
+ let birthday = "";
|
|
|
+ if(idCard != null && idCard != ""){
|
|
|
+ if(idCard.length == 15){
|
|
|
+ birthday = "19"+idCard.slice(6,12);
|
|
|
+ } else if(idCard.length == 18){
|
|
|
+ birthday = idCard.slice(6,14);
|
|
|
+ }
|
|
|
+ birthday = birthday.replace(/(.{4})(.{2})/,"$1-$2-");
|
|
|
+ //通过正则表达式来指定输出格式为:1990-01-01
|
|
|
+ }
|
|
|
+ return birthday;
|
|
|
+ },
|
|
|
+ getSex(idCard) {
|
|
|
+ let sex = null;
|
|
|
+ if (parseInt(idCard.slice(-2, -1)) % 2 == 1) {
|
|
|
+ sex = 1;
|
|
|
+ } else {
|
|
|
+ sex = 0;
|
|
|
+ }
|
|
|
+ return sex;
|
|
|
+ },
|
|
|
+ onConfirm(value) {
|
|
|
+ this.form.birthdate = dayjs(value).format('YYYY-MM-DD')
|
|
|
+ this.birthdateShow = false
|
|
|
+ },
|
|
|
+ onChangeDate() {
|
|
|
+ this.birthdateShow = true
|
|
|
+ if(this.form.birthdate) {
|
|
|
+ this.currentDate = new Date(dayjs(this.form.birthdate))
|
|
|
+ }
|
|
|
+ },
|
|
|
async getFile(file) {
|
|
|
setLoading(true)
|
|
|
try {
|
|
|
@@ -268,14 +321,20 @@ export default {
|
|
|
} catch(err) {
|
|
|
//
|
|
|
}
|
|
|
- // this.$router.push({
|
|
|
- // path: '/signUpLevel'
|
|
|
- // })
|
|
|
},
|
|
|
onCheckFields() { // 校验字段
|
|
|
let form = this.form
|
|
|
- if(!form.idCardNo || !form.realName || !form.birthdate || !form.nation) {
|
|
|
- this.$toast('请上传身份证正面进行扫描')
|
|
|
+ if(!validateCardNo(form.idCardNo)) {
|
|
|
+ this.$toast("输入身份证号有误")
|
|
|
+ return false
|
|
|
+ } else if(!form.realName) {
|
|
|
+ this.$toast("请输入姓名")
|
|
|
+ return false
|
|
|
+ } else if(!form.birthdate) {
|
|
|
+ this.$toast("请选择生日")
|
|
|
+ return false
|
|
|
+ } else if(!form.nation) {
|
|
|
+ this.$toast("请输入民族")
|
|
|
return false
|
|
|
} else if(!form.certificatePhoto) {
|
|
|
this.$toast('请上传证件照片')
|
|
|
@@ -283,68 +342,6 @@ export default {
|
|
|
}
|
|
|
return true
|
|
|
},
|
|
|
- // beforeRead2(file) {
|
|
|
- // const isLt2M = file.size / 1024 / 1024 < 4
|
|
|
- // if (!isLt2M) {
|
|
|
- // this.$toast('上传证书大小不能超过 4MB')
|
|
|
- // return false
|
|
|
- // }
|
|
|
- // return true
|
|
|
- // },
|
|
|
- beforeRead(file) {
|
|
|
- const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
- if (!isLt2M) {
|
|
|
- this.$toast('上传图片大小不能超过 2MB')
|
|
|
- return false
|
|
|
- }
|
|
|
- return true
|
|
|
- },
|
|
|
- beforeDelete() {
|
|
|
- this.form.certificatePhoto = '' // 上传图片地址为空
|
|
|
- return true
|
|
|
- },
|
|
|
- async afterRead(file) { // 上传头像
|
|
|
- // setLoading(true)
|
|
|
- try {
|
|
|
- file.status = 'uploading'
|
|
|
- file.message = '上传中...'
|
|
|
- let formData = new FormData()
|
|
|
- formData.append('file', file.file)
|
|
|
- let res = await uploadFile(formData)
|
|
|
- let result = res.data
|
|
|
- // setLoading(false)
|
|
|
- if(result.code == 200) {
|
|
|
- file.status = 'done'
|
|
|
- this.form.certificatePhoto = result.data.url
|
|
|
- } else {
|
|
|
- file.status = 'failed'
|
|
|
- file.message = '上传失败'
|
|
|
- this.$toast(result.msg)
|
|
|
- return false
|
|
|
- }
|
|
|
- } catch (err) {
|
|
|
- return false
|
|
|
- }
|
|
|
- },
|
|
|
- // async afterReadOCR(file) { // 上传身份证照片识别
|
|
|
- // setLoading(true)
|
|
|
- // try {
|
|
|
- // let formData = new FormData()
|
|
|
- // formData.append('file', file.file)
|
|
|
- // formData.append('idCardSide', "front")
|
|
|
- // let res = await ocr(formData)
|
|
|
- // let result = res.data
|
|
|
- // setLoading(false)
|
|
|
- // if(result.code == 200) {
|
|
|
- // this.idCardParse(result.data)
|
|
|
- // } else {
|
|
|
- // this.$toast(result.msg)
|
|
|
- // return false
|
|
|
- // }
|
|
|
- // } catch (err) {
|
|
|
- // return false
|
|
|
- // }
|
|
|
- // },
|
|
|
idCardParse(data) {
|
|
|
// 身份证信息解析
|
|
|
let wordsResult = data.words_result
|
|
|
@@ -384,19 +381,19 @@ export default {
|
|
|
},
|
|
|
destroyed() {
|
|
|
this.$toast.clear()
|
|
|
- this.$dialog.close()
|
|
|
+ this.$dialog.close()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@import url("../../assets/commonLess/variable");
|
|
|
.cropper {
|
|
|
- width: 60px;
|
|
|
+ width: 30px;
|
|
|
/* 切记position: relative一定要有 */
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
text-align: center;
|
|
|
- span {
|
|
|
+ span, .icon-scan {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -404,6 +401,15 @@ export default {
|
|
|
top: 0;
|
|
|
color: @--main-color;
|
|
|
}
|
|
|
+ .icon-scan {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.24rem;
|
|
|
+ height: .22rem;
|
|
|
+ background: url('../../assets/images/level/scan_icon.png') no-repeat center;
|
|
|
+ background-size: contain;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
.upbtn {
|
|
|
height: 24px;
|
|
|
}
|
|
|
@@ -533,7 +539,7 @@ export default {
|
|
|
/deep/.van-radio__icon--disabled .van-icon {
|
|
|
background-color: #F5F5F5;
|
|
|
}
|
|
|
-/deep/.van-radio__icon--disabled.van-radio__icon--checked .van-icon {
|
|
|
+/deep/.van-radio__icon--disabled.van-radio__icon--checked .van-icon, /deep/.van-radio__icon--checked .van-icon {
|
|
|
background-color: @--main-color;
|
|
|
border-color: @--main-color;
|
|
|
color: #ffffff;
|
