czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增进件管理

Browse Source
This commit is contained in:
gyq
2026-01-12 10:25:03 +08:00
parent 8b3a802092
commit b28fdeaf11
11 changed files with 1978 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

997
src/views/applyments/applyment_in.vue Normal file
View File

@@ -0,0 +1,997 @@
<!-- 选择商户以及进件渠道 -->
<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;"></el-input>
</el-form-item>
<el-form-item label="联系人证件有效期开始日期" prop="merchantBaseInfo.contactPersonIdStartDate">
<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">
<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">
<el-input v-model.trim="form.legalPersonInfo.legalPersonName" placeholder="请输入法定代表人姓名"
style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="法定代表人身份证号" prop="legalPersonInfo.legalPersonId">
<el-input v-model.trim="form.legalPersonInfo.legalPersonId" placeholder="请输入法定代表人身份证号"
style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="法定代表人身份证开始日期" prop="legalPersonInfo.legalIdPersonStartDate">
<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">
<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">
<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">
<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: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"
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 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 v-model="form.settlementInfo.bankCardBackPic.url" />
</el-form-item>
<el-form-item label="开户许可证" prop="settlementInfo.openAccountLicencePic.url">
<SingleImageUpload 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` }">
<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 } 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 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')
// 获取进件详情
async function getDetailAjax(shopId: string, licenceNo: string) {
try {
const res = await entryManagerDetail({
shopId: shopId,
licenceNo: licenceNo
})
console.log('getDetailAjax===', res);
// 如果接口返回数组，则取第一个元素；否则直接使用返回对象，使用断言避免类型不匹配
form.value = (Array.isArray(res) ? res[0] : res) as any
console.log('getDetailAjax.form.value===', form.value);
} catch (error) {
console.log(error);
}
}
onMounted(() => {
containerDomInfo.value = containerRef.value?.getBoundingClientRect() ?? {}
const shopId: string = String(route.query.shopId ?? '')
const licenceNo: string = String(route.query.licenceNo ?? '')
if (shopId && licenceNo) {
getDetailAjax(shopId, licenceNo)
}
})
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 form = ref({
"shopId": "138",
"merchantCode": "",
"merchantBaseInfo": {
"userType": 1,
"shortName": "菲慕斯博",
"mccCode": "A0003_B0046",
"alipayAccount": "18191655977",
"contactPersonType": "LEGAL",
"contactName": "",
"certType": 0,
"contactPersonId": "612501199212187875",
"contactPersonIdStartDate": "2019-02-01",
"contactPersonIdEndDate": "2039-02-01",
"contactIdCardBackPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/df744d901e45480284fdca519ed99713.png",
"wechatId": "",
"alipayId": ""
},
"contactIdCardFrontPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/624a1bba691b4468b078407e216288fc.png",
"wechatId": "",
"alipayId": ""
},
"contactPhone": "18191655977",
"contactAddr": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
"contactEmail": "892675422@qq.com",
"companyChildType": 1
},
"legalPersonInfo": {
"legalPersonName": "蔺佳佳",
"legalPersonId": "612501199212187875",
"legalIdPersonStartDate": "2019-02-01",
"legalPersonIdEndDate": "2039-02-01",
"legalPersonPhone": "18191655977",
"legalPersonEmail": "892675422@qq.com",
"legalGender": "0",
"legalAddress": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
"idCardHandPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/7984afd823fe4f0da51d4b245bf5db25.jpg",
"wechatId": "",
"alipayId": ""
},
"idCardFrontPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/88819f6ae3404c199526c159e4d58fd9.png",
"wechatId": "",
"alipayId": ""
},
"idCardBackPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/0f3d15a9498e4853aeb8c579698955d9.png",
"wechatId": "",
"alipayId": ""
}
},
"businessLicenceInfo": {
"licenceName": "西安菲慕斯博市场营销策划有限公司",
"licenceNo": "91610131MA6TXACP28",
"licenceStartDate": "2021-02-24",
"licenceEndDate": "2099-12-31",
"registeredAddress": "陕西省西安市高新区科技路37号海星城市广场B座2002-080室",
"licensePic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/9d8e1118c44e46d29078968aa309db02.jpg",
"wechatId": "",
"alipayId": ""
}
},
"storeInfo": {
"mercProvCode": "610000",
"mercCityCode": "610100",
"mercAreaCode": "610113",
"mercProv": "陕西省",
"mercCity": "西安市",
"mercArea": "雁塔区",
"businessAddress": "西安市沣东新城石化大道西段106号沣东科技园5号楼1层5-037室",
"insidePic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/cd9629863a114ee3842e4616ec730cd6.jpg",
"wechatId": "",
"alipayId": ""
},
"doorPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/ec5bafd00f96466fb3efe545a058f08b.png",
"wechatId": "",
"alipayId": ""
},
"cashierDeskPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/057c0781e07c46d785b38a3c0ac2cba4.jpg",
"wechatId": "",
"alipayId": ""
}
},
"settlementInfo": {
"settlementType": 1,
"noLegalName": "",
"noLegalId": "",
"settlementCardType": "21",
"settlementCardNo": "611011580000054186",
"settlementName": "西安银行",
"bankMobile": "18191655977",
"openAccProvinceId": "610000",
"openAccCityId": "610100",
"openAccAreaId": "610113",
"openAccProvince": "陕西省",
"openAccCity": "西安市",
"openAccArea": "雁塔区",
"bankName": "長安銀行",
"bankInstId": "XAB",
"bankType": "",
"bankBranchName": "",
"bankBranchCode": "",
"bankCardFrontPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/41410600705d4ebe98442b935a4f63b0.jpg",
"wechatId": "",
"alipayId": ""
},
"bankCardBackPic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/c82d5579145e4668ba7c201733b8e5b9.jpg",
"wechatId": "",
"alipayId": ""
},
"openAccountLicencePic": {
"url": "https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/5/c989896f18724fe4b2d5254e97065a65.jpg",
"wechatId": "",
"alipayId": ""
},
"noLegalHandSettleAuthPic": {
"url": "",
"wechatId": "",
"alipayId": ""
},
"noLegalSettleAuthPic": {
"url": "",
"wechatId": "",
"alipayId": ""
},
"noLegalIdCardFrontPic": {
"url": "",
"wechatId": "",
"alipayId": ""
},
"noLegalIdCardBackPic": {
"url": "",
"wechatId": "",
"alipayId": ""
}
}
})
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) => {
console.log('form.value.settlementInfo.openAccProvinceId', form.value.settlementInfo.openAccProvinceId);
console.log('form.value.settlementInfo.openAccCityId', form.value.settlementInfo.openAccCityId);
console.log('form.value.settlementInfo.openAccAreaId', form.value.settlementInfo.openAccAreaId);
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'
}
]
})
// 联系人身份证正面照片
async function contactIdCardFrontPicUpload(url: string) {
try {
const res: any = await getInfoByImg({
url: url,
type: 'IdCard'
})
form.value.merchantBaseInfo.contactPersonId = res.subImages[0].kvInfo.data.idNumber
} catch (error) {
console.log(error);
}
}
// 联系人身份证反面照片
async function contactIdCardBackPicUpload(url: any) {
try {
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);
}
}
// 法人信息 身份证正面图片
async function idCardFrontPicSuccess(url: string) {
try {
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);
}
}
// 法人信息 身份证反图片
async function idCardBackPicSuccess(url: string) {
try {
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);
}
}
// 营业执照信息 营业执照照片
async function licensePicSuccess(url: string) {
try {
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);
}
}
// 结算信息 银行卡正面
async function bankCardFrontPicSuccess(url: string) {
try {
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);
}
}
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>