uni-app微信小程序商家入驻申请流程页面

预览效果图：

 

完整代码：

<!--
 * @Descripttion: 
 * @version: 
 * @Author: Oop
 * @Date: 2022-07-06 11:10:28
 * @LastEditors: Oop
 * @LastEditTime: 2022-07-08 17:30:01
-->
<template>
  <view class="regbox" :style="{'margin-bottom': isWeiXinIos?'80px':'60px'}">
    <view class="top-box">
      <uni-steps :options="stepList" :active="stepIndex" :active-color="bgColor" />
    </view>
    <view class="step-box">
      <view class="step-title">
        {{ stepList[stepIndex].title }}
      </view>

      <!-- 入驻协议 -->
      <view v-show="stepIndex == 0" class="step-item">
        <RegAgreement />
        <view class="read-box">
            <uni-data-checkbox v-model="isread" multiple :selectedColor="bgColor" :localdata="readData" @change="readChange" />
        </view>
      </view>

      <!-- 基本信息 -->
      <view v-show="stepIndex == 1" class="step-item">
        <uni-forms ref="form1" :value="formData1" :modelValue="formData1">
          <uni-forms-item label="公司名称" required name="companyName">
            <uni-easyinput type="text" v-model="formData1.companyName" placeholder="请输入公司名称" />
          </uni-forms-item>
          <uni-forms-item label="公司地址" required name="companyAddress">
            <uni-easyinput type="text" v-model="formData1.companyAddress" placeholder="请输入公司地址" />
          </uni-forms-item>
          <uni-forms-item label="公司电话" required name="telphone">
            <uni-easyinput type="text" v-model="formData1.telphone" placeholder="请输入公司电话" />
          </uni-forms-item>
          <uni-forms-item label="公司邮箱" required name="email">
            <uni-easyinput type="text" v-model="formData1.email" placeholder="请输入公司邮箱" />
          </uni-forms-item>
          <uni-forms-item class="mini" label="员工总数" required name="staffNum">
            <uni-easyinput type="text" v-model="formData1.staffNum" placeholder="请输入员工总数" />
            <view class="unit">人</view>
          </uni-forms-item>
          <uni-forms-item class="mini" label="注册资金" required name="registeredCapital">
            <uni-easyinput type="text" v-model="formData1.registeredCapital" placeholder="请输入注册资金" />
            <view class="unit">万</view>
          </uni-forms-item>
        </uni-forms>
      </view>

      <!-- 认证信息 -->
      <view v-show="stepIndex == 2" class="step-item label-large">
        <uni-forms ref="form2" :value="formData2" :modelValue="formData2">
          <uni-forms-item label="法定代表人姓名" required name="legalName">
            <uni-easyinput type="text" v-model="formData2.legalName" />
          </uni-forms-item>
          <uni-forms-item label="法定代表人身份证" required name="legalCard">
            <uni-easyinput type="text" v-model="formData2.legalCard" />
          </uni-forms-item>
          <uni-forms-item label="法人身份证电子版" name="legalCardImg">
            <htz-image-upload  
              max="1"  
              v-model="formData2.legalCardImg" 
              @uploadSuccess="legalCardImgUpSuccess"
              @imgDelete="imgDelete('legalCardImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="统一社会信用代码" required name="creditCode">
            <uni-easyinput type="text" v-model="formData2.creditCode" />
          </uni-forms-item>
          <uni-forms-item label="营业执照省份地址" required name="areaData">
            <uni-data-picker :clear-icon="false" placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="areaInfoList" v-model="formData2.businessLicenseDistrict" @change="onAreachange">
            </uni-data-picker>
          </uni-forms-item>
          <uni-forms-item label="营业执照详细地址" required name="businessLicenseAddress">
            <uni-easyinput type="text" v-model="formData2.businessLicenseAddress" />
          </uni-forms-item>
          <uni-forms-item label="成立日期" required name="dateEstablishment">
            <uni-datetime-picker type="date" v-model="formData2.dateEstablishment" @maskClick="maskClick" />
          </uni-forms-item>
          <uni-forms-item label="营业执照有效期" required name="businessLicenseTime">
            <uni-datetime-picker v-model="formData2.businessLicenseTime" type="daterange" @maskClick="maskClick" />
          </uni-forms-item>
          <uni-forms-item label="法定经营范围" required name="businessScope">
            <uni-easyinput type="text" v-model="formData2.businessScope" />
          </uni-forms-item>
          <uni-forms-item label="营业执照电子版" required name="businessLicenseImg">
            <htz-image-upload  
              max="1"  
              v-model="formData2.businessLicenseImg" 
              @uploadSuccess="businessLicenseImgUpSuccess"
              @imgDelete="imgDelete('businessLicenseImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="注册商标证书" name="trademark">
            <htz-image-upload  
              max="1"  
              v-model="formData2.trademark" 
              @uploadSuccess="trademarkUpSuccess"
              @imgDelete="imgDelete('trademark')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="经营许可证" required name="businessCertifyImg">
            <htz-image-upload  
              max="1"  
              v-model="formData2.businessCertifyImg" 
              @uploadSuccess="businessCertifyImgUpSuccess"
              @imgDelete="imgDelete('businessCertifyImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="无经营异常及失信证明" required name="normalCertifyImg">
            <htz-image-upload  
              max="1"  
              v-model="formData2.normalCertifyImg" 
              @uploadSuccess="normalCertifyImgUpSuccess"
              @imgDelete="imgDelete('normalCertifyImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="税务评价等级" required name="taxEvaluationLevelImg">
            <htz-image-upload  
              max="1"  
              v-model="formData2.taxEvaluationLevelImg" 
              @uploadSuccess="taxEvaluationLevelImgUpSuccess"
              @imgDelete="imgDelete('taxEvaluationLevelImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="法人授权书" required name="legalCertifyImg">
            <htz-image-upload  
              max="1"  
              v-model="formData2.legalCertifyImg" 
              @uploadSuccess="legalCertifyImgUpSuccess"
              @imgDelete="imgDelete('legalCertifyImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="代理证书" required name="agentCertifyImg">
            <htz-image-upload  
              max="1"  
              v-model="formData2.agentCertifyImg" 
              @uploadSuccess="agentCertifyImgUpSuccess"
              @imgDelete="imgDelete('agentCertifyImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="一般纳税人证明" name="taxpayer">
            <htz-image-upload  
              max="1"  
              v-model="formData2.taxpayer" 
              @uploadSuccess="taxpayerUpSuccess"
              @imgDelete="imgDelete('taxpayer')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>

          
        </uni-forms>
      </view>

      <!-- 财务资质信息 -->
      <view v-show="stepIndex == 3" class="step-item label-large">
        <uni-forms ref="form3" :value="formData3" :modelValue="formData3">
          <uni-forms-item label="银行开户名" required name="accountName">
            <uni-easyinput type="text" v-model="formData3.accountName" />
          </uni-forms-item>
          <uni-forms-item label="公司银行账号" required name="bankAccount">
            <uni-easyinput type="text" v-model="formData3.bankAccount" />
          </uni-forms-item>
          <uni-forms-item label="开户银行支行名称" required name="bank">
            <uni-easyinput type="text" v-model="formData3.bank" />
          </uni-forms-item>
          <uni-forms-item label="开户行省份地址" required name="bankDepositDistrict">
            <uni-data-picker :clear-icon="false" placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="areaInfoList" v-model="formData3.bankDepositDistrict" @change="onAreachange">
            </uni-data-picker>
          </uni-forms-item>
          <uni-forms-item label="开户银行所在地址" required name="bankDepositAddress">
            <uni-easyinput type="text" v-model="formData3.bankDepositAddress" />
          </uni-forms-item>
          <uni-forms-item label="开户银行许可证电子版" name="bankDepositImg">
            <htz-image-upload  
              max="1"  
              v-model="formData3.bankDepositImg" 
              @uploadSuccess="bankDepositImgUpSuccess"
              @imgDelete="imgDelete('bankDepositImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="发票类型" required name="invoiceType">
            <uni-data-checkbox v-model="formData3.invoiceType" multiple :selectedColor="bgColor" :localdata="invoiceTypeList" @change="invoiceTypeChange" />
          </uni-forms-item>
        </uni-forms>
      </view>

      <!-- 店铺信息 -->
      <view v-show="stepIndex == 4" class="step-item label-large">
        <uni-forms ref="form4" :value="formData4" :modelValue="formData4">
          <uni-forms-item label="店铺名称" required name="shopTitle">
            <uni-easyinput type="text" v-model="formData4.shopTitle" />
          </uni-forms-item>
          <uni-forms-item label="店铺省份地址" required name="district">
            <uni-data-picker :clear-icon="false" placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="areaInfoList" v-model="formData4.district" @change="onAreachange">
            </uni-data-picker>
          </uni-forms-item>
          <uni-forms-item label="店铺详细地址" required name="shopAddress">
            <uni-easyinput type="text" v-model="formData4.shopAddress" />
          </uni-forms-item>
          <uni-forms-item label="店铺联系人" name="shopLinkman">
            <uni-easyinput type="text" v-model="formData4.shopLinkman" />
          </uni-forms-item>
          <uni-forms-item label="联系人电话" required name="shopTel">
            <uni-easyinput type="text" v-model="formData4.shopTel" />
          </uni-forms-item>
          <uni-forms-item label="经营类目" required name="invoiceType" v-if="categoryList">
            <uni-data-checkbox v-model="checkAllVal" multiple :selectedColor="bgColor" :localdata="checkAllList" @change="checkAllChange"/>
            <uni-data-checkbox v-model="formData4.categoryIds" multiple :selectedColor="bgColor" :localdata="categoryList" @change="categoryChange" />
          </uni-forms-item>
          <uni-forms-item label="经营品牌" required name="invoiceType" v-if="brandList">
            <uni-data-checkbox v-model="formData4.brandIds" multiple :selectedColor="bgColor" :localdata="brandList" @change="brandChange" />
          </uni-forms-item>
          <uni-forms-item label="店铺类型" required name="invoiceType">
            <uni-data-checkbox v-model="formData4.shopType" :selectedColor="bgColor" :localdata="shopTypeList" @change="shopTypeChange" />
          </uni-forms-item>
          <uni-forms-item label="店铺LOGO" name="shopImg">
            <htz-image-upload  
              max="1"  
              v-model="formData4.shopImg" 
              @uploadSuccess="shopImgUpSuccess"
              @imgDelete="imgDelete('shopImg')" 
              :formData="ossData"
              :action="action"
              :upFileUrl="upFileUrl">
            </htz-image-upload>
          </uni-forms-item>
          <uni-forms-item label="店铺简介" name="backup">
            <textarea class="textarea" v-model="formData4.backup" />
          </uni-forms-item>
        </uni-forms>
      </view>

      <!-- 审核结果 -->
      <view v-show="stepIndex == 5">
        <view class="shop-status" v-if="shopStatus == 1">
            <view class="status-icon">
              <uni-icons type="checkbox-filled" size="80" :color="bgColor"></uni-icons>
            </view>
            <view class="status-msg">恭喜你，你的资质认证通过啦，<view @click="toPage(adminPageUrl)" :style="{color: bgColor}">前往商家后台></view></view>
        </view>
        <view class="shop-status" v-if="shopStatus == 2">
            <view class="status-icon">
              <uni-icons type="minus-filled" size="80" :color="bgColor"></uni-icons>
            </view>
            <view class="status-msg">资质审核中，<view :style="{color: bgColor}" @click="stepIndex = 1">返回修改店铺信息></view></view>
        
        </view>
        <view class="shop-status" v-if="shopStatus == 3">
            <view class="status-icon">
              <uni-icons type="clear" size="80" :color="bgColor"></uni-icons>
            </view>
            <view class="status-msg">驳回原因:{{shopAuthentication}}</view>
            <view class="status-msg" :style="{color: bgColor}" @click="stepIndex = 1">返回修改店铺信息></view>
        </view>
      </view>

    </view>
    <view class="bottom-box" :style="{'padding-bottom': isWeiXinIos?'25px':'0'}">
      <button class="bot-btn" v-show="stepIndex != 0" @click="prevStep()" :style="{background: bgColor}">上一步</button>
      <button v-show="stepIndex != 4 && stepIndex != 5" class="bot-btn" @click="nextStep()" :style="{background: bgColor}">下一步</button>
      <button v-show="stepIndex == 4" class="bot-btn" @click="nextStep()" :style="{background: bgColor}">提交审核</button>
    </view>
    <uni-loading ref="loading"></uni-loading>
  </view>
