update: 地图组件更新格式和优化代码，店铺信息添加所在省市区字段，结算信息按新需求银行卡号和支行合并以及重构交互UI，先选择证件上传然后识别出来自动填写再显示表单内容，同时再选择银行，最后提交审核开店
This commit is contained in:
mixtan
parent
aea2bcd259
commit
09c2514f46
@ -32,9 +32,7 @@
|
||||
/>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
<view class="tips" v-if="searchAddressList.length > 0"
|
||||
>单击地址确定</view
|
||||
>
|
||||
<view class="tips" v-if="searchAddressList.length > 0">单击地址确定</view>
|
||||
<scroll-view
|
||||
v-if="form.searchAddress.length > 0"
|
||||
class="uni-swiper-list"
|
||||
@ -207,12 +205,14 @@ export default {
|
||||
if (
|
||||
!this.locationItem.selectAddress ||
|
||||
!this.locationItem.administrativeRegion
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.locationItem);
|
||||
|
||||
if (this.locationItem) {
|
||||
uni.setStorageSync("locationItem", this.locationItem);
|
||||
}
|
||||
|
||||
uni.navigateBack();
|
||||
},
|
||||
},
|
||||
|
||||
@ -6,11 +6,7 @@
|
||||
icon-size="30"
|
||||
loading-text="加载中,请稍等..."
|
||||
></u-loading-page> -->
|
||||
<u-navbar
|
||||
:autoBack="true"
|
||||
:safeAreaInsetTop="true"
|
||||
title="填写店铺信息"
|
||||
>
|
||||
<u-navbar :autoBack="true" :safeAreaInsetTop="true" title="填写店铺信息">
|
||||
<template slot="right">
|
||||
<view class="btn-login-out" @click="loginOut">退出登录</view>
|
||||
</template>
|
||||
@ -285,6 +281,11 @@ export default {
|
||||
params.mobile = userInfo.user_mobile;
|
||||
}
|
||||
|
||||
const store_area =
|
||||
locationItem.administrativeRegion.label[0] +
|
||||
locationItem.administrativeRegion.label[1] +
|
||||
locationItem.administrativeRegion.label[2];
|
||||
|
||||
let auditItem = {
|
||||
login_mobile: userInfo.user_mobile,
|
||||
store_name: this.form.store_name,
|
||||
@ -296,11 +297,8 @@ export default {
|
||||
province_id: locationItem.administrativeRegion.value[0],
|
||||
city_id: locationItem.administrativeRegion.value[1],
|
||||
county_id: locationItem.administrativeRegion.value[2],
|
||||
store_address:
|
||||
locationItem.administrativeRegion.label[0] +
|
||||
locationItem.administrativeRegion.label[1] +
|
||||
locationItem.administrativeRegion.label[2] +
|
||||
this.form.store_address,
|
||||
store_area,
|
||||
store_address: store_area + this.form.store_address,
|
||||
front_facade_image: this.form.storefrontImg,
|
||||
environment_image: this.form.surroundingsImg,
|
||||
};
|
||||
|
||||
@ -8,8 +8,35 @@
|
||||
|
||||
<view class="from1">
|
||||
<u-form :model="form" ref="uForm" label-width="90">
|
||||
<u-form-item label="" class="bankcard_item">
|
||||
<u-upload
|
||||
class="bankcard_upload"
|
||||
@afterRead="afterRead($event, 'bankCard')"
|
||||
@delete="deletePic($event, 'bankCard')"
|
||||
accept="image"
|
||||
:fileList="bankCardFiles"
|
||||
:max-count="1"
|
||||
uploadIconColor="#4b71ff"
|
||||
width="268"
|
||||
height="125"
|
||||
uploadText="点击上传银行卡正面"
|
||||
>
|
||||
</u-upload>
|
||||
<view
|
||||
v-if="bankCardFiles.length && !form.account_number"
|
||||
class="retry_ocr"
|
||||
@click="onBankOcrretryClick"
|
||||
>点击自动识别免填卡号</view
|
||||
>
|
||||
</u-form-item>
|
||||
|
||||
<template v-if="bankCardFiles.length && bankCardOcrLoaded">
|
||||
<u-form-item label="开户名称" required prop="account_holder_name">
|
||||
<u-input v-model="form.account_holder_name" placeholder="请输入开户名称" />
|
||||
<u-input
|
||||
v-model="form.account_holder_name"
|
||||
placeholder="请输入开户名称"
|
||||
readonly
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="银行卡号" required prop="account_number">
|
||||
@ -17,36 +44,21 @@
|
||||
type="number"
|
||||
v-model="form.account_number"
|
||||
placeholder="请输入银行卡号"
|
||||
/>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item label="开户行" prop="bank_name" required @click="showActionSheet">
|
||||
<u-input
|
||||
style="pointer-events: none"
|
||||
class="form-input"
|
||||
v-model="form.bank_name"
|
||||
placeholder="请选择开户行"
|
||||
readonly
|
||||
/>
|
||||
<u-icon
|
||||
style="display: inline-block; margin-left: 8rpx"
|
||||
name="arrow-down"
|
||||
size="12"
|
||||
color="aaaaaa"
|
||||
></u-icon>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item
|
||||
label="开户支行"
|
||||
prop="bank_branch_name"
|
||||
@click="branchBankActionSheet"
|
||||
label="开户银行"
|
||||
prop="branch_name"
|
||||
@click="onBranchDialogOpen"
|
||||
required
|
||||
>
|
||||
<u-input
|
||||
:readonly="!form.bank_name"
|
||||
:style="{ pointerEvents: form.bank_name ? '' : 'none' }"
|
||||
style="pointerevents: 'none'"
|
||||
class="form-input"
|
||||
v-model="form.bank_branch_name"
|
||||
placeholder="请选择开户支行名称"
|
||||
v-model="form.branch_name"
|
||||
placeholder="请选择开户银行"
|
||||
@change="onBranchBankChange"
|
||||
/>
|
||||
<u-icon
|
||||
@ -56,103 +68,117 @@
|
||||
color="aaaaaa"
|
||||
></u-icon>
|
||||
</u-form-item>
|
||||
</template>
|
||||
</u-form>
|
||||
</view>
|
||||
|
||||
|
||||
<lzcPicker
|
||||
:pickerList="bankList"
|
||||
:showKey="'bank_name'"
|
||||
@change="handleCancel"
|
||||
:searchPlaceholder="'输入开户支行名称'"
|
||||
ref="lzcPicker"
|
||||
pickerTittle="选择开户支行"
|
||||
></lzcPicker>
|
||||
|
||||
<tui-dropdown-list
|
||||
:show="BranchBankDropdownShow"
|
||||
:height="500"
|
||||
class="dropdown_branch"
|
||||
<u-popup
|
||||
:show="showBankDialog"
|
||||
closeable
|
||||
@open="onBranchDialogOpen"
|
||||
@close="onBranchDialogClose"
|
||||
>
|
||||
<template v-slot:dropdownbox>
|
||||
<u-input
|
||||
class="search_box"
|
||||
prefixIcon="search"
|
||||
v-model="branchSearchText"
|
||||
placeholder="搜索开户银行关键词"
|
||||
@change="onBranchBankChange"
|
||||
/>
|
||||
<div class="branch_list">
|
||||
<template v-if="branchBankList.length">
|
||||
<template v-if="bankList.length">
|
||||
<view
|
||||
class="branch_list_item"
|
||||
v-for="(item, index) in branchBankList"
|
||||
v-for="(item, index) in bankList"
|
||||
:key="item.id"
|
||||
@click="onBranchBankSelect(item, $event)"
|
||||
@click="onBankSelect(item, $event)"
|
||||
>
|
||||
{{ item.branch_bank_name }}
|
||||
</view>
|
||||
</template>
|
||||
<view v-else class="nodata">
|
||||
<template v-if="firstBranchBankLoad">
|
||||
<view class="tit">暂无法搜索到该开户支行</view>
|
||||
<view class="tips" @click="onUseBankBranchClick">点击填写</view>
|
||||
<view class="tit">暂无法搜索到该银行支行</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="tit">数据加载中...</view>
|
||||
</template>
|
||||
</view>
|
||||
</div>
|
||||
<u-icon
|
||||
v-if="firstBranchBankLoad"
|
||||
name="close-circle"
|
||||
color="#999"
|
||||
size="28"
|
||||
class="icon_close"
|
||||
@click="onBranchBankDropdownClose"
|
||||
></u-icon>
|
||||
</template>
|
||||
</tui-dropdown-list>
|
||||
</u-popup>
|
||||
|
||||
<view class="btn-content">
|
||||
<view class="myui_check_text">检查并确认资金结算信息无误</view>
|
||||
<u-button text="提交审核" color="#4b71ff" @click="handleSubmit"></u-button>
|
||||
<u-button text="上一步" class="myui_btn_prev" @click="handlePrev"></u-button>
|
||||
<view class="myui_check_text" v-if="bankCardFiles.length"
|
||||
>检查并确认结算证件信息无误</view
|
||||
>
|
||||
<u-button
|
||||
text="提交审核"
|
||||
color="#4b71ff"
|
||||
:disabled="!bankCardFiles.length"
|
||||
@click="handleSubmit"
|
||||
></u-button>
|
||||
<u-button
|
||||
text="上一步"
|
||||
class="myui_btn_prev"
|
||||
@click="handlePrev"
|
||||
></u-button>
|
||||
</view>
|
||||
|
||||
<u-loading-page
|
||||
:loading="loading"
|
||||
bgColor="rgba(0,0,0,0.5)"
|
||||
fontSize="32rpx"
|
||||
color="#fff"
|
||||
loadingText="数据正在加载中..."
|
||||
></u-loading-page>
|
||||
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
GetBankList,
|
||||
GetMerchApply,
|
||||
GetRestartMerchApply,
|
||||
branchBankSearchApi,
|
||||
} from "@/api/audit";
|
||||
import lzcPicker from "@/components/lzc-picker/lzc-picker.vue";
|
||||
import tuiDropdownList from "@/components/tui-dropdown-list/tui-dropdown-list.vue";
|
||||
import { batchNoApi, imgOcrResultApi } from "../../api/upload";
|
||||
import { mapState } from "vuex";
|
||||
import { throttle, debounce } from "lodash";
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
export default {
|
||||
components: {
|
||||
lzcPicker,
|
||||
tuiDropdownList,
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
bank_name: "",
|
||||
bank_branch_name: "",
|
||||
branch_name: "",
|
||||
account_number: "",
|
||||
account_holder_name: "",
|
||||
},
|
||||
bankList: [],
|
||||
bankCardFiles: [],
|
||||
loading: false,
|
||||
branchSearchText: "",
|
||||
bankCardOcrLoaded: false,
|
||||
firstBranchBankLoad: false,
|
||||
BranchBankDropdownShow: false,
|
||||
showBankDialog: false,
|
||||
branchBankDebounceFn: null,
|
||||
currentBranchBank: null,
|
||||
branchBankList: [],
|
||||
currentBank: {},
|
||||
currentBankFile: {},
|
||||
bankList: [],
|
||||
rules: {
|
||||
bank_name: [
|
||||
branch_name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择开户行",
|
||||
message: "请选择银行支行",
|
||||
// 可以单个或者同时写两个触发验证方式
|
||||
trigger: ["change", "blur"],
|
||||
},
|
||||
@ -182,9 +208,7 @@ export default {
|
||||
onReady() {
|
||||
this.$refs["uForm"].setRules(this.rules);
|
||||
},
|
||||
onShow() {
|
||||
this.getBankList();
|
||||
},
|
||||
onShow() {},
|
||||
beforeUnmount() {
|
||||
this.branchBankDebounceFn?.cancel();
|
||||
},
|
||||
@ -195,43 +219,128 @@ export default {
|
||||
this.branchBankDebounceFn = debounce(this.getBranchBankList, 500);
|
||||
},
|
||||
methods: {
|
||||
async getBankList() {
|
||||
let res = await GetBankList();
|
||||
getOcrText(filePath, file, type) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
this.loading = true;
|
||||
|
||||
if (res && res.status == 200) {
|
||||
this.bankList = res.data;
|
||||
const batchNoRes = await batchNoApi(filePath, file, type);
|
||||
const batchNo = batchNoRes.batchNo;
|
||||
|
||||
if (!batchNoRes) {
|
||||
this.loading = false;
|
||||
this.bankCardOcrLoaded = true;
|
||||
reject(batchNoRes);
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
let formDataStr = "";
|
||||
|
||||
formData.append("batchNo", batchNo);
|
||||
formData.append("imgType", type);
|
||||
|
||||
clearTimeout(this.orcTimeout);
|
||||
|
||||
this.orcTimeout = setTimeout(async () => {
|
||||
formData.forEach((value, key) => {
|
||||
if (formDataStr !== "") {
|
||||
formDataStr += "&";
|
||||
}
|
||||
formDataStr +=
|
||||
encodeURIComponent(key) + "=" + encodeURIComponent(value);
|
||||
});
|
||||
|
||||
const imgOcrRes = await imgOcrResultApi(formDataStr);
|
||||
|
||||
if (imgOcrRes?.status == 200) {
|
||||
this.showBankDialog = true;
|
||||
resolve(imgOcrRes?.data);
|
||||
} else {
|
||||
reject(imgOcrRes);
|
||||
}
|
||||
|
||||
clearTimeout(this.orcTimeout);
|
||||
this.loading = false;
|
||||
this.bankCardOcrLoaded = true;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
|
||||
async setFromItemWithOcr() {
|
||||
var ocr = await this.getOcrText(
|
||||
this.currentBankFile.path,
|
||||
this.currentBankFile.file,
|
||||
orcImgTypeConf.BANK_CARD
|
||||
);
|
||||
this.form.account_number = ocr.card_number;
|
||||
this.branchSearchText = ocr.issuer;
|
||||
console.log("bankCard", ocr);
|
||||
},
|
||||
|
||||
async afterRead(e) {
|
||||
const item = e.file;
|
||||
const imgUrl = item.url;
|
||||
|
||||
const group = {
|
||||
url: imgUrl,
|
||||
};
|
||||
|
||||
console.log(e);
|
||||
|
||||
this.currentBankFile = {
|
||||
file: item,
|
||||
path: imgUrl,
|
||||
};
|
||||
|
||||
this.bankCardFiles.push(group);
|
||||
this.setFromItemWithOcr();
|
||||
},
|
||||
|
||||
async onBankOcrretryClick() {
|
||||
this.setFromItemWithOcr();
|
||||
},
|
||||
|
||||
deletePic(e) {
|
||||
this.bankCardFiles.splice(0, 1);
|
||||
this.form.account_number = "";
|
||||
this.form.branch_name = "";
|
||||
this.branchSearchText = "";
|
||||
this.currentBank = {};
|
||||
this.bankCardOcrLoaded = false;
|
||||
},
|
||||
|
||||
async getBranchBankList(keyword) {
|
||||
let res = await branchBankSearchApi({
|
||||
keyword,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 1000 * 10,
|
||||
});
|
||||
|
||||
this.branchBankList = res.data.items;
|
||||
this.bankList = res.data.items;
|
||||
this.firstBranchBankLoad = true;
|
||||
},
|
||||
|
||||
handlePrev() {
|
||||
uni.navigateBack()
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
async handleSubmit() {
|
||||
let valid = this.$refs.uForm.validate().then((valid) => {
|
||||
return valid;
|
||||
if (!this.bankCardFiles.length) {
|
||||
this.$refs.uToast.show({
|
||||
message: "请上传银行卡正面",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.$refs.uForm.validate().then(async (valid) => {
|
||||
if (valid) {
|
||||
let auditItem = uni.getStorageSync("auditItem");
|
||||
|
||||
// auditItem.login_mobile = "18620139098";
|
||||
|
||||
let params = {
|
||||
...this.form,
|
||||
...auditItem,
|
||||
...this.currentBranchBank
|
||||
...this.currentBank,
|
||||
store_area: "北京北京市东城区北京动物园",
|
||||
};
|
||||
|
||||
console.log("params", params);
|
||||
@ -257,58 +366,37 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
showActionSheet() {
|
||||
this.$refs["lzcPicker"].handleShow();
|
||||
if (this.bankList.length <= 0) {
|
||||
this.getBankList();
|
||||
}
|
||||
},
|
||||
|
||||
branchBankActionSheet() {
|
||||
if (!this.form.bank_name) {
|
||||
this.$refs.uToast.show({
|
||||
message: "请选择开户行",
|
||||
type: "error",
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.form.bank_branch_name) {
|
||||
this.branchBankDebounceFn(this.form.bank_name || "中国银行");
|
||||
}
|
||||
|
||||
this.BranchBankDropdownShow = true;
|
||||
},
|
||||
|
||||
onUseBankBranchClick() {
|
||||
this.BranchBankDropdownShow = false;
|
||||
},
|
||||
|
||||
onBranchBankSelect(data) {
|
||||
const { area_code, branch_bank_name, branch_bank_no, clear_no } = data;
|
||||
this.currentBranchBank = {
|
||||
area_code,
|
||||
branch_bank_name,
|
||||
onBankSelect(data) {
|
||||
const { district, area, branch_bank_name, branch_bank_no, clear_no } =
|
||||
data;
|
||||
this.currentBank = {
|
||||
bank_district: district,
|
||||
bank_area: area,
|
||||
bank_name: branch_bank_name,
|
||||
openning_bank_code: branch_bank_no,
|
||||
clearing_bank_code: clear_no,
|
||||
};
|
||||
this.BranchBankDropdownShow = false;
|
||||
this.form.bank_branch_name = data.branch_bank_name;
|
||||
this.form.branch_name = branch_bank_name;
|
||||
this.showBankDialog = false;
|
||||
},
|
||||
|
||||
onBranchBankDropdownClose() {
|
||||
this.BranchBankDropdownShow = false;
|
||||
onBranchDialogOpen() {
|
||||
if (this.branchSearchText) {
|
||||
this.branchBankDebounceFn(this.branchSearchText || "中国银行");
|
||||
}
|
||||
|
||||
this.showBankDialog = true;
|
||||
},
|
||||
|
||||
onBranchDialogClose() {
|
||||
this.showBankDialog = false;
|
||||
},
|
||||
|
||||
async onBranchBankChange() {
|
||||
this.branchBankDebounceFn(this.form.bank_branch_name);
|
||||
},
|
||||
|
||||
handleCancel(item) {
|
||||
this.form.bank_name = item.bank_name;
|
||||
this.branchBankDebounceFn(this.branchSearchText);
|
||||
},
|
||||
|
||||
loginOut() {
|
||||
@ -318,7 +406,15 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
/deep/ .u-form-item__body {
|
||||
padding: 0 0 20rpx;
|
||||
}
|
||||
/deep/ .u-upload__wrap__preview,
|
||||
/deep/ .u-upload__button {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.shop-3-container {
|
||||
::v-deep .tui-dropdownlist-show {
|
||||
box-shadow: 1rpx 1rpx 20rpx rgba(100, 100, 100, 0.1);
|
||||
@ -333,7 +429,32 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .u-popup__content__close {
|
||||
top: -90rpx;
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
.u-icon__icon {
|
||||
color: #fff !important;
|
||||
border: 5rpx solid #fff;
|
||||
padding: 10rpx;
|
||||
font-size: 28rpx !important;
|
||||
line-height: 28rpx !important;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search_box {
|
||||
margin: 24rpx;
|
||||
background: rgba(238, 238, 238, 0.5);
|
||||
border-radius: 100rpx;
|
||||
/deep/ .input-placeholder {
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.branch_list {
|
||||
margin: 0 24rpx;
|
||||
height: 500rpx;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
@ -371,13 +492,12 @@ export default {
|
||||
height: 88rpx;
|
||||
}
|
||||
|
||||
|
||||
.from1 {
|
||||
padding: 24rpx 24rpx 24rpx 36rpx;
|
||||
padding: 24rpx 24rpx 0rpx 36rpx;
|
||||
}
|
||||
|
||||
.btn-content {
|
||||
padding: 30rpx 24rpx 88rpx;
|
||||
padding: 30rpx 48rpx 88rpx;
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
@ -390,5 +510,25 @@ export default {
|
||||
font-size: 28rpx;
|
||||
color: #4b71ff;
|
||||
}
|
||||
|
||||
.bankcard_upload {
|
||||
margin: auto;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/ .u-form-item__body__right {
|
||||
position: relative;
|
||||
}
|
||||
.retry_ocr {
|
||||
padding: 15rpx 24rpx;
|
||||
border-radius: 100rpx;
|
||||
color: #fff;
|
||||
background: rgba(75, 113, 255, 0.95);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user