317 lines
7.2 KiB
Vue
317 lines
7.2 KiB
Vue
<template>
|
|
<view class="page" :style="themeColor">
|
|
<view class="flex align-stretch benben-position-layout flex bindBankCard_flex_0"
|
|
:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
|
|
<view class='flex align-center justify-between flex-sub bindBankCard_fd0_0'>
|
|
<view class='flex align-center bindBankCard_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
|
|
data-url="1">
|
|
<text class='fu-iconfont2 bindBankCard_fd0_0_c0_c0'></text>
|
|
</view>
|
|
<view class='flex align-center'>
|
|
<text class='bindBankCard_fd0_0_c1_c0'>绑定银行卡</text>
|
|
</view>
|
|
<view class='flex align-center bindBankCard_fd0_0_c2'>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
|
|
<!---flex布局flex布局开始-->
|
|
<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout bindBankCard_flex_1">
|
|
<view class='flex flex-wrap align-center bindBankCard_fd1_0'>
|
|
<text class='bindBankCard_fd1_0_c0'>持卡人姓名</text>
|
|
<input class='flex-sub bindBankCard_fd1_0_c1' type="text" placeholder="请输入真实姓名" confirm-type="done"
|
|
:maxlength="-1" placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx" v-model="name" />
|
|
</view>
|
|
<view class='flex flex-wrap align-center bindBankCard_fd1_1'>
|
|
<text class='bindBankCard_fd1_1_c0'>银行名称</text>
|
|
<input class='flex-sub bindBankCard_fd1_1_c1' type="text" placeholder="请输入银行名称" confirm-type="done"
|
|
:maxlength="-1" placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
|
|
v-model="bankName" />
|
|
</view>
|
|
<view class='flex flex-wrap align-center bindBankCard_fd1_2'>
|
|
<text class='bindBankCard_fd1_2_c0'>银行卡号</text>
|
|
<input class='flex-sub bindBankCard_fd1_2_c1' type="number" placeholder="请输入银行卡号" confirm-type="done"
|
|
:maxlength="19" placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
|
|
v-model="bankCardNumber" />
|
|
</view>
|
|
<view class='flex flex-wrap align-center bindBankCard_fd1_3'>
|
|
<text class='bindBankCard_fd1_3_c0'>开户行</text>
|
|
<input class='flex-sub bindBankCard_fd1_3_c1' type="text" placeholder="请输入开户行" confirm-type="done"
|
|
:maxlength="-1" placeholder-style="color:rgba(191, 191, 191, 1);font-size:32rpx"
|
|
v-model="openingBank" />
|
|
</view>
|
|
</view>
|
|
|
|
<!---flex布局flex布局结束-->
|
|
<view class="flex align-start justify-center benben-position-layout flex bindBankCard_flex_2">
|
|
<button class='bindBankCard_fd2_0' @tap.stop="submitFunc()">提交</button>
|
|
|
|
</view>
|
|
<view :style="{height: '120rpx'}"></view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
validate
|
|
} from '@/common/utils/validate.js'
|
|
export default {
|
|
components: {},
|
|
|
|
|
|
data() {
|
|
return {
|
|
"name": "",
|
|
"bankName": "",
|
|
"bankCardNumber": "",
|
|
"openingBank": "",
|
|
account_id:""
|
|
};
|
|
},
|
|
computed: {
|
|
themeColor() {
|
|
return this.$store.getters.themeColor
|
|
},
|
|
|
|
},
|
|
watch: {},
|
|
onLoad(options) {
|
|
this.get_withdraw_account();
|
|
},
|
|
onUnload() {
|
|
|
|
},
|
|
onReady() {
|
|
|
|
},
|
|
onShow() {
|
|
|
|
},
|
|
onHide() {
|
|
|
|
},
|
|
onResize() {
|
|
|
|
},
|
|
onPullDownRefresh() {
|
|
|
|
},
|
|
onReachBottom(e) {
|
|
|
|
},
|
|
onPageScroll(e) {
|
|
|
|
},
|
|
methods: {
|
|
get_withdraw_account() { //获取用户已绑定的账户信息
|
|
this.$api.get(global.apiUrls.getWithdrawAccount, {
|
|
account_type: 3
|
|
}).then(res => {
|
|
console.log(res, '请求');
|
|
res = res.data;
|
|
if (res.code == 1) {
|
|
this.name = res.data.real_name;
|
|
this.bankCardNumber = res.data.account;
|
|
this.bankName = res.data.bank_name;
|
|
this.openingBank = res.data.bank_address;
|
|
|
|
|
|
}
|
|
});
|
|
},
|
|
//提交
|
|
submitFunc() {
|
|
if (!validate(this.name, 'require')) {
|
|
this.$message.info('持卡人姓名不能为空');
|
|
return false;
|
|
}
|
|
if (!validate(this.bankName, 'require')) {
|
|
this.$message.info('银行名称不能为空');
|
|
return false;
|
|
}
|
|
if (!validate(this.bankCardNumber, 'require')) {
|
|
this.$message.info('银行卡号不能为空');
|
|
return false;
|
|
}
|
|
// if (!validate(this.bankCardNumber, 'card')) {
|
|
// this.$message.info('请输入正确的银行卡号');
|
|
// return false;
|
|
// }
|
|
if (!validate(this.openingBank, 'require')) {
|
|
this.$message.info('开户行不能为空');
|
|
return false;
|
|
}
|
|
this.$api.post(global.apiUrls.postBindWithdrawAccount,{
|
|
real_name: this.name,
|
|
bank_name: this.bankName,
|
|
account_type: 3,
|
|
account: this.bankCardNumber,
|
|
bank_address:this.openingBank
|
|
}).then(res => {
|
|
console.log(res)
|
|
if(res.data.code == 1){
|
|
this.$message.info('绑定成功');
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
})
|
|
}
|
|
}).catch(err => {
|
|
console.log(err)
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
min-height: calc(100vh - var(--window-bottom));
|
|
background: #F8F8F8;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.bindBankCard_flex_0 {
|
|
border-bottom: 1px solid #eee;
|
|
background: #fff;
|
|
width: 750rpx;
|
|
height: 88rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
top: 0rpx;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.bindBankCard_fd0_0_c2 {
|
|
width: 180rpx;
|
|
}
|
|
|
|
.bindBankCard_fd0_0_c1_c0 {
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.bindBankCard_fd0_0_c0_c0 {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333;
|
|
}
|
|
|
|
.bindBankCard_fd0_0_c0 {
|
|
width: 180rpx;
|
|
}
|
|
|
|
.bindBankCard_fd0_0 {
|
|
padding: 0rpx 32rpx 0rpx 32rpx;
|
|
line-height: 88rpx;
|
|
}
|
|
|
|
.bindBankCard_flex_1 {
|
|
background: #fff;
|
|
padding: 0rpx 32rpx 0rpx 32rpx;
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.bindBankCard_fd1_3_c1 {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.bindBankCard_fd1_3_c0 {
|
|
width: 210rpx;
|
|
line-height: 43rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.bindBankCard_fd1_3 {
|
|
border-bottom: 1px solid #eee;
|
|
height: 109rpx;
|
|
}
|
|
|
|
.bindBankCard_fd1_2_c1 {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.bindBankCard_fd1_2_c0 {
|
|
width: 210rpx;
|
|
line-height: 43rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.bindBankCard_fd1_2 {
|
|
border-bottom: 1px solid #eee;
|
|
height: 109rpx;
|
|
}
|
|
|
|
.bindBankCard_fd1_1_c1 {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.bindBankCard_fd1_1_c0 {
|
|
width: 210rpx;
|
|
line-height: 43rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.bindBankCard_fd1_1 {
|
|
border-bottom: 1px solid #eee;
|
|
height: 109rpx;
|
|
}
|
|
|
|
.bindBankCard_fd1_0_c1 {
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333;
|
|
}
|
|
|
|
.bindBankCard_fd1_0_c0 {
|
|
width: 210rpx;
|
|
line-height: 43rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.bindBankCard_fd1_0 {
|
|
border-bottom: 1px solid #eee;
|
|
height: 109rpx;
|
|
}
|
|
|
|
.bindBankCard_flex_2 {
|
|
background: #fff;
|
|
width: 750rpx;
|
|
height: 120rpx;
|
|
overflow: hidden;
|
|
z-index: 10;
|
|
bottom: calc(0rpx + var(--window-bottom));
|
|
background-size: 100% auto !important;
|
|
}
|
|
|
|
.bindBankCard_fd2_0 {
|
|
background: rgba(255, 147, 0, 1);
|
|
border-radius: 40rpx 40rpx 40rpx 40rpx;
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
width: 686rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|