</template>

<script>
import config from '@/config'
import { log, changeImageUrl, compileImageParam, dateFormat } from '@/common/utils';
import { mapActions, mapState } from 'vuex';
import UserPageService from '@/services/page/userPageService.js';
import selectAddress from "@/subPackages/components/selectAddress/index";
import MerchantPageService from '@/services/page/merchantPageService'
import RegAgreement from '../components/regAgreement/index.vue'

export default {
  components: { selectAddress, RegAgreement },
  props: {},
  data() {
    return {
      bgColor: null,
      isWeiXinIos: false,
      stepIndex: 0, // 当前步骤
      isread: "",
      action: '',
      upFileUrl: 'shopFile/register',
      adminPageUrl: config.pageUrl.merchant.index,
      ossData: {},
      selectAddressPop: false,
      shopStatus: 0,//店铺状态(默认关闭)
      mvpShopId: '',//店铺用户id
      shopAuthentication: '', //驳回原因
      stepList: [
        {
                    title: '入驻协议'
                }, {
                    title: '基本信息'
                }, {
                    title: '认证信息'
                }, {
                    title: '财务资质'
                }, {
                    title: '店铺信息'
                }, {
                    title: '入驻审核'
                }
      ],
      readData: [{ text: '我已阅读入驻协议', value: '1' }],
      invoiceTypeList: [
        {text: '电子普通发票', value: '1'},
        {text: '增值税专用发票', value: '2'},
        {text: '增值税普通发票', value: '3'},
      ],
      categoryList: null, // 经营类目
      checkAllList: [{ text: '全选', value: '-1' }],
      checkAllVal: "",
      brandList: null, //品牌列表
      shopTypeList: [ //店铺类型
        { text: '店铺', value: '0' },
        { text: '自营', value: '1' }
      ],
      areaInfoList: [], //多级地区数据
      //基本信息
      formData1: {
        companyName: "",//公司名称
        companyAddress: "",//公司地址
        telphone: "",//公司电话
        email: "",//公司邮箱
        staffNum: "",//员工总数
        registeredCapital: ""//注册资金
      },
       //认证信息
      formData2: {
        legalName: "",//法定代表人姓名
        legalCard: "",//法定代表人身份证
        legalCardImg: [],//法人身份证电子版
        creditCode: "",//统一社会信用代码
        areaData: "",//地址编码
        businessLicenseAddress: "",//营业执照详细地址
        dateEstablishment: "",//成立日期
        businessLicenseTime: "",//营业执照有效期
        businessLicenseStartTime: "",//营业执照有效期(开始)
        businessLicenseEndTime: "",//营业执照有效期(结束)
        businessScope: "",//法定经营范围
        businessLicenseImg: [],//营业执照电子版
        trademark: [], //注册商标证书
        businessCertifyImg: [], //经营许可证
        normalCertifyImg: [], //无经营异常及失信证明
        taxEvaluationLevelImg: [], //税务评价等级
        legalCertifyImg: [],//法人授权书
        agentCertifyImg: [],//代理证书
        taxpayer: [],//一般纳税人证明
        businessLicenseProvince: "",//营业执照省份地址
        businessLicenseCity: "",//营业执照省份地址
        businessLicenseDistrict: "",//营业执照省份地址
      },
      // 财务资质信息
      formData3: {
        accountName: "",//银行开户名
        bankAccount: "",//公司银行账号
        bank: "",//开户银行支行名称
        bankDeposit: "",//
        bankDepositAddress: "",//开户银行所在地址
        bankDepositImg: [],//开户银行许可证电子版
        invoiceType: [],//发票类型
        bankDepositProvince: "",//开户行省份地址
        bankDepositCity: "",//开户行省份地址
        bankDepositDistrict: "",//开户行省份地址
        areaData: '', //开户行省份地址
      },
      // 店铺信息
      formData4: {
        shopTitle: "",//店铺名称
        shopDict: "",//
        shopAddress: "",//店铺详细地址
        shopLinkman: "",//店铺联系人
        erpShopCode: "",//外部店铺编码
        categoryIds: [],//经营类目
        shopType: "0",//店铺类型
        depotType: "0",//
        shopTel: '',//联系人电话
        shopImg: [],//店铺logo
        backup: "",//店铺简介
        province: "0",
        city: "",//
        district: "",//
        brandIds: [],//经营品牌
        status: 1,//
        brandStatus: 1,//
        areaData: '',
      },
      // 基本信息验证
      rules1: {
                companyName: {
                    rules: [{ required: true, errorMessage: '不能为空' },
                  {
                    validateFunction:function(rule,value,data,callback){
                      let reg = /^\d{1,}$/
                      if (reg.test(value)) {
                        callback('不能为纯数字')
                      } else {
                        return true
                      }
                    }
                  }]
                },
        companyAddress: {
                    rules: [{ required: true, errorMessage: '不能为空' },
                  {
                    validateFunction:function(rule,value,data,callback){
                      let reg = /^\d{1,}$/
                      if (reg.test(value)) {
                        callback('不能为纯数字')
                      } else {
                        return true
                      }
                    }
                  }]
                },
        telphone: {
                    rules: [{ required: true, errorMessage: '不能为空' },
                  {
                    validateFunction:function(rule,value,data,callback){
                      let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
                      let reg2 = /^0\d{2,3}-?\d{7,8}$/
                      if (!(reg.test(value) || reg2.test(value))) {
                        callback('格式有误')
                      } else {
                        return true
                      }
                    }
                  }]
        },
        email: {
                    rules: [{ required: true, errorMessage: '不能为空' },
          {
            format: 'email',
            errorMessage: '格式有误'
          }]
        },
        staffNum: {
                    rules: [{ required: true, errorMessage: '不能为空' },
          {
            format: 'number',
            errorMessage: '格式有误'
          }]
        },
        registeredCapital: {
                    rules: [{ required: true, errorMessage: '不能为空' },
          {
            format: 'number',
            errorMessage: '格式有误'
          }]
        }
      },
      // 认证信息验证
      rules2: {
        legalName: {
                    rules: [{ required: true, errorMessage: '不能为空' },
                  {
                    validateFunction:function(rule,value,data,callback){
                      let reg = /^\d{1,}$/
                      if (reg.test(value)) {
                        callback('格式有误')
                      } else {
                        return true
                      }
                    }
                  }]
        },
        legalCard: {
                    rules: [{ required: true, errorMessage: '不能为空' }, 
                  { pattern: /^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, errorMessage: '格式有误'}]
        },
        creditCode: {
                    rules: [{ required: true, errorMessage: '不能为空' },
                  {
                    validateFunction:function(rule,value,data,callback){
                      let reg = /^[0-9A-Z]{18}$/
                      if (!reg.test(value)) {
                        callback('格式有误')
                      } else {
                        return true
                      }
                    }
                  }]
        },
        businessLicenseAddress: {
                    rules: [{ required: true, errorMessage: '不能为空' }]
        },
        businessScope: {
                    rules: [{ required: true, errorMessage: '不能为空' }]
        },
      },
      // 财务资质信息验证
      rules3: {
        accountName: {
                    rules: [{ required: true, errorMessage: '不能为空' }]
        },
        bankAccount: {
                    rules: [{ required: true, errorMessage: '不能为空' }, 
                  { pattern: /^\d{16,19}$/, errorMessage: '格式有误'}]
        },
        bank: {
                    rules: [{ required: true, errorMessage: '不能为空' }]
        },
        bankDepositAddress: {
                    rules: [{ required: true, errorMessage: '不能为空' }]
        },
      },
      // 店铺信息验证
      rules4: {
        shopTitle: {
                    rules: [{ required: true, errorMessage: '不能为空' }]
        },
        shopAddress: {
                    rules: [{ required: true, errorMessage: '不能为空' }]
        },
        shopTel: {
                    rules: [{ required: true, errorMessage: '不能为空' }, 
                  { pattern: /^[1][3,4,5,6,7,8,9][0-9]{9}$/, errorMessage: '格式有误'}]
        },
      }

    }
  },
  watch: {
   
  },
  computed: {
    ...mapState('common', {
      userInfo: (state) => state.userInfo,
      updateLogo: (state) => state.updateLogo,
    }),
  },
  created() {
    this.userPageService = this.resolve(UserPageService)
    this.merchantPageService = this.resolve(MerchantPageService)
  },
  onReady() {
    this.$refs['form1'].setRules(this.rules1)
    this.$refs['form2'].setRules(this.rules2)
    this.$refs['form3'].setRules(this.rules3)
    this.$refs['form4'].setRules(this.rules4)
  },
  mounted() {
    this.initData()
  },
  methods: {
    changeImageUrl,
    toPage(url) {
      this.pushUrl(url)
    },
    // 初始化
    async initData() {
      this.$refs.loading.showLoading(true)
      // #ifdef MP-WEIXIN
      if (uni.getSystemInfoSync().platform == 'ios') {
        this.isWeiXinIos = true
      }
      // #endif
      let {colorValue} = await this.getStyleInfo()
      if (colorValue) {
        this.bgColor = colorValue
      }
      if (this.userInfo && this.userInfo.mvpShopId) {
        this.mvpShopId = this.userInfo.mvpShopId
      }
      this.getAreaInfoList()
      this.onTabtion()
      this.getOssUploadInfo()
      this.getCategoryList()
      this.getProductBrandList()
    },
    // 获取oss上传配置信息
    async getOssUploadInfo() {
      let res = await this.userPageService.getOssUploadInfo()
      this.action = res.host
      this.ossData = res
    },
    readChange(e) {
      this.isread = e.detail.value
    },
    // 上一步
    prevStep() {
      if (this.stepIndex == 1) {
        this.isread = ['1']
      }
      if (this.stepIndex > 0) {
        this.stepIndex--
      }
    },
    // 下一步
    nextStep() {
      let step = this.stepIndex
      if (step != 0) {
        this.$refs[`form${step}`].validate().then(res => {
          this.validateFilter(step)
        }).catch(err => {
          console.log('err', err);
        })
      } else {
        if (!this.isread[0]) {
          this.tips('请勾选已阅读入驻协议')
          return
        } else {
          this.stepIndex++
        }
      }
    },
    //店铺信息回显
    async onTabtion() {
      let [success, res] =  await this.merchantPageService.checkUserShopAccount()
      this.$refs.loading.showLoading(false)
      if(success) {
        this.stepIndex = 5
        this.shopStatus = res.shopStatus
        if (res.shopAuthentication) {
          this.shopAuthentication = res.shopAuthentication
        }
        this.activeTab = 6
        this.loading = false
        //基本信息
        this.formData1.companyName = res.shopInvoice.companyName,//公司名称
        this.formData1.companyAddress = res.shopInvoice.companyAddress,//公司地址
        this.formData1.telphone = res.shopInvoice.telphone,//公司电话
        this.formData1.email = res.shopInvoice.email,//公司邮箱
        this.formData1.staffNum = res.shopInvoice.staffNum,//员工总数
        this.formData1.registeredCapital = res.shopInvoice.registeredCapital//注册资金
        //认证信息
        this.formData2.legalName = res.shopInvoice.legalName//法定代表人姓名
        this.formData2.legalCard = res.shopInvoice.legalCard//法定代表人身份证
        this.formData2.legalCardImg = [res.shopInvoice.legalCardImg]//法人身份证电子版
        this.formData2.creditCode = res.shopInvoice.creditCode,//统一社会信用代码
        this.formData2.businessLicenseAddress = res.shopInvoice.businessLicenseAddress,//营业执照详细地址
        this.formData2.dateEstablishment = dateFormat(res.shopInvoice.dateEstablishment, 'yyyy-MM-dd')//成立日期
        let arrayObj = new Array();
        let businessLicenseStartTime = dateFormat(res.shopInvoice.businessLicenseStartTime, 'yyyy-MM-dd')
        let businessLicenseEndTime = dateFormat(res.shopInvoice.businessLicenseEndTime, 'yyyy-MM-dd')
        arrayObj.push( businessLicenseStartTime, businessLicenseEndTime);
        this.formData2.businessLicenseTime = arrayObj;//营业执照有效期
        this.formData2.businessLicenseStartTime = businessLicenseStartTime//营业执照有效期(开始)
        this.formData2.businessLicenseEndTime = businessLicenseEndTime//营业执照有效期(结束)
        this.formData2.businessScope = res.shopInvoice.businessScope//法定经营范围
        this.formData2.businessLicenseImg = [res.shopInvoice.businessLicenseImg]//营业执照电子版
        this.formData2.trademark = [res.shopInvoice.trademark]//注册商标证书
        this.formData2.businessCertifyImg = [res.shopInvoice.businessCertify]//经营许可证
        this.formData2.normalCertifyImg = [res.shopInvoice.normalCertify]//无经营异常及失信证明
        this.formData2.taxEvaluationLevelImg = [res.shopInvoice.taxEvaluationLevel]//税务评价等级
        this.formData2.legalCertifyImg = [res.shopInvoice.legalCertify]//法人授权书
        this.formData2.agentCertifyImg = [res.shopInvoice.agentCertify]//代理证书
        this.formData2.taxpayer = [res.shopInvoice.taxpayer]//一般纳税人证明
        this.formData2.businessLicenseProvince= res.shopInvoice.businessLicenseProvince,//营业执照省份地址
        this.formData2.businessLicenseCity= res.shopInvoice.businessLicenseCity,//营业执照省份地址
        this.formData2.businessLicenseDistrict= res.shopInvoice.businessLicenseDistrict,//营业执照省份地址
        this.formData2.areaData= [res.shopInvoice.businessLicenseProvince, res.shopInvoice.businessLicenseCity, res.shopInvoice.businessLicenseDistrict],//地址编码
        //财物资质信息
        this.formData3.accountName= res.shopInvoice.accountName//银行开户名
        this.formData3.bankAccount= res.shopInvoice.bankAccount//公司银行账号
        this.formData3.bank= res.shopInvoice.bank//开户银行支行名称
        this.formData3.bankDeposit= ""//开户行省份地址
        this.formData3.bankDepositAddress= res.shopInvoice.bankDepositAddress//开户银行所在地址
        this.formData3.bankDepositImg= [res.shopInvoice.bankDepositImg]//开户银行许可证电子版
        let arrType = res.shopInvoice.invoiceType.split(',')
        this.formData3.invoiceType = arrType//发票类型
        this.formData3.bankDepositProvince = res.shopInvoice.bankDepositProvince//开户行省份地址
        this.formData3.bankDepositCity = res.shopInvoice.bankDepositCity//开户行省份地址
        this.formData3.bankDepositDistrict = res.shopInvoice.bankDepositDistrict//开户行省份地址
        this.formData3.areaData = [res.shopInvoice.bankDepositProvince, res.shopInvoice.bankDepositCity, res.shopInvoice.bankDepositDistrict]
        //店铺信息
        this.formData4.shopTitle = res.shopTitle//店铺名称
        this.formData4.shopDict = ""//
        this.formData4.shopAddress = res.shopAddress//店铺详细地址
        this.formData4.shopLinkman = res.shopLinkman//店铺联系人
        this.formData4.erpShopCode = res.erpShopCode//外部店铺编码
        let arrCategoryIds = res.categoryIds.split(',')
        this.formData4.categoryIds = arrCategoryIds.map(item => { return parseInt(item);});//经营类目
        // this.handleCheckedCitiesChange(this.formData4.categoryIds)
        this.formData4.shopType = res.shopType//店铺类型
        this.formData4.depotType = res.depotType//
        this.formData4.shopTel = res.shopTel//联系人电话
        this.formData4.shopImg = [res.shopImg]//店铺logo
        this.formData4.backup = res.backup//店铺简介
        this.formData4.province = res.province
        this.formData4.city = res.city//
        this.formData4.district = res.district//
        let brandIds = res.brandIds.split(',')
        this.formData4.brandIds = brandIds.map(item => { return parseInt(item);});//经营品牌
        this.formData4.status = res.shopStatus//
        this.formData4.brandStatus = 1//
        this.formData4.areaData = [res.province, res.city, res.district]
      } else {
        this.mvpShopId = ''
      }
    },
    // 提交审核
    async submit () {
      let { formData1, formData2, formData3, formData4, merchantPageService } = this
      let catIds = formData4.categoryIds.join()
      let invoiceType = formData3.invoiceType.join()
      let params = {
        'shopTitle': formData4.shopTitle,
        'shopType': formData4.shopType,
        'shopAddress': formData4.shopAddress,
        'shopTel': formData4.shopTel,
        'shopLinkman': formData4.shopLinkman,
        // 'depotType': formData4.depotType,
        'shopInvoice.companyName': formData1.companyName,
        'shopInvoice.businessLicenseProvince': formData2.areaData[0],
        'shopInvoice.businessLicenseCity': formData2.areaData[1],
        'shopInvoice.businessLicenseDistrict': formData2.areaData[2],
        'shopInvoice.bankDepositProvince': formData3.areaData[0],
        'shopInvoice.bankDepositCity': formData3.areaData[1],
        'shopInvoice.bankDepositDistrict': formData3.areaData[2],
        'categoryIds': catIds,
        'province': formData4.areaData[0],
        'city': formData4.areaData[1],
        'district': formData4.areaData[2],
        'shopInvoice.companyAddress': formData1.companyAddress,
        'shopInvoice.telphone' : formData1.telphone,
        'shopInvoice.email' : formData1.email,
        'shopInvoice.staffNum' : formData1.staffNum,
        'shopInvoice.registeredCapital' : formData1.registeredCapital,
        'shopInvoice.legalName' : formData2.legalName,
        'shopInvoice.legalCard' : formData2.legalCard,
        'shopInvoice.legalCardImg' : formData2.legalCardImg[0],
        'shopInvoice.creditCode' : formData2.creditCode,
        'shopInvoice.businessLicenseAddress' : formData2.businessLicenseAddress,
        'shopInvoice.businessLicenseStartTime' :formData2.businessLicenseTime[0],
        'shopInvoice.businessLicenseEndTime' :formData2.businessLicenseTime[1],
        'shopInvoice.dateEstablishment' :formData2.dateEstablishment,
        'shopInvoice.businessScope' : formData2.businessScope,
        'shopInvoice.businessLicenseImg' : formData2.businessLicenseImg[0],
        'shopInvoice.trademark' : formData2.trademark[0], //注册商标证书
        'shopInvoice.businessCertify' : formData2.businessCertifyImg[0], //经营许可证
        'shopInvoice.normalCertify' : formData2.normalCertifyImg[0], //无经营异常及失信证明
        'shopInvoice.taxEvaluationLevel' : formData2.taxEvaluationLevelImg[0], //税务评价等级
        'shopInvoice.legalCertify'  : formData2.legalCertifyImg[0],//法人授权书
        'shopInvoice.agentCertify'  : formData2.agentCertifyImg[0],//代理证书
        'shopInvoice.taxpayer' : formData2.taxpayer[0] || '',//一般纳税人证明
        'shopInvoice.accountName': formData3.accountName,
        'shopInvoice.bankAccount': formData3.bankAccount,
        'shopInvoice.bank': formData3.bank,
        'shopInvoice.bankDeposit' : formData3.bankDeposit,
        'shopInvoice.bankDepositAddress': formData3.bankDepositAddress,
        'shopInvoice.bankDepositImg' : formData3.bankDepositImg[0],
        'shopInvoice.invoiceType': invoiceType,
        // 'shopDict' : formData4.shopDict,
        // 'erpShopCode' : formData4.erpShopCode,
        'shopImg' : formData4.shopImg[0],
        'backup' : formData4.backup,
        'brandIds' : (formData4.brandIds).join(","),
        'status' : formData4.status,
        'brandStatus' : formData4.brandStatus,
        // 'isMemberLevel' : formData4.isMemberLevel,
      }
      if (this.mvpShopId || this.shopStatus == 2) {
        let [success, res] = await merchantPageService.updateShopInfo(params)
        if (success) {
          this.shopStatus = 2
          // this.tips('修改审核提交成功')
          // setTimeout(()=>{ this.pushUrl('/')},3000)
        } else {
          this.tips(res.msg)
        }
      } else {
        let [success, res] = await merchantPageService.addShopInfo(params)
        if (success) {
          this.shopStatus = 2
          // this.tips('审核提交成功')
          // setTimeout(()=>{ this.pushUrl('/')},3000)
        } else {
          this.tips(res.msg)
        }
      }   
    },
    // 特殊表单验证
    validateFilter(step) {
      switch (step) {
        // 基本信息
        case 1:
          
          break;
        // 认证信息
        case 2:
          if (!this.formData2.areaData[2]) {
            this.tips('请选择营业执照省份地址')
            return;
          } 
          if (!this.formData2.businessLicenseImg[0]){
            this.tips('营业执照电子版未上传')
            return;
          }
          if (!this.formData2.businessCertifyImg[0]){
            this.tips('经营许可证未上传')
            return;
          }
          if (!this.formData2.normalCertifyImg[0]){
            this.tips('无经营异常及失信证明未上传')
            return;
          }
          if (!this.formData2.taxEvaluationLevelImg[0]){
            this.tips('税务评价等级未上传')
            return;
          }
          if (!this.formData2.legalCertifyImg[0]){
            this.tips('法人授权书未上传')
            return;
          }
          if (!this.formData2.agentCertifyImg[0]){
            this.tips('代理证书未上传')
            return;
          }
          break;
        // 财务资质
        case 3:
          if (!this.formData3.areaData[2]) {
            this.tips('请选择开户行省份地址')
            return;
          } 
          if (!this.formData3.invoiceType[0]) {
            this.tips('请选择发票类型')
            return;
          } 
          break;
        // 店铺信息
        case 4:
          if (!this.formData4.areaData[2]) {
            this.tips('请选择店铺省份地址')
            return;
          } 
          if (!this.formData4.categoryIds[0]) {
            this.tips('请选择经营类目')
            return;
          } 
          if (!this.formData4.brandIds[0]) {
            this.tips('请选择品牌类型')
            return;
          } 
          this.submit()
          break;
        default:
          break;
      }
      this.stepIndex++
    },
    // 获取经营类目
    async getCategoryList() {
      let [success, data] = await this.merchantPageService.getCategoryList()
      if (success) {
        this.categoryList = data
      }
    },
    // 获取品牌列表
    async getProductBrandList() {
      let [success, data] = await this.merchantPageService.getProductBrandList()
      if (success) {
        this.brandList = data
      }
    },
    // 获取地址列表
    async getAreaInfoList() {
      let data = await this.merchantPageService.getAreaInfoList()
      if (data) {
        this.areaInfoList = data
      }
    },
    // 删除图片
    imgDelete(e) {
      this.formData2[e] = []
    },
    // 身份证上传完成
    legalCardImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.legalCardImg.push(url)
      }
    },
    // 营业执照电子版上传完成
    businessLicenseImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.businessLicenseImg.push(url)
      }
    },
    // 注册商标证书上传完成
    trademarkUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.trademark.push(url)
      }
    },
    // 经营许可证上传完成
    businessCertifyImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.businessCertifyImg.push(url)
      }
    },
    // 无经营异常及失信证明上传完成
    normalCertifyImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.normalCertifyImg.push(url)
      }
    },
    // 税务评价等级上传完成
    taxEvaluationLevelImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.taxEvaluationLevelImg.push(url)
      }
    },
    // 法人授权书上传完成
    legalCertifyImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.legalCertifyImg.push(url)
      }
    },
    // 代理证书上传完成
    agentCertifyImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.agentCertifyImg.push(url)
      }
    },
    // 一般纳税人证明上传完成
    taxpayerUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData2.taxpayer.push(url)
      }
    },

    // 开户银行许可证电子版上传完成
    bankDepositImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData3.bankDepositImg.push(url)
      }
    },
    // 店铺LOGO上传完成
    shopImgUpSuccess(res) {
      let [success, url] = res
      if (success) {
        this.formData4.shopImg.push(url)
      }
    },
    // 地区选择
    onAreachange(e) {
      let data = e.detail.value
      let step = this.stepIndex
      this[`formData${step}`].areaData = [data[0].value, data[1].value, data[2].value]
    },
    // 发票类型选择
    invoiceTypeChange(e) {
      this.formData3.invoiceType = e.detail.value
    },
    // 经营类目选择
    categoryChange(e) {
      this.formData4.categoryIds = e.detail.value
    },
    // 品牌选择
    brandChange(e) {
      this.formData4.brandIds = e.detail.value
    },
    // 店铺类型选择
    shopTypeChange(e) {
      this.formData4.shopType = e.detail.value
    },
    // 全选
    checkAllChange(e) {
      if (e.detail.value[0]) {
        let categoryIds = []
        this.categoryList.forEach((item) => {
          categoryIds.push(item.value)
        })
        this.formData4.categoryIds = categoryIds
      } else {
        this.formData4.categoryIds = []
      }
    }

  },
};
</script>
<style lang="scss">
page{
  height: 100%;
  background: #F3F4F6;
}
.mini {
  position: relative;
  .uni-easyinput{
    width: calc(100% - 80rpx) !important;
  }
  .unit{
    position: absolute;
    top: 14rpx;
    right: 20rpx;
  }
  .uni-error-message{
    right: 50px !important;
  }
}
.label-large{
  .uni-forms-item__label{
    width: 75px !important;
    justify-content: space-between !important;
    .label-text{
      font-size: 12px !important;
    }
  }
  .uni-data-checklist{
    top: 12rpx;
  }
}
.htz-image-upload-Item-box {
  padding: 0 !important;
  .image{
    font-size: 110rpx !important;
  }
}
.htz-image-upload-Item-del{
  top: 4rpx !important;
  right: 0 !important;
}
</style>
<style lang="scss" scoped>
.regbox{
  // height: 100vh;
  .top-box{
    background: #fff;
    margin: 20rpx;
    padding: 20rpx 0;
    border-radius: 24rpx;
  }
  .step-box{
    position: relative;
    background: #fff;
    min-height: 200rpx;
    border-radius: 24rpx;
    margin: 0 20rpx;
    padding: 20rpx;
    .input-text{
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      height: 36px;
      line-height: 36px;
      padding-left: 10px;
      color: #666;
      overflow: hidden;
    }
    .textarea{
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
    .step-title{
      text-align: center;
      margin-bottom: 20rpx;
    }
    .shop-status{
      .status-icon{
        text-align: center;
      }
      .status-msg{
        display: flex;
        justify-content: center;
        height: 80rpx;
        align-items: center;
        color: #666;
      }
    }
    .step-item{
      font-size: 26rpx;
      .read-box{
        display: flex;
        justify-content: center;
        margin-top: 20rpx;
      }
    }
  }
  .bottom-box{
    display: flex;
    background-color: #fff;
    position: fixed;
    z-index: 9;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    align-items: center;
    justify-content: center;
    .bot-btn{
      width: 40%;
      height: 78rpx;
      line-height: 78rpx;
      color: #fff;
      border-radius: 39rpx;
      font-size: 26rpx;
      margin: 0 20rpx;
    }
  }
}
</style>