<template>
|
<view class="store-apply-page">
|
<view class="top-gradient"></view>
|
|
<view class="process-wrap">
|
<view class="process-step" :class="{ active: currentStep === 1 }" @tap="currentStep = 1">
|
<view class="step-dot" :class="{ 'step-dot--done': currentStep > 1 }">
|
<view v-if="currentStep === 1" class="step-dot__inner"></view>
|
<u-icon v-else name="checkmark" color="#ffffff" size="14"></u-icon>
|
</view>
|
<text>门店信息</text>
|
</view>
|
<view class="process-line"></view>
|
<view class="process-step" :class="{ active: currentStep === 2 }" @tap="currentStep = 2">
|
<view class="step-dot" :class="{ 'step-dot--inactive': currentStep !== 2 }">
|
<view v-if="currentStep === 2" class="step-dot__inner"></view>
|
<text v-else class="step-dot__index">2</text>
|
</view>
|
<text>主体资质</text>
|
</view>
|
</view>
|
|
<view v-if="currentStep === 1" class="form-card">
|
<text class="card-title">门店信息</text>
|
<text class="register-no">注册手机号：{{ userInfo.telephone || '' }}</text>
|
|
<view class="form-group">
|
<view class="label-row"><text class="label">门店名称</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.name" placeholder="请输入门店名称" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="form-group select-group">
|
<view class="label-row"><text class="label">所在城市</text><text class="required">*</text></view>
|
<view class="select-row" @click="showAreaPicker = true">
|
<text class="select-text" :class="{ placeholder: !fullAreaName }">{{ fullAreaName || '请选择省市区' }}</text>
|
<u-icon name="arrow-right" size="18" color="#9FA6B2"></u-icon>
|
</view>
|
</view>
|
<u-picker
|
:show="showAreaPicker"
|
v-if="areaList && areaList.length > 0"
|
ref="uPicker"
|
confirmColor="#10B2FA"
|
keyName="text"
|
:columns="areaColumns"
|
@confirm="confirmArea"
|
@change="changeAreaHandler"
|
@cancel="showAreaPicker = false" />
|
<view class="divider"></view>
|
|
<view class="form-group select-group">
|
<view class="label-row"><text class="label">门店地址</text><text class="required">*</text></view>
|
<view class="select-row" @click="chooseAddress">
|
<text class="select-text" :class="{ placeholder: !form.address }">{{ form.address || '请选择地址' }}</text>
|
<u-icon name="arrow-right" size="18" color="#9FA6B2"></u-icon>
|
</view>
|
</view>
|
<view class="divider"></view>
|
|
<view class="form-group">
|
<view class="label-row"><text class="label">联系人</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.linkName" placeholder="请输入联系人姓名" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="form-group phone-group">
|
<view class="label-row"><text class="label">联系人电话</text><text class="required">*</text></view>
|
<view class="input-with-icon">
|
<input class="text-input" type="number" maxlength="11" v-model="form.linkPhone" placeholder="请输入联系人电话" placeholder-style="color: #c1c7d0;" />
|
<view class="clear-icon"></view>
|
</view>
|
</view>
|
<view class="divider"></view>
|
|
<view class="form-group">
|
<view class="label-row"><text class="label">联系人身份证号</text><text class="required">*</text></view>
|
<input class="text-input" type="idcard" maxlength="18" v-model="form.idcard" placeholder="请输入联系人身份证号" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="upload-section">
|
<view class="upload-title-row between-row">
|
<view class="label-row"><text class="label">门店门头照片</text><text class="required">*</text></view>
|
<text class="upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="upload-grid">
|
<view class="upload-box" @click="chooseStoreFrontImage">
|
<image class="upload-icon" src="/static/image/btn_upload@2x.png" mode="widthFix"></image>
|
</view>
|
<view v-for="(item, index) in uploadedImagesStoreFront" :key="index" class="image-box" @click="deleteStoreFrontImage(index)">
|
<image class="preview-image" :src="item.url" mode="aspectFill"></image>
|
<text class="image-mark">删掉</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="upload-section">
|
<view class="upload-title-row between-row">
|
<view class="label-row"><text class="label">门店内部照片</text><text class="required">*</text></view>
|
<text class="upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="upload-grid">
|
<view class="upload-box" @click="chooseIdCardImage">
|
<image class="upload-icon" src="/static/image/btn_upload@2x.png" mode="widthFix"></image>
|
</view>
|
<view v-for="(item, index) in uploadedImagesIdCard" :key="index" class="image-box" @click="deleteIdCardImage(index)">
|
<image class="preview-image" :src="item.url" mode="aspectFill"></image>
|
<text class="image-mark">删掉</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="upload-section last-upload">
|
<view class="upload-title-row between-row">
|
<text class="label">其他材料</text>
|
<text class="upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="upload-grid">
|
<view class="upload-box" @click="choosePermitImage">
|
<image class="upload-icon" src="/static/image/btn_upload@2x.png" mode="widthFix"></image>
|
</view>
|
<view v-for="(item, index) in uploadedImagesPermit" :key="index" class="image-box" @click="deletePermitImage(index)">
|
<image class="preview-image" :src="item.url" mode="aspectFill"></image>
|
<text class="image-mark">删掉</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-else class="form-card">
|
<text class="card-title">主体资质</text>
|
|
<view class="form-group subject-first-group">
|
<view class="label-row"><text class="label">门店类型</text><text class="required">*</text></view>
|
<view class="switch-row type-switch-row">
|
<view class="switch-pill" :class="{ active: form.companyType ===0 }" @tap="form.companyType =0">个人</view>
|
<view class="switch-pill" :class="{ active: form.companyType ===1}" @tap="form.companyType =1">企业</view>
|
</view>
|
</view>
|
|
<template v-if="form.companyType ===0">
|
<view class="form-group compact-group">
|
<view class="label-row"><text class="label">支付宝账号</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.aliAccount" placeholder="请输入个人支付宝账号" placeholder-class="placeholder" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="form-group compact-group">
|
<view class="label-row"><text class="label">支付宝姓名</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.aliName" placeholder="请输入支付宝姓名" placeholder-class="placeholder" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="upload-section subject-upload-section">
|
<view class="upload-title-row">
|
<view class="label-row"><text class="label">身份证正反面</text><text class="required">*</text></view>
|
</view>
|
<view class="upload-grid double-upload-grid">
|
<view class="upload-box id-upload-box" @click="chooseIdCardFront">
|
<image v-if="!form.idcardImg" class="camera-icon" src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
|
<image v-else class="preview-image" :src="idcardImgUrl" mode="aspectFill"></image>
|
<text v-if="!form.idcardImg" class="upload-text">上传人像面</text>
|
</view>
|
<view class="upload-box id-upload-box" @click="chooseIdCardBack">
|
<image v-if="!form.idcardImgBack" class="camera-icon" src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
|
<image v-else class="preview-image" :src="idcardImgBackUrl" mode="aspectFill"></image>
|
<text v-if="!form.idcardImgBack" class="upload-text">上传国徽面</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="upload-section subject-upload-section">
|
<view class="upload-title-row between-row">
|
<view class="label-row"><text class="label">有效劳动合同</text><text class="required">*</text></view>
|
<text class="upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="upload-grid">
|
<view class="upload-box" @click="chooseLaborContractImage">
|
<image class="upload-icon" src="/static/image/btn_upload@2x.png" mode="widthFix"></image>
|
</view>
|
<view v-for="(item, index) in uploadedLaborContractImages" :key="index" class="image-box" @click="deleteLaborContractImage(index)">
|
<image class="preview-image" :src="item.url" mode="aspectFill"></image>
|
<text class="image-mark">删掉</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="upload-section last-upload">
|
<view class="upload-title-row between-row">
|
<view class="label-row"><text class="label">社保缴纳证明</text><text class="required">*</text></view>
|
<text class="upload-tip">最多上传3张照片</text>
|
</view>
|
<view class="upload-grid">
|
<view class="upload-box" @click="chooseSocialSecurityImage">
|
<image class="upload-icon" src="/static/image/btn_upload@2x.png" mode="widthFix"></image>
|
</view>
|
<view v-for="(item, index) in uploadedSocialSecurityImages" :key="index" class="image-box" @click="deleteSocialSecurityImage(index)">
|
<image class="preview-image" :src="item.url" mode="aspectFill"></image>
|
<text class="image-mark">删掉</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<template v-else>
|
<view class="form-group compact-group">
|
<view class="label-row"><text class="label">法人姓名</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.legalPersonName" placeholder="请输入法人姓名" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
<view class="form-group compact-group">
|
<view class="label-row"><text class="label">法人手机号</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.legalPersonPhone" placeholder="请输入法人姓名" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
<view class="form-group compact-group">
|
<view class="label-row"><text class="label">企业支付宝账号</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.aliAccount" placeholder="请输入企业支付宝账号" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="form-group compact-group">
|
<view class="label-row"><text class="label">支付宝姓名</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.aliName" placeholder="请输入支付宝姓名" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="form-group compact-group">
|
<view class="label-row"><text class="label">法人身份证号</text><text class="required">*</text></view>
|
<input class="text-input" v-model="form.legalPersonCard" placeholder="请输入法人身份证号码" placeholder-style="color: #c1c7d0;" />
|
</view>
|
<view class="divider"></view>
|
|
<view class="upload-section subject-upload-section">
|
<view class="upload-title-row">
|
<view class="label-row"><text class="label">法人身份证正反面</text><text class="required">*</text></view>
|
</view>
|
<view class="upload-grid double-upload-grid">
|
<view class="upload-box id-upload-box" @click="chooseLegalPersonCardFront">
|
<image v-if="!form.idcardImg" class="camera-icon" src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
|
<image v-else class="preview-image" :src="idcardImgUrl" mode="aspectFill"></image>
|
<text v-if="!form.idcardImg" class="upload-text">上传人像面</text>
|
</view>
|
<view class="upload-box id-upload-box" @click="chooseLegalPersonCardBack">
|
<image v-if="!form.idcardImgBack" class="camera-icon" src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
|
<image v-else class="preview-image" :src="idcardImgBackUrl" mode="aspectFill"></image>
|
<text v-if="!form.idcardImgBack" class="upload-text">上传国徽面</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="upload-section last-upload">
|
<view class="upload-title-row">
|
<view class="label-row"><text class="label">营业执照</text><text class="required">*</text></view>
|
</view>
|
<view class="upload-grid">
|
<view class="upload-box license-upload-box" @click="chooseBusinessImage">
|
<image v-if="!form.businessImg" class="camera-icon" src="/static/icon/ic_camera@2x.png" mode="widthFix"></image>
|
<image v-else class="preview-image" :src="businessImgUrl" mode="aspectFill"></image>
|
<text v-if="!form.businessImg" class="upload-text">点击上传</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
<view class="agreement-row">
|
<image class="agree-icon" :src="agreed ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="aspectFit" @tap="agreed = !agreed"></image>
|
<view class="agreement-text-wrap">
|
<text class="agreement-text">我已阅读并同意</text>
|
<text class="agreement-link" @click="goToService(5)">《风险承诺》</text>
|
<text class="agreement-text">、</text>
|
<text class="agreement-link" @click="goToService(6)">《行李寄存须知》</text>
|
<text class="agreement-text">及</text>
|
<text class="agreement-link" @click="goToService(7)">《代理点合作协议》</text>
|
</view>
|
</view>
|
</view>
|
|
<view class="bottom-btn-wrap">
|
<template v-if="currentStep === 1">
|
<view class="next-btn" @click="goToStep2">下一步</view>
|
</template>
|
<template v-else>
|
<view class="footer-btn footer-plain-btn" @click="currentStep = 1">上一步</view>
|
<view class="footer-btn footer-primary-btn" @click="submitApply">提交入驻申请</view>
|
</template>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
export default {
|
computed: {
|
...mapState(['userInfo']),
|
fullAreaName() {
|
const arr = [this.form.provinceName, this.form.cityName, this.form.areaName].filter(Boolean)
|
return arr.join('/')
|
}
|
},
|
data() {
|
return {
|
agreed:false,
|
form: {
|
telephone: '',
|
companyType: 0,
|
name: '',
|
provinceName: '',
|
cityName: '',
|
areaName: '',
|
areaId: '',
|
longitude: '',
|
latitude: '',
|
address: '',
|
linkName: '',
|
linkPhone: '',
|
idcard: '',
|
storeFrontImgs: [],
|
storeInteriorImgs: [],
|
otherMaterialImgs: [],
|
idcardImg: '',
|
idcardImgBack: '',
|
laborContractImgs: [],
|
socialSecurityImgs: [],
|
legalPersonCard: '',
|
legalPersonName: '',
|
legalPersonPhone: '',
|
aliAccount: '',
|
aliName: '',
|
businessImg: ''
|
},
|
businessImgUrl:'',
|
idcardImgUrl: '',
|
idcardImgBackUrl: '',
|
previewMode: 'filled',
|
imgPrefix: '',
|
currentStep: 1,
|
showAreaPicker: false,
|
areaList: [],
|
areaColumns: [],
|
uploadedImagesStoreFront: [],
|
uploadedImagesIdCard: [],
|
uploadedImagesBusiness: [],
|
uploadedImagesPermit: [],
|
uploadedLaborContractImages: [],
|
uploadedSocialSecurityImages: [],
|
storeFrontImages: [],
|
idCardImages: [],
|
permitImages: [],
|
laborContractImages: [],
|
socialSecurityImages: []
|
}
|
},
|
onLoad() {
|
this.form.telephone = this.userInfo.telephone || ''
|
this.getAreaList()
|
this.getMyShopData()
|
},
|
methods: {
|
goToStep2() {
|
if (!this.form.name) {
|
uni.showToast({ title: '请输入门店名称', icon: 'none' })
|
return
|
}
|
if (!this.form.areaId) {
|
uni.showToast({ title: '请选择所在城市', icon: 'none' })
|
return
|
}
|
if (!this.form.address) {
|
uni.showToast({ title: '请选择门店地址', icon: 'none' })
|
return
|
}
|
if (!this.form.linkName) {
|
uni.showToast({ title: '请输入联系人', icon: 'none' })
|
return
|
}
|
if (!this.form.linkPhone) {
|
uni.showToast({ title: '请输入联系人电话', icon: 'none' })
|
return
|
}
|
const mobileRegex = /^1\d{10}$/
|
if (!mobileRegex.test(this.form.linkPhone)) {
|
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
return
|
}
|
if (!this.form.idcard) {
|
uni.showToast({ title: '请输入联系人身份证号', icon: 'none' })
|
return
|
}
|
if (!/^\d{18}$/.test(this.form.idcard)) {
|
uni.showToast({ title: '请输入18位身份证号', icon: 'none' })
|
return
|
}
|
if (!this.form.storeFrontImgs || this.form.storeFrontImgs.length === 0) {
|
uni.showToast({ title: '请上传门店门头照片', icon: 'none' })
|
return
|
}
|
if (!this.form.storeInteriorImgs || this.form.storeInteriorImgs.length === 0) {
|
uni.showToast({ title: '请上传门店内部照片', icon: 'none' })
|
return
|
}
|
this.currentStep = 2
|
},
|
goToService(type) {
|
uni.navigateTo({
|
url: '/pages/rich-text/rich-text?type='+type
|
})
|
},
|
async submitApply() {
|
if (this.form.companyType === 0) {
|
if (!this.form.idcardImg) {
|
uni.showToast({ title: '请上传身份证人像面', icon: 'none' })
|
return
|
}
|
if (!this.form.idcardImgBack) {
|
uni.showToast({ title: '请上传身份证国徽面', icon: 'none' })
|
return
|
}
|
if (!this.form.aliAccount) {
|
uni.showToast({ title: '请输入个人支付宝账号', icon: 'none' })
|
return
|
}
|
if (!this.form.aliName) {
|
uni.showToast({ title: '请输入支付宝姓名', icon: 'none' })
|
return
|
}
|
if (!this.form.laborContractImgs || this.form.laborContractImgs.length === 0) {
|
uni.showToast({ title: '请上传劳动合同', icon: 'none' })
|
return
|
}
|
if (!this.form.socialSecurityImgs || this.form.socialSecurityImgs.length === 0) {
|
uni.showToast({ title: '请上传社保缴纳证明', icon: 'none' })
|
return
|
}
|
} else {
|
if (!this.form.legalPersonName) {
|
uni.showToast({ title: '请输入法人姓名', icon: 'none' })
|
return
|
}
|
if (!this.form.legalPersonPhone) {
|
uni.showToast({ title: '请输入法人手机号', icon: 'none' })
|
return
|
}
|
const mobileRegex = /^1\d{10}$/
|
const landlineRegex = /^\d{3,4}-?\d{7,8}$/
|
if (!mobileRegex.test(this.form.legalPersonPhone) && !landlineRegex.test(this.form.legalPersonPhone)) {
|
uni.showToast({ title: '请输入正确的手机号或固定电话', icon: 'none' })
|
return
|
}
|
if (!this.form.aliAccount) {
|
uni.showToast({ title: '请输入企业支付宝账号', icon: 'none' })
|
return
|
}
|
if (!this.form.aliName) {
|
uni.showToast({ title: '请输入支付宝姓名', icon: 'none' })
|
return
|
}
|
if (!this.form.legalPersonCard) {
|
uni.showToast({ title: '请输入法人身份证号', icon: 'none' })
|
return
|
}
|
if (!/^\d{18}$/.test(this.form.legalPersonCard)) {
|
uni.showToast({ title: '请输入18位身份证号', icon: 'none' })
|
return
|
}
|
if (!this.form.idcardImg) {
|
uni.showToast({ title: '请上传法人身份证人像面', icon: 'none' })
|
return
|
}
|
if (!this.form.idcardImgBack) {
|
uni.showToast({ title: '请上传法人身份证国徽面', icon: 'none' })
|
return
|
}
|
if (!this.form.businessImg) {
|
uni.showToast({ title: '请上传营业执照', icon: 'none' })
|
return
|
}
|
}
|
if (!this.agreed) {
|
uni.showToast({ title: '请先阅读并同意协议', icon: 'none' })
|
return
|
}
|
uni.showLoading({ title: '提交中...', mask: true })
|
try {
|
const res = await this.$u.api.applyShop(this.form)
|
uni.hideLoading()
|
if (res.code === 200) {
|
uni.showToast({ title: '提交成功', icon: 'success' })
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}else {
|
uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
|
}
|
} catch (error) {
|
uni.hideLoading()
|
uni.showToast({ title: '提交失败', icon: 'none' })
|
}
|
},
|
async getMyShopData() {
|
try {
|
const res = await this.$u.api.getMyShop()
|
if (res.code === 200 && res.data) {
|
const data = res.data
|
const imgPrefix = data.imgPrefix || ''
|
this.imgPrefix = data.imgPrefix || ''
|
this.form.name = data.name || ''
|
this.form.provinceName = data.provinceName || ''
|
this.form.cityName = data.cityName || ''
|
this.form.areaName = data.areaName || ''
|
this.form.areaId = data.areaId || ''
|
this.form.address = data.address || ''
|
this.form.longitude = data.longitude || ''
|
this.form.latitude = data.latitude || ''
|
this.form.linkName = data.linkName || ''
|
this.form.linkPhone = data.linkPhone || ''
|
this.form.idcard = data.idcard || ''
|
this.form.aliAccount = data.aliAccount || ''
|
this.form.aliName = data.aliName || ''
|
this.form.companyType = data.companyType || 0
|
this.form.telephone = data.telephone || this.userInfo.telephone || ''
|
this.form.legalPersonName = data.legalPersonName || ''
|
this.form.legalPersonPhone = data.legalPersonPhone || ''
|
this.businessImgUrl=data.businessImgUrl||''
|
this.idcardImgUrl=data.idcardImgUrl||''
|
this.idcardImgBackUrl=data.idcardImgBackUrl||''
|
this.qualificationType = data.companyType === 'personal' ? 'personal' : 'company'
|
if (data.storeFrontImgs) {
|
this.storeFrontImages = data.storeFrontImgUrls
|
this.uploadedImagesStoreFront = data.storeFrontImgUrls.map(url => ({ url }))
|
this.form.storeFrontImgs = data.storeFrontImgs
|
}
|
if (data.storeInteriorImgs) {
|
this.idCardImages = data.storeInteriorImgUrls
|
this.uploadedImagesIdCard = data.storeInteriorImgUrls.map(url => ({ url }))
|
this.form.storeInteriorImgs = data.storeInteriorImgs
|
}
|
if (data.otherMaterialImgs) {
|
this.permitImages = data.otherMaterialImgUrls
|
this.uploadedImagesPermit = data.otherMaterialImgUrls.map(url => ({ url }))
|
this.form.otherMaterialImgs = data.otherMaterialImgs
|
}
|
this.form.idcardImg = data.idcardImg || ''
|
this.form.idcardImgBack = data.idcardImgBack || ''
|
if (data.laborContractImgs) {
|
this.laborContractImages = data.laborContractImgUrls
|
this.uploadedLaborContractImages = data.laborContractImgUrls.map(url => ({ url }))
|
this.form.laborContractImgs = data.laborContractImgs
|
}
|
if (data.socialSecurityImgs) {
|
this.socialSecurityImages = data.socialSecurityImgUrls
|
this.uploadedSocialSecurityImages = data.socialSecurityImgUrls.map(url => ({ url }))
|
this.form.socialSecurityImgs = data.socialSecurityImgs
|
}
|
this.form.legalPersonCard = data.legalPersonCard || ''
|
this.form.businessImg = data.businessImg || ''
|
}
|
} catch (error) {
|
console.log('获取店铺信息失败', error)
|
}
|
},
|
getAreaList() {
|
this.$u.api.treeList({
|
type: 0,
|
flag: 1
|
}).then(res => {
|
if (res.code === 200) {
|
this.areaList = res.data
|
this.areaColumns[0] = this.areaList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
this.areaColumns[1] = this.areaList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
this.areaColumns[2] = this.areaList[0].childList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
}
|
})
|
},
|
confirmArea(e) {
|
this.form.areaId = e.value[e.value.length - 1].id
|
this.form.areaName = e.value[0].text + '/' + e.value[1].text + '/' + e.value[2].text
|
this.showAreaPicker = false
|
},
|
chooseAddress() {
|
uni.chooseLocation({
|
success: (res) => {
|
this.form.address = res.address
|
this.form.longitude = res.longitude
|
this.form.latitude = res.latitude
|
}
|
})
|
},
|
changeAreaHandler(e) {
|
const { columnIndex, indexs, picker = this.$refs.uPicker } = e
|
if (columnIndex === 0) {
|
let city = this.areaList[indexs[0]].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
let qu = this.areaList[indexs[0]].childList[0].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
picker.setColumnValues(1, city)
|
picker.setColumnValues(2, qu)
|
} else if (columnIndex === 1) {
|
let qu = this.areaList[indexs[0]].childList[indexs[1]].childList.map(item => {
|
return {
|
id: item.id,
|
text: item.name
|
}
|
})
|
picker.setColumnValues(2, qu)
|
}
|
},
|
async uploadFiles(filePaths, maxCount = 9) {
|
if (!filePaths || filePaths.length === 0) {
|
return []
|
}
|
const limitedPaths = filePaths.slice(0, maxCount)
|
const uploadTasks = limitedPaths.map(filePath => {
|
return new Promise((resolve, reject) => {
|
uni.uploadFile({
|
url: this.$baseUrl + '/web/public/upload',
|
filePath: filePath,
|
name: 'file',
|
formData: {
|
folder: 'shop'
|
},
|
success: (res) => {
|
if (res.statusCode === 200) {
|
const data = JSON.parse(res.data)
|
if (data.code === 200) {
|
resolve(data.data)
|
} else {
|
reject(new Error(data.msg || '上传失败'))
|
}
|
} else {
|
reject(new Error('上传失败'))
|
}
|
},
|
fail: (err) => {
|
reject(err)
|
}
|
})
|
})
|
})
|
try {
|
const results = await Promise.all(uploadTasks)
|
return results
|
} catch (error) {
|
uni.showToast({
|
title: '上传失败',
|
icon: 'none'
|
})
|
throw error
|
}
|
},
|
deleteStoreFrontImage(index) {
|
this.uploadedImagesStoreFront.splice(index, 1)
|
this.storeFrontImages.splice(index, 1)
|
this.form.storeFrontImgs = this.storeFrontImages.map(url => this.getShortPath(url))
|
},
|
async chooseStoreFrontImage() {
|
const maxCount = 3
|
const currentCount = this.storeFrontImages.length
|
const remainingCount = maxCount - currentCount
|
if (remainingCount <= 0) {
|
uni.showToast({
|
title: `最多上传${maxCount}张图片`,
|
icon: 'none'
|
})
|
return
|
}
|
uni.chooseImage({
|
count: remainingCount,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({
|
title: '上传中...',
|
mask: true
|
})
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, maxCount)
|
const fullPaths = uploadResults.map(item => item.url || item.path || item)
|
this.uploadedImagesStoreFront = [...this.uploadedImagesStoreFront, ...fullPaths.map(url => ({ url }))]
|
this.storeFrontImages = [...this.storeFrontImages, ...fullPaths]
|
this.form.storeFrontImgs= [...this.form.storeFrontImgs, ...uploadResults.map(item => item.imgaddr)]
|
uni.hideLoading()
|
uni.showToast({
|
title: '上传成功',
|
icon: 'success'
|
})
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
deleteIdCardImage(index) {
|
this.uploadedImagesIdCard.splice(index, 1)
|
this.idCardImages.splice(index, 1)
|
this.form.storeInteriorImgs = this.idCardImages.map(url => this.getShortPath(url))
|
},
|
async chooseIdCardImage() {
|
const maxCount = 3
|
const currentCount = this.idCardImages.length
|
const remainingCount = maxCount - currentCount
|
if (remainingCount <= 0) {
|
uni.showToast({
|
title: `最多上传${maxCount}张图片`,
|
icon: 'none'
|
})
|
return
|
}
|
uni.chooseImage({
|
count: remainingCount,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({
|
title: '上传中...',
|
mask: true
|
})
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, maxCount)
|
const fullPaths = uploadResults.map(item => item.url || item.path || item)
|
this.uploadedImagesIdCard = [...this.uploadedImagesIdCard, ...fullPaths.map(url => ({ url }))]
|
this.idCardImages = [...this.idCardImages, ...fullPaths]
|
this.form.storeInteriorImgs= [...this.form.storeInteriorImgs, ...uploadResults.map(item => item.imgaddr)]
|
uni.hideLoading()
|
uni.showToast({
|
title: '上传成功',
|
icon: 'success'
|
})
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
deleteBusinessImage(index) {
|
this.uploadedImagesBusiness.splice(index, 1)
|
this.businessImages.splice(index, 1)
|
this.form.businessImg = this.businessImages.map(url => this.getShortPath(url)).join(',')
|
},
|
async chooseBusinessImage() {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({
|
title: '上传中...',
|
mask: true
|
})
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, 1)
|
this.form.businessImg = uploadResults[0].imgaddr
|
this.businessImgUrl = uploadResults[0].url
|
console.log("=======================",this.businessImgUrl)
|
uni.hideLoading()
|
uni.showToast({
|
title: '上传成功',
|
icon: 'success'
|
})
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
deletePermitImage(index) {
|
this.uploadedImagesPermit.splice(index, 1)
|
this.permitImages.splice(index, 1)
|
this.form.otherMaterialImgs = this.permitImages.map(url => this.getShortPath(url))
|
},
|
async choosePermitImage() {
|
const maxCount = 3
|
const currentCount = this.permitImages.length
|
const remainingCount = maxCount - currentCount
|
if (remainingCount <= 0) {
|
uni.showToast({
|
title: `最多上传${maxCount}张图片`,
|
icon: 'none'
|
})
|
return
|
}
|
uni.chooseImage({
|
count: remainingCount,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({
|
title: '上传中...',
|
mask: true
|
})
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, maxCount)
|
const fullPaths = uploadResults.map(item => item.url || item.path || item)
|
this.uploadedImagesPermit = [...this.uploadedImagesPermit, ...fullPaths.map(url => ({ url }))]
|
this.permitImages = [...this.permitImages, ...fullPaths]
|
this.form.otherMaterialImgs= [...this.form.otherMaterialImgs, ...uploadResults.map(item => item.imgaddr)]
|
uni.hideLoading()
|
uni.showToast({
|
title: '上传成功',
|
icon: 'success'
|
})
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
chooseIdCardFront() {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({ title: '上传中...', mask: true })
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, 1)
|
this.form.idcardImg = uploadResults[0].imgaddr || uploadResults[0].path || uploadResults[0]
|
this.idcardImgUrl = uploadResults[0].url || uploadResults[0].path || uploadResults[0]
|
uni.hideLoading()
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
chooseIdCardBack() {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({ title: '上传中...', mask: true })
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, 1)
|
this.form.idcardImgBack = uploadResults[0].imgaddr || uploadResults[0].path || uploadResults[0]
|
this.idcardImgBackUrl = uploadResults[0].url || uploadResults[0].path || uploadResults[0]
|
uni.hideLoading()
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
chooseLegalPersonCardFront() {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({ title: '上传中...', mask: true })
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, 1)
|
this.form.idcardImg = uploadResults[0].imgaddr || uploadResults[0].path || uploadResults[0]
|
this.idcardImgUrl = uploadResults[0].url || uploadResults[0].path || uploadResults[0]
|
uni.hideLoading()
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
chooseLegalPersonCardBack() {
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({ title: '上传中...', mask: true })
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, 1)
|
this.form.idcardImgBack = uploadResults[0].imgaddr || uploadResults[0].path || uploadResults[0]
|
this.idcardImgBackUrl = uploadResults[0].url || uploadResults[0].path || uploadResults[0]
|
uni.hideLoading()
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
deleteLaborContractImage(index) {
|
this.uploadedLaborContractImages.splice(index, 1)
|
this.laborContractImages.splice(index, 1)
|
this.form.laborContractImgs = this.laborContractImages.map(url => this.getShortPath(url))
|
},
|
async chooseLaborContractImage() {
|
const maxCount = 3
|
const currentCount = this.laborContractImages.length
|
const remainingCount = maxCount - currentCount
|
if (remainingCount <= 0) {
|
uni.showToast({ title: `最多上传${maxCount}张图片`, icon: 'none' })
|
return
|
}
|
uni.chooseImage({
|
count: remainingCount,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({ title: '上传中...', mask: true })
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, maxCount)
|
const fullPaths = uploadResults.map(item => item.url || item.path || item)
|
this.uploadedLaborContractImages = [...this.uploadedLaborContractImages, ...fullPaths.map(url => ({ url }))]
|
this.laborContractImages = [...this.laborContractImages, ...fullPaths]
|
this.form.laborContractImgs= [...this.form.laborContractImgs, ...uploadResults.map(item => item.imgaddr)]
|
uni.hideLoading()
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
},
|
deleteSocialSecurityImage(index) {
|
this.uploadedSocialSecurityImages.splice(index, 1)
|
this.socialSecurityImages.splice(index, 1)
|
this.form.socialSecurityImgs = this.socialSecurityImages.map(url => this.getShortPath(url))
|
},
|
getShortPath(url) {
|
if (!url) return ''
|
if (url.startsWith('http')) {
|
return url.replace(this.imgPrefix, '')
|
}
|
return url
|
},
|
getFullPath(url) {
|
if (!url) return ''
|
if (url.startsWith('http')) {
|
return url
|
}
|
return (this.$baseUrl || '') + url
|
},
|
async chooseSocialSecurityImage() {
|
const maxCount = 3
|
const currentCount = this.socialSecurityImages.length
|
const remainingCount = maxCount - currentCount
|
if (remainingCount <= 0) {
|
uni.showToast({ title: `最多上传${maxCount}张图片`, icon: 'none' })
|
return
|
}
|
uni.chooseImage({
|
count: remainingCount,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: async (res) => {
|
const tempFilePaths = res.tempFilePaths
|
uni.showLoading({ title: '上传中...', mask: true })
|
try {
|
const uploadResults = await this.uploadFiles(tempFilePaths, maxCount)
|
const fullPaths = uploadResults.map(item => item.url || item.path || item)
|
this.uploadedSocialSecurityImages = [...this.uploadedSocialSecurityImages, ...fullPaths.map(url => ({ url }))]
|
this.socialSecurityImages = [...this.socialSecurityImages, ...fullPaths]
|
this.form.socialSecurityImgs= [...this.form.socialSecurityImgs, ...uploadResults.map(item => item.imgaddr)]
|
uni.hideLoading()
|
uni.showToast({ title: '上传成功', icon: 'success' })
|
} catch (error) {
|
uni.hideLoading()
|
}
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.store-apply-page {
|
background: #f5fbff;
|
padding: 30rpx;
|
box-sizing: border-box;
|
}
|
|
.top-gradient {
|
position: absolute;
|
left: 0;
|
top: 0;
|
width: 100%;
|
height: 300rpx;
|
background: linear-gradient(180deg, #c6f0ff 0%, #effbff 100%);
|
z-index: 0;
|
}
|
|
.process-wrap,
|
.form-card,
|
.bottom-btn-wrap {
|
position: relative;
|
z-index: 1;
|
}
|
|
.process-wrap {
|
padding: 8rpx 28rpx 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.process-step {
|
width: 130rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
color: #9ca3af;
|
font-size: 30rpx;
|
}
|
|
.process-step.active {
|
color: #222222;
|
}
|
|
.step-dot {
|
width: 50rpx;
|
height: 50rpx;
|
border-radius: 50%;
|
background: #afe4fe;
|
margin-bottom: 14rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
box-sizing: border-box;
|
|
&__inner {
|
width: 26rpx;
|
height: 26rpx;
|
border-radius: 50%;
|
background: #13b2fc;
|
box-sizing: border-box;
|
}
|
|
&__index {
|
font-size: 30rpx;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 1;
|
}
|
|
&--inactive {
|
background: #8C939F;
|
}
|
|
&--done {
|
background: #10B2FA;
|
}
|
}
|
|
.process-line {
|
width: 200rpx;
|
height: 2rpx;
|
margin: 0 30rpx;
|
background-color: #a2e2ff;
|
}
|
|
.preview-pill {
|
min-width: 150rpx;
|
height: 56rpx;
|
padding: 0 18rpx;
|
border-radius: 28rpx;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24rpx;
|
color: #6b7280;
|
box-shadow: 0 2rpx 10rpx rgba(18, 37, 58, 0.03);
|
}
|
|
.preview-pill.active {
|
background: #ebf8ff;
|
color: #18aaf7;
|
box-shadow: inset 0 0 0 2rpx #18aaf7;
|
}
|
|
.form-card {
|
background: #ffffff;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-top: 40rpx;
|
box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.08);
|
}
|
|
.card-title {
|
display: block;
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #222222;
|
}
|
|
.register-no {
|
display: block;
|
margin-top: 20rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #6c717a;
|
}
|
|
.form-group {
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
}
|
|
.subject-first-group {
|
padding-top: 24rpx;
|
padding-bottom: 24rpx;
|
}
|
|
.compact-group {
|
padding: 26rpx 0 22rpx;
|
}
|
|
.label-row {
|
display: flex;
|
align-items: center;
|
}
|
|
.label {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
|
.required {
|
margin-left: 2rpx;
|
font-size: 30rpx;
|
line-height: 1;
|
color: #ff4d4f;
|
}
|
|
.text-input,
|
.select-row {
|
margin-top: 14rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
|
.text-input {
|
width: 100%;
|
background: transparent;
|
}
|
|
.placeholder {
|
font-size: 28rpx;
|
color: #c1c7d0;
|
}
|
|
.select-row,
|
.input-with-icon {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.select-text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
}
|
|
.select-text.placeholder {
|
color: #c1c7d0;
|
}
|
|
.input-with-icon {
|
margin-top: 14rpx;
|
}
|
|
.input-with-icon .text-input {
|
margin-top: 0;
|
flex: 1;
|
}
|
|
.clear-icon {
|
width: 28rpx;
|
height: 28rpx;
|
border-radius: 50%;
|
background: #bfc3cb;
|
position: relative;
|
flex-shrink: 0;
|
}
|
|
.clear-icon::before,
|
.clear-icon::after {
|
content: '';
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
width: 14rpx;
|
height: 2rpx;
|
background: #ffffff;
|
transform-origin: center;
|
}
|
|
.clear-icon::before {
|
transform: translate(-50%, -50%) rotate(45deg);
|
}
|
|
.clear-icon::after {
|
transform: translate(-50%, -50%) rotate(-45deg);
|
}
|
|
.divider {
|
height: 1rpx;
|
background: #e5e5e5;
|
}
|
|
.switch-row {
|
margin-top: 32rpx;
|
display: flex;
|
gap: 20rpx;
|
}
|
|
.type-switch-row {
|
margin-top: 32rpx;
|
}
|
|
.switch-pill {
|
width: 208rpx;
|
height: 72rpx;
|
border-radius: 36rpx;
|
background: #e8e8e8;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 30rpx;
|
font-weight: 600;
|
color: #333333;
|
}
|
|
.switch-pill.active {
|
background: #10B2FA;
|
color: #ffffff;
|
}
|
|
.upload-section {
|
padding-top: 30rpx;
|
}
|
|
.subject-upload-section {
|
padding-top: 30rpx;
|
}
|
|
.last-upload {
|
padding-bottom: 8rpx;
|
}
|
|
.upload-title-row {
|
display: flex;
|
align-items: center;
|
}
|
|
.upload-tip {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #999999;
|
margin-left: 20rpx;
|
}
|
|
.upload-grid {
|
margin-top: 32rpx;
|
display: flex;
|
align-items: flex-start;
|
flex-wrap: wrap;
|
gap: 12rpx;
|
}
|
|
.double-upload-grid {
|
gap: 16rpx;
|
}
|
|
.upload-box,
|
.image-box {
|
width: 144rpx;
|
height: 144rpx;
|
border-radius: 10rpx;
|
overflow: hidden;
|
position: relative;
|
}
|
|
.upload-box {
|
background: #f7f8fa;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.id-upload-box,
|
.license-upload-box {
|
width: 304rpx;
|
height: 196rpx;
|
background: #F7F7F7;
|
border-radius: 16rpx;
|
}
|
|
.camera-icon {
|
width: 48rpx;
|
height: 42rpx;
|
}
|
|
.upload-icon {
|
width: 144rpx;
|
height: 144rpx;
|
background: #d8dde6;
|
border-radius: 6rpx;
|
margin-bottom: 8rpx;
|
}
|
|
.upload-text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
margin-top: 12rpx;
|
}
|
.agreement-row {
|
margin-top: 60rpx;
|
display: flex;
|
align-items: flex-start;
|
}
|
|
.agree-icon {
|
width: 34rpx;
|
height: 34rpx;
|
margin-top: 4rpx;
|
flex-shrink: 0;
|
}
|
|
.agreement-text-wrap {
|
margin-left: 14rpx;
|
flex: 1;
|
font-size: 24rpx;
|
line-height: 1.8;
|
}
|
|
.agreement-text {
|
color: #555555;
|
}
|
|
.agreement-link {
|
color: #2E68C4;
|
}
|
.preview-image {
|
width: 100%;
|
height: 100%;
|
background: #e9eef6;
|
}
|
|
.image-mark {
|
position: absolute;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
height: 40rpx;
|
line-height: 40rpx;
|
text-align: center;
|
font-size: 24rpx;
|
color: #ffffff;
|
background: rgba(0,0,0,0.5);
|
}
|
|
.bottom-btn-wrap {
|
position: relative;
|
z-index: 1;
|
margin-top: 40rpx;
|
display: flex;
|
align-items: center;
|
gap: 16rpx;
|
}
|
|
.next-btn,
|
.footer-btn {
|
height: 88rpx;
|
border-radius: 44rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 32rpx;
|
font-weight: 500;
|
box-sizing: border-box;
|
}
|
|
.next-btn {
|
width: 100%;
|
background: #1faef6;
|
color: #ffffff;
|
}
|
|
.footer-btn {
|
flex: 1;
|
}
|
|
.footer-plain-btn {
|
border: 2rpx solid #61cfff;
|
background: #f5fcff;
|
color: #38b7fb;
|
}
|
|
.footer-primary-btn {
|
background: #1faef6;
|
color: #ffffff;
|
}
|
</style>
|
