915 lines
38 KiB
Vue
915 lines
38 KiB
Vue
<!-- 选择商户以及进件渠道 -->
|
||
<template>
|
||
<div class="gyq_container">
|
||
<div class="gyq_content" ref="containerRef">
|
||
<div class="row">
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="250px" label-position="right">
|
||
<el-form-item label="选择商户类型" prop="merchantBaseInfo.userType">
|
||
<el-radio-group v-model="form.merchantBaseInfo.userType">
|
||
<el-radio label="个体商户" value="0"></el-radio>
|
||
<el-radio label="企业商户" value="1"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<div class="title_row">
|
||
<div class="t">
|
||
<el-text size="large" type="primary">商户基础信息</el-text>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="企业类型" v-if="form.merchantBaseInfo.userType == '1'">
|
||
<el-radio-group v-model="form.merchantBaseInfo.companyChildType">
|
||
<el-radio label="普通企业" value="1"></el-radio>
|
||
<el-radio label="事业单位" value="2"></el-radio>
|
||
<el-radio label="政府机关" value="3"></el-radio>
|
||
<el-radio label="社会组织" value="4"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="商户简称" prop="merchantBaseInfo.shortName">
|
||
<el-input v-model.trim="form.merchantBaseInfo.shortName" placeholder="请输入商户简称"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="行业类别码" prop="merchantBaseInfo.mccCode">
|
||
<selectCategory v-model="form.merchantBaseInfo.mccCode" />
|
||
</el-form-item>
|
||
<el-form-item label="支付宝账号" prop="merchantBaseInfo.alipayAccount">
|
||
<el-input v-model.trim="form.merchantBaseInfo.alipayAccount" placeholder="请输入支付宝账号"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人类型">
|
||
<el-radio-group v-model="form.merchantBaseInfo.contactPersonType">
|
||
<el-radio label="经营者/法定代表人" :value="'LEGAL'"></el-radio>
|
||
<el-radio label="经办人" :value="'SUPER'"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="证件类型">
|
||
<el-radio-group v-model="form.merchantBaseInfo.certType">
|
||
<el-radio label="身份证" value="0"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="联系人身份证号" prop="merchantBaseInfo.contactPersonId">
|
||
<el-input v-model.trim="form.merchantBaseInfo.contactPersonId" placeholder="请输入联系人身份证号"
|
||
style="width: 300px;" v-loading="contactIdCardFrontPicUploadLoading"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人证件有效期开始日期" prop="merchantBaseInfo.contactPersonIdStartDate"
|
||
v-loading="contactIdCardBackPicUploadLoading">
|
||
<el-date-picker v-model="form.merchantBaseInfo.contactPersonIdStartDate" type="date" placeholder="选择日期"
|
||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||
</el-form-item>
|
||
<el-form-item label="联系人证件有效期结束日期" prop="merchantBaseInfo.contactPersonIdEndDate"
|
||
v-loading="contactIdCardBackPicUploadLoading">
|
||
<div class="center">
|
||
<el-date-picker v-model="form.merchantBaseInfo.contactPersonIdEndDate" type="date" placeholder="选择日期"
|
||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||
<el-checkbox
|
||
@change="e => e ? form.merchantBaseInfo.contactPersonIdEndDate = longTime : form.merchantBaseInfo.contactPersonIdEndDate = ''">长期有效</el-checkbox>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="联系人身份证正面照片" prop="merchantBaseInfo.contactIdCardFrontPic.url">
|
||
<div class="column">
|
||
<single-image-upload :maxFileSize="2" v-model="form.merchantBaseInfo.contactIdCardFrontPic.url"
|
||
@on-success="contactIdCardFrontPicUpload" />
|
||
<div class="tips">国徽面为正面 (上传图片自动识别 有效期)</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="联系人身份证反面照片" prop="merchantBaseInfo.contactIdCardBackPic.url">
|
||
<div class="column">
|
||
<single-image-upload :maxFileSize="2" v-model="form.merchantBaseInfo.contactIdCardBackPic.url"
|
||
@on-success="contactIdCardBackPicUpload" />
|
||
<div class="tips">人像面为反面 (上传图片自动识别 身份证名称 身份证号)</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="联系人手机号" prop="merchantBaseInfo.contactPhone">
|
||
<el-input v-model.trim="form.merchantBaseInfo.contactPhone" placeholder="请输入联系人手机号"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人地址" prop="merchantBaseInfo.contactAddr">
|
||
<el-input v-model.trim="form.merchantBaseInfo.contactAddr" placeholder="请输入联系人地址"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人电子邮箱" prop="merchantBaseInfo.contactEmail">
|
||
<el-input v-model.trim="form.merchantBaseInfo.contactEmail" placeholder="请输入联系人电子邮箱"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<div class="title_row">
|
||
<div class="t">
|
||
<el-text size="large" type="primary">法人信息</el-text>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="身份证手持图片" prop="legalPersonInfo.idCardHandPic.url">
|
||
<single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardHandPic.url" />
|
||
</el-form-item>
|
||
<el-form-item label="身份证正面图片" prop="legalPersonInfo.idCardFrontPic.url">
|
||
<div class="column">
|
||
<single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardFrontPic.url"
|
||
@on-success="idCardFrontPicSuccess" />
|
||
<div class="tips">国徽面为正面 (上传图片自动识别 有效期)</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="身份证反面图片" prop="legalPersonInfo.idCardBackPic.url">
|
||
<div class="column">
|
||
<single-image-upload :maxFileSize="2" v-model="form.legalPersonInfo.idCardBackPic.url"
|
||
@on-success="idCardBackPicSuccess" />
|
||
<div class="tips">人像面为反面 (上传图片自动识别 身份证名称 身份证号)</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人姓名" prop="legalPersonInfo.legalPersonName" v-loading="idCardFrontPicSuccessLoading">
|
||
<el-input v-model.trim="form.legalPersonInfo.legalPersonName" placeholder="请输入法定代表人姓名"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人身份证号" prop="legalPersonInfo.legalPersonId" v-loading="idCardFrontPicSuccessLoading">
|
||
<el-input v-model.trim="form.legalPersonInfo.legalPersonId" placeholder="请输入法定代表人身份证号"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人身份证开始日期" prop="legalPersonInfo.legalIdPersonStartDate"
|
||
v-loading="idCardBackPicSuccessLoading">
|
||
<el-date-picker v-model="form.legalPersonInfo.legalIdPersonStartDate" type="date" placeholder="选择日期"
|
||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人身份证结束日期" prop="legalPersonInfo.legalPersonIdEndDate"
|
||
v-loading="idCardBackPicSuccessLoading">
|
||
<div class="center">
|
||
<el-date-picker v-model="form.legalPersonInfo.legalPersonIdEndDate" type="date" placeholder="选择日期"
|
||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||
<el-checkbox
|
||
@change="e => e ? form.legalPersonInfo.legalPersonIdEndDate = longTime : form.legalPersonInfo.legalPersonIdEndDate = ''">长期有效</el-checkbox>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人手机号" prop="legalPersonInfo.legalPersonPhone">
|
||
<el-input v-model.trim="form.legalPersonInfo.legalPersonPhone" placeholder="请输入法定代表人手机号"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人电子邮箱" prop="legalPersonInfo.legalPersonEmail">
|
||
<el-input v-model.trim="form.legalPersonInfo.legalPersonEmail" placeholder="请输入法定代表人电子邮箱"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人性别" prop="legalPersonInfo.legalGender">
|
||
<el-radio-group v-model="form.legalPersonInfo.legalGender">
|
||
<el-radio label="男" :value="'0'"></el-radio>
|
||
<el-radio label="女" :value="'1'"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="法定代表人联系地址" prop="legalPersonInfo.legalAddress">
|
||
<el-input v-model.trim="form.legalPersonInfo.legalAddress" placeholder="请输入法定代表人联系地址"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<div class="title_row">
|
||
<div class="t">
|
||
<el-text size="large" type="primary">营业执照信息</el-text>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="营业执照全称" prop="businessLicenceInfo.licenceName">
|
||
<el-input v-model.trim="form.businessLicenceInfo.licenceName" placeholder="请输入营业执照全称"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="营业执照注册号" prop="businessLicenceInfo.licenceNo" v-loading="licensePicSuccessLoading">
|
||
<el-input v-model.trim="form.businessLicenceInfo.licenceNo" placeholder="请输入营业执照注册号"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="营业执照有效期开始日期" prop="businessLicenceInfo.licenceStartDate">
|
||
<el-date-picker v-model="form.businessLicenceInfo.licenceStartDate" type="date" placeholder="选择日期"
|
||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||
</el-form-item>
|
||
<el-form-item label="营业执照有效期结束日期" prop="businessLicenceInfo.licenceEndDate">
|
||
<div class="center">
|
||
<el-date-picker v-model="form.businessLicenceInfo.licenceEndDate" type="date" placeholder="选择日期"
|
||
value-format="YYYY-MM-DD" style="width: 300px;" />
|
||
<el-checkbox
|
||
@change="e => e ? form.businessLicenceInfo.licenceEndDate = longTime : form.businessLicenceInfo.licenceEndDate = ''">长期有效</el-checkbox>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="注册地址" prop="businessLicenceInfo.registeredAddress">
|
||
<el-input v-model.trim="form.businessLicenceInfo.registeredAddress" placeholder="请输入注册地址"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="营业执照照片" prop="businessLicenceInfo.licensePic.url">
|
||
<div class="column">
|
||
<single-image-upload :maxFileSize="2" v-model="form.businessLicenceInfo.licensePic.url"
|
||
@on-success="licensePicSuccess" />
|
||
<div class="tips">(上传图片自动识别 营业执照编号)</div>
|
||
</div>
|
||
</el-form-item>
|
||
<div class="title_row">
|
||
<div class="t">
|
||
<el-text size="large" type="primary">门店信息</el-text>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="商户归属省市区" prop="storeInfo.mercProvCode">
|
||
<selectAddress v-model:provCode="form.storeInfo.mercProvCode" v-model:cityCode="form.storeInfo.mercCityCode"
|
||
v-model:areaCode="form.storeInfo.mercAreaCode" v-model:prov="form.storeInfo.mercProv"
|
||
v-model:city="form.storeInfo.mercCity" v-model:area="form.storeInfo.mercArea" />
|
||
</el-form-item>
|
||
<el-form-item label="营业地址" prop="storeInfo.businessAddress">
|
||
<el-input v-model.trim="form.storeInfo.businessAddress" placeholder="请输入营业地址"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="经营场所内设照片" prop="storeInfo.insidePic.url">
|
||
<single-image-upload :maxFileSize="2" v-model="form.storeInfo.insidePic.url" />
|
||
</el-form-item>
|
||
<el-form-item label="门头照" prop="storeInfo.doorPic.url">
|
||
<single-image-upload :maxFileSize="2" v-model="form.storeInfo.doorPic.url" />
|
||
</el-form-item>
|
||
<el-form-item label="收银台照" prop="storeInfo.cashierDeskPic.url">
|
||
<single-image-upload :maxFileSize="2" v-model="form.storeInfo.cashierDeskPic.url" />
|
||
</el-form-item>
|
||
<div class="title_row">
|
||
<div class="t">
|
||
<el-text size="large" type="primary">结算信息</el-text>
|
||
</div>
|
||
</div>
|
||
<el-form-item label="结算类型" prop="settlementInfo.settlementType">
|
||
<el-radio-group v-model="form.settlementInfo.settlementType">
|
||
<el-radio label="非法人结算" value="0" disabled></el-radio>
|
||
<el-radio label="法人结算" value="1"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="结算卡类型" prop="settlementInfo.settlementCardType">
|
||
<el-radio-group v-model="form.settlementInfo.settlementCardType">
|
||
<el-radio label="对私借记卡" :value="'11'"></el-radio>
|
||
<el-radio label="对公借记卡" :value="'21'"></el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="结算卡号" prop="settlementInfo.settlementCardNo">
|
||
<el-input v-model.trim="form.settlementInfo.settlementCardNo" placeholder="请输入结算卡号"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="开户名称" prop="settlementInfo.settlementName" v-loading="bankCardFrontPicSuccessLoading">
|
||
<el-input v-model.trim="form.settlementInfo.settlementName" placeholder="请输入开户名称"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="结算银行预留手机号" prop="settlementInfo.bankMobile">
|
||
<el-input v-model.trim="form.settlementInfo.bankMobile" placeholder="请输入结算银行预留手机号"
|
||
style="width: 300px;"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="开户行省市区" prop="settlementInfo.openAccProvinceId">
|
||
<selectAddress v-model:wxProvinceCode="wxProvinceCode"
|
||
v-model:provCode="form.settlementInfo.openAccProvinceId"
|
||
v-model:cityCode="form.settlementInfo.openAccCityId" v-model:areaCode="form.settlementInfo.openAccAreaId"
|
||
v-model:prov="form.settlementInfo.openAccProvince" v-model:city="form.settlementInfo.openAccCity"
|
||
v-model:area="form.settlementInfo.openAccArea" />
|
||
</el-form-item>
|
||
<el-form-item label="开户行" prop="settlementInfo.bankInstId">
|
||
<selectBank :province="form.settlementInfo.openAccProvince" :city="form.settlementInfo.openAccCity"
|
||
:city-code="wxProvinceCode" v-model:bankInstId="form.settlementInfo.bankInstId"
|
||
v-model:bankName="form.settlementInfo.bankName"
|
||
v-model:bank-branch-code="form.settlementInfo.bankBranchCode"
|
||
v-model:bank-branch-name="form.settlementInfo.bankBranchName" />
|
||
</el-form-item>
|
||
<el-form-item label="银行卡正面" prop="settlementInfo.bankCardFrontPic.url">
|
||
<div class="column">
|
||
<SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.bankCardFrontPic.url"
|
||
@on-success="bankCardFrontPicSuccess" />
|
||
<div class="tips">(上传图片自动识别 银行卡号)</div>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="银行卡反面" prop="settlementInfo.bankCardBackPic.url">
|
||
<SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.bankCardBackPic.url" />
|
||
</el-form-item>
|
||
<el-form-item label="开户许可证" prop="settlementInfo.openAccountLicencePic.url">
|
||
<SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.openAccountLicencePic.url" />
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="btn_wrap" :style="{ width: `${containerDomInfo.width}px`, left: `${containerDomInfo.left}px` }"
|
||
v-if="formType != 'check'">
|
||
<div class="btn_content">
|
||
<div class="btn">
|
||
<el-button type="primary" size="large" style="width: 100%;" :loading="loading"
|
||
@click="submitForm">提交</el-button>
|
||
</div>
|
||
<div class="btn">
|
||
<el-button style="width: 100%;" size="large" @click="router.back()">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, onUnmounted } from "vue";
|
||
import selectAddress from "./components/selectAddress.vue";
|
||
import selectBank from "./components/selectBank.vue";
|
||
import selectCategory from "./components/selectCategory.vue";
|
||
import SingleImageUpload from "@/components/Upload/SingleImageUpload.vue";
|
||
import { entryManagerPost, getInfoByImg, entryManagerDetail } from '@/api/common'
|
||
import _ from 'lodash'
|
||
import dayjs from "dayjs";
|
||
import { isValidMobile } from "@/utils";
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
const containerRef = ref<any>(null)
|
||
|
||
const containerDomInfo = ref({
|
||
left: 0,
|
||
width: 0
|
||
})
|
||
|
||
const longTime = ref('2099-12-31')
|
||
|
||
const wxProvinceCode = ref('')
|
||
|
||
// 获取进件详情
|
||
async function getDetailAjax(shopId: string) {
|
||
try {
|
||
const res: any = await entryManagerDetail({
|
||
shopId: shopId
|
||
})
|
||
if (res && res.shopId) {
|
||
form.value = res
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
}
|
||
|
||
// 获取containerDomInfo信息
|
||
function getContainerDomInfo() {
|
||
containerDomInfo.value = containerRef.value?.getBoundingClientRect() ?? {}
|
||
}
|
||
|
||
const debouncedCheckWidth = _.debounce(getContainerDomInfo, 100)
|
||
|
||
onMounted(() => {
|
||
getContainerDomInfo()
|
||
window.addEventListener('resize', debouncedCheckWidth)
|
||
|
||
const type = route.query.type
|
||
const shopId: string = String(route.query.shopId ?? '')
|
||
const licenceNo: string = String(route.query.licenceNo ?? '')
|
||
|
||
if (shopId) {
|
||
getDetailAjax(shopId)
|
||
}
|
||
|
||
if (licenceNo && type && type == 'editor') {
|
||
formType.value = 'editor'
|
||
}
|
||
|
||
if (type && type == 'check') {
|
||
formType.value = 'check'
|
||
}
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', debouncedCheckWidth)
|
||
})
|
||
|
||
// 表单操作类型 add添加 editor编辑 check查看
|
||
const formType = ref('add')
|
||
const formRef = ref<any>(null);
|
||
const form = ref({
|
||
shopId: route.query.shopId,
|
||
merchantCode: '',
|
||
// 【必填】商户基础信息
|
||
merchantBaseInfo: {
|
||
userType: '0', // 0: 个体商户;1: 企业商户;3: 小微商户 暂不支持
|
||
shortName: '', // 商户简称--企业、个体必填
|
||
mccCode: '', // 行业类别码--必填
|
||
alipayAccount: '', // 【必填】支付宝账号
|
||
contactPersonType: 'LEGAL', // 联系人类型 LEGAL: 经营者/法定代表人 SUPER: 经办人 默认LEGAL
|
||
contactName: '', // 联系人姓名
|
||
certType: '0', // 证件类型 目前只支持身份证 传值：0
|
||
contactPersonId: '', // 联系人身份证号
|
||
contactPersonIdStartDate: '', // 联系人证件有效期开始日期
|
||
contactPersonIdEndDate: '', // 联系人证件有效期结束日期
|
||
// 联系人身份证反面照片
|
||
contactIdCardBackPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 联系人身份证正面照片
|
||
contactIdCardFrontPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
contactPhone: '', // 联系人手机号
|
||
contactAddr: '', // 联系人地址
|
||
contactEmail: '', // 联系人电子邮箱
|
||
companyChildType: '1', // 企业类型，1：普通企业，2：事业单位，3：政府机关，4：社会组织 默认值:1
|
||
},
|
||
// 【必填】法人信息
|
||
legalPersonInfo: {
|
||
legalPersonName: '', // 法定代表人姓名
|
||
legalPersonId: '', // 法定代表人身份证号
|
||
legalIdPersonStartDate: '', // 法定代表人证件有效期开始日期
|
||
legalPersonIdEndDate: '', // 法定代表人证件有效期结束日期
|
||
legalPersonPhone: '', // 法定代表人手机号
|
||
legalPersonEmail: '', // 法定代表人电子邮箱
|
||
legalGender: '', // 法人性别（0男 1女）
|
||
legalAddress: '', // 法人联系地址
|
||
// 身份证手持 图片
|
||
idCardHandPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 身份证正面 图片
|
||
idCardFrontPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 身份证反面 图片
|
||
idCardBackPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
},
|
||
// 【必填】营业执照信息
|
||
businessLicenceInfo: {
|
||
licenceName: '', // 营业执照全称--非小微必填
|
||
licenceNo: '', // 营业执照注册号--非小微必填
|
||
licenceStartDate: '', // 营业执照有效期开始日期--非小微必填
|
||
licenceEndDate: '', // 营业执照有效期结束日期--非小微必填
|
||
registeredAddress: '', // 注册地址--非小微必填
|
||
licensePic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
},
|
||
// 【必填】门店信息
|
||
storeInfo: {
|
||
mercProvCode: '', // 【必填】商户归属省Code
|
||
mercCityCode: '', // 【必填】商户归属市Code
|
||
mercAreaCode: '', // 【必填】商户归属区Code
|
||
mercProv: '', // 商户归属省
|
||
mercCity: '', // 商户归属市
|
||
mercArea: '', // 商户归属区
|
||
businessAddress: '', // 【必填】 营业地址
|
||
// 经营场所内设照片
|
||
insidePic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 门头照
|
||
doorPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 收银台照
|
||
cashierDeskPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
},
|
||
// 【必填】结算信息
|
||
settlementInfo: {
|
||
settlementType: '1', // 结算类型 0:非法人结算, 1:法人结算
|
||
noLegalName: '', // 非法人姓名
|
||
noLegalId: '', // 非法人身份证号
|
||
settlementCardType: '', // 结算卡类型 必填 11 对私借记卡（结算卡正面照、结算卡反面照图片必传） 21 对公借记卡（只须结算卡正面照片）
|
||
settlementCardNo: '', // 结算卡号
|
||
settlementName: '', // 开户名称
|
||
bankMobile: '', // 结算银行预留手机号
|
||
openAccProvinceId: '', // 开户行省ID
|
||
openAccCityId: '', // 开户行市ID
|
||
openAccAreaId: '', // 开户行区ID
|
||
openAccProvince: '', // 开户行省
|
||
openAccCity: '', // 开户行市
|
||
openAccArea: '', // 开户行区
|
||
bankName: '', // 开户行别名名称 bankAlias
|
||
bankInstId: '', // 开户行缩写 bankCode
|
||
bankType: '', // 开户行编号 bankAliasCode
|
||
bankBranchName: '', // 支行开户行行别名称 branchName
|
||
bankBranchCode: '', // 支行开户行编号 bankCode
|
||
// 银行卡正面
|
||
bankCardFrontPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 银行卡反面
|
||
bankCardBackPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 开户许可证
|
||
openAccountLicencePic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 非法人手持结算授权书
|
||
noLegalHandSettleAuthPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 非法人结算授权书
|
||
noLegalSettleAuthPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 非法人身份证正面
|
||
noLegalIdCardFrontPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
// 非法人身份证反面
|
||
noLegalIdCardBackPic: {
|
||
url: '',
|
||
wechatId: '', // 微信图片ID
|
||
alipayId: '', // 支付宝图片ID
|
||
},
|
||
}
|
||
});
|
||
|
||
|
||
const rules = reactive({
|
||
'merchantBaseInfo.userType': [{ required: true, message: '请选择商户类型', trigger: 'change' }],
|
||
'merchantBaseInfo.shortName': [{ required: true, message: '请输入商户简称', trigger: 'blur' }],
|
||
'merchantBaseInfo.mccCode': [{ required: true, message: '请输入行业类别码', trigger: 'change' }],
|
||
'merchantBaseInfo.alipayAccount': [{ required: true, message: '请输入支付宝账号', trigger: 'blur' }],
|
||
'merchantBaseInfo.contactPersonId': [{ required: true, message: '请输入联系人身份证号', trigger: 'blur' }],
|
||
'merchantBaseInfo.contactPersonIdStartDate': [{ required: true, message: '请选择联系人证件有效期开始日期', trigger: 'change' }],
|
||
'merchantBaseInfo.contactPersonIdEndDate': [{ required: true, message: '请选择联系人证件有效期结束日期', trigger: 'change' }],
|
||
'merchantBaseInfo.contactIdCardFrontPic.url': [{ required: true, message: '请上传联系人身份证正面照片', trigger: 'blur' }],
|
||
'merchantBaseInfo.contactIdCardBackPic.url': [{ required: true, message: '请上传联系人身份证反面照片', trigger: 'blur' }],
|
||
'merchantBaseInfo.contactPhone': [
|
||
{ required: true, message: '请输入联系人手机号', trigger: 'blur' },
|
||
{
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (!isValidMobile(value)) {
|
||
callback(new Error('请输入正确的手机号'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
}
|
||
],
|
||
'merchantBaseInfo.contactAddr': [{ required: true, message: '请输入联系人地址', trigger: 'blur' }],
|
||
'merchantBaseInfo.contactEmail': [{ required: true, message: '请输入联系人电子邮箱', trigger: 'blur' }],
|
||
'legalPersonInfo.idCardHandPic.url': [{ required: true, message: '请上传身份证手持图片', trigger: 'blur' }],
|
||
'legalPersonInfo.idCardFrontPic.url': [{ required: true, message: '请上传身份证正面图片', trigger: 'blur' }],
|
||
'legalPersonInfo.idCardBackPic.url': [{ required: true, message: '请上传身份证反面图片', trigger: 'blur' }],
|
||
'legalPersonInfo.legalPersonName': [{ required: true, message: '请输入法定代表人姓名', trigger: 'blur' }],
|
||
'legalPersonInfo.legalPersonId': [{ required: true, message: '请输入法定代表人身份证号', trigger: 'blur' }],
|
||
'legalPersonInfo.legalIdPersonStartDate': [{ required: true, message: '请输入法定代表人身份证开始日期', trigger: 'blur' }],
|
||
'legalPersonInfo.legalPersonIdEndDate': [{ required: true, message: '请输入法定代表人身份证结束日期', trigger: 'blur' }],
|
||
'legalPersonInfo.legalPersonPhone': [
|
||
{ required: true, message: '请输入法定代表人手机号', trigger: 'blur' },
|
||
{
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (!isValidMobile(value)) {
|
||
callback(new Error('请输入正确的手机号'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
}
|
||
],
|
||
'legalPersonInfo.legalPersonEmail': [{ required: true, message: '请输入法定代表人电子邮箱', trigger: 'blur' }],
|
||
'legalPersonInfo.legalGender': [{ required: true, message: '请选择法定代表人性别', trigger: 'change' }],
|
||
'legalPersonInfo.legalAddress': [{ required: true, message: '请输入法定代表人联系地址', trigger: 'blur' }],
|
||
// 营业执照信息
|
||
'businessLicenceInfo.licenceName': [{ required: true, message: '请输入营业执照全称', trigger: 'blur' }],
|
||
'businessLicenceInfo.licenceNo': [{ required: true, message: '请输入营业执照注册号', trigger: 'blur' }],
|
||
'businessLicenceInfo.licenceStartDate': [{ required: true, message: '请输入营业执照有效期开始日期', trigger: 'blur' }],
|
||
'businessLicenceInfo.licenceEndDate': [{ required: true, message: '请输入营业执照有效期结束日期', trigger: 'blur' }],
|
||
'businessLicenceInfo.registeredAddress': [{ required: true, message: '请输入注册地址', trigger: 'blur' }],
|
||
'businessLicenceInfo.licensePic.url': [{ required: true, message: '请上传营业执照照片', trigger: 'blur' }],
|
||
// 门店信息
|
||
'storeInfo.mercProvCode': [{ required: true, message: '请选择商户归属省市区', trigger: 'change' }],
|
||
'storeInfo.mercCityCode': [{ required: true, message: '请选择商户归属市', trigger: 'change' }],
|
||
'storeInfo.mercAreaCode': [{ required: true, message: '请选择商户归属区', trigger: 'change' }],
|
||
'storeInfo.businessAddress': [{ required: true, message: '请输入营业地址', trigger: 'blur' }],
|
||
'storeInfo.insidePic.url': [{ required: true, message: '请上传经营场所内设照片', trigger: 'blur' }],
|
||
'storeInfo.doorPic.url': [{ required: true, message: '请上传门头照', trigger: 'blur' }],
|
||
'storeInfo.cashierDeskPic.url': [{ required: true, message: '请上传收银台照', trigger: 'blur' }],
|
||
// 结算信息
|
||
'settlementInfo.settlementType': [{ required: true, message: '请选择结算类型', trigger: 'change' }],
|
||
'settlementInfo.settlementCardType': [{ required: true, message: '请选择结算卡类型', trigger: 'change' }],
|
||
'settlementInfo.settlementCardNo': [{ required: true, message: '请输入结算卡号', trigger: 'blur' }],
|
||
'settlementInfo.settlementName': [{ required: true, message: '请输入开户名称', trigger: 'blur' }],
|
||
'settlementInfo.bankMobile': [
|
||
{ required: true, message: '请输入结算银行预留手机号', trigger: 'blur' },
|
||
{
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (!isValidMobile(value)) {
|
||
callback(new Error('请输入正确的手机号'))
|
||
} else {
|
||
callback()
|
||
}
|
||
}
|
||
}
|
||
],
|
||
'settlementInfo.openAccProvinceId': [
|
||
{
|
||
required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (form.value.settlementInfo.openAccProvinceId == '' || form.value.settlementInfo.openAccCityId == '' || form.value.settlementInfo.openAccAreaId == '') {
|
||
callback(new Error('请选择开户行省市区'))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
'settlementInfo.bankInstId': [
|
||
{
|
||
required: true,
|
||
validator: (rule: any, value: any, callback: any) => {
|
||
if (form.value.settlementInfo.bankInstId == '') {
|
||
callback(new Error('请选择开户行以及支行'))
|
||
} else {
|
||
callback()
|
||
}
|
||
},
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
'settlementInfo.bankCardFrontPic.url': [
|
||
{
|
||
required: true,
|
||
message: '请上传银行卡正面图片',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
'settlementInfo.bankCardBackPic.url': [
|
||
{
|
||
required: true,
|
||
message: '请上传银行卡反面图片',
|
||
trigger: 'blur'
|
||
}
|
||
],
|
||
'settlementInfo.openAccountLicencePic.url': [
|
||
{
|
||
required: true,
|
||
message: '请上传开户许可证图片',
|
||
trigger: 'blur'
|
||
}
|
||
]
|
||
})
|
||
|
||
// 联系人身份证正面照片
|
||
const contactIdCardFrontPicUploadLoading = ref(false)
|
||
async function contactIdCardFrontPicUpload(url: string) {
|
||
try {
|
||
form.value.merchantBaseInfo.contactIdCardBackPic.alipayId = ''
|
||
form.value.merchantBaseInfo.contactIdCardBackPic.wechatId = ''
|
||
|
||
contactIdCardFrontPicUploadLoading.value = true
|
||
const res: any = await getInfoByImg({
|
||
url: url,
|
||
type: 'IdCard'
|
||
})
|
||
|
||
let date = res.subImages[0].kvInfo.data.validPeriod.split('-')
|
||
form.value.merchantBaseInfo.contactPersonIdStartDate = dayjs(date[0]).format('YYYY-MM-DD')
|
||
form.value.merchantBaseInfo.contactPersonIdEndDate = dayjs(date[1]).format('YYYY-MM-DD')
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
contactIdCardFrontPicUploadLoading.value = false
|
||
}
|
||
|
||
// 联系人身份证反面照片
|
||
const contactIdCardBackPicUploadLoading = ref(false)
|
||
async function contactIdCardBackPicUpload(url: any) {
|
||
try {
|
||
form.value.merchantBaseInfo.contactIdCardFrontPic.alipayId = ''
|
||
form.value.merchantBaseInfo.contactIdCardFrontPic.wechatId = ''
|
||
|
||
contactIdCardBackPicUploadLoading.value = true
|
||
const res: any = await getInfoByImg({
|
||
url: url,
|
||
type: 'IdCard'
|
||
})
|
||
form.value.merchantBaseInfo.contactPersonId = res.subImages[0].kvInfo.data.idNumber
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
contactIdCardBackPicUploadLoading.value = false
|
||
}
|
||
|
||
// 法人信息 身份证正面图片
|
||
const idCardFrontPicSuccessLoading = ref(false)
|
||
async function idCardFrontPicSuccess(url: string) {
|
||
try {
|
||
form.value.legalPersonInfo.idCardBackPic.alipayId = ''
|
||
form.value.legalPersonInfo.idCardBackPic.wechatId = ''
|
||
|
||
idCardFrontPicSuccessLoading.value = true
|
||
const res: any = await getInfoByImg({
|
||
url: url,
|
||
type: 'IdCard'
|
||
})
|
||
|
||
let date = res.subImages[0].kvInfo.data.validPeriod.split('-')
|
||
form.value.legalPersonInfo.legalIdPersonStartDate = dayjs(date[0]).format('YYYY-MM-DD')
|
||
form.value.legalPersonInfo.legalPersonIdEndDate = dayjs(date[1]).format('YYYY-MM-DD')
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
idCardFrontPicSuccessLoading.value = false
|
||
}
|
||
|
||
// 法人信息 身份证反图片
|
||
const idCardBackPicSuccessLoading = ref(false)
|
||
async function idCardBackPicSuccess(url: string) {
|
||
try {
|
||
form.value.legalPersonInfo.idCardFrontPic.alipayId = ''
|
||
form.value.legalPersonInfo.idCardFrontPic.wechatId = ''
|
||
|
||
idCardBackPicSuccessLoading.value = true
|
||
const res: any = await getInfoByImg({
|
||
url: url,
|
||
type: 'IdCard'
|
||
})
|
||
|
||
form.value.legalPersonInfo.legalPersonName = res.subImages[0].kvInfo.data.name
|
||
form.value.legalPersonInfo.legalPersonId = res.subImages[0].kvInfo.data.idNumber
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
idCardBackPicSuccessLoading.value = false
|
||
}
|
||
|
||
// 营业执照信息 营业执照照片
|
||
const licensePicSuccessLoading = ref(false)
|
||
async function licensePicSuccess(url: string) {
|
||
try {
|
||
form.value.businessLicenceInfo.licensePic.alipayId = ''
|
||
form.value.businessLicenceInfo.licensePic.wechatId = ''
|
||
|
||
licensePicSuccessLoading.value = true
|
||
const res: any = await getInfoByImg({
|
||
url: url,
|
||
type: 'BusinessLicense'
|
||
})
|
||
let data = res.subImages[0].kvInfo.data
|
||
// console.log('营业执照照片', data);
|
||
form.value.businessLicenceInfo.licenceName = data.companyName
|
||
form.value.businessLicenceInfo.licenceNo = data.creditCode
|
||
// form.value.businessLicenceInfo.licenceStartDate = data.companyName
|
||
// form.value.businessLicenceInfo.licenceEndDate = data.companyName
|
||
form.value.businessLicenceInfo.registeredAddress = data.businessAddress
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
licensePicSuccessLoading.value = false
|
||
}
|
||
|
||
// 结算信息 银行卡正面
|
||
const bankCardFrontPicSuccessLoading = ref(false)
|
||
async function bankCardFrontPicSuccess(url: string) {
|
||
try {
|
||
form.value.settlementInfo.bankCardFrontPic.alipayId = ''
|
||
form.value.settlementInfo.bankCardFrontPic.wechatId = ''
|
||
|
||
bankCardFrontPicSuccessLoading.value = true
|
||
const res: any = await getInfoByImg({
|
||
url: url,
|
||
type: 'BankCard'
|
||
})
|
||
let data = res.subImages[0].kvInfo.data
|
||
// console.log('银行卡正面', data);
|
||
form.value.settlementInfo.settlementCardNo = data.cardNumber
|
||
form.value.settlementInfo.bankName = data.bankName
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
bankCardFrontPicSuccessLoading.value = false
|
||
}
|
||
|
||
const loading = ref(false)
|
||
function submitForm() {
|
||
console.log('提交的表单数据：', form.value);
|
||
console.log('formRef', formRef.value);
|
||
formRef.value.validate(async (valid: boolean) => {
|
||
console.log('valid===', valid);
|
||
if (valid) {
|
||
console.log('表单验证通过，可以提交');
|
||
try {
|
||
loading.value = true
|
||
await entryManagerPost(form.value)
|
||
ElNotification({
|
||
title: '注意',
|
||
message: '提交成功',
|
||
type: 'success'
|
||
})
|
||
router.back()
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
loading.value = false
|
||
} else {
|
||
console.log('表单验证失败，请检查输入项');
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.gyq_container {
|
||
padding: 14px;
|
||
|
||
.gyq_content {
|
||
padding: 14px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
padding-bottom: 100px;
|
||
}
|
||
}
|
||
|
||
.row {
|
||
&.mt14 {
|
||
margin-top: 14px;
|
||
}
|
||
}
|
||
|
||
.center {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.column {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.tips {
|
||
--bg: #ffeed8;
|
||
font-size: 12px;
|
||
background-color: var(--bg);
|
||
color: #c57000;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 10px;
|
||
border-radius: 6px;
|
||
margin-top: 15px;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 12px;
|
||
height: 12px;
|
||
background-color: var(--bg);
|
||
border: 1px solid var(--bg);
|
||
border-radius: 4px;
|
||
transform: rotate(-45deg);
|
||
top: -7px;
|
||
left: 40px;
|
||
transform-origin: center;
|
||
translate: -50% 0;
|
||
}
|
||
}
|
||
|
||
.title_row {
|
||
padding: 14px 50px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&::after {
|
||
content: "";
|
||
width: 100%;
|
||
border-bottom: 1px solid #ececec;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
z-index: 1;
|
||
}
|
||
|
||
.t {
|
||
position: relative;
|
||
z-index: 2;
|
||
background-color: #fff;
|
||
padding: 0 14px;
|
||
}
|
||
}
|
||
|
||
.btn_wrap {
|
||
width: 100%;
|
||
position: fixed;
|
||
z-index: 10;
|
||
bottom: 10px;
|
||
padding-bottom: 24px;
|
||
|
||
.btn_content {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
|
||
.btn {
|
||
width: 200px;
|
||
}
|
||
}
|
||
}
|
||
</style> |