guosen-ldt-shop/pages/shop-info/shop-info.vue

<template>
	<view>
		<u-navbar title="店铺资料" :border-bottom="false"></u-navbar>
		<view v-show="!loading">
			<view class="title u-flex u-row-between u-col-center">
				<text v-if="step==1">请选择商家类型</text>
				<text v-else>完善商家资料</text>
				<text v-show="stepShow" @click="prevStep" class="u-font-24" style="color: #999">上一步</text>
			</view>
			<view class="card">
				<view class="margin-bottom-30" v-if="$isNotEmpty(failReason)">
					<u-alert-tips @close="failReason=null" type="error" :close-able="true" :show-icon="true"
						title="审核意见" :description="failReason"></u-alert-tips>
				</view>
				<u-form :model="form" :label-width="labelWidth" ref="uForm" :label-style="labelStyle">
					<view v-if="step==1" class="steps1" style="padding-bottom: 40rpx;">
						<view @click="clickType(1)" class="item   u-border-bottom">
							<view class="flex">
								<view class="center">
									<image class="icon" src="../../static/icon/shop2.png" mode=""></image>
								</view>
								<view class="item-content">
									<text>小微商户</text>
									<text>小微商户，需提供店铺门头照及实景照，店主身份证件及银行账户</text>
								</view>
							</view>
							<view class="center">
								<image v-if="typeIndex==1" style="width: 40rpx;height: 40rpx;"
									src="../../static/icon/check.png" mode=""></image>
								<image v-else style="width: 40rpx;height: 40rpx;" src="../../static/icon/uncheck.png"
									mode=""></image>
							</view>
						</view>

						<view @click="clickType(0)" class="item ">
							<view class="flex">
								<view class="center">
									<image class="icon" src="../../static/icon/shop1.png" mode=""></image>
								</view>
								<view class="item-content">
									<text>企业商户/个体工商户</text>
									<text>企业商户，需提供营业执照，企业法人证件，企业对公结算银行账户，特殊行业还需提供生产经营许可证（例如:食品、化妆品、药品等）</text>
								</view>
							</view>
							<view class="center">
								<image v-if="typeIndex==0" style="width: 40rpx;height: 40rpx;"
									src="../../static/icon/check.png" mode=""></image>
								<image v-else style="width: 40rpx;height: 40rpx;" src="../../static/icon/uncheck.png"
									mode=""></image>
							</view>
						</view>
					</view>

					<view v-show="step==2">
						<view class="border">
							<u-form-item v-if="typeIndex==1" label="店铺全称" prop="name" label-position="top">
								<u-input :disabled="isEdit" :border="false" placeholder="比如:哈尔滨杨国福麻辣烫餐饮服务有限公司"
									v-model="auditForm.signName">
								</u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="商户简称" prop="name">
								<u-input :border="false" placeholder="比如:杨国福麻辣烫(时尚天河2店)" v-model="form.name"></u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="商户联系人手机号" prop="personTel" label-width="250">
								<u-input disabled placeholder="请输入联系方式" v-model="form.personTel" type="number">
								</u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="所在商场" prop="phone">
								<u-input @click="mallShow=true" :select-open="mallShow" :border="false"
									placeholder="请选择所在商场(非必填项)" v-model="mallLabel" type="select"></u-input>
								<u-icon class="clear" color="#999" v-if="mallLabel" name="close-circle-fill"
									@click.stop="clear('mallLabel')"></u-icon>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="商户联系人邮箱" prop="email" label-width="240">
								<u-input :border="false" placeholder="请输入商户联系人邮箱" v-model="form.email"></u-input>
							</u-form-item>
						</view>
						<view class="border" v-if="form.mallId&&!$isEmpty(mallAreaList)">
							<u-form-item label="所在区域" prop="phone">
								<u-input @click="mallAreaShow=true" :border="false" placeholder="请选择所在区域"
									v-model="mallAreaLabel" type="select"></u-input>
								<u-icon class="clear" color="#999" v-if="mallAreaLabel" name="close-circle-fill"
									@click.stop="clear('mallAreaLabel')"></u-icon>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="店铺标语" prop="name">
								<u-input :border="false" placeholder="请输入店铺标语(非必填项)" v-model="form.slogan"></u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label-width="200" label="公司种类" left-icon="grid">
								<view class="flex justify-between " @click="chooseLabel">
									<view class="u-flex u-flex-wrap">
										<text v-if="form.labelKey" class="text-cut-1">{{form.labelKey}}</text>
										<text v-else style="color: #c0c4cc;">请选择</text>
									</view>
									<view>
										<u-icon name="arrow-right" color="#737373"></u-icon>
									</view>
								</view>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="所在地区" prop="address">
								<u-input :disabled="true" :border="false" placeholder="请选择所在地区" @click="regionShow=true"
									v-model="form.location"></u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="店铺地址" label-position="top" prop="address">
								<u-input :border="false" disabled placeholder="请选择店铺地址" v-model="form.address">
								</u-input>
								<view slot="right">
									<u-button @click="chooseAddress" size="mini">获取地址</u-button>
								</view>
							</u-form-item>
						</view>
						<view class="border">
							<view style="padding: 30rpx 0 10rpx;">
								<text :style="{'color':'#6d6d6d'}">店铺封面</text>
								<text style="font-size: 24rpx;color: #999999;">（请上传店铺封面)</text>
								<mp-upload-img style="height: 120rpx;" ref="mpUploadCover" @click='uploadShopCover'
									col="4" :count="1"></mp-upload-img>
							</view>
						</view>

						<view class="border">
							<view style="padding: 30rpx 0 10rpx;">
								<text :style="{'color':'#6d6d6d'}">店铺实况</text>
								<text style="font-size: 24rpx;color: #999999;">（请依次上传门头、店内照片)</text>
								<mp-upload-img ref="mpUploadImg" @click='uploadShopPics' :count="2" col="4">
								</mp-upload-img>
							</view>
						</view>

					</view>
					<view v-show="merchantSubjectShow">
						<view class="border">
							<u-form-item label="上传营业执照" prop="businessLicense" label-position="top" label-width="180">
								<upload-img title="请上传营业执照" @click="chooseBizilicense"
									:model="auditForm.businessLicense" dataName="businessLicense"></upload-img>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="公司主体" prop="entity" label-width="210">
								<u-input :border="false" placeholder="请输入公司主体" v-model="auditForm.entity">
								</u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="营业执照编号" prop="licenceNo" label-width="210">
								<u-input :border="false" placeholder="请填写营业执照编号" v-model="auditForm.licenceNo">
								</u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="开户许可证编号" prop="licenceNo" label-width="210">
								<u-input :border="false" placeholder="请填写开户许可证编号"
									v-model="auditForm.openAccountLicenceNo">
								</u-input>
							</u-form-item>
							<u-form-item label="开户许可证照片" prop="openAccountLicenceUrl" label-position="top">
								<upload-img title="请上传开户许可证照片" @click="chooseImageAudit"
									:model="auditForm.openAccountLicenceUrl" dataName="openAccountLicenceUrl">
								</upload-img>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="手持营业执照在经营场所的照片" prop="handLicenceUrl" label-position="top">
								<upload-img title="请上传手持营业执照在经营场所的照片" @click="chooseImageAudit"
									:model="auditForm.handLicenceUrl" dataName="handLicenceUrl"></upload-img>
							</u-form-item>
						</view>
					</view>
					<view v-show="merchantCorporationShow">
						<view class="photo border">
							<text>请拿出商户法人有效二代身份证件准备拍摄</text>
							<view class="box">
								<ocr-navigator @onSuccess="idCardSuccess" certificateType="idCard" :opposite="false">
									<upload-img :width="520" :height="300" title="上传人像面照片"
										:model="auditForm.idCardFront" dataName="idCardFront" :enableImg="true">
									</upload-img>
								</ocr-navigator>
							</view>
							<view class="box" style="margin-top: 0;">
								<ocr-navigator @onSuccess="idCardSuccess" certificateType="idCard" :opposite="true">
									<upload-img :width="520" :height="300" title="上传国徽面照片"
										:model="auditForm.idCardContrary" dataName="idCardContrary" :enableImg="true"
										:bgImg="idCardContraryBgImg"></upload-img>
								</ocr-navigator>
							</view>
							<view style="margin: 30rpx 0;" class="tips">
								<text>拍摄时确保身份证边框完整，字体清晰，亮度均匀</text>
							</view>
						</view>
						<view class="border">
							<u-form-item label="商户法人姓名" prop="legalPerson" label-width="230">
								<u-input :border="false" placeholder="请输入公司法人姓名" v-model="auditForm.legalPerson">
								</u-input>
							</u-form-item>
						</view>
						<view class="border" v-if="typeIndex==1">
							<u-form-item label="商户法人手机号" prop="mobile" label-width="230">
								<u-input :border="false" placeholder="请输入商户法人手机号" v-model="auditForm.contactMobile">
								</u-input>
							</u-form-item>
						</view>
						<view class="border">
							<u-form-item label="商户法人身份证号码" prop="personIdCard" label-position="top">
								<u-input :border="false" placeholder="请输入商户法人身份证号码" v-model="auditForm.idCard">
								</u-input>
							</u-form-item>
						</view>

						<view class="border" v-if="typeIndex==0">
							<u-form-item label="商户联系人姓名" prop="personName" label-width="230">
								<u-input :disabled="isEdit" :border="false" placeholder="商户联系人姓名"
									v-model="form.personName">
								</u-input>
							</u-form-item>
						</view>

						<view class="border" v-if="typeIndex==0">
							<u-form-item label="商户联系人身份证号" prop="email" label-position="top">
								<u-input :border="false" placeholder="请输入商户联系人身份证号"
									v-model="auditForm.contactLicenceNo">
								</u-input>
							</u-form-item>
						</view>
					</view>

					<view v-show="settlementAccountShow" style="padding-bottom: 40rpx;">
						<view class="">
							<u-form-item :request="true" label="请填写结算银行账户号码" prop="bankCardNo" label-position="top">
								<u-input :border="false" placeholder="请填写结算银行账户号码" v-model="auditForm.bankCardNo">
								</u-input>
								<ocr-navigator slot="right" hover-class="none" @onSuccess="bankSuccess"
									certificateType="bankCard">
									<u-icon name="scan" size="42"></u-icon>
								</ocr-navigator>
							</u-form-item>
							<u-form-item :request="true" label="银行类型" label-position="top">
								<u-input :border="false" :select-open="bankCodeShow" type="select" placeholder="请选择银行类型"
									v-model="auditForm.bankCodeLabel" @click="bankCodeShow = true" />
							</u-form-item>
							<u-form-item :request="true" label="账户类型" label-position="top">
								<u-input  type="select" placeholder="请选银行择账户类型" v-model="auditForm.bankAccountTypeLabel" @click="bankAccountTypeShow = true"/>
							<!-- 	<u-input :border="false"  placeholder="请选银行择账户类型"
									v-model="auditForm.bankAccountTypeLabel" /> -->
							</u-form-item>
						</view>
					</view>
				</u-form>
			</view>
			<view v-if="step<totalStep" class="center flex-direction" style="margin: 100rpx 0	;">
				<view @click="nextStep" class="btn cu-btn round" style="width:90%;height: 90rpx;font-size: 34rpx;">
					下一步
				</view>
			</view>
			<view v-else class="center flex-direction margin-bottom-30" style="margin-top: 100rpx;">
				<view v-if="!isEdit" class=" margin-bottom-20 text-sm center ">
					<text style="color: #949494;">确认注册即代表已阅读并同意</text>
					<text style="color: #104DFF;" @click="protocol">《联兑通软件服务协议》</text>
				</view>
				<view @click="submit" class="btn cu-btn round" style="width:90%;height: 90rpx;font-size: 34rpx;">
					提交资料
				</view>
			</view>
		</view>

		<!-- 商场 -->
		<u-popup border-radius="8" height="60%" mode="bottom" v-model="mallShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form radius">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="mallKeyWord" type="text" :adjust-position="false"
						placeholder="请输入关键字搜索" confirm-type="search" />
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(mallList)" style="padding-top: 110rpx;height: 100%;" :scroll-y="true">
				<view @click="selectMall(item)" hover-class="hoverClass"
					:class="{'solid-bottom':mallList.length!=(index+1)}  " class="text-center padding-30"
					v-for="(item,index) in mallList" :key="index">
					<text>{{item.mallName}}</text>
				</view>
				<u-divider fontSize="24" v-if="mallList.length>=8" height="80">只显示8条数据,其余数据请搜索</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		<u-popup border-radius="8" height="60%" mode="bottom" v-model="bankCodeShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form radius">
					<text class="cuIcon-search"></text>
					<u-input style="width: 100%;" v-model="bankKeyword" type="text" :adjust-position="false"
						placeholder="请输入关键字搜索" confirm-type="search" />
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(bankCodeList)" style="padding-top: 110rpx;height: 100%;" :scroll-y="true">
				<view @click="bankTypeConfirm(item)" hover-class="hoverClass"
					:class="{'solid-bottom':bankCodeList.length!=(index+1)}  " class="item text-center padding-30 "
					v-for="(item,index) in bankCodeList" :key="index">
					<text>{{item.label}}</text>
				</view>
				<u-divider fontSize="24" v-if="bankCodeList.length>=8" height="80">只显示8条数据,其余数据请搜索</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		<u-select confirm-color="#EF9944" v-model="mallAreaShow" label-name="name" value-name="id" mode="single-column"
			:list="mallAreaList" @confirm="mallAreaConfirm"></u-select>
		<!-- 地区 -->
		<!-- <u-picker confirm-color="#EF9944" @confirm="regionConfirm" v-model="regionShow" mode="region"></u-picker> -->
		<city-select :defaultRegion="defaultRegion" v-model="regionShow" @city-change="regionConfirm"></city-select>
		<!-- <u-select v-model="bankCodeShow"  :list="bankCodeList" @confirm="bankTypeConfirm"></u-select> -->
		<u-select confirm-color="#EF9944" v-model="bankAccountTypeShow" :list="bankAccountTypeList"
			@confirm="bankAccountTypeConfirm">
		</u-select>
		<toast ref="toast"></toast>
		<loading ref="loading" type="3" />
	</view>
