539 lines
13 KiB
Vue
539 lines
13 KiB
Vue
<!-- 银行卡添加 -->
|
||
<template>
|
||
<view class="shop_type">
|
||
<view class="shop_type-head">
|
||
<view style="height: var(--status-bar-height);"></view>
|
||
<view class="shop-type-navbar">
|
||
<u-icon name="arrow-left" size="18" color="#fff" @click="handleBack" />
|
||
<text class="shop-type-navbar-title">{{bindForm.id?'修改银行卡绑定':'添加银行卡'}}</text>
|
||
<text></text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 表单部分 -->
|
||
<view class="withdrawal-con">
|
||
<view class="withdrawal">
|
||
<view class="withdrawal-left">
|
||
<text class="withdrawal-left-to">提现至</text>
|
||
<text
|
||
class="withdrawal-left-empty">{{bindForm.is_own === 0 ? '法人账户' : bindForm.is_own === 1 ? '对公账户':'请选择账户类型'}}</text>
|
||
</view>
|
||
|
||
<view class="withdrawal-right" @click="show = true">
|
||
<text class="withdrawal-right-add">{{bindForm.is_own === ''?'选择':'更换'}}账户</text>
|
||
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提现信息 法人账户-->
|
||
<view class="withdrawal-info" v-if="bindForm.is_own === 0">
|
||
<view class="withdrawal-form">
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">开户银行</view>
|
||
<view class="withdrawal-form-item-val">{{bindForm.bank?bindForm.bank:'请选择开户银行'}}</view>
|
||
|
||
<view class="withdrawal-change" @click="changeBank">
|
||
<text class="withdrawal-right-add">{{bindForm.bank?'更换':'选择'}}银行</text>
|
||
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">持卡人</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.name" type="text" placeholder="请输入持卡人"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">身份证</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.id_card" type="text" placeholder="请输入身份证"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">银行账户</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.bank_code" type="text" placeholder="请输入银行账户"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">开户网点</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.bank_branch" type="text" placeholder="请输入银行账户"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">手机号码</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.phone" type="text" placeholder="请输入手机号码"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 相关凭证 -->
|
||
<view class="withdrawal-envidence">
|
||
<view class="withdrawal-envidence">
|
||
<text class="withdrawal-envidence-main">请上传相关凭证</text>
|
||
<text class="withdrawal-envidence-sub">(图片格式支持JPG、PNG、JPEG)</text>
|
||
</view>
|
||
|
||
<view class="withdrawal-envience-img">
|
||
<view class="image-wrap" v-for="(item,indx) in bindForm.temp" :key="indx">
|
||
<view class="icon" @click="delImg(indx)">
|
||
<u-icon name="close-circle-fill" size="24" color="#909399" />
|
||
</view>
|
||
<image :src="item"></image>
|
||
</view>
|
||
|
||
<view class="image-wrap placeholder-img" @click="handleUpload">
|
||
<u-icon name="camera" size="40"></u-icon>
|
||
<text>上传凭证</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提现信息 对公账户-->
|
||
<view class="withdrawal-info" v-if="bindForm.is_own === 1">
|
||
<view class="withdrawal-form">
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">开户银行</view>
|
||
<view class="withdrawal-form-item-val">{{bindForm.bank?bindForm.bank:'请选择开户银行'}}</view>
|
||
|
||
<view class="withdrawal-change" @click="changeBank">
|
||
<text class="withdrawal-right-add">{{bindForm.bank?'更换':'选择'}}银行</text>
|
||
<u-icon name="arrow-right" size="14" color="#40AE36"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">账户名称</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.name" type="text" placeholder="请输入账户名称"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">银行账户</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.bank_code" type="text" placeholder="请输入银行账户"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="withdrawal-form-item">
|
||
<view class="withdrawal-form-item-label">开户网点</view>
|
||
<view class="withdrawal-form-item-val">
|
||
<input v-model="bindForm.bank_branch" type="text" placeholder="请输入开户网点"
|
||
placeholder-class="placeholderClass">
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提现btn -->
|
||
<view class="withdrawal-btn tapActive" v-if="bindForm.is_own !== ''" @click="handleBind">
|
||
<view class="withdrawal-btn-wrap">
|
||
<text>{{bindForm.id?'重新':''}}提交绑定</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提现账户 -->
|
||
<u-action-sheet title="请选择提现账户" :actions="list" :show="show" round="15" @select="handleSelected"
|
||
@close="show = false"></u-action-sheet>
|
||
|
||
<!-- 银行 -->
|
||
<u-action-sheet title="请选择银行" :actions="bankList" :show="bankShow" round="15" @select="handleSelectedBank"
|
||
@close="bankShow = false"></u-action-sheet>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
extractBank,
|
||
addBank,
|
||
searchBank,
|
||
getById
|
||
} from "@/api/user.js";
|
||
export default {
|
||
data() {
|
||
return {
|
||
list: [],
|
||
show: false,
|
||
bankList: [], //银行列表
|
||
bankShow: false,
|
||
bindForm: {
|
||
name: '', //姓名
|
||
bank: '', //银行
|
||
bank_code: '', //银行卡号
|
||
bank_branch: '', //开户行信息
|
||
financial_img: '', //凭证
|
||
id_card: '', //身份证号码
|
||
phone: '', //手机号
|
||
is_own: '', //转账类型(0个人，1对公)
|
||
temp: [],
|
||
id: 0
|
||
},
|
||
mer_id: ''
|
||
}
|
||
},
|
||
|
||
onLoad(opt) {
|
||
if (opt.id) {
|
||
this.bindForm.id = opt.id;
|
||
this.getBankById();
|
||
}
|
||
if (opt.mer_id) {
|
||
this.mer_id = opt.mer_id;
|
||
if (opt.hasOwnProperty('isOwn') && opt.isOwn === 0) {
|
||
this.list = [{
|
||
name: '对公账户'
|
||
}]
|
||
} else if (opt.hasOwnProperty('isOwn') && opt.isOwn === 1) {
|
||
this.list = [{
|
||
name: '法人账户'
|
||
}]
|
||
} else {
|
||
this.list = [{
|
||
name: '对公账户'
|
||
}, {
|
||
name: '法人账户'
|
||
}]
|
||
}
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
// 获取单条信息
|
||
getBankById() {
|
||
getById(this.bindForm.id).then(res => {
|
||
if (res.data && res.data.financial_account) {
|
||
Object.assign(this.bindForm, res.data.financial_account);
|
||
this.bindForm.id = res.data.id;
|
||
this.mer_id = this.bindForm.mer_id;
|
||
if (this.bindForm.is_own === 0 && this.bindForm.financial_img) {
|
||
this.$set(this.bindForm, 'temp', this.bindForm.financial_img.split(","));
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 账户类型
|
||
handleSelected(e) {
|
||
this.show = false;
|
||
if (e.name == '法人账户') this.bindForm.is_own = 0;
|
||
if (e.name == '对公账户') this.bindForm.is_own = 1;
|
||
},
|
||
|
||
// 上传图片
|
||
handleUpload() {
|
||
this.$util.uploadImageOne('upload/image', res => {
|
||
this.bindForm.temp.push(res.data.path);
|
||
});
|
||
},
|
||
|
||
// 删除图片
|
||
delImg(index) {
|
||
this.bindForm.temp.splice(index, 1);
|
||
},
|
||
|
||
// 选择银行卡
|
||
handleSelectedBank(e) {
|
||
this.bindForm.bank = e.name;
|
||
this.bankShow = false;
|
||
},
|
||
|
||
// 获取银行卡
|
||
changeBank() {
|
||
if (this.bankList.length > 0) {
|
||
this.bankShow = true;
|
||
} else {
|
||
extractBank().then(res => {
|
||
this.bankList = res.data;
|
||
this.bankShow = true;
|
||
})
|
||
}
|
||
},
|
||
|
||
// 绑定账号
|
||
handleBind() {
|
||
if (!this.bindForm.name) return this.$util.Tips({
|
||
title: this.bindForm.is_own === 0 ? '法人姓名不能为空！' : '账户名称不能为空！'
|
||
});
|
||
|
||
if (!this.bindForm.bank) return this.$util.Tips({
|
||
title: '请选择开户银行！'
|
||
});
|
||
|
||
if (!this.bindForm.bank) return this.$util.Tips({
|
||
title: '请输入银行账户！'
|
||
});
|
||
|
||
if (!this.bindForm.bank_branch) return this.$util.Tips({
|
||
title: '请输入开户网点！'
|
||
});
|
||
|
||
// 法人账号验证
|
||
if (this.bindForm.is_own === 0) {
|
||
if (!this.bindForm.temp.length > 0) return this.$util.Tips({
|
||
title: '请上传凭证！'
|
||
});
|
||
this.bindForm.financial_img = this.bindForm.temp.join(",");
|
||
|
||
if (!uni.$u.test.idCard(this.bindForm.id_card)) return this.$util.Tips({
|
||
title: '请输入正确的身份证号！'
|
||
});
|
||
|
||
if (!uni.$u.test.mobile(this.bindForm.phone)) return this.$util.Tips({
|
||
title: '请输入正确的手机号！'
|
||
});
|
||
}
|
||
|
||
|
||
addBank(this.mer_id, this.bindForm).then(res => {
|
||
this.$util.Tips({
|
||
title: '提交成功,请等待后台审核！'
|
||
}, () => {
|
||
uni.navigateBack();
|
||
});
|
||
}).catch(err => {
|
||
this.$util.Tips({
|
||
title: 'err'
|
||
});
|
||
})
|
||
},
|
||
|
||
// 返回上一级
|
||
handleBack() {
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
page {
|
||
background-color: #F8F9FA;
|
||
}
|
||
|
||
.shop_type {
|
||
padding-bottom: 184rpx;
|
||
|
||
.shop_type-head {
|
||
background-color: #40AE36;
|
||
margin-bottom: 30rpx;
|
||
|
||
.shop-type-navbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 30rpx;
|
||
height: 88rpx;
|
||
|
||
.shop-type-navbar-title {
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdrawal-con {
|
||
height: calc(100vh - 88rpx - 184rpx - var(--status-bar-height) - 30rpx);
|
||
overflow: auto;
|
||
padding-bottom: 30rpx;
|
||
|
||
.withdrawal {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #fff;
|
||
height: 102rpx;
|
||
border-radius: 20rpx;
|
||
margin: 0 30rpx 26rpx;
|
||
padding: 0 26rpx 0 30rpx;
|
||
|
||
.withdrawal-left {
|
||
display: flex;
|
||
|
||
.withdrawal-left-to {
|
||
margin-right: 42rpx;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.withdrawal-left-empty {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.withdrawal-right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.withdrawal-right-add {
|
||
font-size: 28rpx;
|
||
color: #40AE36;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdrawal-info {
|
||
margin: 0 30rpx;
|
||
|
||
.withdrawal-form {
|
||
padding: 0 30rpx;
|
||
margin-bottom: 30rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
|
||
.withdrawal-form-item {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 102rpx;
|
||
border-bottom: 2rpx solid #FBFCFC;
|
||
|
||
.withdrawal-form-item-label {
|
||
width: 120rpx;
|
||
margin-right: 42rpx;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
text-align: left;
|
||
}
|
||
|
||
.withdrawal-form-item-val {
|
||
color: #666666;
|
||
font-size: 30rpx;
|
||
|
||
/deep/.uni-input-placeholder,
|
||
.placeholderClass {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
}
|
||
|
||
input {
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.withdrawal-change {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
color: #40AE36;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdrawal-envidence {
|
||
border-radius: 20rpx;
|
||
|
||
.withdrawal-envidence {
|
||
margin-bottom: 30rpx;
|
||
|
||
.withdrawal-envidence-main {
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.withdrawal-envidence-sub {
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.withdrawal-envience-img {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
background-color: #fff;
|
||
padding: 24rpx 20rpx 16rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.image-wrap {
|
||
position: relative;
|
||
width: 152rpx;
|
||
height: 152rpx;
|
||
background: #ccc;
|
||
margin: 0 12rpx 8rpx 0;
|
||
border-radius: 8rpx;
|
||
|
||
&:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.icon {
|
||
position: absolute;
|
||
right: -24rpx;
|
||
top: -24rpx;
|
||
z-index: 10;
|
||
}
|
||
|
||
image {
|
||
width: 152rpx;
|
||
height: 152rpx;
|
||
}
|
||
}
|
||
|
||
.placeholder-img {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
border: 2rpx dashed #9E9E9E;
|
||
border-radius: 8rpx;
|
||
background-color: #F5F5F5;
|
||
|
||
text {
|
||
font-size: 22rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.withdrawal-btn {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: 184rpx;
|
||
width: 100%;
|
||
padding-top: 32rpx;
|
||
box-sizing: border-box;
|
||
background-color: #f7f8f9;
|
||
z-index: 10;
|
||
|
||
.withdrawal-btn-wrap {
|
||
height: 88rpx;
|
||
background: linear-gradient(359deg, #72BE53 0%, #46B03A 100%);
|
||
border-radius: 88rpx;
|
||
margin: 0 30rpx;
|
||
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
|
||
text {
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
color: #F5F5F5;
|
||
}
|
||
}
|
||
}
|
||
</style> |