|
|
|
<template>
|
|
|
|
<LayoutApp class="yohoufo-auth-page">
|
|
|
|
<div class="auth-content">
|
|
|
|
<div class="auth-title">实名认证</div>
|
|
|
|
<p class="auth-sub-title">信息仅用于身份验证，不对外展示，有货UFO平台将严保您的信息安全，请认证填写如下信息，确保上传的图片文字清晰可见。</p>
|
|
|
|
<div class="auth-form">
|
|
|
|
<p class="form-title">姓名</p>
|
|
|
|
<div class="form-input-block">
|
|
|
|
<CubeInput class="auth-input" v-model="name" :disabled="!!certName" placeholder="请输入真实姓名"></CubeInput>
|
|
|
|
</div>
|
|
|
|
<p class="form-title">身份证号</p>
|
|
|
|
<div class="form-input-block">
|
|
|
|
<CubeInput class="auth-input" v-model="idCode" :disabled="!!certIdCode" placeholder="请输入身份证号"></CubeInput>
|
|
|
|
</div>
|
|
|
|
<p class="form-title">上传身份证正面照片 <a :href="exampleLink" class="upload-intro">示例照片</a></p>
|
|
|
|
<div class="form-input-block">
|
|
|
|
<div class="upload-btn" @click="uploadFrontCard">
|
|
|
|
<div v-if="idCardFrontUrl" class="delete-img" @click.stop="clearInfo(['idCardFront', 'idCardFrontUrl'])">ㄨ</div>
|
|
|
|
<div v-if="idCardFrontUrl" class="up-img-block">
|
|
|
|
<img :src="idCardFrontUrl">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example-view">
|
|
|
|
<img src="//img12.static.yhbimg.com/goodsimg/2019/09/25/16/022553bde9fc6bafa0df244de694c551f2.png?imageView/1/w/160/h/100" alt="身份证正面（示例）">
|
|
|
|
<p>（示例）</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p class="form-title">上传身份证反面照片</p>
|
|
|
|
<div class="form-input-block">
|
|
|
|
<div class="upload-btn" @click="uploadBackCard">
|
|
|
|
<div v-if="idCardBackUrl" class="delete-img" @click.stop="clearInfo(['idCardBack', 'idCardBackUrl'])">ㄨ</div>
|
|
|
|
<div v-if="idCardBackUrl" class="up-img-block">
|
|
|
|
<img :src="idCardBackUrl">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="example-view">
|
|
|
|
<img src="//img11.static.yhbimg.com/goodsimg/2019/09/25/16/011df7d2637953bd6ce2c59500011d7fd7.png?imageView/1/w/160/h/100" alt="身份证反面（示例）">
|
|
|
|
<p>（示例）</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="hide-upload-wrap">
|
|
|
|
<CubeUpload
|
|
|
|
ref="upload"
|
|
|
|
action="/xianyu/upload/idcard"
|
|
|
|
:simultaneous-uploads="1"
|
|
|
|
@files-added="addedHandler"
|
|
|
|
@file-success="successHandler"
|
|
|
|
@file-error="errorHandler"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="auth-footer">
|
|
|
|
<CubeButton class="submit-btn" :disabled="canSubmit" @click="submitCert">确认提交</CubeButton>
|
|
|
|
</div>
|
|
|
|
</LayoutApp>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { get } from 'lodash';
|
|
|
|
import { Input, Button, Upload } from 'cube-ui';
|
|
|
|
import { mapActions, mapState } from 'vuex';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'auth',
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
name: '',
|
|
|
|
idCode: '',
|
|
|
|
idCardFront: '',
|
|
|
|
idCardBack: '',
|
|
|
|
idCardFrontUrl: '',
|
|
|
|
idCardBackUrl: '',
|
|
|
|
exampleLink: '//activity.yoho.cn/feature/4899.html?share_id=7593&title=UFO-身份证示例'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['yoho']),
|
|
|
|
certName() {
|
|
|
|
let name = get(this.yoho, 'user.sellerInfo.certName');
|
|
|
|
|
|
|
|
name && (this.name = name);
|
|
|
|
return name;
|
|
|
|
},
|
|
|
|
certIdCode() {
|
|
|
|
let code = get(this.yoho, 'user.sellerInfo.certNo');
|
|
|
|
|
|
|
|
code && (this.idCode = code);
|
|
|
|
return code;
|
|
|
|
},
|
|
|
|
canSubmit() {
|
|
|
|
return !(this.name && this.idCode && this.idCardFront && this.idCardBack);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions(['userRealCertification']),
|
|
|
|
clearInfo(arr) {
|
|
|
|
if (arr && arr.length) {
|
|
|
|
arr.forEach(val => {
|
|
|
|
this[val] && (this[val] = '');
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
chooseUploadFile() {
|
|
|
|
this.$refs.upload && this.$refs.upload.$el.querySelector('.cube-upload-input').click();
|
|
|
|
},
|
|
|
|
uploadFrontCard() {
|
|
|
|
if (!this.uploading && !this.idCardFront) {
|
|
|
|
this.uploadCallback = (path, img) => {
|
|
|
|
this.idCardFront = path;
|
|
|
|
this.idCardFrontUrl = img;
|
|
|
|
};
|
|
|
|
this.chooseUploadFile();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
uploadBackCard() {
|
|
|
|
if (!this.uploading && !this.idCardBack) {
|
|
|
|
this.uploadCallback = (path, img) => {
|
|
|
|
this.idCardBack = path;
|
|
|
|
this.idCardBackUrl = img;
|
|
|
|
};
|
|
|
|
this.chooseUploadFile();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
addedHandler() {
|
|
|
|
this.uploading = true;
|
|
|
|
},
|
|
|
|
successHandler(file) {
|
|
|
|
if (get(file, 'response.code') === 200 && this.uploadCallback) {
|
|
|
|
this.uploadCallback(get(file, 'response.data.imagesList[0]'), file.url);
|
|
|
|
}
|
|
|
|
|
|
|
|
this.uploading = false;
|
|
|
|
setTimeout(() => {
|
|
|
|
this.$refs.upload.removeFile(file);
|
|
|
|
}, 1000);
|
|
|
|
},
|
|
|
|
errorHandler() {
|
|
|
|
this.uploading = false;
|
|
|
|
},
|
|
|
|
submitCert() {
|
|
|
|
this.userRealCertification({
|
|
|
|
certName: this.name,
|
|
|
|
certNo: this.idCode,
|
|
|
|
frontImageUrl: this.idCardFront,
|
|
|
|
backImageUrl: this.idCardBack
|
|
|
|
}).then(res => {
|
|
|
|
if (res.code === 200) {
|
|
|
|
if (this.$route.query.refer) {
|
|
|
|
this.$router.push({
|
|
|
|
name: this.$route.query.refer
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.$router.go(-1);
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.$createToast && this.$createToast({
|
|
|
|
txt: res.message || '认证失败',
|
|
|
|
type: 'txt',
|
|
|
|
time: 1000
|
|
|
|
}).show();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
CubeInput: Input,
|
|
|
|
CubeButton: Button,
|
|
|
|
CubeUpload: Upload
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.auth-content {
|
|
|
|
height: calc(100% - 200px);
|
|
|
|
padding: 0 40px;
|
|
|
|
overflow-y: scroll;
|
|
|
|
|
|
|
|
.auth-title {
|
|
|
|
font-size: 68px;
|
|
|
|
line-height: 96px;
|
|
|
|
font-weight: 900;
|
|
|
|
}
|
|
|
|
|
|
|
|
.auth-sub-title {
|
|
|
|
font-size: 24px;
|
|
|
|
color: #999;
|
|
|
|
line-height: 1.5;
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.auth-form {
|
|
|
|
margin-top: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-title {
|
|
|
|
font-size: 36px;
|
|
|
|
padding-top: 40px;
|
|
|
|
line-height: 1.6;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-input-block {
|
|
|
|
padding-bottom: 16px;
|
|
|
|
border-bottom: 1px solid #f6f6f6;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.auth-input {
|
|
|
|
&:after {
|
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
/deep/ .cube-input-field {
|
|
|
|
font-size: 14px;
|
|
|
|
height: 40px;
|
|
|
|
border: none;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.upload-intro {
|
|
|
|
font-size: 28px;
|
|
|
|
line-height: 58px;
|
|
|
|
color: #999;
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
|
|
|
|
.upload-btn {
|
|
|
|
width: 220px;
|
|
|
|
height: 140px;
|
|
|
|
background-color: #eee;
|
|
|
|
margin: 30px 0 14px;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: "";
|
|
|
|
width: 40px;
|
|
|
|
height: 4px;
|
|
|
|
background-color: #999;
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
margin-top: -2px;
|
|
|
|
margin-left: -20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:after {
|
|
|
|
content: "";
|
|
|
|
width: 4px;
|
|
|
|
height: 40px;
|
|
|
|
background-color: #999;
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 50%;
|
|
|
|
margin-top: -20px;
|
|
|
|
margin-left: -2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.delete-img {
|
|
|
|
width: 40px;
|
|
|
|
height: 40px;
|
|
|
|
line-height: 40px;
|
|
|
|
border-radius: 20px;
|
|
|
|
background-color: #676767;
|
|
|
|
color: #fff;
|
|
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
|
|
top: -20px;
|
|
|
|
right: -20px;
|
|
|
|
z-index: 2;
|
|
|
|
}
|
|
|
|
|
|
|
|
.up-img-block {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
z-index: 1;
|
|
|
|
background-color: #fff;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
> img {
|
|
|
|
display: block;
|
|
|
|
max-width: 100%;
|
|
|
|
max-height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.example-view {
|
|
|
|
width: 160px;
|
|
|
|
font-size: 20px;
|
|
|
|
color: #999;
|
|
|
|
text-align: center;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 16px;
|
|
|
|
|
|
|
|
> img {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
> p {
|
|
|
|
font-weight: 300;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.hide-upload-wrap {
|
|
|
|
height: 0;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.auth-footer {
|
|
|
|
padding: 40px;
|
|
|
|
|
|
|
|
.submit-btn {
|
|
|
|
height: 120px;
|
|
|
|
background: #022c46;
|
|
|
|
|
|
|
|
&.cube-btn_disabled {
|
|
|
|
background: #ccc;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
