<!--
|
* @Author: 小明丶
|
* @Date: 2020-05-23 11:05:09
|
* @LastEditors: zxq
|
* @LastEditTime: 2022-07-08 14:54:57
|
* @Description: 上传身份证
|
-->
|
<template>
|
<div class="upload-IDcard-page">
|
<v-navbar title="订单申请"></v-navbar>
|
<div class="steps-box">
|
<div></div>
|
<div class="steps">
|
<p></p>
|
<div class="step-1">1</div>
|
<div class="step-2">2</div>
|
<div class="step-3">3</div>
|
</div>
|
</div>
|
<div class="tit-box">
|
<p>身份证照片上传</p>
|
<p>请确保照片清晰可见，以便顺利申请</p>
|
</div>
|
<div class="idcard-box">
|
<upLoadIdCard :cardBack="idCardMation.idBackUrl" :cardFont="idCardMation.idFrontUrl"></upLoadIdCard>
|
</div>
|
<div class="id-mation-box">
|
<div class="tit">
|
<p>请核对身份证信息</p>
|
</div>
|
<div class="mation">
|
<h-cell v-model="idCardMation.usrIdName" isMust label="姓名"></h-cell>
|
<h-cell v-model="idCardMation.usrIdCard" isMust readonly label="身份证号"></h-cell>
|
<h-cell v-model="idCardMation.sex" readonly isMust label="性别"></h-cell>
|
<h-cell v-model="idCardMation.idCardAddr" isMust label="身份证地址"></h-cell>
|
<h-cell v-model="idDate" readonly isLink isMust label="有效期" @click.native="isShoTime = true"></h-cell>
|
</div>
|
</div>
|
<div class="btn-box">
|
<button @click="goNext">下一步</button>
|
</div>
|
<van-popup v-model="isShoTime" position="bottom">
|
<div class="text-center-g flex-around-g time-label">
|
<p
|
class="flex-1-g"
|
:class="[timeIndex===0 ? 'active':'']"
|
@click="setTimeIndex(0)"
|
>开始：{{startDay}}</p>
|
<p
|
class="flex-1-g"
|
:class="[timeIndex===1 ? 'active':'']"
|
@click="setTimeIndex(1)"
|
>结束：{{endDay}}</p>
|
</div>
|
<van-datetime-picker
|
ref="timepicker"
|
item-height='45'
|
visible-item-count='4'
|
:show-toolbar="false"
|
v-model="currentDate"
|
@change="setTime"
|
:min-date="minDate"
|
:max-date="maxDate"
|
type="date"
|
/>
|
<van-button class="btn-time" @click="refreshData">确定</van-button>
|
</van-popup>
|
</div>
|
</template>
|
<script>
|
import Bus from "../../bus";
|
import Vue from "vue";
|
import { DatetimePicker } from "vant";
|
import { Popup } from "vant";
|
|
Vue.use(Popup);
|
Vue.use(DatetimePicker);
|
export default {
|
data() {
|
return {
|
readOnlyName: false,
|
readOnlyId: false,
|
readOnlySex: false,
|
minDate: new Date(1990, 0, 1),
|
maxDate: new Date(2030, 11, 31),
|
startDay: "", // 开始时间
|
endDay: "", //结束时间
|
timeIndex: 0,
|
isShoTime: false,
|
timePicker: null,
|
currentDate: new Date(1990, 0, 1),
|
idCardMation: {}, //身份证相关信息
|
//idCardUserInfo:{},//身份证照片信息
|
};
|
},
|
computed: {
|
idDate() {
|
if (
|
this.idCardMation.idCardValidBegin &&
|
this.idCardMation.idCardValidEnd
|
) {
|
return (
|
this.idCardMation.idCardValidBegin +
|
"-" +
|
this.idCardMation.idCardValidEnd
|
);
|
}
|
},
|
// cardBack() {
|
// return this.idCardMation.idBackUrl;
|
// },
|
// cardFont() {
|
// return this.idCardMation.idFrontUrl;
|
// }
|
},
|
created() {
|
this.$api.createInitIdInfo().then(res => {
|
this.idCardMation = res.body;
|
if (this.idCardMation.usrIdName) {
|
this.readOnlyName = true;
|
}
|
if (this.idCardMation.usrIdCard) {
|
this.readOnlyId = true;
|
}
|
if (this.idCardMation.sex) {
|
this.readOnlySex = true;
|
}
|
});
|
},
|
beforeUpdate(){
|
let _this = this
|
Bus.$on('getIdUserInfo',(msg)=>{
|
_this.idCardMation = msg
|
})
|
},
|
methods: {
|
//设置时间
|
setTime(picker, arr) {
|
if (!this.timepicker && picker) {
|
this.timePicker = picker;
|
}
|
let v = arr ? arr : picker.getValues(),
|
time = v[0] + "." + v[1] + "." + v[2];
|
if (this.timeIndex === 0) {
|
this.startDay = time;
|
} else {
|
this.endDay = time;
|
}
|
},
|
setTimeIndex(index) {
|
this.timeIndex = index;
|
this.setPickerValue();
|
},
|
// 设置日期的值
|
setPickerValue() {
|
if (this.timePicker) {
|
let timeArr = [];
|
if (this.timeIndex === 0) {
|
timeArr = this.startDay;
|
} else {
|
timeArr = this.endDay;
|
}
|
this.currentDate = new Date(timeArr);
|
}
|
},
|
// 时间切换刷新统计数据
|
refreshData() {
|
if (this.timePicker) {
|
let arr = this.timePicker.getValues();
|
this.setTime(null, arr);
|
this.idCardMation.idCardValidBegin = this.startDay;
|
this.idCardMation.idCardValidEnd = this.endDay;
|
}
|
this.isShoTime = false;
|
},
|
// 下一步
|
goNext() {
|
let v = this.$tool;
|
if(v.checkValEmpty(this.idCardMation.idFrontUrl)){
|
v.toast('请上传身份证正面')
|
return
|
}
|
if(v.checkValEmpty(this.idCardMation.idBackUrl)){
|
v.toast('请上传身份证反面')
|
return
|
}
|
if(v.checkValEmpty(this.idCardMation.idCardAddr)){
|
v.toast('请输入身份证详细地址')
|
return
|
}
|
// if(!v.checkValEmpty(this.idCardMation.idCardAddr)){
|
// v.toast('请输入正确的身份证详细地址')
|
// return
|
// }
|
this.$api.saveIdInfo({...this.idCardMation,}).then(res => {
|
let str = location.host
|
//保存成功后获取人脸识别地址
|
// this.$api.getFaceUrl({
|
// callbackUrl:`https://${str}/aic_cus/#/order-handling/face-recognition`
|
// }).then(res=>{
|
// window.location.href = res.body.faceUrl
|
// })
|
this.$router.push({
|
path: "/order-handling/face-recognition",
|
query: {isFaceBack:'1'}
|
});
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.upload-IDcard-page {
|
& {
|
min-height: 100vh;
|
}
|
.steps-box {
|
& {
|
display: flex;
|
}
|
div {
|
width: 50%;
|
}
|
.steps {
|
height: 65px;
|
position: relative;
|
p {
|
border-bottom: 1px dashed #b3b3b3;
|
height: 32px;
|
}
|
.step-1 {
|
text-align: center;
|
line-height: 30px;
|
color: #fff;
|
width: 30px;
|
height: 30px;
|
background: rgba(81, 148, 254, 1);
|
box-shadow: 0px 0px 8px 0px rgba(81, 148, 254, 0.64);
|
border-radius: 50%;
|
position: absolute;
|
left: -15px;
|
top: 19px;
|
}
|
.step-2 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 55px;
|
top: 19px;
|
}
|
.step-3 {
|
text-align: center;
|
line-height: 28px;
|
width: 28px;
|
height: 28px;
|
background: rgba(255, 255, 255, 1);
|
border: 1px solid rgba(113, 123, 133, 1);
|
border-radius: 50%;
|
position: absolute;
|
left: 130px;
|
top: 19px;
|
}
|
}
|
}
|
.tit-box {
|
& {
|
width: 343px;
|
height: 75px;
|
background: rgba(255, 255, 255, 1);
|
box-shadow: 0px 0px 10px 0px rgba(47, 103, 192, 0.1);
|
border-radius: 5px;
|
margin: auto;
|
box-sizing: border-box;
|
padding: 16px 17px;
|
}
|
p:nth-of-type(1) {
|
margin-bottom: 10px;
|
font-size: 16px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
p:nth-of-type(2) {
|
font-size: 12px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(153, 153, 153, 1);
|
}
|
}
|
.idcard-box {
|
& {
|
margin-top: 29px;
|
}
|
}
|
.id-mation-box {
|
& {
|
box-sizing: border-box;
|
padding-left: 17px;
|
margin-top: 27px;
|
}
|
.tit {
|
font-size: 14px;
|
font-family: PingFang SC;
|
font-weight: 500;
|
color: rgba(51, 51, 51, 1);
|
}
|
.mation {
|
box-sizing: border-box;
|
padding: 0 26px;
|
}
|
}
|
.btn-box {
|
text-align: center;
|
margin-top: 32px;
|
padding-bottom: 37px;
|
button {
|
width: 320px;
|
height: 44px;
|
background: rgba(81, 148, 254, 1);
|
border-radius: 22px;
|
color: #fff;
|
border: 0;
|
outline: none;
|
}
|
}
|
.time-label {
|
.lh(65px);
|
color: @c-text-999;
|
|
.active {
|
color: @c-text-default;
|
}
|
}
|
.btn-time {
|
display: block;
|
text-align: center;
|
line-height: 40px;
|
width: 320px;
|
height: 40px;
|
background-color: @c-bg-default;
|
color: @c-text-fff;
|
border-radius: 22px;
|
margin: 15px auto;
|
}
|
}
|
</style>
|
