7 changed files with 1141 additions and 75 deletions
@ -0,0 +1,451 @@ |
|||||
|
<template> |
||||
|
<div class="body"> |
||||
|
<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="请输入"></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" > |
||||
|
<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" > |
||||
|
<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" > |
||||
|
<div class="table_right_item" v-if="item.type==1"> |
||||
|
<span>{{item.name}}</span> |
||||
|
<i class="el-icon-close" @click="deleteUrl(item,index)"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<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> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {openAccount,getAccountInfo} from '../../../api/index'; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
subject:1, |
||||
|
checked:1, |
||||
|
disabled:false, |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/public/index.php/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: '', |
||||
|
}, |
||||
|
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' }, |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.getAccountInfo() |
||||
|
}, |
||||
|
methods:{ |
||||
|
//获取资料信息 |
||||
|
getAccountInfo(){ |
||||
|
let data={ |
||||
|
open_account_type:'third_party' |
||||
|
} |
||||
|
getAccountInfo(data).then(res => { |
||||
|
console.info(res) |
||||
|
if(res.data!=null){ |
||||
|
this.disabled=true |
||||
|
this.changeRadio(res.data.account_type) |
||||
|
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){ |
||||
|
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){ |
||||
|
openAccount(this.ruleForm).then(res => { |
||||
|
console.info(res) |
||||
|
if(res.code==101){ |
||||
|
this.$message.error(res.msg); |
||||
|
}else{ |
||||
|
this.$message.success('上传资料成功！请等待审核~'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res, file, index,key){ |
||||
|
if(res.code==1){ |
||||
|
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; |
||||
|
} |
||||
|
.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: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; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,452 @@ |
|||||
|
<template> |
||||
|
<div class="body"> |
||||
|
<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 :label="2">个人</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="请输入"></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" > |
||||
|
<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" > |
||||
|
<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" > |
||||
|
<div class="table_right_item" v-if="item.type==1"> |
||||
|
<span>{{item.name}}</span> |
||||
|
<i class="el-icon-close" @click="deleteUrl(item,index)"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="footer"> |
||||
|
<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> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import {openAccount,getAccountInfo} from '../../../api/index'; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return{ |
||||
|
subject:1, |
||||
|
checked:1, |
||||
|
disabled:false, |
||||
|
host:'http://wenhua.xingtongworld.com', |
||||
|
action:'http://wenhua.xingtongworld.com/public/index.php/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:'enter_shop', |
||||
|
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: '', |
||||
|
}, |
||||
|
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' }, |
||||
|
], |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
this.getAccountInfo() |
||||
|
}, |
||||
|
methods:{ |
||||
|
//获取资料信息 |
||||
|
getAccountInfo(){ |
||||
|
let data={ |
||||
|
open_account_type:'enter_shop' |
||||
|
} |
||||
|
getAccountInfo(data).then(res => { |
||||
|
console.info(res) |
||||
|
if(res.data!=null){ |
||||
|
this.disabled=true |
||||
|
this.changeRadio(res.data.account_type) |
||||
|
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){ |
||||
|
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){ |
||||
|
openAccount(this.ruleForm).then(res => { |
||||
|
console.info(res) |
||||
|
if(res.code==101){ |
||||
|
this.$message.error(res.msg); |
||||
|
}else{ |
||||
|
this.$message.success('上传资料成功！请等待审核~'); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
handleAvatarError(){ |
||||
|
this.$message.error('文件上传失败！'); |
||||
|
}, |
||||
|
handleAvatarSuccess(res, file, index,key){ |
||||
|
if(res.code==1){ |
||||
|
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; |
||||
|
} |
||||
|
.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: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; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue