From 1c6ca5605c0e9b5900a82545314bcd4046a237da Mon Sep 17 00:00:00 2001 From: mixtan <424491071@qq.com> Date: Fri, 23 May 2025 08:59:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=81=94=E8=B0=83=E5=95=86=E5=AE=B6?= =?UTF-8?q?=E5=85=A5=E9=A9=BB=E5=BC=80=E5=BA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 5 + src/api/login.js | 40 +-- src/api/upload.js | 27 +- src/views/start/start.vue | 715 +++++++++++++++++++++++++++----------- 4 files changed, 551 insertions(+), 236 deletions(-) diff --git a/components.d.ts b/components.d.ts index e6aff74..37fc593 100644 --- a/components.d.ts +++ b/components.d.ts @@ -16,6 +16,7 @@ declare module 'vue' { ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem'] ElCascader: typeof import('element-plus/es')['ElCascader'] ElCol: typeof import('element-plus/es')['ElCol'] + ElDialog: typeof import('element-plus/es')['ElDialog'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElIcon: typeof import('element-plus/es')['ElIcon'] @@ -26,6 +27,7 @@ declare module 'vue' { ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElSelect: typeof import('element-plus/es')['ElSelect'] + ElSelectV2: typeof import('element-plus/es')['ElSelectV2'] ElStatistic: typeof import('element-plus/es')['ElStatistic'] ElStep: typeof import('element-plus/es')['ElStep'] ElSteps: typeof import('element-plus/es')['ElSteps'] @@ -36,4 +38,7 @@ declare module 'vue' { RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] } + export interface ComponentCustomProperties { + vLoading: typeof import('element-plus/es')['ElLoadingDirective'] + } } diff --git a/src/api/login.js b/src/api/login.js index b1da2e1..e380a5d 100644 --- a/src/api/login.js +++ b/src/api/login.js @@ -97,7 +97,6 @@ export function GetPostion (params){ }) } -//废弃测试接口 export function GetBank (data){ return new Promise((resolve, reject) => { http({ @@ -110,47 +109,12 @@ export function GetBank (data){ }) } -export function merchApply(params){ +export function merchApply(data){ return new Promise((resolve, reject) => { - const form={ - bank_name: params.bank_name, - bank_branch_name: params.bank_branch_name, - account_number: params.account_number, - account_holder_name: params.account_holder_name, - biz_category: params.biz_category, - biz_license_company: params.biz_license_company, - biz_license_image: params.biz_license_image, - biz_license_number: params.biz_license_number, - biz_second_category: params.biz_second_category, - city_id: params.city_id, - contact_name: params.contact_name, - county_id: params.county_id, - entity_type: params.entity_type, - environment_image: params.environment_image, - front_facade_image: params.front_facade_image, - individual_id_images: params.individual_id_images, - individual_id_images2: params.individual_id_images2, - individual_id_number: params.individual_id_number, - legal_person_id_images: params.legal_person_id_images, - legal_person_id_images2: params.legal_person_id_images2, - legal_person_id_number: params.legal_person_id_number, - legal_person_mobile: params.legal_person_mobile, - legal_person_name: params.legal_person_name, - license_image: params.license_imageToString, - license_number: params.license_number, - license_type: params.license_type, - login_mobile: params.login_mobile, - province_id: params.province_id, - store_address: params.postion+params.store_address, - store_latitude: params.store_latitude, - store_longitude: params.store_longitude, - store_name: params.store_name, - } - console.log("这是数据",form); http({ url:'/api/mobile/shop/merch/apply', method:'post', - data:form + data }).then(res=>{ resolve(res) }).catch(e => reject(console.warn(e))) diff --git a/src/api/upload.js b/src/api/upload.js index 0382182..87dcbc8 100644 --- a/src/api/upload.js +++ b/src/api/upload.js @@ -30,4 +30,29 @@ export function uploadFile(file, params = {}) { }) .catch(e => reject(console.warn(e))); }); -} \ No newline at end of file +} + +export function batchNoApi (file, type){ + const formData = new FormData(); + formData.append('upfile', file); + formData.append('imgType', type); + return new Promise((resolve, reject) => { + http({ + url:'/api/mobile/shop/lakala/tk/uploadOcrImg', + method: 'post', + data: formData, + }) + .then(res => { + resolve(res); + }) + .catch(e => reject(console.warn(e))); + }); +} + +export function imgOcrResultApi (data){ + return http({ + url:'/api/mobile/shop/lakala/tk/imgOcrResult', + method:'POST', + data, + }) +} diff --git a/src/views/start/start.vue b/src/views/start/start.vue index c5a592a..3b6134f 100644 --- a/src/views/start/start.vue +++ b/src/views/start/start.vue @@ -12,6 +12,9 @@ ref="formRef" label-width="160px" style="max-width: 600px" + v-loading.fullscreen.lock="loading" + element-loading-text="数据加载中..." + element-loading-background="rgba(0,0,0,.75)" >
店铺信息
@@ -47,14 +50,14 @@ - + + + 点击免填营业执照信息 + 点击免填身份证 - +
结算信息
- + - - - - - + + + + + 点击免填银行卡号 + + @@ -576,15 +607,86 @@ import { GetPostion, GetBank, merchApply, + re_apply, GetAppDistrict, } from "@/api/login"; +import { batchNoApi, imgOcrResultApi } from "@/api/upload"; + +interface Bank { + id: number; + bank_name: string; +} + +const orcImgTypeConf = { + FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT", + FR_ID_CARD_BEHIND: "FR_ID_CARD_BEHIND", + ID_CARD_FRONT: "ID_CARD_FRONT", + ID_CARD_BEHIND: "ID_CARD_BEHIND", + BUSINESS_LICENCE: "BUSINESS_LICENCE", + BANK_CARD: "BANK_CARD", +}; + +const userStore = useUserStore(); + +const processData = () => { + const { provinceData, cityData: cityList, areaData } = cityData; + return provinceData.map((province, provinceIndex) => { + const provinceItem = { + ...province, + children: cityList[provinceIndex].map((city, cityIndex) => { + const cityItem = { + ...city, + }; + if (areaData[provinceIndex] && areaData[provinceIndex][cityIndex]) { + cityItem.children = areaData[provinceIndex][cityIndex]; + } + return cityItem; + }), + }; + return provinceItem; + }); +}; + const active = ref(1); +const loading = ref(false); const formRef = ref(null); const dialogVisible = ref(false); -const dialogImageUrl = ref(''); +const dialogImageUrl = ref(""); +const bankNameSearchText = ref(""); +const selectedValue = ref([]); +const value = ref([]); +const cascaderOptions = ref([]); +const cascaderOptions2 = ref(processData()); +const cityData2 = ref(); +const cascaderOptions3 = ref(); +//hover触发选择 +const cascaderProps = ref({ + value: "value", + label: "label", + children: "children", + expandTrigger: "hover" as const, +}); +const bankList2 = ref([]); + +let orcTimeout = 0; +let currentFile = ref(null); +let currentBbatchNo = ref(''); + +const handleChangeBizCategory = (value) => { + if (value && value.length === 2) { + const [bizCategoryId, bizSecondCategoryId] = value; + applyFormData.biz_category = bizCategoryId; + applyFormData.biz_second_category = bizSecondCategoryId; + } +}; +const currentBankItem = reactive(null); const applyFormData = reactive({ bank_name: "", + bank_district: "", + bank_area: "", + openning_bank_code: "", + clearing_bank_code: "", bank_branch_name: "", account_number: "", account_holder_name: "", @@ -649,7 +751,7 @@ const rules = reactive({ map_address: [ { required: true, message: "请选择地图地址", trigger: "change" }, ], -// position: [{ required: true, message: "请选择地图地址", trigger: "change" }], + // position: [{ required: true, message: "请选择地图地址", trigger: "change" }], store_address: [ { required: true, message: "请输入详细地址", trigger: "blur" }, ], @@ -699,7 +801,9 @@ const rules = reactive({ bank_image: [ { required: true, message: "请上传银行卡正面", trigger: "change" }, ], - bank_name: [{ required: true, message: "请选择银行", trigger: "change" }], + bank_branch_name: [ + { required: true, message: "请选择银行", trigger: "change" }, + ], // bank_branch_name: [{ required: true, message: '请输入支行名称', trigger: 'blur' }], account_number: [ { required: true, message: "请输入收款账户号码", trigger: "blur" }, @@ -709,13 +813,173 @@ const rules = reactive({ ], }); +const handleReApply = async () => { + const { + bank_name, + bank_district, + bank_area, + openning_bank_code, + clearing_bank_code, + account_number, + account_holder_name, + biz_category, + biz_license_company, + biz_license_image, + biz_license_number, + biz_second_category, + city_id, + contact_name, + county_id, + entity_type, + environment_image, + front_facade_image, + individual_id_images, + individual_id_images2, + individual_id_number, + legal_person_id_images, + legal_person_id_images2, + legal_person_id_number, + legal_person_mobile, + legal_person_name, + license_image, + license_number, + license_type, + login_mobile, + province_id, + store_address, + store_latitude, + store_longitude, + store_name, + store_area, + } = applyFormData; + const res = await re_apply({ + id: 15, + bank_name, + bank_district, + bank_area, + openning_bank_code, + clearing_bank_code, + account_number, + account_holder_name, + biz_category, + biz_license_company, + biz_license_image, + biz_license_number, + biz_second_category, + city_id, + contact_name, + county_id, + entity_type, + environment_image, + front_facade_image, + individual_id_images, + individual_id_images2, + individual_id_number, + legal_person_id_images, + legal_person_id_images2, + legal_person_id_number, + legal_person_mobile, + legal_person_name, + license_image, + license_number, + license_type, + login_mobile, + province_id, + store_address: store_area.replace(/\//g, "") + store_address, + store_latitude, + store_longitude, + store_name, + store_area, + }); +}; + +const handleMerchApply = async () => { + const { + bank_name, + bank_district, + bank_area, + openning_bank_code, + clearing_bank_code, + account_number, + account_holder_name, + biz_category, + biz_license_company, + biz_license_image, + biz_license_number, + biz_second_category, + city_id, + contact_name, + county_id, + entity_type, + environment_image, + front_facade_image, + individual_id_images, + individual_id_images2, + individual_id_number, + legal_person_id_images, + legal_person_id_images2, + legal_person_id_number, + legal_person_mobile, + legal_person_name, + license_image, + license_number, + license_type, + login_mobile, + province_id, + store_address, + store_latitude, + store_longitude, + store_name, + store_area, + } = applyFormData; + const res = await merchApply({ + bank_name, + bank_district, + bank_area, + openning_bank_code, + clearing_bank_code, + account_number, + account_holder_name, + biz_category, + biz_license_company, + biz_license_image, + biz_license_number, + biz_second_category, + city_id, + contact_name, + county_id, + entity_type, + environment_image, + front_facade_image, + individual_id_images, + individual_id_images2, + individual_id_number, + legal_person_id_images, + legal_person_id_images2, + legal_person_id_number, + legal_person_mobile, + legal_person_name, + license_image, + license_number, + license_type, + login_mobile, + province_id, + store_address: store_area.replace(/\//g, "") + store_address, + store_latitude, + store_longitude, + store_name, + store_area, + }); +}; + const checkForm = async () => { const isValid = await (formRef.value as any).validate((valid) => { return valid; }); if (isValid) { - console.log("可以通过"); + handleReApply(); + // handleMerchApply } }; @@ -748,8 +1012,8 @@ const getLabel = (field: string, limit: number) => { license_image: "许可证", legal_person_id_images: "法人身份证正面", legal_person_id_images2: "法人身份证反面", - individual_id_images: "身份证正面", - individual_id_images2: "身份证反面", + individual_id_images: "个人身份证正面", + individual_id_images2: "个人身份证反面", }; if (field === "license_image") { @@ -760,7 +1024,6 @@ const getLabel = (field: string, limit: number) => { } }; -const userStore = useUserStore(); const showAll = () => { applyFormData.license_imageToString = applyFormData.license_image .map((url) => `${url}`) @@ -768,108 +1031,47 @@ const showAll = () => { }; const merchToApply = async () => { + console.log("formdata", applyFormData); showAll(); checkForm(); - const res = await merchApply(applyFormData); - if (res && res.status === 200) { - // ElMessage.success('成功入驻'); - location.reload(); - console.log("成功入驻", res); - } else { - console.log(res.data); +}; - ElMessage.error(res.data.msg); +const bankListChange = (val) => { + const item = bankList2.value.find((item) => item.value == val); + if (item) { + applyFormData.bank_name = item.label; + applyFormData.bank_district = item.district; + applyFormData.bank_area = item.area; + applyFormData.openning_bank_code = item.branch_bank_no; + applyFormData.clearing_bank_code = item.clear_no; } }; -const selectedValue = ref([]); -const value = ref([]); -const processData = () => { - const { provinceData, cityData: cityList, areaData } = cityData; - return provinceData.map((province, provinceIndex) => { - const provinceItem = { - ...province, - children: cityList[provinceIndex].map((city, cityIndex) => { - const cityItem = { - ...city, - }; - if (areaData[provinceIndex] && areaData[provinceIndex][cityIndex]) { - cityItem.children = areaData[provinceIndex][cityIndex]; - } - return cityItem; - }), - }; - return provinceItem; - }); -}; - -const cascaderOptions = ref([]); -const cascaderOptions2 = ref(processData()); -const cityData2 = ref(); -const cascaderOptions3 = ref(); -//hover触发选择 -const cascaderProps = ref({ - value: "value", - label: "label", - children: "children", - expandTrigger: "hover" as const, -}); - -const handleChangeBizCategory = (value) => { - if (value && value.length === 2) { - const [bizCategoryId, bizSecondCategoryId] = value; - applyFormData.biz_category = bizCategoryId; - applyFormData.biz_second_category = bizSecondCategoryId; +const bankListRemoteMethod = (val) => { + if (!val) { + bankList2.value = []; + return; } -}; -interface Bank { - id: number; - bank_name: string; -} - -const bankList2 = ref([]); - -onMounted(() => { - GetStoreCategories() - .then((res) => { - if (res.code === 0 && res.status === 200) { - cascaderOptions.value = transformStoreCategories(res.data); - } else { - } - }) - .catch((err) => { - ElMessage.error("获取店铺分类失败"); - }); GetBank({ - keyword: "中国工商银行桂平", // 银行名称关键字,小地方支行，查不到，调整关键字范围，尝试市级银行 + keyword: val, // 银行名称关键字,小地方支行，查不到，调整关键字范围，尝试市级银行 pageNum: 1, - pageSize: 10, - }) - .then((res) => { - if (res.code === 0 && res.status === 200) { - bankList2.value = res.data; - } else { - ElMessage.error("获取银行失败"); - } - }) - .catch((err) => { - ElMessage.error("获取银行失败"); - }); - - GetAppDistrict() - .then((res) => { - if (res.code === 0 && res.status === 200) { - cityData2.value = res.data; - console.log(cascaderOptions3.value); - } else { - ElMessage.error("获取银行失败"); - } - }) - .catch((err) => { - ElMessage.error("获取银行失败"); - }); -}); + pageSize: 2000, + }).then((res) => { + if (res.status == 200) { + bankList2.value = res.data.items.map((item) => { + return { + district: item.district, + area: item.area, + branch_bank_no: item.branch_bank_no, + clear_no: item.clear_no, + label: item.branch_bank_name, + value: item.branch_bank_no, + }; + }); + } + }); +}; const handleChange = (value) => { // 假设 cascader 的值是一个数组，格式为 [省份ID, 城市ID, 区县ID] @@ -899,10 +1101,11 @@ const handleChange = (value) => { return findName(cascaderOptions2.value, id); }); - applyFormData.mapAddressLabel = names?.join("/"); - applyFormData.store_area = names?.join("/"); - applyFormData.position = ''; - applyFormData.store_address = ''; + const str = names?.join("/"); + + applyFormData.mapAddressLabel = str; + applyFormData.store_area = str; + formRef.value.validate(); }; const autocompleteOptions = ref([]); @@ -921,7 +1124,6 @@ const querySearch = async (queryString, cb) => { }; const res = await GetPostion(params); - console.log(res); if (res?.result?.length) { const results = res.result @@ -948,11 +1150,9 @@ const querySearch = async (queryString, cb) => { const handleSelect = (item) => { applyFormData.position = ""; applyFormData.store_address = item.value; - applyFormData.store_address = item.value; - formRef.value.validate(); - console.log(item.value); applyFormData.store_latitude = item.lat; applyFormData.store_longitude = item.lng; + formRef.value.validate(); }; const beforeUpload = (file) => { @@ -960,11 +1160,15 @@ const beforeUpload = (file) => { const isPNG = file.type === "image/png"; const isLt2M = file.size / 1024 / 1024 < 2; + loading.value = true; + if (!isJPG && !isPNG) { + loading.value = false; ElMessage.error("上传的图片必须是JPG或PNG格式！"); return false; } if (!isLt2M) { + loading.value = false; ElMessage.error("上传的图片大小不能超过2MB！"); return false; } @@ -1001,12 +1205,79 @@ const handleExceed = (files, fileList) => { ElMessage.warning(`最多只能上传1张图片`); }; -const handlePictureCardPreview=(uploadFile)=>{ - dialogImageUrl.value = uploadFile.url! - dialogVisible.value = true -} +const handlePictureCardPreview = (uploadFile) => { + dialogImageUrl.value = uploadFile.url!; + dialogVisible.value = true; +}; -const handleUploadSuccess = (response, file, fileList, field) => { +const getBatchNo = async (file, type) => { + loading.value = true; + const rsp = await batchNoApi(file, type).then((res) => { + return res; + }); + loading.value = false; + if (rsp.status == 200) { + return rsp?.data; + } else { + return null; + } +}; + +const getOcrText = async (batchNo, type) => { + return new Promise(async (resolve, reject) => { + let formData: null | FormData = new FormData(); + + formData.append("batchNo", batchNo); + formData.append("imgType", type); + + clearTimeout(orcTimeout); + + orcTimeout = setTimeout(async () => { + const imgOcrRes = await imgOcrResultApi(formData); + + formData = null; + clearTimeout(orcTimeout); + + if (imgOcrRes.status != 200) { + reject(imgOcrRes?.data); + } else { + resolve(imgOcrRes?.data); + } + loading.value = false; + }, 1000); + }); +}; + +const handleOcrText = async (batchNo, imgType) => { + loading.value = true; + + switch (imgType) { + case "biz_license_image": + var res = (await getOcrText(batchNo, orcImgTypeConf.BUSINESS_LICENCE)) as any; + + console.log("biz_license_image", res); + applyFormData.biz_license_company = res.bizLicenseCompanyName; + applyFormData.legal_person_name = res.bizLicenseOwnerName; + applyFormData.biz_license_number = res.bizLicenseCreditCode; + applyFormData.account_holder_name = res.bizLicenseCompanyName; + break; + case "legal_person_id_images": + var res = (await getOcrText(batchNo, orcImgTypeConf.ID_CARD_FRONT)) as any; + + console.log("legal_person_id_images", res); + applyFormData.legal_person_id_number = res.idNumber; + break; + case "bank_image": + var res = (await getOcrText(batchNo, orcImgTypeConf.BANK_CARD)) as any; + console.log("bank_image", res); + applyFormData.account_number = res.card_number; + break; + } + + loading.value = false; +}; + +const handleUploadSuccess = async (response, file, fileList, field) => { if (response && response.status === 200 && response.code === 0) { if (response.data && response.data.url) { file.url = response.data.url; @@ -1016,39 +1287,89 @@ const handleUploadSuccess = (response, file, fileList, field) => { } else { applyFormData[field] = file.url; } - formRef.value.validate(); + loading.value = false; + currentFile.value = file.raw; + + switch (field) { + case "biz_license_image": + var res = await getBatchNo(file.raw, orcImgTypeConf.BUSINESS_LICENCE); + currentBbatchNo.value = res.batchNo + handleOcrText(res.batchNo, field) + break; + case "legal_person_id_images": + var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT); + currentBbatchNo.value = res.batchNo + handleOcrText(res.batchNo, field) + break; + case "bank_image": + var res = await getBatchNo(file.raw, orcImgTypeConf.BANK_CARD); + currentBbatchNo.value = res.batchNo + handleOcrText(res.batchNo, field) + break; + } } else { ElMessage.error("文件上传成功，但未返回文件 URL"); + loading.value = false; } } else { ElMessage.error(response.msg || "文件上传失败"); + loading.value = false; } }; const handleUploadError = (error, file) => { + loading.value = false; ElMessage.error("文件上传失败"); }; const clearOtherFields = () => { - if (applyFormData.entity_type === 1) { - // 清空个人部分的字段 - applyFormData.individual_id_number = ""; - applyFormData.individual_id_images = ""; - applyFormData.individual_id_images2 = ""; - } else if (applyFormData.entity_type === 2) { - // 清空企业部分的字段 - applyFormData.license_type = "1"; - applyFormData.license_number = ""; - applyFormData.biz_license_number = ""; - applyFormData.biz_license_company = ""; - applyFormData.legal_person_name = ""; - applyFormData.legal_person_mobile = ""; - applyFormData.legal_person_id_number = ""; - applyFormData.biz_license_image = ""; - applyFormData.license_image = []; - applyFormData.legal_person_id_images = ""; - applyFormData.legal_person_id_images2 = ""; - } + // if (applyFormData.entity_type === 1) { + // // 清空个人部分的字段 + // applyFormData.individual_id_number = ""; + // applyFormData.individual_id_images = ""; + // applyFormData.individual_id_images2 = ""; + // } else if (applyFormData.entity_type === 2) { + // // 清空企业部分的字段 + // applyFormData.license_type = "1"; + // applyFormData.license_number = ""; + // applyFormData.biz_license_number = ""; + // applyFormData.biz_license_company = ""; + // applyFormData.legal_person_name = ""; + // applyFormData.legal_person_mobile = ""; + // applyFormData.legal_person_id_number = ""; + // applyFormData.biz_license_image = ""; + // applyFormData.license_image = []; + // applyFormData.legal_person_id_images = ""; + // applyFormData.legal_person_id_images2 = ""; + // } }; + +onMounted(() => { + bankListRemoteMethod(); + + GetStoreCategories() + .then((res) => { + if (res.code === 0 && res.status === 200) { + cascaderOptions.value = transformStoreCategories(res.data); + } else { + } + }) + .catch((err) => { + ElMessage.error("获取店铺分类失败"); + }); + + GetAppDistrict() + .then((res) => { + if (res.code === 0 && res.status === 200) { + cityData2.value = res.data; + console.log(cascaderOptions3.value); + } else { + ElMessage.error("获取银行失败"); + } + }) + .catch((err) => { + ElMessage.error("获取银行失败"); + }); +});