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 15:10:23 +08:00
parent b28fdeaf11
commit 4c06f07ac6
5 changed files with 356 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/common/index.ts
View File

@@ -37,16 +37,14 @@ export const getCategory = () => {
}
interface getBankBranchListParams {
province?: string; // 省份
city?: string; // 城市
instId?: string; // 顶级机构ID
bankAliceCode?: string;
cityCode?: string;
}
/**
* 获取所有支行
* @params
* province?: string; // 省份
* city?: string; // 城市
* instId?: string; // 顶级机构ID
* bankAliceCode 银行别名code bankAliasCode 从 /system/admin/common/bankInfo 获取
* cityCode 市编码 wxProvinceCode 从 /system/admin/common/region 获取
* @returns
*/
export const getBankBranchList = (params: getBankBranchListParams) => {

596
src/views/applyments/applyment_in.vue
View File

@@ -47,13 +47,15 @@
</el-form-item>
<el-form-item label="联系人身份证号" prop="merchantBaseInfo.contactPersonId">
<el-input v-model.trim="form.merchantBaseInfo.contactPersonId" placeholder="请输入联系人身份证号"
style="width: 300px;"></el-input>
style="width: 300px;" v-loading="contactIdCardFrontPicUploadLoading"></el-input>
</el-form-item>
<el-form-item label="联系人证件有效期开始日期" prop="merchantBaseInfo.contactPersonIdStartDate">
<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">
<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;" />
@@ -109,19 +111,21 @@
<div class="tips">(上传图片自动识别 有效期)</div>
</div>
</el-form-item>
<el-form-item label="法定代表人姓名" prop="legalPersonInfo.legalPersonName">
<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">
<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">
<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">
<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;" />
@@ -156,7 +160,7 @@
<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-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>
@@ -227,7 +231,7 @@
<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-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>
@@ -236,33 +240,36 @@
style="width: 300px;"></el-input>
</el-form-item>
<el-form-item label="开户行省市区" prop="settlementInfo.openAccProvinceId">
<selectAddress v-model:provCode="form.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"
v-model:bankInstId="form.settlementInfo.bankInstId" v-model:bankName="form.settlementInfo.bankName"
: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 v-model="form.settlementInfo.bankCardFrontPic.url"
<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 v-model="form.settlementInfo.bankCardBackPic.url" />
<SingleImageUpload :maxFileSize="2" v-model="form.settlementInfo.bankCardBackPic.url" />
</el-form-item>
<el-form-item label="开户许可证" prop="settlementInfo.openAccountLicencePic.url">
<SingleImageUpload v-model="form.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` }">
<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"
@@ -278,12 +285,13 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
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'
@@ -300,350 +308,222 @@ const containerDomInfo = ref({
const longTime = ref('2099-12-31')
const wxProvinceCode = ref('')
// 获取进件详情
async function getDetailAjax(shopId: string, licenceNo: string) {
try {
const res = await entryManagerDetail({
const res: any = 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);
form.value = res
} catch (error) {
console.log(error);
}
}
onMounted(() => {
// 获取containerDomInfo信息
function getContainerDomInfo() {
console.log('getContainerDomInfo');
containerDomInfo.value = containerRef.value?.getBoundingClientRect() ?? {}
}
const debouncedCheckWidth = _.debounce(getContainerDomInfo, 100)
onMounted(() => {
getContainerDomInfo()
window.addEventListener('resize', debouncedCheckWidth)
const shopId: string = String(route.query.shopId ?? '')
const licenceNo: string = String(route.query.licenceNo ?? '')
if (shopId && licenceNo) {
formType.value = 'editor'
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 type = route.query.type
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' }],
@@ -726,10 +606,6 @@ const rules = reactive({
{
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 {
@@ -776,8 +652,13 @@ const rules = reactive({
})
// 联系人身份证正面照片
const contactIdCardFrontPicUploadLoading = ref(false)
async function contactIdCardFrontPicUpload(url: string) {
try {
form.value.merchantBaseInfo.contactIdCardFrontPic.alipayId = ''
form.value.merchantBaseInfo.contactIdCardFrontPic.wechatId = ''
contactIdCardFrontPicUploadLoading.value = true
const res: any = await getInfoByImg({
url: url,
type: 'IdCard'
@@ -786,11 +667,17 @@ async function contactIdCardFrontPicUpload(url: string) {
} catch (error) {
console.log(error);
}
contactIdCardFrontPicUploadLoading.value = false
}
// 联系人身份证反面照片
const contactIdCardBackPicUploadLoading = ref(false)
async function contactIdCardBackPicUpload(url: any) {
try {
form.value.merchantBaseInfo.contactIdCardBackPic.alipayId = ''
form.value.merchantBaseInfo.contactIdCardBackPic.wechatId = ''
contactIdCardBackPicUploadLoading.value = true
const res: any = await getInfoByImg({
url: url,
type: 'IdCard'
@@ -801,11 +688,17 @@ async function contactIdCardBackPicUpload(url: any) {
} catch (error) {
console.log(error);
}
contactIdCardBackPicUploadLoading.value = false
}
// 法人信息 身份证正面图片
const idCardFrontPicSuccessLoading = ref(false)
async function idCardFrontPicSuccess(url: string) {
try {
form.value.legalPersonInfo.idCardFrontPic.alipayId = ''
form.value.legalPersonInfo.idCardFrontPic.wechatId = ''
idCardFrontPicSuccessLoading.value = true
const res: any = await getInfoByImg({
url: url,
type: 'IdCard'
@@ -815,11 +708,17 @@ async function idCardFrontPicSuccess(url: string) {
} catch (error) {
console.log(error);
}
idCardFrontPicSuccessLoading.value = false
}
// 法人信息 身份证反图片
const idCardBackPicSuccessLoading = ref(false)
async function idCardBackPicSuccess(url: string) {
try {
form.value.legalPersonInfo.idCardBackPic.alipayId = ''
form.value.legalPersonInfo.idCardBackPic.wechatId = ''
idCardBackPicSuccessLoading.value = true
const res: any = await getInfoByImg({
url: url,
type: 'IdCard'
@@ -830,11 +729,17 @@ async function idCardBackPicSuccess(url: string) {
} 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'
@@ -849,11 +754,17 @@ async function licensePicSuccess(url: string) {
} 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'
@@ -865,6 +776,7 @@ async function bankCardFrontPicSuccess(url: string) {
} catch (error) {
console.log(error);
}
bankCardFrontPicSuccessLoading.value = false
}
const loading = ref(false)

36
src/views/applyments/components/selectAddress.vue
View File

@@ -13,7 +13,7 @@
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { ref, watch } from "vue";
import { getRegion } from "@/api/common";
const provList = ref<any[]>([]);
@@ -27,9 +27,18 @@ const provCode = defineModel("provCode", {
// 监听省份code变化
watch(provCode, async (n, o) => {
if (n !== undefined && n) {
await getRegionAjax()
await getRegionAjax()
if (n && n !== undefined) {
provChange(n, true)
// 监听市区code变化
watch(cityCode, async (n, o) => {
if (n !== undefined && n) {
cityChange(n, true)
}
}, {
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
})
}
}, {
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
@@ -40,16 +49,6 @@ const cityCode = defineModel("cityCode", {
default: "",
});
// 监听市区code变化
watch(cityCode, async (n, o) => {
if (n !== undefined && n) {
await getRegionAjax()
cityChange(n, true)
}
}, {
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
})
const areaCode = defineModel("areaCode", {
type: String,
default: "",
@@ -70,6 +69,11 @@ const area = defineModel("area", {
default: "",
});
const wxProvinceCode = defineModel('wxProvinceCode', {
type: String,
default: ''
})
// 省份变化 e code isEcho是否回显
function provChange(e: string, isEcho: boolean = false) {
if (!isEcho) {
@@ -92,9 +96,11 @@ function cityChange(e: string, isEcho: boolean = false) {
areaList.value = [];
}
const cityObj = cityList.value.find((item) => item.regionId == e);
city.value = cityObj ? cityObj.regionName : "";
if (cityObj && cityObj.children) {
areaList.value = cityObj.children;
wxProvinceCode.value = cityObj.wxProvinceCode
}
}
@@ -113,10 +119,6 @@ async function getRegionAjax() {
console.error('获取省市区数据失败：', error);
}
}
onMounted(() => {
getRegionAjax();
});
</script>
<style scoped lang="scss">

72
src/views/applyments/components/selectBank.vue
View File

@@ -8,17 +8,18 @@
<!-- 支行 -->
<el-select v-model="bankBranchCode" placeholder="请选择支行" style="width: 200px;" :disabled="!bankInstId"
@change="bankBranchChange">
<el-option v-for="item in bankBranchList" :key="item.bankCode" :label="item.branchName"
:value="item.bankCode"></el-option>
<el-option v-for="item in bankBranchList" :key="item.bank_branch_id" :label="item.bank_branch_name"
:value="item.bank_branch_id"></el-option>
</el-select>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ref, watch } from "vue";
import { getBankInfo, getBankBranchList } from "@/api/common";
const loading = ref(false)
const bankNameValue = ref('')
const props = defineProps({
province: {
@@ -28,10 +29,31 @@ const props = defineProps({
city: {
type: String,
default: ''
},
cityCode: {
type: String,
default: ''
}
})
const bankAlias = ref('')
watch(() => props.cityCode, async (newValue, oldValue) => {
try {
// console.log('watch.props.cityCode===', `newValue=${newValue},oldValue=${oldValue}`);
await getBankInfoAjax()
if (newValue && newValue !== undefined) {
// 监听银行code变化
watch(bankInstId, (n, o) => {
if (n !== undefined && n) {
bankChange(n)
}
}, {
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
})
}
} catch (error) {
console.log(error);
}
})
const bankList = ref<Array<{ id: string; bankAlias: string, bankCode: string, bankAliasCode: string }>>([]);
@@ -40,15 +62,7 @@ const bankInstId = defineModel('bankInstId', {
default: "",
});
// 监听银行code变化
watch(bankInstId, async (n, o) => {
if (n !== undefined && n) {
await getBankInfoAjax()
bankChange(n)
}
}, {
immediate: true // 可选：初始化立即执行，验证是否监听到初始值
})
const bankName = defineModel('bankName', {
type: String,
@@ -61,7 +75,7 @@ function bankChange(e: any) {
if (obj && obj.id) {
bankName.value = obj.bankAlias
bankInstId.value = obj.bankCode
getBankBranchListAjax(obj.bankCode)
getBankBranchListAjax(obj.bankAliasCode)
}
}
@@ -79,22 +93,21 @@ const bankBranchName = defineModel('bankBranchName', {
// 选择支行
function bankBranchChange(e: string) {
let obj = bankBranchList.value.find(item => item.bankCode == e)
if (obj && obj.bankCode) {
bankBranchName.value = obj.branchName
let obj = bankBranchList.value.find(item => item.bank_branch_id == e)
if (obj && obj.bank_branch_id) {
bankBranchName.value = obj.bank_branch_name
}
}
// 支行列表
const bankBranchList = ref<Array<{ bankCode: string; branchName: string }>>([]);
async function getBankBranchListAjax(bankCode: string) {
const bankBranchList = ref<Array<{ bank_branch_id: string; bank_branch_name: string }>>([]);
async function getBankBranchListAjax(bankAliasCode: string) {
try {
const res = await getBankBranchList({
province: props.province,
city: props.city,
instId: bankCode,
const res: any = await getBankBranchList({
bankAliceCode: bankAliasCode,
cityCode: props.cityCode
})
bankBranchList.value = res
bankBranchList.value = res.data
} catch (error) {
console.log('', error);
}
@@ -109,21 +122,20 @@ function remoteGetBank(query: string) {
}
// 获取银行列表
const bankNameValue = ref('')
async function getBankInfoAjax() {
try {
loading.value = true
const res: any = await getBankInfo({ page: 1, size: 100, bankName: bankNameValue.value });
const res: any = await getBankInfo({
page: 1,
size: 100,
bankName: bankNameValue.value
});
bankList.value = res.records || [];
} catch (error) {
console.log(error);
}
loading.value = false
}
onMounted(() => {
getBankInfoAjax()
});
</script>
<style scoped lang="scss">

53
src/views/applyments/index.vue
View File

@@ -44,9 +44,13 @@
<el-table-column label="支付宝进件状态" prop="alipayStatus" min-width="200">
<template v-slot="scope">
<div class="column">
<div>{{ statusListFilter(scope.row.alipayStatus).label }}</div>
<el-text type="danger" v-if="scope.row.alipayStatus == 'REJECTED'">{{ scope.row.alipayErrorMsg
}}</el-text>
<div>
<el-tag :type="statusListFilter(scope.row.alipayStatus).type" disable-transitions>{{
statusListFilter(scope.row.alipayStatus).label }}</el-tag>
</div>
<div class="error_text" v-if="scope.row.alipayStatus == 'REJECTED'">
{{ scope.row.alipayErrorMsg }}
</div>
<el-link type="primary" v-if="scope.row.alipayStatus == 'SIGN '"
@click="singCodeDialogRef?.show(scope.row.alipaySignUrl, 1)">查看签约码</el-link>
</div>
@@ -55,9 +59,13 @@
<el-table-column label="微信进件状态" prop="wechatStatus" min-width="200">
<template v-slot="scope">
<div class="column">
<div>{{ statusListFilter(scope.row.wechatStatus).label }}</div>
<el-text type="danger" v-if="scope.row.wechatStatus == 'REJECTED'">{{ scope.row.wechatErrorMsg
}}</el-text>
<div>
<el-tag :type="statusListFilter(scope.row.wechatStatus).type" disable-transitions>{{
statusListFilter(scope.row.wechatStatus).label }}</el-tag>
</div>
<div class="error_text" v-if="scope.row.wechatStatus == 'REJECTED'">
{{ scope.row.wechatErrorMsg }}
</div>
<el-link type="primary" v-if="scope.row.wechatStatus == 'SIGN '"
@click="singCodeDialogRef?.show(scope.row.wechatSignUrl, 2)">查看签约码</el-link>
</div>
@@ -67,8 +75,9 @@
<el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
<el-table-column label="操作" fixed="right" width="150">
<template v-slot="scope">
<el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
<el-button link type="primary" @click="toDetail(scope.row)">修改</el-button>
<el-button link type="primary" @click="toDetail(scope.row, 'check')">详情</el-button>
<el-button link type="primary" @click="toDetail(scope.row, 'editor')"
v-if="scope.row.alipayStatus == 'REJECTED' || scope.row.wechatStatus == 'REJECTED'">修改</el-button>
</template>
</el-table-column>
</el-table>
@@ -131,27 +140,33 @@ function userTypeListFilter(userType) {
const statusList = ref([
{
value: 'WAIT',
label: '待提交'
label: '待提交',
type: 'info'
},
{
value: 'INIT',
label: '待处理'
label: '待处理',
type: 'info'
},
{
value: 'AUDIT',
label: '待审核'
label: '待审核',
type: 'warning'
},
{
value: 'SIGN',
label: '待签约'
label: '待签约',
type: 'warning'
},
{
value: 'FINISH',
label: '已完成'
label: '已完成',
type: 'success'
},
{
value: 'REJECTED',
label: '失败'
label: '失败',
type: 'danger'
},
])
@@ -227,13 +242,14 @@ async function getTableData() {
}
// 跳转编辑页面
function toDetail(row) {
function toDetail(row, type) {
const businessLicenceInfo = JSON.parse(row.businessLicenceInfo)
router.push({
name: 'applyment_in',
query: {
shopId: row.shopId,
licenceNo: businessLicenceInfo.licenceNo
licenceNo: businessLicenceInfo.licenceNo,
type: type
}
})
}
@@ -265,4 +281,9 @@ onMounted(() => {
flex-direction: column;
gap: 4px;
}
.error_text {
font-size: 14px;
color: var(--el-color-danger);
}
</style>