<!--
|
* @Author: 小明丶
|
* @Date: 2020-08-10 14:52:49
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-12-25 11:37:35
|
* @Description: 通联通道图片上传页面
|
-->
|
<template>
|
<div class="tonglian-store-pictures-page">
|
<v-navbar title="开通通联通道"></v-navbar>
|
<div class="pic-content">
|
<p class="tip" v-if="uploadFileTypes.indexOf(0)!= -1">
|
<span>上传营业执照</span>
|
<span>（请上传实拍原件或上传实拍加盖公章复印件）</span>
|
</p>
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(0)!= -1"
|
:fileType="0"
|
:isCard="0"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.licencePhotos"
|
></UploadFile>
|
<p class="tip" v-if="uploadFileTypes.indexOf(2)!= -1||uploadFileTypes.indexOf(3)!= -1">
|
<span>上传法人身份证正反面</span>
|
<span>（第一张人像面，第二张国徽面）（请上传实拍原件或上传实拍加盖公章复印件）</span>
|
</p>
|
<div class="idcard-box">
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(2)!= -1"
|
:fileType="2"
|
:isCard="1"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.cardFrontPhotos"
|
></UploadFile>
|
<!-- :title="'2、上传法人身份证正反面'"
|
:tips="'（第一张人像面，第二张国徽面）'" -->
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(3)!= -1"
|
:fileType="3"
|
:isCard="2"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.cardBackPhotos"
|
></UploadFile>
|
</div>
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(21)!= -1"
|
:fileType="21"
|
:isCard="0"
|
:title="'上传手持身份证照片'"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.handCardPhotos"
|
></UploadFile>
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(6)!= -1"
|
:fileType="6"
|
:isCard="0"
|
:title="'上传经营内景照片'"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.storeInnerPhotos"
|
></UploadFile>
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(7)!= -1"
|
:fileType="7"
|
:isCard="0"
|
:title="'上传门头照'"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.storeSignPhotos"
|
></UploadFile>
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(22)!= -1"
|
:fileType="22"
|
:isCard="0"
|
:title="merType=='03'?'上传开户许可证照片':'上传银行卡正面照片'"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.industryLicensePhotos"
|
></UploadFile>
|
<!-- 新增补录图片 -->
|
<p class="tip" v-if="uploadFileTypes.indexOf(25)!= -1">
|
<span>签字授权委托书</span>
|
<span>检测到手机号非法人手机号，请下载签字授权委托书模板并按照指导完成填写后拍照上传</span>
|
<span @click="getModal">下载模板</span>
|
</p>
|
<UploadFile
|
v-if="uploadFileTypes.indexOf(25)!= -1"
|
:fileType="25"
|
:isCard="0"
|
:typeId="this.$route.query.typeId"
|
:sourceType="this.$route.query.zfbVersion"
|
:picList="uploadObj.authorPhotos"
|
></UploadFile>
|
</div>
|
<f-space></f-space>
|
<button
|
class="btn-y"
|
:style="{background:$store.state.defaultColor}"
|
@click="handleOpenHuaBei"
|
>{{btnText}}</button>
|
|
</div>
|
</template>
|
<script>
|
import UploadFile from "@/components/old/upload/uploadImgTl";
|
import { mapState, mapGetters } from 'vuex';
|
export default {
|
name: "add-account",
|
components: {
|
UploadFile
|
},
|
data() {
|
return {
|
btnText:'下一步',
|
uploadObj: {
|
licencePhotos: [], // 营业执照
|
cardFrontPhotos: [], // 身份证正面照
|
cardBackPhotos: [], // 身份证反面照
|
handCardPhotos:[],//手持身份证照片
|
storeSignPhotos: [], // 门店招牌照
|
storeInnerPhotos: [], // 门店店内照
|
industryLicensePhotos:[],//开户许可证照片
|
authorPhotos:[]
|
}
|
};
|
},
|
created() {
|
this.uploadObj = {
|
licencePhotos: [], // 营业执照
|
cardFrontPhotos: [], // 身份证正面照
|
cardBackPhotos: [], // 身份证反面照
|
handCardPhotos:[],//手持身份证照
|
storeSignPhotos: [], // 门店招牌照
|
storeInnerPhotos: [], // 门店店内照
|
industryLicensePhotos:[],
|
authorPhotos:[],
|
};
|
this.getMyMation();
|
},
|
computed:{
|
...mapState(['userinfo']),
|
merType(){
|
if(this.$route.query.merType && this.$route.query.merType != undefined){
|
this.btnText = '提交开通'
|
return this.$route.query.merType
|
}else{
|
return JSON.parse(sessionStorage.getItem(`sib_tl_openInfo_${this.userinfo.orgId}`)).detailInfo.merType
|
}
|
},
|
uploadFileTypes(){
|
if(this.$route.query.uploadFileTypes != undefined){
|
console.log(this.$route.query.uploadFileTypes)
|
return JSON.parse(this.$route.query.uploadFileTypes)
|
}else{
|
return [0,2,3,21,6,7,22]
|
}
|
}
|
},
|
methods: {
|
getModal(){
|
this.$api.tltMerOpenSendAuthFile().then(res=>{
|
this.$tool.toast("模板已下发至注册邮箱，请查收");
|
})
|
},
|
// 开通花呗
|
handleOpenHuaBei() {
|
if (this.$tool.checkValEmpty(this.uploadObj.licencePhotos)&&this.uploadFileTypes.indexOf(0) != -1) {
|
this.$tool.toast("请上传营业执照");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.uploadObj.cardFrontPhotos)&&this.uploadFileTypes.indexOf(2) != -1) {
|
this.$tool.toast("请上传身份证正面照");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.uploadObj.cardBackPhotos)&&this.uploadFileTypes.indexOf(3) != -1) {
|
this.$tool.toast("请上传身份证反面照");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.uploadObj.handCardPhotos)&&this.uploadFileTypes.indexOf(21) != -1) {
|
this.$tool.toast("请上传手持身份证照");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.uploadObj.storeInnerPhotos)&&this.uploadFileTypes.indexOf(6) != -1) {
|
this.$tool.toast("请上传经营内景照");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.uploadObj.storeSignPhotos)&&this.uploadFileTypes.indexOf(7) != -1) {
|
this.$tool.toast("请上传门头照");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.uploadObj.industryLicensePhotos)&&this.uploadFileTypes.indexOf(22) != -1) {
|
this.$tool.toast(this.merType=='03'?"请上传开户许可证照":"请上传银行卡正面照片");
|
return false;
|
}
|
if (this.$tool.checkValEmpty(this.uploadObj.authorPhotos)&&this.uploadFileTypes.indexOf(25) != -1) {
|
this.$tool.toast("请上传签字授权委托书");
|
return false;
|
}
|
|
let picIdList = {
|
licencePhotos: [],
|
cardFrontPhotos: [],
|
cardBackPhotos: [],
|
handCardPhotos:[],
|
storeInnerPhotos: [],
|
storeSignPhotos: [],
|
industryLicensePhotos:[],
|
authorPhotos:[]
|
};
|
|
for (let i in this.uploadObj) {
|
this.uploadObj[i].forEach(item => {
|
picIdList[i].push(item.id + "");
|
});
|
}
|
|
|
if(!this.$route.query.merType && this.$route.query.merType == undefined){
|
sessionStorage.setItem(`sib_tl_pic_${this.userinfo.orgId}`,JSON.stringify(this.uploadObj))
|
let obj = JSON.parse(sessionStorage.getItem(`sib_tl_openInfo_${this.userinfo.orgId}`))
|
obj.detailInfo = {...JSON.parse(sessionStorage.getItem(`sib_tl_openInfo_${this.userinfo.orgId}`)).detailInfo,...picIdList}
|
sessionStorage.setItem(`sib_tl_openInfo_${this.userinfo.orgId}`,JSON.stringify(obj))
|
this.$router.push({
|
path: "/tonglian/open",
|
query: {
|
title: "开通通联通道",
|
...this.$route.query
|
}
|
});
|
}else{
|
this.$api.tltMerOpenRepair({...picIdList}).then(res=>{
|
this.$router.push({
|
path: "/tonglian/open-result",
|
query: {
|
title: "开通通联通道"
|
}
|
});
|
})
|
}
|
|
|
|
},
|
// 获取返显资料
|
getMyMation() {
|
if (sessionStorage.getItem(`sib_tl_pic_${this.userinfo.orgId}`)) {
|
// if(sessionStorage.getItem("sib_tl_openInfo")){
|
// var obj = JSON.parse(sessionStorage.getItem("sib_tl_openInfo")).detailInfo;
|
// }
|
if(sessionStorage.getItem(`sib_tl_pic_${this.userinfo.orgId}`)){
|
var obj = JSON.parse(sessionStorage.getItem(`sib_tl_pic_${this.userinfo.orgId}`));
|
}
|
if (obj.licencePhotos && obj.licencePhotos.length > 0) {
|
this.uploadObj.licencePhotos = obj.licencePhotos;
|
}
|
if (obj.cardFrontPhotos && obj.cardFrontPhotos.length > 0) {
|
this.uploadObj.cardFrontPhotos = obj.cardFrontPhotos;
|
}
|
if (obj.cardBackPhotos && obj.cardBackPhotos.length > 0) {
|
this.uploadObj.cardBackPhotos = obj.cardBackPhotos;
|
}
|
if (obj.handCardPhotos && obj.handCardPhotos.length > 0) {
|
this.uploadObj.handCardPhotos = obj.handCardPhotos;
|
}
|
if (obj.storeSignPhotos && obj.storeSignPhotos.length > 0) {
|
this.uploadObj.storeSignPhotos = obj.storeSignPhotos;
|
}
|
if (obj.storeInnerPhotos && obj.storeInnerPhotos.length > 0) {
|
this.uploadObj.storeInnerPhotos = obj.storeInnerPhotos;
|
}
|
if (obj.industryLicensePhotos && obj.industryLicensePhotos.length > 0) {
|
this.uploadObj.industryLicensePhotos = obj.industryLicensePhotos;
|
}
|
if (obj.authorPhotos && obj.authorPhotos.length > 0) {
|
this.uploadObj.authorPhotos = obj.authorPhotos;
|
}
|
}
|
}
|
},
|
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.tonglian-store-pictures-page {
|
& {
|
min-height: 100vh;
|
background: #f5f5f7;
|
}
|
.info-box {
|
margin-top: 10px;
|
width: 96vw;
|
margin-left: 2vw;
|
}
|
.pic-content {
|
padding: 20px 0px 20px 10px;
|
box-sizing: border-box;
|
background: #fff;
|
width: 96vw;
|
margin-left: 2vw;
|
margin-top: 10px;
|
.tip{
|
span:nth-of-type(2){
|
font-size:12px;
|
font-family:PingFang SC;
|
font-weight:500;
|
color:rgba(255,102,102,1);
|
}
|
span:nth-of-type(3){
|
margin-top: 10px;
|
display: block;
|
font-size:12px;
|
font-family:PingFang SC;
|
font-weight:500;
|
color:#1890FF;
|
}
|
}
|
}
|
|
.idcard-box {
|
&{
|
display: flex;
|
//justify-content: space-around;
|
}
|
div {
|
display: inline-block;
|
width: 40%;
|
}
|
div:nth-of-type(2) {
|
//margin-left: -240px;
|
}
|
}
|
.btn-y {
|
width: 78%;
|
margin-left: 11%;
|
//margin-top: 40px;
|
height: 44px;
|
background: #896EDB;
|
border-radius: 22px;
|
color: #fff;
|
outline: none;
|
border: 0;
|
margin-bottom: 30px;
|
}
|
}
|
</style>
|
