263 lines
11 KiB
Vue
263 lines
11 KiB
Vue
<template>
|
||
<div>
|
||
<h2>实名认证</h2>
|
||
<el-divider></el-divider>
|
||
<span style="color: #1482f0">！实名认证决定了账号属性。实名认证一经通过，后续付款方的银行开户名必须与聚合实名信息一致，否则不给予入账！且个人和企业认证不能互转。</span><br><br>
|
||
<h4>选择认证类型：</h4>
|
||
<center>
|
||
<!--个人认证-->
|
||
<div style="width: 70%;">
|
||
<el-row style="border: 2px solid #e0e0e0;">
|
||
<el-col :span="4"><div class="grid-content bg-purple"><center><h2>个人认证</h2></center></div></el-col>
|
||
<el-col :span="12"><div class="grid-content bg-purple-light">
|
||
<el-row>
|
||
<el-col :span="24"><div class="grid-content bg-purple-dark">
|
||
<span style="color: #1482f0">认证方式</span> 支持个人身份证认证、人脸识别实时认证
|
||
</div></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24"><div class="grid-content bg-purple-dark">
|
||
<span style="color: #1482f0">使用限制</span> 个人基础认证不支持部分「企业专用」类接口
|
||
</div></el-col>
|
||
</el-row>
|
||
</div></el-col>
|
||
<el-col :span="4" style="margin-top: 20px;"><div class="grid-content bg-purple">
|
||
<center> <el-button type="primary" @click="tocompanyauthentication(1)">立即认证</el-button></center>
|
||
</div></el-col>
|
||
</el-row>
|
||
</div><br><br><br>
|
||
<!--企业认证-->
|
||
<div style="width: 70%;">
|
||
<el-row style="border: 2px solid #e0e0e0;">
|
||
<el-col :span="4"><div class="grid-content bg-purple"><center><h2>企业认证</h2></center></div></el-col>
|
||
<el-col :span="12"><div class="grid-content bg-purple-light">
|
||
<el-row>
|
||
<el-col :span="24"><div class="grid-content bg-purple-dark">
|
||
<span style="color: #1482f0">适用群体</span> 企业、党政及国家机关、事业单位、民办非企业单位、社会团体、个体工商户等
|
||
</div></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24"><div class="grid-content bg-purple-dark">
|
||
<span style="color: #1482f0">基础认证</span> 上传企业营业执照快速认证，支持程序代码方式（api）调用接口
|
||
</div></el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="24"><div class="grid-content bg-purple-dark">
|
||
<span style="color: #1482f0">高级认证</span> 通过对公打款、法人手机验证等方式进行认证，支持API购买（余额支付、支付宝支付、微信支付）
|
||
</div></el-col>
|
||
</el-row>
|
||
</div></el-col>
|
||
<el-col :span="4" style="margin-top: 20px;"><div class="grid-content bg-purple">
|
||
<center> <el-button type="primary" @click="tocompanyauthentication(2)">立即认证</el-button></center>
|
||
</div></el-col>
|
||
</el-row>
|
||
</div>
|
||
</center>
|
||
|
||
<!--企业认证页面对话框-->
|
||
<el-dialog
|
||
:title="dialogtitle"
|
||
:visible.sync="dialogVisible"
|
||
width="50%"
|
||
:before-close="handleClose">
|
||
<!--个人认证-->
|
||
<div v-if="this.index==1">
|
||
<h2>基本信息填写</h2><br>
|
||
<el-form :model="personForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="实名认证附件上传：" prop="pass">
|
||
<el-upload
|
||
action="/dev-api/market/user/upload"
|
||
list-type="picture-card"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="handleRemove"
|
||
:on-success="handleSuccess1"
|
||
:limit="2">
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisiblepicture">
|
||
<img width="100%" :src="dialogImageUrl" alt="">
|
||
</el-dialog>
|
||
<span>请上传清晰完整的营业执照副本照片</span>
|
||
</el-form-item>
|
||
<el-form-item label="公司名称：" prop="companyName">
|
||
<el-input type="text" v-model="personForm.companyName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="真实姓名：" prop="USCI">
|
||
<el-input type="text" v-model="personForm.USCI" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="证件类型：" prop="companyLeader">
|
||
<span>居民身份证</span>
|
||
</el-form-item>
|
||
<el-form-item label="证件号码：" prop="registrantName">
|
||
<el-input type="text" v-model="personForm.registrantName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="手机号码：" prop="registrantPhone">
|
||
<el-input type="text" v-model="personForm.registrantPhone" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<center>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="personyes()">提交审核</el-button>
|
||
</center>
|
||
|
||
</div>
|
||
<!--企业认证-->
|
||
<div v-if="this.index==2">
|
||
<h2>基本信息填写</h2><br>
|
||
<el-form :model="companyForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="企业营业执照副本：" prop="pass">
|
||
<el-upload
|
||
action="/dev-api/market/company/upload"
|
||
list-type="picture-card"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="handleRemove"
|
||
:on-success="handleSuccess"
|
||
:limit="1">
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
<el-dialog :visible.sync="dialogVisiblepicture">
|
||
<img width="100%" :src="dialogImageUrl" alt="">
|
||
</el-dialog>
|
||
<span>请上传清晰完整的营业执照副本照片</span>
|
||
</el-form-item>
|
||
<el-form-item label="公司名称：" prop="companyName">
|
||
<el-input type="text" v-model="companyForm.companyName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="社会统一编码：" prop="USCI">
|
||
<el-input type="text" v-model="companyForm.usci" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="企业法人姓名：" prop="companyLeader">
|
||
<el-input type="text" v-model="companyForm.companyLeader" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人姓名：" prop="registrantName">
|
||
<el-input type="text" v-model="companyForm.registrantName" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人电话：" prop="registrantPhone">
|
||
<el-input type="text" v-model="companyForm.registrantPhone" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人职位：" prop="registrantPosition">
|
||
<el-input type="text" v-model="companyForm.registrantPosition" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="公司地址：" prop="companyAddress">
|
||
<el-input type="text" v-model="companyForm.companyAddress" autocomplete="off"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<center>
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="companyyes(companyForm)">提交审核</el-button>
|
||
</center>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script>
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
import {companyauthentication} from "@/api/authentication/authentication";
|
||
|
||
export default {
|
||
name: "Authentication",
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
//这里存放数据"
|
||
return {
|
||
dialogVisible:false,
|
||
index:'',
|
||
dialogtitle:'',
|
||
companyForm:{},
|
||
personForm:{
|
||
personCardPicture:[]
|
||
},
|
||
dialogImageUrl: '',
|
||
dialogVisiblepicture: false
|
||
};
|
||
},
|
||
//计算属性 类似于data概念",
|
||
computed: {},
|
||
//监控data中的数据变化",
|
||
watch: {},
|
||
//方法集合",
|
||
methods: {
|
||
//去企业实名认证页面
|
||
tocompanyauthentication(index){
|
||
this.index=index
|
||
if (this.index === 1) {
|
||
this.dialogtitle= '个人认证';
|
||
} else if (this.index === 2) {
|
||
this.dialogtitle= '企业认证';
|
||
}
|
||
this.dialogVisible=true
|
||
|
||
},
|
||
handleClose(done) {
|
||
this.$confirm('确认关闭？')
|
||
.then(_ => {
|
||
done();
|
||
})
|
||
.catch(_ => {});
|
||
},
|
||
//个人认证上交
|
||
personyes(){
|
||
|
||
this.dialogVisible=false
|
||
},
|
||
//企业认证上交
|
||
companyyes(companyForm){
|
||
companyauthentication(companyForm).then(response=>{
|
||
alert(response.msg)
|
||
if (response.code==200){}
|
||
this.dialogVisible=false
|
||
})
|
||
},
|
||
//图片上传
|
||
handleRemove(file, fileList) {
|
||
console.log(file, fileList);
|
||
},
|
||
handlePictureCardPreview(file) {
|
||
this.dialogImageUrl = file.url;
|
||
this.dialogVisible = true;
|
||
},
|
||
//单图片上传
|
||
handleSuccess(response,file,fileList){
|
||
this.companyForm.businessLicense=response.data
|
||
},
|
||
//多图片上传
|
||
handleSuccess1(response,file,fileList){
|
||
this.personForm.personCardPicture=[]
|
||
for(const i in fileList){
|
||
this.personForm.personCardPicture.push(fileList[i]).response.data
|
||
}
|
||
}
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
},
|
||
//生命周期 - 挂载完成（可以访问DOM元素）",
|
||
mounted() {
|
||
},
|
||
beforeCreate() {
|
||
}, //生命周期 - 创建之前",
|
||
beforeMount() {
|
||
}, //生命周期 - 挂载之前",
|
||
beforeUpdate() {
|
||
}, //生命周期 - 更新之前",
|
||
updated() {
|
||
}, //生命周期 - 更新之后",
|
||
beforeDestroy() {
|
||
}, //生命周期 - 销毁之前",
|
||
destroyed() {
|
||
}, //生命周期 - 销毁完成",
|
||
activated() {
|
||
} //如果页面有keep-alive缓存功能，这个函数会触发",
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
</style>
|