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.
543 lines
19 KiB
543 lines
19 KiB
<template>
|
|
<div class="body">
|
|
<template v-if="check_status==-1 || check_status==1">
|
|
<p class="title">第三方服务机构开户信息完善</p>
|
|
<p class="title_info">第三方服务机构开户用于服务平台中资产托管时的资产价格评估或资产价值评估，需有相关资质机构方能注册成功。</p>
|
|
<div class="subject">
|
|
<span>账户主体：</span>
|
|
<el-radio-group v-model="ruleForm.account_type" :disabled="disabled" @change="changeRadio">
|
|
<el-radio :label="1">机构</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
<div class="table">
|
|
<div class="table_left">
|
|
<p class="table_title">请如实上传以下资料：</p>
|
|
<div class="table_content">
|
|
<div class="table_content_item" v-for="(item,index) in upList" :key="index">
|
|
<span>{{item.name}}</span>
|
|
<div class="table_content_item_upload">
|
|
<el-upload
|
|
class="upload-demo"
|
|
:action="action"
|
|
:on-change="fileChange"
|
|
:show-file-list="false"
|
|
:on-error="handleAvatarError"
|
|
list-type="picture"
|
|
:on-success="(res,file)=>{handleAvatarSuccess(res,file,index,item.key)}"
|
|
>
|
|
<span class="upload_span">上传</span>
|
|
</el-upload>
|
|
<span class="el-icon-success" v-if="item.type==1"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="table_title">请确认并完善以下信息：</p>
|
|
<div class="table_content">
|
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm1" label-width="200px" class="ruleForm" label-position="left">
|
|
<template v-if="ruleForm.account_type==1">
|
|
<el-form-item label="机构名称" prop="firm_name" >
|
|
<el-input v-model="ruleForm.firm_name" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="统一社会信用代码" prop="credit_code" >
|
|
<el-input v-model="ruleForm.credit_code" placeholder="请输入" type="number" maxlength="15"></el-input>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="主体类型" prop="main_type" >
|
|
<el-input v-model="ruleForm.main_type" placeholder="请输入"></el-input>
|
|
</el-form-item> -->
|
|
<el-form-item label="注册资本" prop="reg_money" >
|
|
<el-input v-model="ruleForm.reg_money" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="法定代表人" prop="legal_name" >
|
|
<el-input v-model="ruleForm.legal_name" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="住所" prop="domicile" >
|
|
<el-input v-model="ruleForm.domicile" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="成立日期" prop="establish_time" >
|
|
<el-date-picker
|
|
v-model="ruleForm.establish_time"
|
|
type="date"
|
|
value-format="timestamp"
|
|
placeholder="选择成立日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="收货地址" prop="address" >
|
|
<el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="收货联系人" prop="uname" >
|
|
<el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="收货联系电话" prop="phone" maxlength="11">
|
|
<el-input v-model.number="ruleForm.phone" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<template v-else>
|
|
<el-form-item label="姓名" prop="username" >
|
|
<el-input v-model="ruleForm.username" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="身份证号码" prop="id_card" >
|
|
<el-input v-model="ruleForm.id_card" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="手机号码" prop="userphone" >
|
|
<el-input v-model.number="ruleForm.userphone" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="开户行名称" prop="bank_name" >
|
|
<el-input v-model="ruleForm.bank_name" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="银行卡号" prop="id_bank" >
|
|
<el-input v-model.number="ruleForm.id_bank" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="收货地址" prop="address" >
|
|
<el-input v-model="ruleForm.address" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="收货联系人" prop="uname" >
|
|
<el-input v-model="ruleForm.uname" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="收货联系电话" prop="phone" maxlength="11">
|
|
<el-input v-model.number="ruleForm.phone" placeholder="请输入"></el-input>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table_right">
|
|
<p class="table_title">已上传资料：</p>
|
|
<div class="table_right_content">
|
|
<div v-for="(item,index) in upList" :key="index" >
|
|
<template v-if="item.key=='else_file' && item.type==1">
|
|
<div class="table_right_item" v-for="(item1,index1) in item.url" :key="index1" >
|
|
<span @click="onPreview([item.url[index1]])">{{item.name}}<span v-if="index1!=0">{{index1}}</span></span>
|
|
<i class="el-icon-close" @click="deleteUrl(item,index,index1)"></i>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="table_right_item" v-if="item.type==1" >
|
|
<span @click="onPreview([item.url])">{{item.name}}</span>
|
|
<i class="el-icon-close" @click="deleteUrl(item,index)"></i>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer" v-if="check_status==-1">
|
|
<button class="submit" @click="submit">提交资料</button>
|
|
<div>
|
|
<el-checkbox v-model="checked" :true-label=1 :false-label=2></el-checkbox>
|
|
<span class="footer_span">已阅读并同意</span>
|
|
<span class="footer_span1">《开户申请书与承诺书》</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="check_status==0 || check_status==2">
|
|
<p class="title">第三方服务机构开户信息完善</p>
|
|
<p class="title_info">第三方服务机构开户用于服务平台中资产托管时的资产价格评估或资产价值评估，需有相关资质机构方能注册成功。</p>
|
|
<div class="examine_content">
|
|
<img src="../../../assets/img/examine_img.png" alt="" class="examine_img" v-if="check_status==0">
|
|
<img src="../../../assets/img/examine_img1.png" alt="" class="examine_img" v-else-if="check_status==2">
|
|
<p class="examine_tips">
|
|
<template v-if="check_status==0">
|
|
<span >资料已经提交，请耐心等待审核</span>
|
|
</template>
|
|
<template v-else-if="check_status==2">
|
|
<span >审核失败！请重新提交资料</span>
|
|
<span class="examine_tips_span" @click="checkStatus" >重新提交</span>
|
|
</template>
|
|
</p>
|
|
<div class="error_msg" v-if="check_status==2 && ruleForm.check_message!=''">
|
|
<p>失败原因：</p>
|
|
<p v-html="ruleForm.check_message"></p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<el-image-viewer
|
|
v-if="showViewer"
|
|
:on-close="closeViewer"
|
|
:url-list="img_url"
|
|
:z-index="9999"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {openAccount,getAccountInfo} from '../../../api/index';
|
|
export default {
|
|
data(){
|
|
return{
|
|
subject:1,
|
|
checked:1,
|
|
check_status:-1,
|
|
disabled:false,
|
|
showViewer:false,
|
|
host:'http://wenhua.xingtongworld.com',
|
|
action:'http://wenhua.xingtongworld.com/api/Index/uploadimg',
|
|
upList:[
|
|
{name:'营业执照（复印件）',type:0,url:'',key:'business_license'},
|
|
{name:'法人代表证明书',type:0,url:'',key:'legal_certificate'},
|
|
{name:'法人身份证件（复印件）',type:0,url:'',key:'legal_card'},
|
|
{name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
|
|
{name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate'},
|
|
{name:'资产证明文件',type:0,url:'',key:'asset_certificate'},
|
|
{name:'法人授权委托书',type:0,url:'',key:'legal_authorization'},
|
|
{name:'经办人身份证（复印件）',type:0,url:'',key:'operator_card'},
|
|
{name:'其他要求文件',type:0,url:[],key:'else_file'},
|
|
],
|
|
ruleForm: {
|
|
open_account_type:'third_party',
|
|
account_type: 1,
|
|
business_license: '',
|
|
legal_certificate: '',
|
|
legal_card: '',
|
|
number_certificate: '',
|
|
bank_account_certificate: '',
|
|
legal_authorization: '',
|
|
operator_card: '',
|
|
else_file: [],
|
|
user_card_front: '',
|
|
user_card_backfacade: '',
|
|
asset_certificate: '',
|
|
asset_trusteeship: '',
|
|
firm_name: '',
|
|
credit_code: '',
|
|
main_type: '',
|
|
reg_money: '',
|
|
legal_name: '',
|
|
domicile: '',
|
|
establish_time: '',
|
|
username: '',
|
|
id_card: '',
|
|
userphone: '',
|
|
bank_name: '',
|
|
id_bank: '',
|
|
address: '',
|
|
uname: '',
|
|
phone: '',
|
|
check_message:''
|
|
},
|
|
rules: {
|
|
firm_name: [
|
|
{ required: true, message: '请输入机构名称', trigger: 'blur' },
|
|
],
|
|
credit_code: [
|
|
{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
|
|
],
|
|
// main_type: [
|
|
// { required: true, message: '请输入主体类型', trigger: 'blur' },
|
|
// ],
|
|
reg_money: [
|
|
{ required: true, message: '请输入注册资本', trigger: 'blur' },
|
|
],
|
|
legal_name: [
|
|
{ required: true, message: '请输入法定代表人', trigger: 'blur' },
|
|
],
|
|
domicile: [
|
|
{ required: true, message: '请输入住所', trigger: 'blur' },
|
|
],
|
|
establish_time: [
|
|
{ required: true, message: '请选择成立日期', trigger: 'blur' },
|
|
],
|
|
address: [
|
|
{ required: true, message: '请输入收货地址', trigger: 'blur' },
|
|
],
|
|
uname: [
|
|
{ required: true, message: '请输入收货人姓名', trigger: 'blur' },
|
|
],
|
|
phone: [
|
|
{ required: true, message: '请输入收货人电话', trigger: 'blur' },
|
|
],
|
|
username: [
|
|
{ required: true, message: '请输入姓名', trigger: 'blur' },
|
|
],
|
|
id_card: [
|
|
{ required: true, message: '请输入身份证号码', trigger: 'blur' },
|
|
],
|
|
userphone: [
|
|
{ required: true, message: '请输入手机号码', trigger: 'blur' },
|
|
],
|
|
bank_name: [
|
|
{ required: true, message: '请输入开户行名称', trigger: 'blur' },
|
|
],
|
|
id_bank: [
|
|
{ required: true, message: '请输入银行卡号', trigger: 'blur' },
|
|
],
|
|
}
|
|
}
|
|
},
|
|
components: {
|
|
ElImageViewer: () => import('element-ui/packages/image/src/image-viewer')
|
|
},
|
|
created(){
|
|
this.getAccountInfo()
|
|
},
|
|
methods:{
|
|
checkStatus(){
|
|
this.check_status=-1
|
|
},
|
|
//获取资料信息
|
|
getAccountInfo(){
|
|
let data={
|
|
open_account_type:'third_party'
|
|
}
|
|
getAccountInfo(data).then(res => {
|
|
console.info(res)
|
|
if (res.code==100) {
|
|
this.check_status=res.data.check_status
|
|
if(res.data!=null){
|
|
this.disabled=true
|
|
// this.changeRadio(res.data.account_type)
|
|
res.data.establish_time=res.data.establish_time*1000
|
|
res.data.check_message = res.data.check_message.replace(/\n/gm, "<br/>")
|
|
// res.data.else_file=JSON.parse(res.data.else_file)
|
|
for(let key in res.data){
|
|
for(let item in this.ruleForm){
|
|
if(key==item){
|
|
this.ruleForm[item]=res.data[key]
|
|
continue;
|
|
}
|
|
}
|
|
this.upList.forEach((v,i)=>{
|
|
if(key==v.key){
|
|
v.type=1;
|
|
v.url=res.data[key]
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//切换rado事件
|
|
changeRadio(label){
|
|
if(label==1){
|
|
this.upList=[
|
|
{name:'营业执照（复印件）',type:0,url:'',key:'business_license'},
|
|
{name:'法人代表证明书',type:0,url:'',key:'legal_certificate'},
|
|
{name:'法人身份证件（复印件）',type:0,url:'',key:'legal_card'},
|
|
{name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
|
|
{name:' 银行开户证明',type:0,url:'',key:'bank_account_certificate'},
|
|
{name:'资产证明文件',type:0,url:'',key:'asset_certificate'},
|
|
{name:'法人授权委托书',type:0,url:'',key:'legal_authorization'},
|
|
{name:'经办人身份证（复印件）',type:0,url:'',key:'operator_card'},
|
|
{name:'其他要求文件',type:0,url:[],key:'else_file'},
|
|
]
|
|
}else{
|
|
this.upList=[
|
|
{name:'身份证正面',type:0,url:'',key:'user_card_front'},
|
|
{name:'身份证背面',type:0,url:'',key:'user_card_backfacade'},
|
|
{name:' 数字证书申请表',type:0,url:'',key:'number_certificate'},
|
|
{name:'资产证明文件',type:0,url:'',key:'asset_certificate'},
|
|
{name:'其他要求文件',type:0,url:[],key:'else_file'},
|
|
]
|
|
}
|
|
this.ruleForm.else_file=[];
|
|
},
|
|
//删除图片
|
|
deleteUrl(item,index){
|
|
if(item.key=="else_file"){
|
|
this.ruleForm.else_file.splice(index1,1)
|
|
this.upList[index].url.splice(index1,1)
|
|
if(this.ruleForm.else_file.length==0){
|
|
this.upList[index].type=0;
|
|
this.upList[index].url=[];
|
|
this.ruleForm[item.key]=[]
|
|
}
|
|
}else{
|
|
this.upList[index].type=0;
|
|
this.upList[index].url='';
|
|
this.ruleForm[item.key]=''
|
|
}
|
|
},
|
|
submit(){
|
|
console.info(this.ruleForm)
|
|
|
|
this.$refs["ruleForm1"].validate((valid) => {
|
|
if(valid){
|
|
if(this.ruleForm.account_type==1){
|
|
this.ruleForm.establish_time=this.ruleForm.establish_time/1000
|
|
}
|
|
openAccount(this.ruleForm).then(res => {
|
|
console.info(res)
|
|
if(res.code==101){
|
|
this.$message.error(res.msg);
|
|
}else{
|
|
this.$message.success('上传资料成功！请等待审核~');
|
|
this.disabled=true
|
|
}
|
|
this.ruleForm.establish_time=this.ruleForm.establish_time*1000
|
|
});
|
|
}
|
|
})
|
|
},
|
|
handleAvatarError(){
|
|
this.$message.error('文件上传失败！');
|
|
},
|
|
handleAvatarSuccess(res, file, index,key){
|
|
if(res.code==1){
|
|
if(key=="else_file"){
|
|
this.upList[index].type=1;
|
|
this.ruleForm.else_file.push(this.host+res.data.img_url)
|
|
this.upList[index].url.push(this.host+res.data.img_url);
|
|
}else{
|
|
this.upList[index].type=1;
|
|
this.upList[index].url=this.host+res.data.img_url;
|
|
this.ruleForm[key]=this.host+res.data.img_url
|
|
}
|
|
this.$message.success('文件上传成功！');
|
|
}
|
|
},
|
|
fileChange(file){
|
|
const typeArr = ['image/png', 'image/gif', 'image/jpeg', 'image/jpg'];
|
|
const isJPG = typeArr.indexOf(file.raw.type) !== -1;
|
|
const isLt3M = file.size / 1024 / 1024 < 3;
|
|
if (!isJPG) {
|
|
this.$message.error('只能是图片!');
|
|
this.$refs.upload.clearFiles();
|
|
return;
|
|
}
|
|
if (!isLt3M) {
|
|
this.$message.error('上传图片大小不能超过 3MB!');
|
|
this.$refs.upload.clearFiles();
|
|
// this.$set(this.query, 'goods_img', '');
|
|
return;
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.body{
|
|
margin-top: 20px;
|
|
}
|
|
.examine_tips_span{
|
|
display: inline-block;
|
|
color: #C94C4C;
|
|
text-decoration: underline;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.title{
|
|
font-size: 18px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.title_info{
|
|
font-size: 12px;
|
|
color: #AAAAAA;
|
|
}
|
|
.table_right{
|
|
padding-left: 50px;
|
|
}
|
|
.table_right_content{
|
|
margin-top: 20px;
|
|
}
|
|
.table_right_item{
|
|
width: 300px;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #333333;
|
|
font-size: 14px;
|
|
justify-content: space-between;
|
|
}
|
|
.table_right_item>span{
|
|
cursor: pointer;
|
|
}
|
|
.table_right_item>span:hover{
|
|
text-decoration: underline;
|
|
}
|
|
.table_right_item>i{
|
|
cursor: pointer;
|
|
}
|
|
.subject{
|
|
display: flex;
|
|
font-size: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 30px;
|
|
}
|
|
.subject >>>.el-radio, .el-radio__input{
|
|
line-height: inherit;
|
|
margin-left: 30px;
|
|
}
|
|
.table{
|
|
display: flex;
|
|
margin-top: 15px;
|
|
}
|
|
.table_left{
|
|
width: 800px;
|
|
border-right: 1px solid #EAB1B1;
|
|
}
|
|
.table_title{
|
|
font-size: 14px;
|
|
margin-bottom: 15px;
|
|
}
|
|
.table_content{
|
|
padding-left: 30px;
|
|
margin-bottom: 15px;
|
|
padding-right: 50px;
|
|
}
|
|
.table_content_item{
|
|
font-size: 14px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 15px;
|
|
}
|
|
.table_content_item_upload{
|
|
display: flex;
|
|
align-items: center;
|
|
color: #C94C4C;
|
|
}
|
|
.el-icon-success{
|
|
font-size: 18px;
|
|
}
|
|
.upload-demo{
|
|
margin-right: 20px;
|
|
}
|
|
.upload_span{
|
|
color: #C94C4C;
|
|
text-decoration: underline;
|
|
}
|
|
.ruleForm>>>.el-form-item__label{
|
|
color: black;
|
|
}
|
|
.ruleForm>>>.el-input{
|
|
width: 500px;
|
|
}
|
|
.footer{
|
|
margin-top: 20px;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
.submit{
|
|
width: 340px;
|
|
height: 40px;
|
|
background: -moz-linear-gradient(top, #F8D89F 0%, #D98282 100%);
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F8D89F), color-stop(100%,#D98282));
|
|
background: -webkit-linear-gradient(top, #F8D89F 0%,#D98282 100%);
|
|
background: -o-linear-gradient(top, #F8D89F 0%,#D98282 100%);
|
|
background: -ms-linear-gradient(top, #F8D89F 0%,#D98282 100%);
|
|
background: linear-gradient(to bottom, #F8D89F 0%,#D98282 100%);
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
border: none;
|
|
margin-bottom: 10px;
|
|
}
|
|
.footer_span{
|
|
color: rgb(127, 127, 127);
|
|
}
|
|
.footer_span1{
|
|
color: rgb(201, 76, 76);
|
|
text-decoration: underline;
|
|
}
|
|
.examine_content{
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 40px;
|
|
color: #C3CBD6;
|
|
font-size: 14px;
|
|
height: 700px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
|