384 lines
9.6 KiB
Vue
384 lines
9.6 KiB
Vue
<template>
|
|
<view class="shop-3-container">
|
|
<u-navbar :autoBack="true" :safeAreaInsetTop="true" title="填写店铺信息第3步 / 共3步">
|
|
<template slot="right">
|
|
<view class="btn-login-out" @click="loginOut">退出登录</view>
|
|
</template>
|
|
</u-navbar>
|
|
<u-form :model="form" ref="uForm" label-width="90">
|
|
<u-form-item label="开户名称" required prop="account_holder_name">
|
|
<u-input v-model="form.account_holder_name" placeholder="请输入开户名称" />
|
|
</u-form-item>
|
|
|
|
<u-form-item label="银行卡号" required prop="account_number">
|
|
<u-input
|
|
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"
|
|
>
|
|
<u-input
|
|
:readonly="!form.bank_name"
|
|
:style="{ pointerEvents: form.bank_name ? '' : 'none' }"
|
|
class="form-input"
|
|
v-model="form.bank_branch_name"
|
|
placeholder="请选择开户支行名称"
|
|
@change="onBranchBankChange"
|
|
/>
|
|
<u-icon
|
|
style="display: inline-block; margin-left: 8rpx"
|
|
name="arrow-down"
|
|
size="12"
|
|
color="aaaaaa"
|
|
></u-icon>
|
|
</u-form-item>
|
|
</u-form>
|
|
|
|
<lzcPicker
|
|
:pickerList="bankList"
|
|
:showKey="'bank_name'"
|
|
@change="handleCancel"
|
|
:searchPlaceholder="'输入开户支行名称'"
|
|
ref="lzcPicker"
|
|
pickerTittle="选择开户支行"
|
|
></lzcPicker>
|
|
|
|
<tui-dropdown-list
|
|
:show="BranchBankDropdownShow"
|
|
:height="500"
|
|
class="dropdown_branch"
|
|
>
|
|
<template v-slot:dropdownbox>
|
|
<div class="branch_list">
|
|
<template v-if="branchBankList.length">
|
|
<view
|
|
class="branch_list_item"
|
|
v-for="(item, index) in branchBankList"
|
|
:key="item.id"
|
|
@click="onBranchBankSelect(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>
|
|
</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>
|
|
|
|
<view class="btn-content">
|
|
<u-button class="btn-submit" @click="handleSubmit">提交审核</u-button>
|
|
</view>
|
|
|
|
<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 { mapState } from "vuex";
|
|
import { throttle, debounce } from "lodash";
|
|
|
|
export default {
|
|
components: {
|
|
lzcPicker,
|
|
tuiDropdownList,
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
bank_name: "",
|
|
bank_branch_name: "",
|
|
account_number: "",
|
|
account_holder_name: "",
|
|
},
|
|
bankList: [],
|
|
firstBranchBankLoad: false,
|
|
BranchBankDropdownShow: false,
|
|
branchBankDebounceFn: null,
|
|
currentBranchBank: null,
|
|
branchBankList: [],
|
|
rules: {
|
|
bank_name: [
|
|
{
|
|
required: true,
|
|
message: "请选择开户行",
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
account_number: [
|
|
{
|
|
required: true,
|
|
message: "请输入银行卡号",
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
account_holder_name: [
|
|
{
|
|
required: true,
|
|
message: "请输入开户名称",
|
|
// 可以单个或者同时写两个触发验证方式
|
|
trigger: ["change", "blur"],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState("user", ["approvalStatus"]),
|
|
},
|
|
onReady() {
|
|
this.$refs["uForm"].setRules(this.rules);
|
|
},
|
|
onShow() {
|
|
this.getBankList();
|
|
},
|
|
beforeUnmount() {
|
|
this.branchBankDebounceFn?.cancel();
|
|
},
|
|
mounted() {
|
|
let auditItem = uni.getStorageSync("auditItem");
|
|
|
|
this.form.account_holder_name = auditItem.biz_license_company;
|
|
this.branchBankDebounceFn = debounce(this.getBranchBankList, 500);
|
|
},
|
|
methods: {
|
|
async getBankList() {
|
|
let res = await GetBankList();
|
|
|
|
if (res && res.status == 200) {
|
|
this.bankList = res.data;
|
|
}
|
|
},
|
|
|
|
async getBranchBankList(keyword) {
|
|
let res = await branchBankSearchApi({
|
|
keyword,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
});
|
|
|
|
this.branchBankList = res.data.items;
|
|
this.firstBranchBankLoad = true;
|
|
},
|
|
|
|
async handleSubmit() {
|
|
let valid = this.$refs.uForm.validate().then((valid) => {
|
|
return valid;
|
|
});
|
|
|
|
if (valid) {
|
|
let auditItem = uni.getStorageSync("auditItem");
|
|
|
|
// auditItem.login_mobile = "18620139098";
|
|
|
|
let params = {
|
|
...this.form,
|
|
...auditItem,
|
|
...this.currentBranchBank
|
|
};
|
|
|
|
console.log("params", params);
|
|
|
|
if (this.approvalStatus == 2) {
|
|
params.id = uni.getStorageSync("auditId");
|
|
let res = await GetRestartMerchApply(params);
|
|
if (res && res.status == 200) {
|
|
uni.removeStorageSync("locationItem");
|
|
uni.removeStorageSync("auditItem");
|
|
uni.removeStorageSync("typeItem");
|
|
uni.removeStorageSync("auditId");
|
|
uni.navigateTo({ url: "/pages/audit/checkAudit" });
|
|
}
|
|
} else {
|
|
let res = await GetMerchApply(params);
|
|
if (res && res.status == 200) {
|
|
uni.removeStorageSync("locationItem");
|
|
uni.removeStorageSync("auditItem");
|
|
uni.removeStorageSync("typeItem");
|
|
uni.removeStorageSync("auditId");
|
|
uni.navigateTo({ url: "/pages/audit/checkAudit" });
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
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,
|
|
openning_bank_code: branch_bank_no,
|
|
clearing_bank_code: clear_no,
|
|
};
|
|
this.BranchBankDropdownShow = false;
|
|
this.form.bank_branch_name = data.branch_bank_name;
|
|
},
|
|
|
|
onBranchBankDropdownClose() {
|
|
this.BranchBankDropdownShow = false;
|
|
},
|
|
|
|
async onBranchBankChange() {
|
|
this.branchBankDebounceFn(this.form.bank_branch_name);
|
|
},
|
|
|
|
handleCancel(item) {
|
|
this.form.bank_name = item.bank_name;
|
|
},
|
|
|
|
loginOut() {
|
|
this.$store.dispatch("user/LoginOut");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.shop-3-container {
|
|
padding: 24rpx;
|
|
|
|
::v-deep .tui-dropdownlist-show {
|
|
box-shadow: 1rpx 1rpx 20rpx rgba(100, 100, 100, 0.1);
|
|
border: 1rpx solid rgba(100, 100, 100, 0.1);
|
|
overflow: visible;
|
|
|
|
.icon_close {
|
|
position: absolute;
|
|
bottom: -80rpx;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
|
|
.branch_list {
|
|
height: 500rpx;
|
|
overflow: auto;
|
|
background: #fff;
|
|
|
|
.branch_list_item {
|
|
font-size: 28rpx;
|
|
line-height: 28rpx;
|
|
padding: 20rpx;
|
|
border-bottom: 1rpx solid #eee;
|
|
}
|
|
|
|
.nodata {
|
|
height: 500rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
font-size: 28rpx;
|
|
|
|
.tit {
|
|
color: #666;
|
|
padding-bottom: 80rpx;
|
|
}
|
|
|
|
.tips {
|
|
padding: 10rpx 20rpx;
|
|
color: #fff;
|
|
border-radius: 100rpx;
|
|
background: #4b71ff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.u-navbar {
|
|
height: 88rpx;
|
|
}
|
|
|
|
.btn-content {
|
|
position: relative;
|
|
bottom: 24rpx;
|
|
width: 94%;
|
|
padding: 48rpx 24rpx;
|
|
}
|
|
|
|
.btn-submit {
|
|
border-radius: 16rpx;
|
|
background: #4b71ff;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-login-out {
|
|
font-size: 28rpx;
|
|
color: #4b71ff;
|
|
}
|
|
}
|
|
</style> |