</template>

<script>
	import citySelect from './u-city-select.vue';
	import mpUploadImg from "@/components/mp-uploadImg/mp-uploadImg.vue"
	import uploadImg from "@/components/uploadimg/uploadImg.vue"
	export default {
		components: {
			citySelect,
			uploadImg,
			mpUploadImg
		},
		computed: {
			stepShow: {
				get() {
					if (this.isEdit) {
						if (this.step <= this.totalStep && this.step != 2) {
							return true
						}
						return false
					}
					if (this.step <= this.totalStep && this.step != 1) {
						return true
					} else {
						return false
					}
				}
			},
			settlementAccountShow: {
				get() {
					if (!this.needBankInfo) {
						return false
					}

					if (this.typeIndex == 0 && this.step == 5) {
						return true
					}

					if (this.typeIndex == 1 && this.step == 4) {
						return true
					}
					return false
				}
			},
			merchantCorporationShow: {
				get() {
					if (this.typeIndex == 0 && this.step == 4) {
						return true
					}

					if (this.typeIndex == 1 && this.step == 3) {
						return true
					}

					return false
				}
			},
			merchantSubjectShow: {
				get() {
					if (this.typeIndex == 0 && this.step == 3) {
						return true
					}
					return false
				}
			},

		},
		data() {
			return {
				labelStyle: {
					'color': '#6d6d6d'
				},

				loading: true,
				typeIndex: 1,
				step:1,
				totalStep: 4,
				//银行类型
				bankKeyword: '',
				bankCodeShow: false,
				bankCodeList: [],
				//账户类型
				bankAccountTypeShow: false,
				bankAccountTypeList: [],

				//身份证正面背景图
				idCardContraryBgImg: 'https://guosen-bucket-ldt.obs.cn-south-1.myhuaweicloud.com:443/525724b4977d457eafea331f8595a675-6MM5CLdbBt1z7042ac12465719c764f2ca05a37ffee9.png',
				//上传图片
				imgList: [],

				title: '',
				labelWidth: 170,
				form: {
					/**
					 * 主键
					 */
					id: "",
					/**
					 * 商户名称
					 */
					name: "",
					/**
					 * 代理人
					 */
					agenter: "",
					/**
					 * 代理人头像
					 */
					agentAvatar: "",
					/**
					 * 代理人姓名
					 */
					agentName: "",
					/**
					 * 商场id
					 */
					mallId: "",
					/**
					 * 商场label
					 */
					mallLabel: "",
					/**
					 * 负责人
					 */
					personName: "",
					/**
					 * 联系方式
					 */
					personTel: "",
					/**
					 * 区域编码
					 */
					locationCode: "",
					/**
					 * 所在地区
					 */
					location: "",
					/**
					 * 商户封面
					 */
					cover: "",
					/**
					 * 商户logo
					 */
					logo: "",
					/**
					 * 父标签ids,逗号分割
					 */
					labelParentIds: "",
					/**
					 * 商户标签json字符串
					 */
					labelJson: "",
					/**
					 * 商户标签key
					 */
					labelKey: "",
					/**
					 * 店铺图片
					 */
					shopPic: "",
					/**
					 * 邮箱
					 */
					email: "",
					/**
					 * 标语，逗号分割
					 */
					slogan: "",
					/**
					 * 审核状态
					 */
					auditStatus: "",
					/**
					 * 审核意见
					 */
					auditAdvice: "",
					/**
					 * 经度
					 */
					longitude: "",
					/**
					 * 纬度
					 */
					latitude: "",
					/**
					 * 详细地址
					 */
					address: "",
					/**
					 * 易宝商户编号
					 */
					merchantNo: "",
					/**
					 * openId
					 */
					openId: "",
				},
				//审核表单
				auditForm: {
					/**
					 * 主键
					 */
					id: "",
					/**
					 * 流程定义主键
					 */
					processDefinitionId: "",
					/**
					 * 流程实例主键
					 */
					processInstanceId: "",
					/**
					 * 主体信息
					 */
					entity: "",
					/**
					 * 商场或商店ID
					 */
					entityId: "",
					/**
					 * 身份证号
					 */
					idCard: "",
					/**
					 * 商户名称
					 */
					shopName: "",
					/**
					 * 商户logo
					 */
					shopLogo: "",
					/**
					 * 审核状态
					 */
					auditStatus: "",
					/**
					 * 商户申请号
					 */
					requestNo: "",
					/**
					 * 入网商户的业务角色
					 */
					businessRole: "",
					/**
					 * 商户签约类型
					 */
					signType: "ENTERPRISE",
					/**
					 * 企业名称【商户全称】
					 */
					enterpriseName: "",
					/**
					 * 组成形式
					 */
					typeOfOrganization: "",
					/**
					 * 企业类型
					 */
					typeOfEnterprise: "MINICRO",
					/**
					 * 经营范围
					 */
					businessScope: "",
					/**
					 * 注册资本
					 */
					registeredCapital: "",
					/**
					 * 实收资本
					 */
					paidInCapital: "",
					/**
					 * 营业期限
					 */
					validPeriod: "",
					/**
					 * 成立日期
					 */
					registeredDate: "",
					/**
					 * 注册号
					 */
					regNum: "",
					/**
					 * 商户证件编号
					 */
					licenceNo: "",
					/**
					 * 营业执照【易宝：商户证件照片】
					 */
					businessLicense: "",
					/**
					 * 商户签约名称
					 */
					signName: "",
					/**
					 * 商户简称
					 */
					shortName: "",
					/**
					 * 开户许可证编号
					 */
					openAccountLicenceNo: "",
					/**
					 * 开户许可证照片
					 */
					openAccountLicenceUrl: "",
					/**
					 * 手持营业执照在经营场所的照片
					 */
					handLicenceUrl: "",
					/**
					 * 法人姓名【legalName】
					 */
					legalPerson: "",
					/**
					 * 法人证件类型
					 */
					legalLicenceType: "ID_CARD",
					/**
					 * 法人证件号码
					 */
					legalLicenceNo: "",
					/**
					 * 身份证-正面【legalLicenceFrontUrl】
					 */
					idCardFront: "",
					/**
					 * 身份证-反面【legalLicenceBackUrl】
					 */
					idCardContrary: "",
					/**
					 * 性别
					 */
					gender: "",
					/**
					 * 住址
					 */
					addr: "",
					/**
					 * 民族
					 */
					nationality: "",
					/**
					 * 有效日期
					 */
					validDate: "",
					/**
					 * 商户联系人姓名
					 */
					contactName: "",
					/**
					 * 商户联系人证件号码
					 */
					contactLicenceNo: "",
					/**
					 * 商户联系人手机号
					 */
					contactMobile: "",
					/**
					 * 商户联系人邮箱
					 */
					contactEmail: "",
					/**
					 * 客服电话
					 */
					servicePhone: "",
					/**
					 * 商户实际经营地所在省
					 */
					province: "",
					/**
					 * 商户实际经营地所在市
					 */
					city: "",
					/**
					 * 商户实际经营地所在区
					 */
					district: "",
					/**
					 * 商户实际经营详细地址
					 */
					address: "",
					/**
					 * 结算方向
					 */
					settlementDirection: "",
					/**
					 * 银行账户类型
					 */
					bankAccountType: "",
					/**
					 * 银行账户类型label
					 */
					bankAccountTypeLabel: "",
					/**
					 * 银行账户号码
					 */
					bankCardNo: "",
					/**
					 * 银行账户开户总行编码
					 */
					bankCode: "",
					/**
					 * 银行账户开户总行编码label
					 */
					bankCodeLabel: "",
					/**
					 * 注册地址
					 */
					officeAddress: ""
				},
				//OCR营业执照
				OCRBizilicenseInfo: {},
				//OCR身份证
				OCRBiziIdCardInfo: {},
				//商场
				mallShow: false,
				mallKeyWord: '',
				mallList: [],
				mallLabel: '',
				//区域
				mallAreaShow: false,
				mallAreaList: [],
				mallAreaLabel: '',
				//所在地区
				regionShow: false,
				defaultRegion: [],
				//门店地址
				shopAddress: '',
				needBankInfo: true,
				//编辑还是修改
				isEdit: false,
				//审核失败，重新申请
				isFail: false,
				shopId: "",
				flowDetail: {},
				failReason: "",
				flowList: []
			}
		},
		watch: {
			mallKeyWord() {
				let that = this
				//节流函数
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.mallList = []
					that.fetchMallList()
				}, 500)
			},
			bankKeyword() {
				console.log("1111");
				let that = this
				//节流函数
				if (this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout(() => {
					this.bankCodeList = []
					that.getBankType()
				}, 500)
			},
			imgList() {
				if (!this.$isEmpty(this.imgList)) {
					this.form.shopPic = this.imgList.join(",")
				}
			},
		},
		onShow() {
			uni.hideLoading()
		},
		async onLoad(options) {
			this.$refs.loading.showLoading()
			this.form.personTel = this.$cache.get('phone')
			this.auditForm.contactMobile = this.form.personTel
			//监听从chooseLable页面返回的数据
			uni.$on('labelData', (labelData) => {
				this.form.labelJson = labelData.labelJson
				this.form.labelKey = labelData.labelKey
				this.form.labelParentIds = labelData.labelParentIds
				this.$forceUpdate()
			})
			if (options.edit) {
				//修改资料
				this.isEdit = true
				this.step = 2
				await this.fetchShopDetail(this.vuex_shopId)
				await this.fetchAuditDetail(this.vuex_shopId)
			} else if (options.isFail) {
				//审核失败，重新申请
				this.isFail = true
				this.shopId = options.shopId
				await this.fetchShopDetail(this.shopId)
				await this.fetchAuditDetail(this.shopId)
			} else {
				this.initCacheData()
				//新增数据时才跑流程
				this.getProcessDefinitionId()
			}
			await this.initDict()
			await this.fetchMallList()
			this.$refs.loading.hide()
			this.loading = false
		},
		methods: {
			clickType(index) {
				this.typeIndex = index
				if (this.typeIndex == 0) {
					//企业
					this.auditForm.bankAccountType = 'PUBLIC_CARD'
					this.auditForm.bankAccountTypeLabel = '对公卡'
				}
				if (this.typeIndex == 1) {
					//小微企业
					this.auditForm.bankAccountType = 'DEBIT_CARD'
					this.auditForm.bankAccountTypeLabel = '借记卡'
				}
			},
			async getHistoryFlowList() {
				let processInstanceId = this.auditForm.processInstanceId
				this.flowList = (await this.$api.flow.historyFlowList({
					processInstanceId
				})).data
				let failList = this.flowList.filter(item => !item.pass && item.comment)
				if (this.$isNotEmpty(failList)) {
					let index = failList.length - 1
					this.failReason = failList[index].comment
				}
			},
			getTaskId() {
				let params = {
					assignee: '$INITIATOR',
					processInstanceId: this.auditForm.processInstanceId
				}
				this.$api.flow.getTaskId(params).then(res => {
					this.flowDetail = res.data.records[0]
				})
			},
			initCacheData() {
				let shopAuditInfo = this.$cache.get('shopAuditInfo')
				if (shopAuditInfo) {
					this.form = shopAuditInfo.shop
					this.auditForm = shopAuditInfo.audit
					this.mallLabel = this.form.mallLabel
					this.imgList = this.$isNotEmpty(this.form.shopPic) ? this.form.shopPic.split(",") : []
					this.$refs.mpUploadCover.changeImgList([this.form.cover])
					this.$refs.mpUploadImg.changeImgList(this.imgList)
				}
			},
			async getOpenId() {
				if (this.$isEmpty(this.form.openId)) {
					let code = (await this.$mpi.wxLogin()).code
					let params = {
						code,
						type: "SHOP"
					}
					let res = await this.$api.wxApp.getOpenId(params)
					this.form.openId = res.data.openid
				}
			},
			//获取商户审核流程id
			getProcessDefinitionId() {
				let params = {
					category: 'flow_3',
					mode: 1
				}
				this.$api.flow.getProcessDefinitionId(params).then(res => {
					this.auditForm.processDefinitionId = res.data.records[0].id
					if (this.$isEmpty(this.auditForm.processDefinitionId)) {
						this.$dialog.showModalAndBack("系统错误，获取流程主键失败")
						return
					}
				})
			},
			//所在地区
			regionConfirm(e) {
				this.form.location = e.location
				this.form.locationCode = e.locationCode
				// this.form.location = e.province.label + "-" + e.city.label + "-" + e.area.label
				// this.form.locationCode = e.province.value + "0000," + e.city.value + "00," + e.area.value
			},
			//具体地址
			chooseAddress() {
				this.$mpi.chooseLocation().then(res => {
					this.form.address = res.address
					this.form.longitude = res.longitude
					this.form.latitude = res.latitude
				})
			},
			//选择标签
			chooseLabel() {
				uni.navigateTo({
					url: "../chooseLable/chooseLable?label=" + this.form.labelJson
				})
			},
			uploadShopCover(data) {
				this.form.cover = data[0]
				this.$refs.mpUploadCover.changeImgList(data)
			},
			uploadShopPics(data) {
				this.imgList = data
				this.$refs.mpUploadImg.changeImgList(this.imgList)
			},
			bankSuccess(e) {
				console.log(e);
				this.auditForm.bankCardNo = e.detail.number.text
			},
			async chooseBank() {
				let image = (await this.$mpi.chooseImage())[0]
				this.$api.ocr.bank(image).then(res => {
					console.log(res);
				})
				console.log(res);
			},
			async fetchShopDetail(id) {
				let params = {
					id
				}
				let res = await this.$api.shop.detail(params)
				this.$util.objectCopy(this.form, res.data)

				if (this.$isNotEmpty(res.data.mallId) && res.data.mallId != -1) {
					this.mallLabel = (await this.$api.mall.detail({
						id: res.data.mallId
					})).data.mallName
				}
				console.log(this.form.location.split('-'));
				this.defaultRegion = this.form.location.split('-')
				this.imgList = this.$isNotEmpty(this.form.shopPic) ? this.form.shopPic.split(",") : []
				this.$refs.mpUploadCover.changeImgList([this.form.cover])
				this.$refs.mpUploadImg.changeImgList(this.imgList)
			},
			async fetchAuditDetail(id) {
				let params = {
					entityId: id
				}
				let res = await this.$api.audit.detail(params)
				this.$util.objectCopy(this.auditForm, res.data)
				if (this.auditForm.typeOfEnterprise == 'ENTERPRISE') {
					this.typeIndex=0
				}
				if (this.isFail) {
					//获取流程历史
					this.getHistoryFlowList()
					this.getTaskId()
				}
			},
			prevStep() {
				this.step--
			},
			nextStep() {
				if (this.step == 1) {
					if (this.typeIndex == 0) {
						this.auditForm.typeOfEnterprise = 'ENTERPRISE'
						//企业
						if (this.needBankInfo) {
							this.totalStep = 5
						} else {
							this.totalStep = 4
						}
					}

					if (this.typeIndex == 1) {
						//小微企业
						this.auditForm.typeOfEnterprise = 'MINICRO'
						if (this.needBankInfo) {
							this.totalStep = 4
						} else {
							this.totalStep = 3
						}
					}
				}

				if (this.step == 2) {
					if (this.$isEmpty(this.auditForm.signName) && this.typeIndex == 1) {
						this.$refs.toast.info('请输入店铺全称')
						return
					}
					if (this.$isEmpty(this.form.name)) {
						this.$refs.toast.info('请输入店铺简称')
						return
					}
					if (this.$isEmpty(this.form.personTel)) {
						this.$refs.toast.info('请输入商户联系人手机号')
						return
					}

					if (this.$isEmpty(this.form.email)) {
						this.$refs.toast.info('请输入商户联系人邮箱')
						return
					}

					if (this.$isEmpty(this.form.labelKey)) {
						this.$refs.toast.info('请选择公司种类')
						return
					}
					if (this.$isEmpty(this.form.location)) {
						this.$refs.toast.info('请选择所在地区')
						return
					}
					if (this.$isEmpty(this.form.address)) {
						this.$refs.toast.info('请选择具体地址')
						return
					}

					if (this.$isEmpty(this.form.cover)) {
						this.$refs.toast.info('请上传店铺封面')
						return
					}
					if (this.$isEmpty(this.form.shopPic)) {
						this.$refs.toast.info('请上传店铺实况')
						return
					}
					if (this.imgList.length < 2) {
						this.$refs.toast.info('请依次上传门头，店内照片')
						return
					}
				}
				if (this.step == 3 && this.typeIndex == 0) {
					if (this.$isEmpty(this.auditForm.businessLicense)) {
						this.$refs.toast.info('请上传营业执照')
						return
					}

					if (this.$isEmpty(this.auditForm.openAccountLicenceNo)) {
						this.$refs.toast.info('请填写开户许可证编号')
						return
					}
					if (this.$isEmpty(this.auditForm.openAccountLicenceUrl)) {
						this.$refs.toast.info('请上传开户许可证照片')
						return
					}
					if (this.$isEmpty(this.auditForm.openAccountLicenceUrl)) {
						this.$refs.toast.info('请上传手持营业执照在经营场所的照片')
						return
					}

				}
				if (this.step > 0 && this.step < this.totalStep) {
					this.step++
				}
			},
			clear(t) {
				if (t == 'mallAreaLabel') {
					this.mallAreaLabel = ''
				} else if (t == 'mallLabel') {
					this.mallLabel = ''
					this.form.mallId = null
				}
			},
			async chooseImageShop(name) {
				let res = await this.$mpi.chooseImage()
				this.$api.uploadFile(res[0]).then(res => {
					this.form[name] = res.data.link
				})
			},
			async chooseImageAudit(name) {
				if (this.isEdit) {
					this.$refs.toast.info('不可修改')
					return
				}
				let res = await this.$mpi.chooseImage()
				this.$api.uploadFile(res[0]).then(res => {
					this.auditForm[name] = res.data.link
				})
			},
			idCardSuccess(e) {
				console.log(e, "e********");
				let data = e.detail
				console.log(data, "data******");
				if (data.type == 0) {
					//身份证正面
					this.auditForm.addr = data.address.text
					this.auditForm.gender = data.gender.text
					this.auditForm.idCard = data.id.text
					this.auditForm.nationality = data.nationality.text
					this.auditForm.name = data.name.text
					this.auditForm.legalPerson = data.name.text
					this.form.personName = data.name.text
					this.auditForm.contactLicenceNo = data.id.text
				} else {
					this.auditForm.validDate = data.valid_date.text
				}
				this.$api.uploadFile(data.image_path).then(res => {
					if (data.type == 0) {
						//正面
						this.auditForm.idCardFront = res.data.link
					} else {
						//反面
						this.auditForm.idCardContrary = res.data.link
					}
				})
			},
			async chooseIdCard(name) {
				if (this.isEdit) {
					this.$refs.toast.info('不可修改')
					return
				}
				let image = (await this.$mpi.chooseImage())[0]
				this.$dialog.showLoading('证件上传中...')
				this.$api.ocr.idcard(image).then(res => {
					if (res.data[0].errmsg != "ok") {
						this.$refs.toast.error('非法证件照')
						return
					}
					if (name == 'idCardFront') {
						//上传身份证正面照解析数据
						this.OCRBiziIdCardInfo = res.data[0]
						this.OCRBiziIdCardInfo.idCard = this.OCRBiziIdCardInfo.id
						//删除OCRBiziIdCardInfo 的id防止将id值覆盖调auditForm的id值
						delete this.OCRBiziIdCardInfo.id
						delete this.OCRBiziIdCardInfo.validDate
						Object.assign(this.auditForm, this.OCRBiziIdCardInfo)
						this.auditForm.legalPerson = this.OCRBiziIdCardInfo.name
						this.form.personName = this.OCRBiziIdCardInfo.name
						this.auditForm.contactLicenceNo = this.OCRBiziIdCardInfo.idCard
					} else {
						this.OCRBiziIdCardInfo.validDate = res.data[0].validDate
						this.auditForm.validDate = res.data[0].validDate
					}

					this.auditForm[name] = res.data[1].link
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			async chooseBizilicense() {
				if (this.isEdit) {
					this.$refs.toast.info('不可修改')
					return
				}
				let image = (await this.$mpi.chooseImage())[0]
				this.$dialog.showLoading('证件上传中...')
				this.$api.ocr.bizilicense(image).then(res => {
					if (res.data[0].errmsg != "ok") {
						this.$refs.toast.error('非法证件照')
						return
					}
					this.OCRBizilicenseInfo = res.data[0]
					delete this.OCRBizilicenseInfo.typeOfEnterprise
					Object.assign(this.auditForm, this.OCRBizilicenseInfo)
					this.auditForm.businessLicense = res.data[1].link
					this.auditForm.licenceNo = this.OCRBizilicenseInfo.serial
					this.auditForm.officeAddress = this.OCRBizilicenseInfo.address
					this.auditForm.entity = this.OCRBizilicenseInfo.enterpriseName
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			async fetchMallList() {
				let params = {
					name: this.mallKeyWord,
					auditStatus: 'PASS',
					size: 20
				}
				let res = await this.$api.mall.list(params)
				this.mallList = res.data.records
			},
			fetchMallAreaList() {
				this.$api.mall.getMallAreaByMallId(this.form.mallId).then(res => {
					this.mallAreaList = res.data
				})
			},
			selectMall(item) {
				this.mallLabel = item.mallName
				this.form.mallId = item.id
				this.form.mallLabel = this.mallLabel
				this.mallShow = false
				// this.fetchMallAreaList()
			},
			mallAreaConfirm(e) {
				this.mallAreaLabel = e[0].label
				this.form.mallAreaId = e[0].value
			},
			async submit() {
				let _this = this

				if (this.$isEmpty(this.auditForm.idCardFront)) {
					this.$refs.toast.info('请上传身份证人像面')
					return
				}
				if (this.$isEmpty(this.auditForm.idCardContrary)) {
					this.$refs.toast.info('请上传身份证国徽面')
					return
				}
				if (this.$isEmpty(this.form.personName)) {
					this.$refs.toast.info('请填写商户联系人姓名')
					return
				}
				if (this.$isEmpty(this.auditForm.contactLicenceNo)) {
					this.$refs.toast.info('请填写商户联系人身份证号')
					return
				}

				if (this.$isEmpty(this.auditForm.bankCardNo)) {
					this.$refs.toast.info('请填写结算银行账户号码')
					return
				}
				if (this.$cache.get('promotionCode')) {
					this.form.agenter = this.$cache.get('promotionCode')
				}

				this.$refs.loading.showLoading('资料提交中..')

				this.initAuditInfo()
				await this.getOpenId()

				let params = {
					shop: this.form,
					audit: this.auditForm,
				}
				this.$cache.put('shopAuditInfo', params)
				this.$api.shop.submitAudit(params).then(res => {
					setTimeout(() => {
						if (res.success == true) {
							_this.$cache.remove('shopAuditInfo')
							_this.doReSubmit()
							_this.jump()
						}
						_this.$refs.loading.hide()
					}, 300)
				}).catch(err => {
					setTimeout(() => {
						_this.$refs.loading.hide()
					}, 300)
				})
			},
			jump() {
				let jumpData = {
					path: '/pages/index/index',
					title: this.isEdit ? '资料修改成功' : '资料提交成功,请耐心等待审核'
				}
				uni.redirectTo({
					url: '/pages/login/submit-success?params=' + JSON.stringify(jumpData)
				})
			},
			protocol() {
				uni.navigateTo({
					url: "/pages/webView/webView?url=" + this.$global.shopRegister
				})
			},
			doReSubmit() {
				if (this.isFail) {
					this.flowDetail.comment = '重新修改并提交'
					this.flowDetail.flag = 'ok'
					this.flowDetail.variables.pass = true
					this.flowDetail.variables.applyPass = false
					this.$api.flow.flowAuditSubmit(this.flowDetail)
				}
			},
			//获取推荐人的信息
			async initAgenterInfo() {
				if (this.$cache.get('promotionCode')) {
					let agenter = this.$cache.get('promotionCode')
					let records = (await this.$api.loginUser.list({
						id: agenter
					})).data.records
					let user = records[0]
					this.form.agenter = this.$isNotEmpty(user) ? user.id : ""
					this.form.agentAvatar = user.avatar
					this.form.agentName = user.nickName
				}
			},
			//经营地址
			initAuditInfo() {
				let locationCode = this.form.locationCode.split(",")
				this.auditForm.province = locationCode[0],
					this.auditForm.city = locationCode[1],
					this.auditForm.district = locationCode[2],
					this.auditForm.address = this.form.address
				this.auditForm.contactEmail = this.form.email
				this.auditForm.shopName = this.form.name
				this.auditForm.shopLogo = this.form.cover
				this.auditForm.contactMobile = this.form.personTel
				this.auditForm.contactName = this.form.personName
				this.auditForm.shortName = this.form.name

				if (this.$isEmpty(this.auditForm.signName)) {
					this.auditForm.signName = this.auditForm.enterpriseName
				}

				this.auditForm.legalLicenceNo = this.auditForm.idCard
			},

			//字典 begin
			async initDict() {
				await this.getBankType()
				await this.getBankAccountType()
			},
			async getBankType() {
				let params = {
					code: 'bank_type',
					size: 9
				}
				if (this.$isNotEmpty(this.bankKeyword)) {
					params.keyword = this.bankKeyword
				}
				let res = await this.$api.dict.dictionaryPage(params)
				let list = res.data.records
				if (list[0].parentId == '0') {
					list.shift()
				}
				list.forEach(item => {
					let obj = {
						label: JSON.parse(item.dictValue).name,
						value: item.dictKey
					}
					this.bankCodeList.push(obj)
				})
				if (this.$isEmpty(this.auditForm.bankCodeLabel) && this.$isEmpty(this.auditForm.bankCode)) {
					this.auditForm.bankCodeLabel = this.bankCodeList[0].label
					this.auditForm.bankCode = this.bankCodeList[0].value
				}
			},
			async getBankAccountType() {
				let res = await this.$api.dict.list({
					code: 'bank_account_type'
				})
				res.data.forEach(item => {
					let obj = {
						label: item.dictValue,
						value: item.dictKey
					}
					this.bankAccountTypeList.push(obj)
					this.auditForm.bankAccountType = this.bankAccountTypeList[0].value
					this.auditForm.bankAccountTypeLabel = this.bankAccountTypeList[0].label
				})
			},
			//字典 end
			bankTypeConfirm(e) {
				this.bankCodeShow = false
				this.auditForm.bankCodeLabel = e.label
				this.auditForm.bankCode = e.value
			},
			bankAccountTypeConfirm(e) {
				this.auditForm.bankAccountTypeLabel = e[0].label
				this.auditForm.bankAccountType = e[0].value
			},
		}
	}
</script>

<style lang="scss" scoped>
	.clear {
		position: absolute;
		right: 50rpx;
		top: 50%;
		transform: translateY(-50%);
		z-index: 99;
	}

	.title {
		padding: 30rpx 40rpx;
		font-size: 34rpx;
		color: #000;
		font-weight: 800;
	}

	.bg {
		height: 220rpx;
		background-image: linear-gradient(#D18C42, #C99864);
		border-radius: 0 0 30% 30%;
	}

	.btn {
		background-color: #EF9944;
		color: #FFFFFF;
	}

	.border {
		// border-bottom: 1rpx solid #F4F4F4;
	}

	.tips {
		color: $color;
		text-align: right;
		margin-top: 10rpx;
		font-size: 22rpx;
	}

	.card {
		background-color: #FFFFFF;
		padding: 40rpx;

		.photo {
			font-size: 26rpx;
			padding-top: 20rpx;

			.box {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 30rpx;
			}
		}
	}

	.steps1 {
		display: flex;
		justify-content: flex-start;
		flex-direction: column;

		.item {
			background-color: #FFFFFF;
			display: flex;
			width: 100%;
			justify-content: space-between;
			padding: 60rpx 0rpx;
			border-radius: 30rpx;

			.icon {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.item-content {
				display: flex;
				flex-direction: column;
				width: 70%;
				margin-left: 20rpx;


				text:first-child {
					color: #353535;
					font-size: 32rpx;
					font-weight: 800;
				}

				text:last-child {
					margin-top: 20rpx;
					color: #999999;
					font-size: 26rpx;
				}
			}
		}
	}

	.ocr-wrapper {
		margin: 40rpx auto;
		width: 375rpx;
	}

	.intro {
		margin: 40rpx;
	}
</style>