<!--
|
* @Date: 2019-09-02 09:01:22
|
* @LastEditors : 小明丶
|
* @LastEditTime : 2019-12-26 17:28:15
|
* @Description:门店开通信用购
|
-->
|
<template>
|
<div class="open-xyg-index">
|
<x-header :title="'开通信用购'" :left-options="{backText: '', preventGoBack: true}" @on-click-back="goBackPage">
|
</x-header>
|
<!-- v-show="step === 1" -->
|
<base-info
|
v-show="step === 1"
|
:bizLicenseTypeList="bizLicenseTypeList"
|
:storeInfo="storeInfo"
|
>
|
</base-info>
|
<mgr-info
|
v-show="step === 2"
|
:mgrReqVo="mgrReqVo"
|
>
|
</mgr-info>
|
<!-- 信用购的文件上传type + 6 -->
|
<store-pictures v-show="step === 3" :storeInfo="storeInfo" :filetype="9" ></store-pictures>
|
<!-- <store-pictures :storeInfo="storeInfo" :filetype="6" ></store-pictures> -->
|
<f-space type="large"></f-space>
|
<!-- <f-button @on-click="handleNextStep" fixed>{{ step !== 3 ? '下一步' : '提交开通' }}</f-button> -->
|
<van-button class="btn" round @click="handleNextStep" fixed>{{ step !== 3 ? '下一步' : '提交开通' }}</van-button>
|
</div>
|
</template>
|
|
<script>
|
import BaseInfo from './storeBaseInfo.vue';
|
import MgrInfo from './storeBaseMgrInfo.vue';
|
import StorePictures from './storePictures.vue';
|
import formCheckAndComt from '@/utils/formCheckAndComb';
|
|
import {
|
dateFormat
|
} from 'vux'
|
|
export default {
|
name: 'xygStoreOpen',
|
components: {
|
BaseInfo,
|
StorePictures,
|
MgrInfo
|
},
|
data() {
|
return {
|
orgType:0,
|
step: 1,
|
stepText: '下一步',
|
bizLicenseTypeList: [],
|
mgrReqVo: {
|
staffName:'',
|
staffPhone:'',
|
post:'',
|
oprId:''//营业员编号
|
},
|
storeInfo: {
|
legalIdCardAddress:'',
|
issueDate:'',
|
regDetailAddr:'',
|
addr:{},
|
isShowArea:false,
|
regCityCode:'',
|
regDistrictCode:'',
|
regProvinceCode:'',
|
storeName: '',
|
outStoreNo:'',
|
storeProvinceCode:'',
|
storeProvinceName:'',
|
storeCityCode:'',
|
storeCityName:'',
|
storeDistrictCode:'',
|
storeDistrictName:'',
|
storeDetailAddr:'',
|
bizLicenseType:'',
|
licenseNo:'',
|
orgName:'',
|
addrText:'',
|
legalCardPhotosF: [], //法人身份证反面
|
legalCardPhotosZ: [], //法人身份证正面
|
legalIdCardNo:'',//省code
|
legalPhone:'',//市code
|
legalName:'',
|
licencePhotos:[], // 营业执照照片
|
legalCardPhotos: [], // 法人身份证
|
storeHeadPhotos: [], // 门店图片
|
storeInPhotos: [], // 店内图片
|
storeAroundPhotos: [], // 门店周边图片
|
authorizedBrand: [], // 授权牌
|
sysScreenShot: [], //联通系统截图
|
},
|
// 验证开户信息字段
|
storeCheckInfo: [
|
{
|
key: 'legalPhone',
|
tipType: 1,
|
message: '法人手机号'
|
},
|
{
|
key: 'legalIdCardNo',
|
tipType: 1,
|
message: '法人身份证'
|
},
|
{
|
key: 'legalName',
|
tipType: 2,
|
message: '法人名称'
|
},
|
{
|
key: 'orgName',
|
tipType: 1,
|
message: '营业执照名称'
|
},
|
{
|
key: 'bizLicenseType',
|
tipType: 2,
|
message: '营业执照类型'
|
},
|
{
|
key: 'addrText',
|
tipType: 2,
|
message: '省市区'
|
},
|
{
|
key: 'legalIdCardAddress',
|
tipType: 1,
|
message: '法人身份证地址'
|
},
|
{
|
key: 'regDetailAddr',
|
tipType: 1,
|
message: '注册详细地址'
|
},
|
{
|
key: 'issueDate',
|
tipType: 2,
|
message: '注册日期'
|
},
|
{
|
key: 'outStoreNo',
|
tipType: 1,
|
message: '营业厅编码'
|
},
|
],// 验证开户信息字段
|
storeCheckInfoForBizType: [
|
{
|
key: 'bizLicenseType',
|
tipType: 2,
|
message: '营业执照类型'
|
},
|
],
|
storeCheckInfoForStaff: [
|
{
|
key: 'staffName',
|
tipType: 1,
|
message: '营业员姓名'
|
},
|
{
|
key: 'staffPhone',
|
tipType: 1,
|
message: '营业员电话'
|
},
|
{
|
key: 'post',
|
tipType: 1,
|
message: '营业员职务'
|
},
|
],
|
bankNo:''
|
};
|
},
|
computed:{
|
// 通过icon字段判断是智享云还是购机直降
|
},
|
created(){
|
this.init();
|
this.orgType = Number(this.$route.query.orgType);
|
},
|
methods: {
|
goBackPage() {
|
if (this.step === 3 || this.step === 2) {
|
this.step -= 1;
|
} else {
|
this.$router.replace({
|
path: '/store/productManage'
|
});
|
this.$router.go(-1)
|
}
|
},
|
// 初始化页面
|
init() {
|
let fn = this.$api.xygInitStore;
|
fn().then(res => {
|
let body = res.body;
|
this.bizLicenseTypeList = body.bizLicenseTypeList;
|
if(body.mgrReqVo && body.mgrReqVo.staffName){
|
this.mgrReqVo = body.mgrReqVo;
|
}
|
for (let i in this.storeInfo) {
|
if(Array.isArray(this.storeInfo[i])){
|
this.storeInfo[i] = body[i] ? body[i] : [];
|
}else{
|
this.storeInfo[i] = body[i] ? body[i] : '';
|
}
|
}
|
if(this.storeInfo.storeProvinceCode) {
|
if(this.storeInfo.regProvinceName && this.storeInfo.regCityName && this.storeInfo.regDistrictName){
|
this.storeInfo.addrText = this.storeInfo.regProvinceName + '-' + this.storeInfo.regCityName + '-' + this.storeInfo.regDistrictName;
|
}
|
if (this.storeInfo.licencePhotos && this.storeInfo.licencePhotos !== []) {
|
this.storeInfo.bizLicenseType = 2;
|
} else {
|
this.storeInfo.bizLicenseType = 3;
|
}
|
}
|
if (this.storeInfo.licencePhotos && this.storeInfo.licencePhotos.length) {
|
let fileId = this.storeInfo.licencePhotos[0];
|
this.storeInfo.licencePhotos = [];
|
this.storeInfo.licencePhotos.push({
|
fileId: fileId,
|
fileUrl: '/'+fileId
|
});
|
}
|
if (this.storeInfo.legalCardPhotosZ && this.storeInfo.legalCardPhotosZ.length) {
|
let fileIdZ = this.storeInfo.legalCardPhotosZ[0];
|
let fileIdF = this.storeInfo.legalCardPhotosF[0];
|
this.storeInfo.legalCardPhotos = [];
|
this.storeInfo.legalCardPhotos.push({
|
fileId: fileIdZ,
|
fileUrl: '/'+fileIdZ
|
});
|
this.storeInfo.legalCardPhotos.push({
|
fileId: fileIdF,
|
fileUrl: '/'+fileIdF
|
});
|
}
|
if (this.storeInfo.storeAroundPhotos && this.storeInfo.storeAroundPhotos.length) {
|
let storeAroundPhotosNew = [];
|
for (let i in this.storeInfo.storeAroundPhotos) {
|
let fileId = this.storeInfo.storeAroundPhotos[i];
|
storeAroundPhotosNew.push({
|
fileId: fileId,
|
fileUrl: '/'+fileId
|
});
|
}
|
this.storeInfo.storeAroundPhotos = storeAroundPhotosNew;
|
}
|
if (this.storeInfo.storeHeadPhotos && this.storeInfo.storeHeadPhotos.length) {
|
let fileId = this.storeInfo.storeHeadPhotos[0];
|
this.storeInfo.storeHeadPhotos = [];
|
this.storeInfo.storeHeadPhotos.push({
|
fileId: fileId,
|
fileUrl: '/'+fileId
|
});
|
}
|
if (this.storeInfo.storeInPhotos && this.storeInfo.storeInPhotos.length) {
|
let storeInPhotosNew = [];
|
for (let i in this.storeInfo.storeInPhotos) {
|
let fileId = this.storeInfo.storeInPhotos[i];
|
storeInPhotosNew.push({
|
fileId: fileId,
|
fileUrl: '/'+fileId
|
});
|
}
|
this.storeInfo.storeInPhotos = storeInPhotosNew;
|
}
|
if (this.storeInfo.authorizedBrand && this.storeInfo.authorizedBrand.length) {
|
let fileId = this.storeInfo.authorizedBrand[0];
|
this.storeInfo.authorizedBrand = [];
|
this.storeInfo.authorizedBrand.push({
|
fileId: fileId,
|
fileUrl: '/'+fileId
|
});
|
}
|
if (this.storeInfo.sysScreenShot && this.storeInfo.sysScreenShot.length) {
|
let fileId = this.storeInfo.sysScreenShot[0];
|
this.storeInfo.sysScreenShot = [];
|
this.storeInfo.sysScreenShot.push({
|
fileId: fileId,
|
fileUrl: '/'+fileId
|
});
|
}
|
});
|
},
|
// 处理点击下一步跳转处理
|
handleNextStep() {
|
// 判断表单字段必填性
|
if (this.step === 1) {
|
// 判断表单是否必填
|
if(this.storeInfo.bizLicenseType === 2) {
|
if (!formCheckAndComt.checkRequiredField(this.storeCheckInfo, this.storeInfo, this)) {
|
return false;
|
}
|
}else{
|
if (!formCheckAndComt.checkRequiredField(this.storeCheckInfoForBizType, this.storeInfo, this)) {
|
return false;
|
}
|
}
|
this.step += 1;
|
} else if(this.step === 2){
|
if (!formCheckAndComt.checkRequiredField(this.storeCheckInfoForStaff, this.mgrReqVo, this)) {
|
return false;
|
}
|
this.step += 1;
|
} else {
|
this.handleSubmitOpen();
|
}
|
},
|
// 处理提交
|
handleSubmitOpen() {
|
let checkPicList = [];
|
if(this.storeInfo.bizLicenseType === 2) {
|
// 需要判断图片的字段
|
checkPicList = [{
|
checkField: 'licencePhotos',
|
msg: '营业执照照片'
|
},
|
{
|
checkField: 'legalCardPhotos',
|
msg: '法人身份证正反面照片'
|
},
|
{
|
checkField: 'storeHeadPhotos',
|
msg: '门店店头照片'
|
},
|
{
|
checkField: 'storeInPhotos',
|
msg: '门店店内照片'
|
},
|
{
|
checkField: 'storeAroundPhotos',
|
msg: '门店周边照片'
|
},
|
];
|
}else{
|
checkPicList = [
|
{
|
checkField: 'storeHeadPhotos',
|
msg: '门店店头照片'
|
},
|
{
|
checkField: 'storeInPhotos',
|
msg: '门店店内照片'
|
},
|
{
|
checkField: 'storeAroundPhotos',
|
msg: '门店周边照片'
|
},
|
];
|
}
|
// 判断图片是否上传
|
for (let item of checkPicList) {
|
if (!(this.storeInfo[item.checkField] instanceof Array &&
|
this.storeInfo[item.checkField].length)) {
|
this.$notify('请上传' + item.msg);
|
return false;
|
}
|
if(this.storeInfo.bizLicenseType === 2) {
|
if (item.checkField == 'legalCardPhotos' && this.storeInfo[item.checkField].length < 2) {
|
this.$notify('请上传' + item.msg);
|
return false;
|
}
|
}
|
if (item.checkField == 'storeInPhotos' && this.storeInfo[item.checkField].length < 4) {
|
this.$notify('请上传' + item.msg);
|
return false;
|
}
|
if (item.checkField == 'storeAroundPhotos' && this.storeInfo[item.checkField].length < 3) {
|
this.$notify('请上传' + item.msg);
|
return false;
|
}
|
}
|
|
// 由于后端初始化返回的图片字段{url: xx, id: 121}, 而此时在提交的时候，我们
|
// 提交图片字段为[id1, id2], 为id的列表
|
let picIdList = {};
|
this.storeInfo.legalCardPhotosF = [];
|
this.storeInfo.legalCardPhotosZ = [];
|
if(this.storeInfo.bizLicenseType === 2) {
|
picIdList = {
|
licencePhotos: [],
|
legalCardPhotosF: [],
|
legalCardPhotosZ: [],
|
storeHeadPhotos: [],
|
storeInPhotos:[],
|
storeAroundPhotos:[],
|
authorizedBrand: [],
|
sysScreenShot: [],
|
};
|
picIdList.legalCardPhotosF.push(this.storeInfo.legalCardPhotos[0].fileId);
|
picIdList.legalCardPhotosZ.push(this.storeInfo.legalCardPhotos[1].fileId);
|
}else{
|
picIdList = {
|
storeHeadPhotos: [],
|
storeInPhotos:[],
|
storeAroundPhotos:[],
|
authorizedBrand: [],
|
sysScreenShot: [],
|
};
|
}
|
for (let i in picIdList) {
|
if (this.storeInfo[i] instanceof Array &&
|
this.storeInfo[i].length) {
|
// 后端图片初始文件id为id.而控件上传id为fieldId,这里需要兼容处理一下
|
this.storeInfo[i].forEach((item) => {
|
item.fileId ? picIdList[i].push(item.fileId) :
|
picIdList[i].push(item.id)
|
});
|
}
|
}
|
if(this.storeInfo.bizLicenseType !== 2) {
|
this.storeInfo.licencePhotos = [];
|
}
|
let submitInfo = {
|
...this.storeInfo,
|
...picIdList,
|
mgrReqVo:this.mgrReqVo
|
};
|
|
let fn;
|
fn = this.$api.xygOpenStore; //信用购接口
|
fn(submitInfo).then((res) => {
|
this.$router.push({
|
path: '/xyg/open-result',
|
// 提交后，默认跳转审核结果页面，状态为开通中
|
query: {
|
orgType:this.orgType,
|
openStatus: 1,
|
icon:this.$route.query.icon
|
}
|
})
|
});
|
}
|
}
|
};
|
|
</script>
|
|
<style lang="less" scoped>
|
.open-xyg-index{
|
padding-top: 54px;
|
height:100%;
|
background-color: #f1f1f1;
|
}
|
.btn {
|
position: fixed;
|
bottom: 15px;
|
width: 84%;
|
margin: 0 8%;
|
background: @c-default;
|
color: @c-text-fff;
|
display: block;
|
margin-top: 15px;
|
}
|
</style>
|
