You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
flyapps/fir_client/src/components/user/FirUserProfileCertification...

477 lines
15 KiB

<template>
<div v-if="(certification || certification === 0) && !cert_edit_flag">
<el-form style="max-width: 400px">
<el-form-item>
<el-row>
<el-col :span="24">
<el-link v-if="certification.status === 1" :underline="false" style="font-size: x-large"
type="success">已经认证
</el-link>
<el-link v-else-if="certification.status === 0" :underline="false" style="font-size: x-large"
type="primary">审核中
</el-link>
<el-link v-else-if="certification.status === 2" :underline="false" style="font-size: x-large"
type="danger"
>审核失败
</el-link>
<el-link v-else :underline="false" style="font-size: x-large" type="info">待认证</el-link>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="真实姓名">
<el-row :gutter="36">
<el-col :span="18">
<el-link :underline="false">{{ certification.name }}</el-link>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="身份证号">
<el-row :gutter="36">
<el-col :span="18">
<el-link :underline="false">{{ certification.card }}</el-link>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="certification.mobile" label="手机号码">
<el-row :gutter="36">
<el-col :span="18">
<el-link :underline="false">{{ certification.mobile }}</el-link>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="联系地址">
<el-row :gutter="36">
<el-col :span="18">
<el-link :underline="false">{{ certification.addr }}</el-link>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="certification.status === 2" label="审核信息" style="width: 700px">
<el-row :gutter="36">
<el-col :span="18">
<el-link :underline="false" type="danger">{{ certification.msg }}</el-link>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="certification.status === 2">
<el-row>
<el-col :span="24">
<el-button type="primary" @click="recommit">重新提交审核</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="certification_status === -1">
<el-row>
<el-col :span="24">
<el-button type="primary" @click="goauth">开始认证</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
<div v-else>
<el-form ref="form" :model="form">
<el-form-item label="真实姓名">
<el-row :gutter="36">
<el-col :span="18">
<el-input v-model="form.name" :autofocus="true" clearable
placeholder="请输入真实姓名" prefix-icon="el-icon-user"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="身份证号">
<el-row :gutter="36">
<el-col :span="18">
<el-input v-model="form.card" clearable placeholder="请输入身份证号"
prefix-icon="el-icon-s-order"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="居住地址">
<el-row :gutter="36">
<el-col :span="18">
<el-input v-model="form.addr" clearable placeholder="请输入现居住地址"
prefix-icon="el-icon-house"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="captcha.change_type.sms" label="手机号码">
<el-row :gutter="36">
<el-col :span="18">
<el-input ref="phone" v-model="form.mobile" clearable
maxlength="11" placeholder="请输入手机号码" prefix-icon="el-icon-mobile"/>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="captcha.captcha_image" label="图片验证码">
<el-row :gutter="11">
<el-col :span="12">
<el-input v-model="form.authcode" clearable maxlength="6" placeholder="请输入图片验证码"/>
</el-col>
<el-col :span="6">
<el-image
:src="captcha.captcha_image"
fit="contain"
style="border-radius:4px;cursor:pointer;height: 40px" @click="get_auth_code">
</el-image>
</el-col>
</el-row>
</el-form-item>
<el-form-item v-if="captcha.change_type.sms" label="手机验证码">
<el-row :gutter="11">
<el-col :span="12">
<el-input v-model="form.auth_key" clearable maxlength="6"
placeholder="请输入您收到的验证码" prefix-icon="el-icon-mobile"/>
</el-col>
<el-col :span="6">
<el-button plain
style="border-radius:4px;cursor:pointer;height: 40px;background-color: #ecf5ff;color: #dd6161"
type="info"
@click="getsmsemailcode('sms',form.mobile)">
获取验证码
</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row style="margin-left: 88px">
<el-col :span="13">
<div id="captcha" ref="captcha"></div>
</el-col>
</el-row>
</el-form-item>
<el-form-item label="身份证号">
<el-row :gutter="36" style="height: 40px">
<el-col :span="19">
<div class="appdownload">
<el-upload
:before-upload="upload_one"
accept=".png , .jpg , .jpeg"
action="#"
drag>
<el-tooltip v-if="user_certification.one" placement="top">
<div slot="content">上传身份证<i style="color: #2abb9d!important;">国徽面</i>照片</div>
<img :src="user_certification.one"
alt="国徽面照片" class="avatar">
</el-tooltip>
<i v-else class="avatar-uploader-icon" style="text-align: center">
上传身份证<i style="color: #2abb9d!important;">国徽面</i>照片
</i>
</el-upload>
</div>
<div class="appdownload">
<el-upload
:before-upload="upload_two"
accept=".png , .jpg , .jpeg"
action="#"
drag>
<el-tooltip v-if="user_certification.two" placement="top">
<div slot="content">上传身份证<i style="color: #2abb9d!important;">人像面</i>照片</div>
<img :src="user_certification.two"
alt="人像面照片" class="avatar">
</el-tooltip>
<i v-else class="avatar-uploader-icon" style="text-align: center">
上传身份证<i style="color: #2abb9d!important;">人像面</i>照片
</i>
</el-upload>
</div>
<div class="appdownload">
<el-upload
:before-upload="upload_three"
accept=".png , .jpg , .jpeg"
action="#"
drag>
<el-tooltip v-if="user_certification.three" placement="top">
<div slot="content">上传<i style="color: #2abb9d!important;">手持身份证</i>照片</div>
<img :src="user_certification.three"
alt="手持身份证照片" class="avatar">
</el-tooltip>
<i v-else class="avatar-uploader-icon" style="text-align: center">
上传<i style="color: #2abb9d!important;">手持身份证</i>照片
</i>
</el-upload>
</div>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="24" style="margin-top: 20px">
<el-button type="primary" @click="commit">提交</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {changeInfoFun, getAuthcTokenFun, user_certification} from "@/restful";
import {AvatarUploadUtils, checkphone, geetest, getUserInfoFun} from "@/utils";
export default {
name: "FirUserProfileCertification",
data() {
return {
form: {},
captcha: {
captcha_image: '',
captcha_key: '',
authcode: '',
length: 8,
change_type: {email: false, sms: false}
},
user_certification: {'one': '', 'two': '', 'three': ''},
certification: {},
certification_status: 0,
cert_edit_flag: false
}
}, methods: {
goauth() {
this.cert_edit_flag = true;
this.get_user_certification({methods: 'GET', data: {act: 'certpiccertinfo'}});
this.get_auth_code();
},
recommit() {
this.cert_edit_flag = true;
this.get_user_certification({methods: 'GET', data: {act: 'certpiccertinfo'}});
this.get_auth_code();
},
commit() {
for (let v of Object.keys(this.form)) {
if (this.form[v].length < 2) {
this.$message.error("填写错误,请检查");
return false
}
}
let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (reg.test(this.form.card) === false) {
this.$message.error("身份证输入不合法");
return false;
}
if (this.captcha.change_type.sms) {
let checkp = checkphone(this.form.mobile);
if (!checkp) {
this.$message.error("手机号输入不合法");
return false;
}
}
delete this.form['email'];
this.get_user_certification({methods: 'POST', data: this.form})
},
get_user_certification(params) {
user_certification(res => {
if (res.code === 1000) {
if (params.methods === 'POST') {
this.$message.success("信息提交成功,正在审核中");
this.cert_edit_flag = false;
this.certification_status = 0;
getUserInfoFun(this);
this.get_user_certification({methods: 'GET', data: {act: 'usercert'}});
}
if (res.data.usercert) {
this.certification = res.data.usercert;
} else {
const ft = ['one', 'two', 'three'];
if (res.data.certification && res.data.certification.length > 0) {
for (let v of res.data.certification) {
this.user_certification[ft[v.type - 1]] = v.certification_url;
}
}
if (res.data.user_certification) {
this.form = res.data.user_certification;
}
}
} else {
this.$message.error(res.msg)
}
}, params)
},
getsmsemailcode(act, target) {
let picode = {
"authcode": this.form.authcode,
"captcha_key": this.captcha.captcha_key,
};
if (this.captcha.captcha_image) {
if (!this.form.authcode) {
this.$message.error("图片验证码输入有误");
return;
}
let captcha_flag = this.form.authcode.length === this.captcha.length;
if (this.captcha.captcha_key === '' || !this.captcha.captcha_key) {
captcha_flag = true
}
if (!captcha_flag) {
this.$message.error("图片验证码输入有误");
return
}
}
let checkp = checkphone(this.form.mobile);
if (!checkp) {
this.$message.error("手机号输入有误");
return
}
let params = {'act': act, 'target': target, 'ext': picode, 'user_id': target, 'ftype': 'certification'};
if (this.captcha.geetest) {
geetest(this, this.form.mobile, params, (n_params) => {
this.get_phone_code(n_params);
})
} else {
this.get_phone_code(params)
}
},
get_phone_code(params) {
getAuthcTokenFun(data => {
if (data.code === 1000) {
let msg = '您正在进行身份认证,验证码已经发送您手机';
this.$notify({
title: '验证码',
message: msg,
type: 'success'
});
this.form.auth_token = data.data.auth_token;
} else {
this.$message.error(data.msg)
}
}, {"methods": 'POST', 'data': params})
},
get_auth_code() {
if (this.form.authcode) {
this.form.authcode = '';
}
changeInfoFun(data => {
if (data.code === 1000) {
this.captcha = data.data;
if (this.captcha.captcha_key) {
this.form.captcha_key = this.captcha.captcha_key;
}
} else {
this.$message({
message: data.msg,
type: 'error'
});
}
}, {
"methods": "GET",
"data": {}
});
},
upload_one(file) {
return this.beforeAvatarUpload(file, 1)
},
upload_two(file) {
return this.beforeAvatarUpload(file, 2)
},
upload_three(file) {
return this.beforeAvatarUpload(file, 3)
},
beforeAvatarUpload(file, ptype) {
return AvatarUploadUtils(this, file, {
'app_id': this.$store.state.userinfo.uid,
'upload_key': file.name,
'ftype': 'certification',
'ext': {'ptype': ptype}
// eslint-disable-next-line no-unused-vars
}, res => {
this.get_user_certification({methods: 'GET', data: {act: 'certpic'}});
});
},
init() {
if (this.$store.state.userinfo.certification || this.$store.state.userinfo.certification === 0) {
this.certification_status = this.$store.state.userinfo.certification;
if (this.certification_status !== -1) {
this.get_user_certification({methods: 'GET', data: {act: 'usercert'}});
}
}
},
}, mounted() {
this.$store.dispatch('douserInfoIndex', 2);
this.init();
}, watch: {
'$store.state.userinfo': function () {
this.init();
}
}
}
</script>
<style scoped>
.el-form {
max-width: 800px;
margin: 0 auto;
}
.el-form-item .el-button {
max-width: 260px;
width: 100%;
height: 50px;
}
.appdownload /deep/ .el-upload-dragger {
background: #f1f1f1;
width: 200px;
height: 166px;
}
.appdownload /deep/ .el-icon-upload {
margin-top: 45%;
}
.appdownload {
float: left;
width: 200px;
height: 166px;
background-color: #c2dcf1;
}
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
}
.avatar-uploader-icon {
color: #8c939d;
width: 158px;
height: 158px;
line-height: 158px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>