1400 lines
52 KiB
Vue
1400 lines
52 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 顶部进度条（红底胶囊三段） -->
|
||
<view class="step-bar">
|
||
<view class="step-pill" :class="{ active: currentTab >= 1 }">填写信息</view>
|
||
<view class="step-pill" :class="{ active: currentTab >= 4 }">提交审核</view>
|
||
<view class="step-pill" :class="{ active: currentTab >= 5 }">入驻成功</view>
|
||
</view>
|
||
|
||
<!-- Tab 切换 -->
|
||
<view class="tab-bar">
|
||
<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">基本信息</view>
|
||
<view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)">资质信息</view>
|
||
<view class="tab-item" :class="{ active: currentTab === 3 }" @click="switchTab(3)">结算信息</view>
|
||
</view>
|
||
|
||
<!-- ============ Tab 1: 基本信息 ============ -->
|
||
<view v-show="currentTab === 1">
|
||
<!-- 文本字段 -->
|
||
<view class="form-card">
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>门店名称</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="store_name" placeholder="需与门牌照名称一致" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>所在地区</view>
|
||
<view class="field-input" @click="openRegion">
|
||
<view class="field-value" :class="{ placeholder: !regionLabel }">
|
||
{{ regionLabel || '请选择省/市/区' }}
|
||
</view>
|
||
<u-icon name="arrow-right" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>详细地址</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="address" placeholder="请输入详细地址" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>商家类目</view>
|
||
<view class="field-input" @click="openClassify">
|
||
<view class="field-value" :class="{ placeholder: !confirmClassify.cate_name }">
|
||
{{ confirmClassify.cate_name || '选择经营品类' }}
|
||
</view>
|
||
<u-icon name="arrow-right" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>营业状态</view>
|
||
<view class="field-input" @click="showBizStatus = true">
|
||
<view class="field-value" :class="{ placeholder: !bizStatusLabel }">
|
||
{{ bizStatusLabel || '选择营业状态' }}
|
||
</view>
|
||
<u-icon name="arrow-right" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>负责人姓名</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="contact_name" placeholder="请输入负责人姓名" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>负责人手机号</view>
|
||
<view class="field-input">
|
||
<input type="number" v-model="contact_phone" placeholder="请输入负责人手机号" maxlength="11" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 店内环境 -->
|
||
<view class="form-card">
|
||
<view class="upload-section">
|
||
<view class="upload-title">
|
||
<text class="star">*</text>店内环境<text class="count">({{ imgList3.length }}/3张)</text>
|
||
</view>
|
||
<u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="2" :maxCount="3" multiple>
|
||
<view class="upload-add">
|
||
<view class="upload-add-icon">+</view>
|
||
<text>{{ imgList3.length }}/3</text>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 门头环境 -->
|
||
<view class="form-card">
|
||
<view class="upload-section">
|
||
<view class="upload-title">
|
||
<text class="star">*</text>门头环境<text class="count">({{ imgList.length }}/3张)</text>
|
||
</view>
|
||
<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" :maxCount="3" multiple>
|
||
<view class="upload-add">
|
||
<view class="upload-add-icon">+</view>
|
||
<text>{{ imgList.length }}/3</text>
|
||
</view>
|
||
</u-upload>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 红色提示框 -->
|
||
<view class="tip-box">
|
||
<view class="tip-icon">!</view>
|
||
<view class="tip-content">
|
||
<view class="tip-title">门店信息要求</view>
|
||
<view class="tip-item">· 门店名称需与门店招牌上的名称一致</view>
|
||
<view class="tip-item">· 门店品类需与门店主要经营范围的分类一致</view>
|
||
<view class="tip-item">· 门店地址需与门店实际经营地址一致</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ============ Tab 2: 资质信息 ============ -->
|
||
<view v-show="currentTab === 2">
|
||
<!-- 营业执照 -->
|
||
<view class="form-card">
|
||
<view class="upload-title">
|
||
<text class="star">*</text>营业执照
|
||
<text class="example-link" style="margin-left:auto" @click="showExample('license')">查看示例</text>
|
||
</view>
|
||
<view class="upload-grid" style="margin-top:12rpx">
|
||
<view v-if="!imgList5.length" class="upload-add" @click="pickQualImage('license')">
|
||
<view class="upload-add-icon">+</view>
|
||
<text>拍摄/上传</text>
|
||
</view>
|
||
<view v-else class="qual-thumb" @click="previewQualImage(imgList5[0].url)">
|
||
<image :src="imgList5[0].url" class="qual-thumb-img" mode="aspectFill" />
|
||
<view class="qual-thumb-del" @click.stop="deletePic3({ index: 0 })">×</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field" style="margin-top:24rpx">
|
||
<view class="field-label"><text class="star">*</text>执照名称</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="license_name" placeholder="请输入营业执照名称" maxlength="50" />
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>统一社会信用代码</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="license_credit_code" placeholder="请输入统一社会信用代码" maxlength="20" />
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>法人代表</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="legal_person" placeholder="请输入法人姓名" />
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>有效期至</view>
|
||
<view class="validity-seg">
|
||
<view class="seg-item" :class="{ active: license_is_forever }"
|
||
@click="setValidity('license_is_forever', true)">永久有效</view>
|
||
<view class="seg-item" :class="{ active: !license_is_forever }"
|
||
@click="setValidity('license_is_forever', false)">截止日期</view>
|
||
</view>
|
||
<view class="field-input" style="margin-top:14rpx" v-if="!license_is_forever"
|
||
@click="openDatePicker('license_valid_until')">
|
||
<view class="field-value" :class="{ placeholder: !license_valid_until }">
|
||
{{ license_valid_until || '请选择截止日期' }}
|
||
</view>
|
||
<u-icon name="arrow-right" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 身份证正反面 -->
|
||
<view class="form-card">
|
||
<view class="upload-title">
|
||
<text class="star">*</text>{{ enterType === 'enterprise' ? '法人身份证' : '身份证' }}
|
||
<text class="example-link" style="margin-left:auto" @click="showExample('idcard')">查看示例</text>
|
||
</view>
|
||
<view class="id-card-row">
|
||
<view class="id-card-cell">
|
||
<view v-if="!idCardFrontList.length" class="upload-add" @click="pickQualImage('idFront')">
|
||
<view class="upload-add-icon">+</view>
|
||
<text>正面（人像面）</text>
|
||
</view>
|
||
<view v-else class="qual-thumb" @click="previewQualImage(idCardFrontList[0].url)">
|
||
<image :src="idCardFrontList[0].url" class="qual-thumb-img" mode="aspectFill" />
|
||
<view class="qual-thumb-del" @click.stop="deleteIdFront({ index: 0 })">×</view>
|
||
</view>
|
||
<text class="id-card-cell-label">正面（人像面）</text>
|
||
</view>
|
||
<view class="id-card-cell">
|
||
<view v-if="!idCardBackList.length" class="upload-add" @click="pickQualImage('idBack')">
|
||
<view class="upload-add-icon">+</view>
|
||
<text>反面（国徽面）</text>
|
||
</view>
|
||
<view v-else class="qual-thumb" @click="previewQualImage(idCardBackList[0].url)">
|
||
<image :src="idCardBackList[0].url" class="qual-thumb-img" mode="aspectFill" />
|
||
<view class="qual-thumb-del" @click.stop="deleteIdBack({ index: 0 })">×</view>
|
||
</view>
|
||
<text class="id-card-cell-label">反面（国徽面）</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field" style="margin-top:24rpx">
|
||
<view class="field-label"><text class="star">*</text>身份证号</view>
|
||
<view class="field-input">
|
||
<input type="idcard" v-model="id_card_no" placeholder="请输入身份证号" maxlength="18" />
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="field-label"><text class="star">*</text>有效期至</view>
|
||
<view class="validity-seg">
|
||
<view class="seg-item" :class="{ active: id_is_forever }"
|
||
@click="setValidity('id_is_forever', true)">永久有效</view>
|
||
<view class="seg-item" :class="{ active: !id_is_forever }"
|
||
@click="setValidity('id_is_forever', false)">截止日期</view>
|
||
</view>
|
||
<view class="field-input" style="margin-top:14rpx" v-if="!id_is_forever"
|
||
@click="openDatePicker('id_valid_until')">
|
||
<view class="field-value" :class="{ placeholder: !id_valid_until }">
|
||
{{ id_valid_until || '请选择截止日期' }}
|
||
</view>
|
||
<u-icon name="arrow-right" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 行业资质 -->
|
||
<view class="form-card">
|
||
<view class="upload-title">
|
||
<text class="star" v-if="enterType === 'enterprise'">*</text>行业资质
|
||
<text class="count" v-if="enterType !== 'enterprise'">（选填）</text>
|
||
<text class="example-link" style="margin-left:auto" @click="showExample('industry')">查看示例</text>
|
||
</view>
|
||
<view class="upload-grid" style="margin-top:12rpx">
|
||
<view v-if="!industryList.length" class="upload-add" @click="pickQualImage('industry')">
|
||
<view class="upload-add-icon">+</view>
|
||
<text>拍摄/上传</text>
|
||
</view>
|
||
<view v-else class="qual-thumb" @click="previewQualImage(industryList[0].url)">
|
||
<image :src="industryList[0].url" class="qual-thumb-img" mode="aspectFill" />
|
||
<view class="qual-thumb-del" @click.stop="deleteIndustry({ index: 0 })">×</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field" style="margin-top:24rpx">
|
||
<view class="field-label">
|
||
<text class="star" v-if="enterType === 'enterprise' || industryList.length">*</text>证书名称
|
||
</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="industry_name" placeholder="如：食品经营许可证" />
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="field-label">
|
||
<text class="star" v-if="enterType === 'enterprise' || industryList.length">*</text>证书编号
|
||
</view>
|
||
<view class="field-input">
|
||
<input type="text" v-model="industry_cert_no" placeholder="请输入证书编号" />
|
||
</view>
|
||
</view>
|
||
<view class="field">
|
||
<view class="field-label">
|
||
<text class="star" v-if="enterType === 'enterprise' || industryList.length">*</text>有效期至
|
||
</view>
|
||
<view class="validity-seg">
|
||
<view class="seg-item" :class="{ active: industry_is_forever }"
|
||
@click="setValidity('industry_is_forever', true)">永久有效</view>
|
||
<view class="seg-item" :class="{ active: !industry_is_forever }"
|
||
@click="setValidity('industry_is_forever', false)">截止日期</view>
|
||
</view>
|
||
<view class="field-input" style="margin-top:14rpx" v-if="!industry_is_forever"
|
||
@click="openDatePicker('industry_valid_until')">
|
||
<view class="field-value" :class="{ placeholder: !industry_valid_until }">
|
||
{{ industry_valid_until || '请选择截止日期' }}
|
||
</view>
|
||
<u-icon name="arrow-right" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 红色提示框 -->
|
||
<view class="tip-box">
|
||
<view class="tip-icon">!</view>
|
||
<view class="tip-content">
|
||
<view class="tip-title">资质要求</view>
|
||
<view class="tip-item">· 请上传最新证件，有效期截止时间应大于15天</view>
|
||
<view class="tip-item">· 请拍摄执照原件、扫描件或加盖公章的复印件，不可摄屏</view>
|
||
<view class="tip-item">· 营业执照上经营场所地址需与门店信息地址一致</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Tab 3: 结算信息 -->
|
||
<view v-show="currentTab === 3">
|
||
<view class="section-title">银行账户信息</view>
|
||
<view class="Msg">
|
||
<view class="row">
|
||
<view class="row_label">银行开户名</view>
|
||
<view class="row_con">
|
||
<input type="text" v-model="account_name" maxlength="50"
|
||
:placeholder="enterType === 'enterprise' ? '请输入银行开户名（建议与企业名称一致）' : '请输入银行开户名'">
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="row_label"><text class="star">*</text>{{ enterType === 'enterprise' ? '公司银行账号' : '银行卡号' }}</view>
|
||
<view class="row_con">
|
||
<input type="number" v-model="bank_card"
|
||
:placeholder="enterType === 'enterprise' ? '请输入对公银行账号' : '请输入银行卡号'">
|
||
</view>
|
||
</view>
|
||
<view class="row" @click="showBankNamePicker = true">
|
||
<view class="row_label"><text class="star">*</text>开户银行名称</view>
|
||
<view class="row_con row_con--select">
|
||
<view class="row_value" :class="{ placeholder: !bank_name }">
|
||
{{ bank_name || '请选择开户银行' }}
|
||
</view>
|
||
<u-icon name="arrow-down" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="row" @click="openBankRegion">
|
||
<view class="row_label"><text class="star">*</text>开户银行所在地</view>
|
||
<view class="row_con row_con--select">
|
||
<view class="row_value" :class="{ placeholder: !bankRegionLabel }">
|
||
{{ bankRegionLabel || '请选择开户银行所在地' }}
|
||
</view>
|
||
<u-icon name="arrow-down" color="#C8C8C8" size="24"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="row_label"><text class="star">*</text>开户银行支行名称</view>
|
||
<view class="row_con" :class="{ nonebor: enterType !== 'enterprise' }">
|
||
<input type="text" v-model="bank_branch" placeholder="请输入完整的支行名称">
|
||
</view>
|
||
</view>
|
||
<view class="row" v-if="enterType === 'enterprise'">
|
||
<view class="row_label"><text class="star">*</text>开户银行联行号</view>
|
||
<view class="row_con nonebor">
|
||
<input type="number" v-model="bank_union_no" maxlength="12" placeholder="请输入12位数字联行号">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="row-tip" v-if="enterType === 'enterprise'">需精确到支行；联行号为银行间清算编号，共12位数字</view>
|
||
<view class="row-tip" v-else>需精确到支行，例如：中国工商银行北京中关村支行</view>
|
||
|
||
<view class="btn-group">
|
||
<view class="prevBtn" @click="currentTab = 2">上一步</view>
|
||
<view class="nextBtn" @click="goPreview">预览信息</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开户银行名称选择弹层 -->
|
||
<view class="popup-mask" v-if="showBankNamePicker" @click.self="showBankNamePicker = false">
|
||
<view class="popup-sheet">
|
||
<view class="popup-header">
|
||
<text class="pop-cancel" @click="showBankNamePicker = false">取消</text>
|
||
<text class="pop-title">选择开户银行</text>
|
||
<text class="pop-confirm" @click="showBankNamePicker = false">确定</text>
|
||
</view>
|
||
<scroll-view class="popup-list" scroll-y style="max-height: 60vh;">
|
||
<view v-for="item in bankNameList" :key="item"
|
||
class="popup-list-item" :class="{ selected: bank_name === item }"
|
||
@click="selectBankName(item)">
|
||
{{ item }}
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 所在地区弹层（多列联动） -->
|
||
<view class="popup-mask" v-if="showRegion" @click.self="showRegion = false">
|
||
<view class="popup-sheet">
|
||
<view class="popup-header">
|
||
<text class="pop-cancel" @click="showRegion = false">取消</text>
|
||
<text class="pop-title">所在地区</text>
|
||
<text class="pop-confirm" @click="confirmRegion">确定</text>
|
||
</view>
|
||
<view class="popup-body" style="height: 50vh;">
|
||
<scroll-view class="popup-col" scroll-y>
|
||
<view v-for="item in pro" :key="item.ad_code"
|
||
class="popup-col-item" :class="{ selected: tempProv.ad_code === item.ad_code }"
|
||
@click="tapProv(item)">
|
||
<text>{{ item.ad_name }}</text>
|
||
<text class="check" v-if="tempProv.ad_code === item.ad_code">✓</text>
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view class="popup-col" scroll-y>
|
||
<view v-for="item in city" :key="item.ad_code"
|
||
class="popup-col-item" :class="{ selected: tempCity.ad_code === item.ad_code }"
|
||
@click="tapCity(item)">
|
||
<text>{{ item.short_name }}</text>
|
||
<text class="check" v-if="tempCity.ad_code === item.ad_code">✓</text>
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view class="popup-col" scroll-y>
|
||
<view v-for="item in buss" :key="item.ad_code"
|
||
class="popup-col-item" :class="{ selected: tempBuss.ad_code === item.ad_code }"
|
||
@click="tapBuss(item)">
|
||
<text>{{ item.short_name }}</text>
|
||
<text class="check" v-if="tempBuss.ad_code === item.ad_code">✓</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 开户银行所在地弹层（三级联动） -->
|
||
<view class="popup-mask" v-if="showBankRegion" @click.self="showBankRegion = false">
|
||
<view class="popup-sheet">
|
||
<view class="popup-header">
|
||
<text class="pop-cancel" @click="showBankRegion = false">取消</text>
|
||
<text class="pop-title">开户银行所在地</text>
|
||
<text class="pop-confirm" @click="confirmBankRegion">确定</text>
|
||
</view>
|
||
<view class="popup-body" style="height: 50vh;">
|
||
<scroll-view class="popup-col" scroll-y>
|
||
<view v-for="item in pro" :key="item.ad_code"
|
||
class="popup-col-item" :class="{ selected: bankTempProv.ad_code === item.ad_code }"
|
||
@click="tapBankProv(item)">
|
||
<text>{{ item.ad_name }}</text>
|
||
<text class="check" v-if="bankTempProv.ad_code === item.ad_code">✓</text>
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view class="popup-col" scroll-y>
|
||
<view v-for="item in bankCity" :key="item.ad_code"
|
||
class="popup-col-item" :class="{ selected: bankTempCity.ad_code === item.ad_code }"
|
||
@click="tapBankCity(item)">
|
||
<text>{{ item.short_name }}</text>
|
||
<text class="check" v-if="bankTempCity.ad_code === item.ad_code">✓</text>
|
||
</view>
|
||
</scroll-view>
|
||
<scroll-view class="popup-col" scroll-y>
|
||
<view v-for="item in bankBuss" :key="item.ad_code"
|
||
class="popup-col-item" :class="{ selected: bankTempBuss.ad_code === item.ad_code }"
|
||
@click="tapBankBuss(item)">
|
||
<text>{{ item.short_name }}</text>
|
||
<text class="check" v-if="bankTempBuss.ad_code === item.ad_code">✓</text>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 类目选择弹层（多选示意 + 搜索框） -->
|
||
<view class="popup-mask" v-if="showClassifyPop" @click.self="showClassifyPop = false">
|
||
<view class="popup-sheet">
|
||
<view class="popup-header">
|
||
<text class="pop-cancel" @click="showClassifyPop = false">取消</text>
|
||
<text class="pop-title">选择类目</text>
|
||
<text class="pop-confirm" @click="confirmClassifyPop">确定</text>
|
||
</view>
|
||
<view class="popup-search">
|
||
<u-icon name="search" color="#B7B7B7" size="28"></u-icon>
|
||
<text>搜索类目</text>
|
||
</view>
|
||
<scroll-view class="popup-list" scroll-y style="max-height: 50vh;">
|
||
<view v-for="item in classify" :key="item.id"
|
||
class="popup-list-item" :class="{ selected: tempClassify.id === item.id }"
|
||
@click="tempClassify = item">
|
||
{{ item.cate_name }}
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 营业状态弹层 -->
|
||
<view class="popup-mask" v-if="showBizStatus" @click.self="showBizStatus = false">
|
||
<view class="popup-sheet">
|
||
<view class="popup-header">
|
||
<text class="pop-cancel" @click="showBizStatus = false">取消</text>
|
||
<text class="pop-title">营业状态</text>
|
||
<text class="pop-confirm" @click="showBizStatus = false">确定</text>
|
||
</view>
|
||
<view class="popup-list">
|
||
<view v-for="opt in bizStatusList" :key="opt.value"
|
||
class="popup-list-item" :class="{ selected: bizStatus === opt.value }"
|
||
@click="selectBizStatus(opt)">
|
||
{{ opt.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部固定按钮 -->
|
||
<view class="bottom-bar" v-if="currentTab === 1">
|
||
<view class="btn-primary" @click="nextTab(2)">下一步</view>
|
||
</view>
|
||
<view class="bottom-bar" v-if="currentTab === 2">
|
||
<view class="btn-secondary" @click="currentTab = 1">上一步</view>
|
||
<view class="btn-primary" @click="nextTab(3)">下一步</view>
|
||
</view>
|
||
|
||
<!-- 日期选择器 -->
|
||
<u-datetime-picker :show="showDatePicker" mode="date" :minDate="dateMin" :maxDate="dateMax"
|
||
@confirm="onDateConfirm" @cancel="showDatePicker = false" @close="showDatePicker = false" />
|
||
|
||
<!-- 操作菜单：拍照 / 相册 -->
|
||
<view class="popup-mask" v-if="showImageActionSheet" @click.self="showImageActionSheet = false">
|
||
<view class="action-sheet">
|
||
<view class="action-item" @click="pickImage('camera')">拍照</view>
|
||
<view class="action-item" @click="pickImage('album')">从相册选择</view>
|
||
<view class="action-item action-cancel" @click="showImageActionSheet = false">取消</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
apiArr
|
||
} from '../../../api/v2local';
|
||
|
||
import { apiArr as MapApi } from '../../../api/area';
|
||
import {
|
||
isPhone,
|
||
picUrl,
|
||
request,
|
||
upload,
|
||
NavgateTo
|
||
} from '../../../utils';
|
||
import { signPrivateView } from '../../../utils/uploadOSS.js';
|
||
export default {
|
||
data() {
|
||
return {
|
||
picUrl,
|
||
currentTab: 1,
|
||
enterType: 'personal',
|
||
area: "",
|
||
confirmCity: "",
|
||
confirmArea: "",
|
||
confirmBusiness: "",
|
||
imgList: [],
|
||
imgList2: [],
|
||
|
||
imgList3: [],
|
||
imgList4: [],
|
||
imgList5: [],
|
||
imgList6: [],
|
||
|
||
// 身份证照片
|
||
idCardFrontList: [],
|
||
idCardFrontPath: [],
|
||
idCardBackList: [],
|
||
idCardBackPath: [],
|
||
|
||
contact_name: "",
|
||
contact_phone: "",
|
||
bank_card: "",
|
||
bank_name: "",
|
||
bank_branch: "",
|
||
account_name: "",
|
||
bank_union_no: "", // 开户银行联行号（12位，企业必填）
|
||
store_name: "",
|
||
address: "",
|
||
|
||
// 开户银行所在地（三级联动）
|
||
showBankRegion: false,
|
||
bankCity: [],
|
||
bankBuss: [],
|
||
bankTempProv: {},
|
||
bankTempCity: {},
|
||
bankTempBuss: {},
|
||
bankConfirmProv: {},
|
||
bankConfirmCity: {},
|
||
bankConfirmBuss: {},
|
||
// 开户银行名称下拉
|
||
showBankNamePicker: false,
|
||
bankNameList: [
|
||
'中国工商银行', '中国农业银行', '中国银行', '中国建设银行',
|
||
'交通银行', '中国邮政储蓄银行', '招商银行', '中信银行',
|
||
'中国光大银行', '华夏银行', '中国民生银行', '广发银行',
|
||
'平安银行', '兴业银行', '浦发银行', '北京银行', '上海银行',
|
||
],
|
||
|
||
// 企业入驻额外字段
|
||
credit_code: "",
|
||
legal_person: "",
|
||
legal_id_card: "",
|
||
|
||
confirmProv: "",
|
||
confirmCity: "",
|
||
confirmBusiness: "",
|
||
confirmClassify: "",
|
||
pro: [],
|
||
show: false,
|
||
city: [],
|
||
show2: false,
|
||
buss: [],
|
||
show3: false,
|
||
classify: [],
|
||
show4: false,
|
||
|
||
itemObj: {},
|
||
agreeProtocol: false,
|
||
|
||
// 新版弹层相关
|
||
showRegion: false,
|
||
showClassifyPop: false,
|
||
showBizStatus: false,
|
||
tempProv: {},
|
||
tempCity: {},
|
||
tempBuss: {},
|
||
tempClassify: {},
|
||
bizStatus: 0, // 1 营业中 2 即将开业 3 休息中
|
||
bizStatusList: [
|
||
{ value: 1, label: '营业中' },
|
||
{ value: 2, label: '即将开业' },
|
||
{ value: 3, label: '休息中' },
|
||
],
|
||
|
||
// === Tab2 资质字段 ===
|
||
// 营业执照
|
||
license_name: '', // 执照名称
|
||
license_credit_code: '', // 统一社会信用代码
|
||
license_legal_person: '', // 法人姓名
|
||
license_valid_until: '', // 有效期（永久 / 具体日期）
|
||
license_is_forever: false, // 是否长期有效
|
||
// 身份证（个体）/ 法人身份证（企业）—— 共用字段
|
||
id_card_no: '', // 身份证号
|
||
id_valid_until: '', // 身份证有效期
|
||
id_is_forever: false,
|
||
// 行业资质（企业必填，个体选填）
|
||
industryList: [], // 显示用 [{ url }]
|
||
industryPath: [], // 提交用 path
|
||
industry_name: '', // 资质名称
|
||
industry_cert_no: '', // 证书编号
|
||
industry_valid_until: '', // 有效期
|
||
industry_is_forever: false,
|
||
|
||
// 当前打开的日期选择器目标字段名
|
||
datePickerKey: '',
|
||
showDatePicker: false,
|
||
dateMin: new Date(2000, 0, 1).getTime(),
|
||
dateMax: new Date(2099, 11, 31).getTime(),
|
||
|
||
// 上传图片：拍照/相册菜单
|
||
showImageActionSheet: false,
|
||
pickTarget: '', // 'license' / 'idFront' / 'idBack' / 'industry'
|
||
|
||
// 复选框样式
|
||
checkBoxOn: 'width:32rpx;height:32rpx;border-radius:50%;background:#FF370B;display:flex;align-items:center;justify-content:center;',
|
||
checkBoxOff: 'width:32rpx;height:32rpx;border-radius:50%;border:2rpx solid #C8C8C8;background:#fff;',
|
||
}
|
||
},
|
||
computed: {
|
||
regionLabel() {
|
||
const a = this.confirmProv && this.confirmProv.ad_name
|
||
const b = this.confirmCity && this.confirmCity.short_name
|
||
const c = this.confirmBusiness && this.confirmBusiness.short_name
|
||
if (!a) return ''
|
||
return [a, b, c].filter(Boolean).join('/')
|
||
},
|
||
bizStatusLabel() {
|
||
const opt = this.bizStatusList.find(o => o.value === this.bizStatus)
|
||
return opt ? opt.label : ''
|
||
},
|
||
bankRegionLabel() {
|
||
const a = this.bankConfirmProv && this.bankConfirmProv.ad_name
|
||
const b = this.bankConfirmCity && this.bankConfirmCity.short_name
|
||
const c = this.bankConfirmBuss && this.bankConfirmBuss.short_name
|
||
if (!a) return ''
|
||
return [a, b, c].filter(Boolean).join('/')
|
||
},
|
||
},
|
||
methods: {
|
||
// ===== 新版弹层交互 =====
|
||
async openRegion() {
|
||
if (!this.pro || !this.pro.length) await this.getPro()
|
||
this.tempProv = this.confirmProv && this.confirmProv.ad_code ? this.confirmProv : {}
|
||
this.tempCity = this.confirmCity && this.confirmCity.ad_code ? this.confirmCity : {}
|
||
this.tempBuss = this.confirmBusiness && this.confirmBusiness.ad_code ? this.confirmBusiness : {}
|
||
if (this.tempProv.ad_code) await this.getCity(this.tempProv.ad_code)
|
||
if (this.tempCity.ad_code) await this.getBuss(this.tempCity.ad_code)
|
||
this.showRegion = true
|
||
},
|
||
async tapProv(item) {
|
||
this.tempProv = item
|
||
this.tempCity = {}
|
||
this.tempBuss = {}
|
||
this.city = []
|
||
this.buss = []
|
||
await this.getCity(item.ad_code)
|
||
},
|
||
async tapCity(item) {
|
||
this.tempCity = item
|
||
this.tempBuss = {}
|
||
this.buss = []
|
||
await this.getBuss(item.ad_code)
|
||
},
|
||
tapBuss(item) {
|
||
this.tempBuss = item
|
||
},
|
||
confirmRegion() {
|
||
if (!this.tempProv.ad_code) {
|
||
uni.showToast({ title: '请选择省', icon: 'none' }); return
|
||
}
|
||
if (!this.tempCity.ad_code) {
|
||
uni.showToast({ title: '请选择市', icon: 'none' }); return
|
||
}
|
||
if (!this.tempBuss.ad_code) {
|
||
uni.showToast({ title: '请选择区', icon: 'none' }); return
|
||
}
|
||
this.confirmProv = this.tempProv
|
||
this.confirmCity = this.tempCity
|
||
this.confirmBusiness = this.tempBuss
|
||
this.showRegion = false
|
||
},
|
||
async openClassify() {
|
||
if (!this.classify || !this.classify.length) await this.getClassify()
|
||
this.tempClassify = this.confirmClassify && this.confirmClassify.id ? this.confirmClassify : {}
|
||
this.showClassifyPop = true
|
||
},
|
||
confirmClassifyPop() {
|
||
if (!this.tempClassify.id) {
|
||
uni.showToast({ title: '请选择类目', icon: 'none' }); return
|
||
}
|
||
this.confirmClassify = this.tempClassify
|
||
this.showClassifyPop = false
|
||
},
|
||
selectBizStatus(opt) {
|
||
this.bizStatus = opt.value
|
||
this.showBizStatus = false
|
||
},
|
||
|
||
// ===== 开户银行所在地三级联动 =====
|
||
async openBankRegion() {
|
||
if (!this.pro || !this.pro.length) await this.getPro()
|
||
this.bankTempProv = this.bankConfirmProv && this.bankConfirmProv.ad_code ? this.bankConfirmProv : {}
|
||
this.bankTempCity = this.bankConfirmCity && this.bankConfirmCity.ad_code ? this.bankConfirmCity : {}
|
||
this.bankTempBuss = this.bankConfirmBuss && this.bankConfirmBuss.ad_code ? this.bankConfirmBuss : {}
|
||
if (this.bankTempProv.ad_code) {
|
||
const r = await request(MapApi.getArea, "POST", { parent_ad_code: this.bankTempProv.ad_code }, {}, false)
|
||
this.bankCity = r.rows
|
||
}
|
||
if (this.bankTempCity.ad_code) {
|
||
const r = await request(MapApi.getArea, "POST", { parent_ad_code: this.bankTempCity.ad_code }, {}, false)
|
||
this.bankBuss = r.rows
|
||
}
|
||
this.showBankRegion = true
|
||
},
|
||
async tapBankProv(item) {
|
||
this.bankTempProv = item
|
||
this.bankTempCity = {}
|
||
this.bankTempBuss = {}
|
||
this.bankBuss = []
|
||
const r = await request(MapApi.getArea, "POST", { parent_ad_code: item.ad_code }, {}, false)
|
||
this.bankCity = r.rows
|
||
},
|
||
async tapBankCity(item) {
|
||
this.bankTempCity = item
|
||
this.bankTempBuss = {}
|
||
const r = await request(MapApi.getArea, "POST", { parent_ad_code: item.ad_code }, {}, false)
|
||
this.bankBuss = r.rows
|
||
},
|
||
tapBankBuss(item) {
|
||
this.bankTempBuss = item
|
||
},
|
||
confirmBankRegion() {
|
||
if (!this.bankTempProv.ad_code) {
|
||
uni.showToast({ title: '请选择省', icon: 'none' }); return
|
||
}
|
||
if (!this.bankTempCity.ad_code) {
|
||
uni.showToast({ title: '请选择市', icon: 'none' }); return
|
||
}
|
||
if (!this.bankTempBuss.ad_code) {
|
||
uni.showToast({ title: '请选择区', icon: 'none' }); return
|
||
}
|
||
this.bankConfirmProv = this.bankTempProv
|
||
this.bankConfirmCity = this.bankTempCity
|
||
this.bankConfirmBuss = this.bankTempBuss
|
||
this.showBankRegion = false
|
||
},
|
||
selectBankName(name) {
|
||
this.bank_name = name
|
||
this.showBankNamePicker = false
|
||
},
|
||
// 结算页 -> 预览/确认页
|
||
goPreview() {
|
||
if (!this.validateTab3()) return
|
||
const itemObj = this.buildSubmitParams()
|
||
NavgateTo('/packages/shopEnter/confirm/index?itemObj=' + encodeURIComponent(JSON.stringify(itemObj)))
|
||
},
|
||
|
||
// ===== Tab2 资质相关 =====
|
||
// 拍照/相册菜单
|
||
pickQualImage(target) {
|
||
this.pickTarget = target
|
||
this.showImageActionSheet = true
|
||
},
|
||
pickImage(source) {
|
||
this.showImageActionSheet = false
|
||
if (source === 'camera') {
|
||
// 打开自定义取景框相机页
|
||
NavgateTo('/packages/shopEnter/camera/index?target=' + this.pickTarget)
|
||
return
|
||
}
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album'],
|
||
success: (res) => {
|
||
const filePath = res.tempFilePaths && res.tempFilePaths[0]
|
||
if (!filePath) return
|
||
this.uploadQualImage(filePath)
|
||
},
|
||
})
|
||
},
|
||
uploadQualImage(filePath, target) {
|
||
const t = target || this.pickTarget
|
||
uni.showLoading({ title: '上传中', mask: true })
|
||
upload(filePath, res => {
|
||
uni.hideLoading()
|
||
const path = res.data.path
|
||
if (t === 'license') {
|
||
this.imgList5 = [{ url: filePath }]
|
||
this.imgList6 = [path]
|
||
this.runOcr('business_license', path)
|
||
} else if (t === 'idFront') {
|
||
this.idCardFrontList = [{ url: filePath }]
|
||
this.idCardFrontPath = [path]
|
||
this.runOcr('id_card', path)
|
||
} else if (t === 'idBack') {
|
||
this.idCardBackList = [{ url: filePath }]
|
||
this.idCardBackPath = [path]
|
||
} else if (t === 'industry') {
|
||
this.industryList = [{ url: filePath }]
|
||
this.industryPath = [path]
|
||
}
|
||
}, 'merchant_private')
|
||
},
|
||
// 调用后端 OCR，自动回填表单字段（未开通 OCR 时静默忽略）
|
||
runOcr(scene, objectKey) {
|
||
const cleanKey = (objectKey || '').replace(/^\/+/, '')
|
||
if (!cleanKey) return
|
||
uni.showLoading({ title: '识别中', mask: true })
|
||
request(apiArr.ocrRecognize, 'POST', { scene, object_key: cleanKey }, {}, false).then(res => {
|
||
uni.hideLoading()
|
||
if (!res) return
|
||
if (scene === 'business_license') {
|
||
if (res.company_name) this.license_name = res.company_name
|
||
if (res.credit_code) this.license_credit_code = res.credit_code
|
||
if (res.legal_person) this.legal_person = res.legal_person
|
||
uni.showToast({ title: '已自动识别执照信息', icon: 'none' })
|
||
} else if (scene === 'id_card') {
|
||
if (res.name) this.legal_person = this.legal_person || res.name
|
||
if (res.id_number) this.id_card_no = res.id_number
|
||
uni.showToast({ title: '已自动识别身份证信息', icon: 'none' })
|
||
}
|
||
}).catch(() => {
|
||
// OCR 未开通或失败：静默，用户手动填写
|
||
uni.hideLoading()
|
||
})
|
||
},
|
||
previewQualImage(url) {
|
||
if (!url) return
|
||
uni.previewImage({ urls: [url] })
|
||
},
|
||
deleteIndustry(e) {
|
||
this.industryList.splice(e.index, 1)
|
||
this.industryPath.splice(e.index, 1)
|
||
},
|
||
|
||
// 日期选择
|
||
openDatePicker(key) {
|
||
this.datePickerKey = key
|
||
this.showDatePicker = true
|
||
},
|
||
onDateConfirm(e) {
|
||
const ts = e.value
|
||
const d = new Date(ts)
|
||
const y = d.getFullYear()
|
||
const m = String(d.getMonth() + 1).padStart(2, '0')
|
||
const day = String(d.getDate()).padStart(2, '0')
|
||
this[this.datePickerKey] = `${y}-${m}-${day}`
|
||
this.showDatePicker = false
|
||
},
|
||
toggleForever(key) {
|
||
this[key] = !this[key]
|
||
// 长期有效时清空具体日期
|
||
if (this[key]) {
|
||
const dateKey = key.replace('_is_forever', '_valid_until')
|
||
this[dateKey] = ''
|
||
}
|
||
},
|
||
// 有效期分段控件：永久有效 / 截止日期
|
||
setValidity(key, isForever) {
|
||
this[key] = isForever
|
||
if (isForever) {
|
||
const dateKey = key.replace('_is_forever', '_valid_until')
|
||
this[dateKey] = ''
|
||
}
|
||
},
|
||
|
||
switchTab(tab) {
|
||
// 点击 Tab 切换时需要校验前面的 Tab
|
||
if (tab > this.currentTab) {
|
||
if (this.currentTab === 1 && !this.validateTab1()) return;
|
||
if (tab === 3 && !this.validateTab2()) return;
|
||
}
|
||
this.currentTab = tab;
|
||
uni.pageScrollTo({ scrollTop: 0, duration: 200 });
|
||
},
|
||
nextTab(tab) {
|
||
if (tab === 2) {
|
||
if (!this.validateTab1()) return;
|
||
}
|
||
if (tab === 3) {
|
||
if (!this.validateTab2()) return;
|
||
}
|
||
this.currentTab = tab;
|
||
uni.pageScrollTo({ scrollTop: 0, duration: 200 });
|
||
},
|
||
validateTab1() {
|
||
// 基本信息校验
|
||
if (!this.store_name) { uni.showToast({ title: '请输入门店名称', icon: 'none' }); return false; }
|
||
if (!this.confirmProv.ad_code) { uni.showToast({ title: '请选择所在地区', icon: 'none' }); return false; }
|
||
if (!this.confirmCity.ad_code) { uni.showToast({ title: '请选择所在地区', icon: 'none' }); return false; }
|
||
if (!this.confirmBusiness.ad_code) { uni.showToast({ title: '请选择所在地区', icon: 'none' }); return false; }
|
||
if (!this.address) { uni.showToast({ title: '请输入详细地址', icon: 'none' }); return false; }
|
||
if (!this.confirmClassify.id) { uni.showToast({ title: '请选择商家类目', icon: 'none' }); return false; }
|
||
if (!this.bizStatus) { uni.showToast({ title: '请选择营业状态', icon: 'none' }); return false; }
|
||
if (!this.contact_name) { uni.showToast({ title: '请输入负责人姓名', icon: 'none' }); return false; }
|
||
if (!this.contact_phone) { uni.showToast({ title: '请输入负责人手机号', icon: 'none' }); return false; }
|
||
if (!isPhone(this.contact_phone)) { uni.showToast({ title: '负责人手机号格式不正确', icon: 'none' }); return false; }
|
||
if (!this.imgList3.length) { uni.showToast({ title: '请上传店内环境照片', icon: 'none' }); return false; }
|
||
if (!this.imgList.length) { uni.showToast({ title: '请上传门头环境照片', icon: 'none' }); return false; }
|
||
return true;
|
||
},
|
||
validateTab2() {
|
||
// 资质信息校验
|
||
// 营业执照
|
||
if (!this.imgList6.length) { uni.showToast({ title: '请上传营业执照', icon: 'none' }); return false; }
|
||
if (!this.license_name) { uni.showToast({ title: '请输入执照名称', icon: 'none' }); return false; }
|
||
if (!this.license_credit_code) { uni.showToast({ title: '请输入统一社会信用代码', icon: 'none' }); return false; }
|
||
if (!/^[0-9A-HJ-NPQRTUWXY]{18}$/.test(this.license_credit_code.toUpperCase())) {
|
||
uni.showToast({ title: '统一社会信用代码格式不正确（18位）', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.legal_person) { uni.showToast({ title: '请输入法人姓名', icon: 'none' }); return false; }
|
||
if (!this.license_is_forever && !this.license_valid_until) {
|
||
uni.showToast({ title: '请选择营业执照有效期', icon: 'none' }); return false;
|
||
}
|
||
// 身份证
|
||
if (!this.idCardFrontPath.length) { uni.showToast({ title: '请上传身份证正面照片', icon: 'none' }); return false; }
|
||
if (!this.idCardBackPath.length) { uni.showToast({ title: '请上传身份证反面照片', icon: 'none' }); return false; }
|
||
if (!this.id_card_no) { uni.showToast({ title: '请输入身份证号', icon: 'none' }); return false; }
|
||
if (!/(^\d{15}$)|(^\d{17}([0-9X])$)/.test(this.id_card_no.toUpperCase())) {
|
||
uni.showToast({ title: '身份证号格式不正确', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.id_is_forever && !this.id_valid_until) {
|
||
uni.showToast({ title: '请选择身份证有效期', icon: 'none' }); return false;
|
||
}
|
||
// 行业资质：企业必填；个体如果传了图就要求三个字段
|
||
const industryRequired = this.enterType === 'enterprise' || this.industryList.length > 0
|
||
if (industryRequired) {
|
||
if (!this.industryPath.length) { uni.showToast({ title: '请上传行业资质', icon: 'none' }); return false; }
|
||
if (!this.industry_name) { uni.showToast({ title: '请输入资质名称', icon: 'none' }); return false; }
|
||
if (!this.industry_cert_no) { uni.showToast({ title: '请输入证书编号', icon: 'none' }); return false; }
|
||
if (!this.industry_is_forever && !this.industry_valid_until) {
|
||
uni.showToast({ title: '请选择行业资质有效期', icon: 'none' }); return false;
|
||
}
|
||
}
|
||
return true;
|
||
},
|
||
validateTab3() {
|
||
// 结算信息校验（个人 / 企业都需要银行要素）
|
||
if (!this.account_name) {
|
||
uni.showToast({ title: '请输入银行开户名', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (this.account_name.length > 50) {
|
||
uni.showToast({ title: '银行开户名不得超过50个字符', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.bank_card) {
|
||
uni.showToast({
|
||
title: this.enterType === 'enterprise' ? '请输入对公银行账号' : '请输入银行卡号',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
if (!/^\d{8,30}$/.test(this.bank_card)) {
|
||
uni.showToast({ title: '银行账号格式不正确（8-30位数字）', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.bank_name) { uni.showToast({ title: '请输入开户银行名称', icon: 'none' }); return false; }
|
||
if (!this.bankConfirmBuss.ad_code) { uni.showToast({ title: '请选择开户银行所在地', icon: 'none' }); return false; }
|
||
if (!this.bank_branch) { uni.showToast({ title: '请输入开户银行支行名称', icon: 'none' }); return false; }
|
||
// 企业（对公账户）必须填写联行号，12位数字
|
||
if (this.enterType === 'enterprise') {
|
||
if (!this.bank_union_no) { uni.showToast({ title: '请输入开户银行联行号', icon: 'none' }); return false; }
|
||
if (!/^\d{12}$/.test(this.bank_union_no)) {
|
||
uni.showToast({ title: '开户银行联行号必须为12位数字', icon: 'none' });
|
||
return false;
|
||
}
|
||
} else if (this.bank_union_no && !/^\d{12}$/.test(this.bank_union_no)) {
|
||
uni.showToast({ title: '开户银行联行号必须为12位数字', icon: 'none' });
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
showExample(type) {
|
||
// 跳转到资质示例页
|
||
NavgateTo('/packages/shopEnter/example/index?type=' + type);
|
||
},
|
||
|
||
// 身份证正面上传（私密 bucket，不能直链回显）
|
||
afterReadIdFront(e) {
|
||
const files = Array.isArray(e.file) ? e.file : [e.file]
|
||
files.forEach(item => {
|
||
upload(item.url, res => {
|
||
// 私密文件：上传 UI 用本地预览，path 单独保存供提交
|
||
this.idCardFrontList.push({ url: item.url })
|
||
this.idCardFrontPath.push(res.data.path)
|
||
}, 'merchant_private')
|
||
})
|
||
},
|
||
deleteIdFront(e) {
|
||
this.idCardFrontList.splice(e.index, 1);
|
||
this.idCardFrontPath.splice(e.index, 1);
|
||
},
|
||
// 身份证反面上传（私密 bucket）
|
||
afterReadIdBack(e) {
|
||
const files = Array.isArray(e.file) ? e.file : [e.file]
|
||
files.forEach(item => {
|
||
upload(item.url, res => {
|
||
this.idCardBackList.push({ url: item.url })
|
||
this.idCardBackPath.push(res.data.path)
|
||
}, 'merchant_private')
|
||
})
|
||
},
|
||
deleteIdBack(e) {
|
||
this.idCardBackList.splice(e.index, 1);
|
||
this.idCardBackPath.splice(e.index, 1);
|
||
},
|
||
|
||
// 根据ad_code解析省市区信息
|
||
parseAdCode(adCode) {
|
||
if (!adCode) return;
|
||
|
||
// 提取省级ad_code（前2位）
|
||
const provinceCode = adCode.toString().substring(0, 2) + '0000';
|
||
// 提取市级ad_code（前4位）
|
||
const cityCode = adCode.toString().substring(0, 4) + '00';
|
||
// 区县级ad_code（完整6位）
|
||
const districtCode = adCode.toString();
|
||
|
||
// 查找省份信息
|
||
const province = this.pro.find(item => item.ad_code == provinceCode);
|
||
if (province) {
|
||
this.confirmProv = province;
|
||
|
||
// 获取对应城市列表并查找城市信息
|
||
this.getCity(provinceCode).then(() => {
|
||
const city = this.city.find(item => item.ad_code == cityCode);
|
||
if (city) {
|
||
this.confirmCity = city;
|
||
|
||
// 获取对应区县列表并查找区县信息
|
||
this.getBuss(cityCode).then(() => {
|
||
const district = this.buss.find(item => item.ad_code == districtCode);
|
||
if (district) {
|
||
this.confirmBusiness = district;
|
||
}
|
||
});
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
// 根据 ad_code 回显开户银行所在地（独立于门店省市区）
|
||
parseBankAdCode(adCode) {
|
||
if (!adCode) return;
|
||
const provinceCode = adCode.toString().substring(0, 2) + '0000';
|
||
const cityCode = adCode.toString().substring(0, 4) + '00';
|
||
const districtCode = adCode.toString();
|
||
const province = this.pro.find(item => item.ad_code == provinceCode);
|
||
if (!province) return;
|
||
this.bankConfirmProv = province;
|
||
request(MapApi.getArea, "POST", { parent_ad_code: provinceCode }, {}, false).then(res => {
|
||
this.bankCity = res.rows;
|
||
const city = this.bankCity.find(item => item.ad_code == cityCode);
|
||
if (!city) return;
|
||
this.bankConfirmCity = city;
|
||
request(MapApi.getArea, "POST", { parent_ad_code: cityCode }, {}, false).then(r2 => {
|
||
this.bankBuss = r2.rows;
|
||
const district = this.bankBuss.find(item => item.ad_code == districtCode);
|
||
if (district) this.bankConfirmBuss = district;
|
||
});
|
||
});
|
||
},
|
||
|
||
afterReadImg(e) {
|
||
e.file.forEach(item => {
|
||
upload(item.url, res => {
|
||
this.imgList.push({ url: this.picUrl + res.data.path })
|
||
this.imgList2.push(res.data.path)
|
||
})
|
||
})
|
||
},
|
||
deletePic(e) {
|
||
this.imgList.splice(e.index, 1);
|
||
this.imgList2.splice(e.index, 1);
|
||
},
|
||
|
||
afterReadImg2(e) {
|
||
e.file.forEach(item => {
|
||
upload(item.url, res => {
|
||
this.imgList3.push({ url: this.picUrl + res.data.path })
|
||
this.imgList4.push(res.data.path)
|
||
})
|
||
})
|
||
},
|
||
afterReadImg3(e) {
|
||
// 营业执照（私密 bucket）
|
||
const files = Array.isArray(e.file) ? e.file : [e.file]
|
||
files.forEach(item => {
|
||
upload(item.url, res => {
|
||
this.imgList5.push({ url: item.url })
|
||
this.imgList6.push(res.data.path)
|
||
}, 'merchant_private')
|
||
})
|
||
},
|
||
deletePic2(e) {
|
||
this.imgList3.splice(e.index, 1);
|
||
this.imgList4.splice(e.index, 1);
|
||
},
|
||
deletePic3(e) {
|
||
this.imgList5.splice(e.index, 1);
|
||
this.imgList6.splice(e.index, 1);
|
||
},
|
||
viewProtocol() {
|
||
// 查看商家入驻协议
|
||
uni.showModal({
|
||
title: '商家入驻协议',
|
||
content: '本协议是您与平台之间关于商家入驻服务的法律协议。入驻后您需遵守平台规则，按时提供商品或服务，保证信息真实有效。平台有权对违规商家进行处罚。',
|
||
showCancel: false,
|
||
confirmText: '我知道了'
|
||
});
|
||
},
|
||
// 给私密 bucket 中的多张图批量签名 URL，写到目标 fileList
|
||
async signPrivatePaths(paths, listKey) {
|
||
if (!paths || !paths.length) {
|
||
this[listKey] = []
|
||
return
|
||
}
|
||
const result = []
|
||
for (const p of paths) {
|
||
try {
|
||
const r = await signPrivateView(p)
|
||
result.push({ url: r.url })
|
||
} catch (e) {
|
||
console.error('签发私密 URL 失败:', p, e)
|
||
result.push({ url: '' })
|
||
}
|
||
}
|
||
this[listKey] = result
|
||
},
|
||
// 汇总所有表单字段为提交参数 + 预览展示用的附加字段
|
||
buildSubmitParams() {
|
||
let that = this
|
||
let interior_photo = that.imgList4.join(",")
|
||
let facade_photo = that.imgList2.join(",")
|
||
let license_photo = that.imgList6.join(",")
|
||
let id_card_front = that.idCardFrontPath.join(",")
|
||
let id_card_back = that.idCardBackPath.join(",")
|
||
let industry_photo = that.industryPath.join(",")
|
||
|
||
return {
|
||
enter_type: that.enterType === 'enterprise' ? 2 : 1,
|
||
contact_name: that.contact_name,
|
||
phone: that.contact_phone,
|
||
merchant_name: that.store_name,
|
||
address: that.address,
|
||
ad_code: that.confirmBusiness.ad_code,
|
||
merchant_cate_id: that.confirmClassify.id,
|
||
business_status: that.bizStatus,
|
||
facade_photo,
|
||
interior_photo,
|
||
// 资质信息 —— 营业执照
|
||
license_photo,
|
||
license_name: that.license_name,
|
||
credit_code: that.license_credit_code,
|
||
legal_person: that.legal_person,
|
||
license_valid_until: that.license_is_forever ? '' : that.license_valid_until,
|
||
license_is_forever: that.license_is_forever ? 1 : 2,
|
||
// 资质信息 —— 法人/经营者身份证
|
||
id_card_front,
|
||
id_card_back,
|
||
id_card_no: that.id_card_no,
|
||
legal_id_card: that.id_card_no, // 法人身份证号与证件号一致
|
||
id_valid_until: that.id_is_forever ? '' : that.id_valid_until,
|
||
id_is_forever: that.id_is_forever ? 1 : 2,
|
||
// 资质信息 —— 行业资质
|
||
industry_photo,
|
||
industry_name: that.industry_name,
|
||
industry_cert_no: that.industry_cert_no,
|
||
industry_valid_until: that.industry_is_forever ? '' : that.industry_valid_until,
|
||
industry_is_forever: that.industry_is_forever ? 1 : 2,
|
||
// 结算信息
|
||
account_name: that.account_name,
|
||
bank_card: that.bank_card,
|
||
bank_name: that.bank_name,
|
||
bank_branch: that.bank_branch,
|
||
bank_area_code: that.bankConfirmBuss.ad_code,
|
||
bank_union_no: that.bank_union_no,
|
||
account_type: that.enterType === 'enterprise' ? 2 : 1,
|
||
// 以下为预览/回显展示用（后端忽略未知字段）
|
||
_region_label: that.regionLabel,
|
||
_cate_name: that.confirmClassify.cate_name || '',
|
||
_biz_status_label: that.bizStatusLabel,
|
||
_bank_region_label: that.bankRegionLabel,
|
||
}
|
||
},
|
||
submit() {
|
||
let that = this
|
||
if (!that.validateTab3()) return;
|
||
const params = that.buildSubmitParams()
|
||
|
||
request(apiArr.createStore, "POST", params).then(res => {
|
||
// 审核页仅需少量字段；用 reLaunch 清空页面栈，避免返回造成二次提交
|
||
const auditItem = {
|
||
status: 1,
|
||
create_time: new Date().toLocaleString('sv-SE').replace('T', ' '),
|
||
handle_time: '',
|
||
remark: ''
|
||
}
|
||
uni.reLaunch({
|
||
url: "/packages/shopEnter/auditStatus/index?itemObj=" + encodeURIComponent(JSON.stringify(auditItem))
|
||
})
|
||
}).catch(res => {
|
||
const msg = res && res.message ? res.message : '提交失败，请稍后重试'
|
||
if (msg.includes("agent_nil")) {
|
||
uni.showModal({
|
||
title: '提交失败',
|
||
content: '未找到对应的代理商信息，请联系平台',
|
||
showCancel: false
|
||
})
|
||
return
|
||
}
|
||
// 其余后端校验错误统一弹窗，避免被吞
|
||
uni.showModal({
|
||
title: '提交失败',
|
||
content: msg,
|
||
showCancel: false
|
||
})
|
||
})
|
||
},
|
||
|
||
// 省市区
|
||
getPro() {
|
||
return request(MapApi.getArea, "POST", {}, {}, false).then(res => {
|
||
this.pro = res.rows
|
||
})
|
||
},
|
||
getCity(e) {
|
||
return request(MapApi.getArea, "POST", {
|
||
parent_ad_code: e
|
||
}, {}, false).then(res => {
|
||
this.city = res.rows
|
||
})
|
||
},
|
||
getBuss(e) {
|
||
return request(MapApi.getArea, "POST", {
|
||
parent_ad_code: e
|
||
}, {}, false).then(res => {
|
||
this.buss = res.rows
|
||
})
|
||
},
|
||
getClassify() {
|
||
const params = {
|
||
is_shop: 1,
|
||
}
|
||
return request(apiArr.getMerChantCateList, "POST", params, {}, false).then(res => {
|
||
this.classify = res.rows
|
||
})
|
||
},
|
||
|
||
// 编辑回显：把已有门店数据填充到表单
|
||
fillEditData(item) {
|
||
this.itemObj = item
|
||
this.store_name = item.merchant_name || ''
|
||
this.address = item.address || ''
|
||
this.contact_name = item.contact_name || ''
|
||
this.contact_phone = item.phone || ''
|
||
this.confirmClassify = this.classify.find(c => c.id == item.merchant_cate_id) || ''
|
||
this.bank_card = item.bank_card || ''
|
||
this.bank_name = item.bank_name || ''
|
||
this.bank_branch = item.bank_branch || ''
|
||
this.account_name = item.account_name || ''
|
||
this.bank_union_no = item.bank_union_no || ''
|
||
// 资质字段回显
|
||
this.license_name = item.license_name || ''
|
||
this.license_credit_code = item.credit_code || ''
|
||
this.legal_person = item.legal_person || ''
|
||
this.license_valid_until = item.license_valid_until || ''
|
||
this.license_is_forever = item.license_is_forever === 1
|
||
this.id_card_no = item.id_card_no || item.legal_id_card || ''
|
||
this.id_valid_until = item.id_valid_until || ''
|
||
this.id_is_forever = item.id_is_forever === 1
|
||
this.industry_name = item.industry_name || ''
|
||
this.industry_cert_no = item.industry_cert_no || ''
|
||
this.industry_valid_until = item.industry_valid_until || ''
|
||
this.industry_is_forever = item.industry_is_forever === 1
|
||
|
||
// 入驻类型回显
|
||
if (item.enter_type === 2) {
|
||
this.enterType = 'enterprise'
|
||
}
|
||
// 营业状态回显
|
||
if (item.business_status) {
|
||
this.bizStatus = item.business_status
|
||
}
|
||
|
||
// 省市区 / 开户银行所在地回显
|
||
if (item.ad_code) this.parseAdCode(item.ad_code)
|
||
if (item.bank_area_code) this.parseBankAdCode(item.bank_area_code)
|
||
|
||
// 门头 / 店内：公开 bucket
|
||
this.imgList = item.facade_photo ? item.facade_photo.split(",").map(p => ({ url: this.picUrl + p })) : []
|
||
this.imgList2 = item.facade_photo ? item.facade_photo.split(",") : []
|
||
this.imgList3 = item.interior_photo ? item.interior_photo.split(",").map(p => ({ url: this.picUrl + p })) : []
|
||
this.imgList4 = item.interior_photo ? item.interior_photo.split(",") : []
|
||
|
||
// 营业执照、身份证、行业资质 —— 私密 bucket，需要签名 URL 才能回显
|
||
this.imgList6 = item.license_photo ? item.license_photo.split(",").filter(Boolean) : []
|
||
this.idCardFrontPath = item.id_card_front ? item.id_card_front.split(",").filter(Boolean) : []
|
||
this.idCardBackPath = item.id_card_back ? item.id_card_back.split(",").filter(Boolean) : []
|
||
this.industryPath = item.industry_photo ? item.industry_photo.split(",").filter(Boolean) : []
|
||
this.signPrivatePaths(this.imgList6, 'imgList5')
|
||
this.signPrivatePaths(this.idCardFrontPath, 'idCardFrontList')
|
||
this.signPrivatePaths(this.idCardBackPath, 'idCardBackList')
|
||
this.signPrivatePaths(this.industryPath, 'industryList')
|
||
},
|
||
|
||
},
|
||
onLoad(options) {
|
||
// 获取入驻类型
|
||
if (options.enterType) {
|
||
this.enterType = options.enterType;
|
||
}
|
||
|
||
// 监听自定义相机页回传的拍摄结果
|
||
this._onCapture = ({ target, filePath }) => {
|
||
if (!filePath) return
|
||
this.pickTarget = target
|
||
this.uploadQualImage(filePath, target)
|
||
}
|
||
uni.$on('shopEnter:capture', this._onCapture)
|
||
|
||
// 读取编辑数据：优先本地存储中转（edit=1），兼容旧的 URL itemObj 传参
|
||
let editData = null
|
||
if (options.edit) {
|
||
try {
|
||
editData = uni.getStorageSync('shopEnterEditData') || null
|
||
uni.removeStorageSync('shopEnterEditData')
|
||
} catch (e) {
|
||
console.error('读取编辑数据失败:', e)
|
||
}
|
||
} else if (options.itemObj) {
|
||
try {
|
||
editData = JSON.parse(decodeURIComponent(options.itemObj))
|
||
} catch (e1) {
|
||
try { editData = JSON.parse(options.itemObj) } catch (e2) {
|
||
console.error('解析 itemObj 失败:', e2)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 先执行数据获取方法
|
||
Promise.all([this.getPro(), this.getClassify()]).then(() => {
|
||
// 数据获取完成后再进行赋值操作（编辑回显）
|
||
if (editData) {
|
||
try {
|
||
this.fillEditData(editData)
|
||
} catch (e) {
|
||
console.error('编辑回显失败:', e)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
onUnload() {
|
||
if (this._onCapture) {
|
||
uni.$off('shopEnter:capture', this._onCapture)
|
||
this._onCapture = null
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import url("./index.css");
|
||
</style>
|