360 lines
9.0 KiB
Vue
360 lines
9.0 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="theform">
|
||
<u--form
|
||
labelPosition="left"
|
||
:model="dataForm"
|
||
:rules="rules"
|
||
ref="uForm"
|
||
>
|
||
<u-form-item
|
||
label-width="200rpx"
|
||
:label="'银行卡号'"
|
||
prop="cardNumber"
|
||
borderBottom
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
v-if="bankData.cardNumber"
|
||
v-model="bankData.cardNumber"
|
||
disabled
|
||
disabledColor="#F5F5F5;"
|
||
border="none"
|
||
></u--input>
|
||
<view v-else style="color: red" @click="goBindbank">
|
||
{{ '请先绑定银行卡' }}
|
||
</view>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label-width="200rpx"
|
||
:label="`${'提现金额'}(${isLocaled()})`"
|
||
prop="cashAmount"
|
||
borderBottom
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
type="number"
|
||
v-model="dataForm.cashAmount"
|
||
:placeholder="'请输入'"
|
||
border="none"
|
||
></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label-width="200rpx"
|
||
:label="'二级密码'"
|
||
prop="payPwd"
|
||
borderBottom
|
||
ref="item1"
|
||
>
|
||
<template v-if="!ifeye">
|
||
<u--input
|
||
type="password"
|
||
v-model="dataForm.payPwd"
|
||
:placeholder="'请输入'"
|
||
border="none"
|
||
></u--input>
|
||
<image
|
||
@click="ifeye = !ifeye"
|
||
slot="right"
|
||
style="width: 38rpx; height: 25rpx"
|
||
src="../../../static/images/my_eye.png"
|
||
mode=""
|
||
></image>
|
||
</template>
|
||
<template v-if="ifeye">
|
||
<u--input
|
||
v-model="dataForm.payPwd"
|
||
:placeholder="'请输入'"
|
||
border="none"
|
||
></u--input>
|
||
<image
|
||
@click="ifeye = !ifeye"
|
||
slot="right"
|
||
style="width: 38rpx; height: 30rpx"
|
||
src="../../../static/images/my_eye2.png"
|
||
mode=""
|
||
></image>
|
||
</template>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label-width="200rpx"
|
||
:label="'备注'"
|
||
prop="remarks"
|
||
borderBottom
|
||
ref="item1"
|
||
>
|
||
<u--input v-model="dataForm.remarks" border="none"></u--input>
|
||
</u-form-item>
|
||
<u-form-item
|
||
label-width="200rpx"
|
||
:label="'提现账户'"
|
||
prop="pkAccountName"
|
||
@click="showAmount = true"
|
||
ref="item1"
|
||
>
|
||
<u--input
|
||
v-model="dataForm.pkAccountName"
|
||
disabled
|
||
disabledColor="#ffffff"
|
||
:placeholder="'请选择'"
|
||
border="none"
|
||
></u--input>
|
||
<u-icon slot="right" name="arrow-right"></u-icon>
|
||
</u-form-item>
|
||
<u-picker
|
||
@cancel="showAmount = false"
|
||
:show="showAmount"
|
||
ref="uPicker"
|
||
:columns="pkBdAccountList"
|
||
@confirm="confirm"
|
||
keyName="accountName"
|
||
></u-picker>
|
||
</u--form>
|
||
|
||
<view class="contentbox">
|
||
<view class="linebox">
|
||
<view>{{ '可提现金额' }}(￥)：</view>
|
||
<view>{{ widthDrwaData.amount || '0.00' }}</view>
|
||
</view>
|
||
<view class="linebox">
|
||
<view>{{ '账户余额' }}(￥)：</view>
|
||
<view>{{ widthDrwaData.balance || '0.00' }}</view>
|
||
</view>
|
||
<view class="linebox">
|
||
<view>{{ '提现手续费' }}：</view>
|
||
<view>{{ widthDrwaData.srviceCharge || '0.00' }}</view>
|
||
</view>
|
||
<view class="linebox">
|
||
<view>{{ '最低提现额度' }}(￥)：</view>
|
||
<view>{{ widthDrwaData.minAmount || '0.00' }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="btnbox">
|
||
<u-button class="subbtn" @click="submit">{{ '提现' }}</u-button>
|
||
</view>
|
||
<u-toast ref="uToast"></u-toast>
|
||
<u-modal
|
||
:show="unBindDefaultModal"
|
||
showCancelButton
|
||
@cancel="unBindDefaultModal = false"
|
||
cancelText="取消"
|
||
confirmText="确定"
|
||
@confirm="unBindDefaultConfirm"
|
||
>
|
||
请先绑定默认银行卡
|
||
</u-modal>
|
||
<!-- 提现引导弹窗 -->
|
||
<!-- <WithdrawalGuide
|
||
:show="showWithdrawalGuide"
|
||
@confirm="onWithdrawalGuideConfirm"
|
||
/> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import * as bal from '@/config/balance.js'
|
||
import { isLocaled } from '@/util/numberToCurrency'
|
||
import WithdrawalGuide from '@/components/withdrawalGuide/index.vue'
|
||
|
||
export default {
|
||
components: {
|
||
WithdrawalGuide,
|
||
},
|
||
data() {
|
||
return {
|
||
showAmount: false,
|
||
dataForm: {
|
||
cardNumber: '',
|
||
cashAmount: '',
|
||
payPwd: '',
|
||
remarks: '',
|
||
pkAccountName: '',
|
||
pkAccount: '',
|
||
pkBank: '',
|
||
},
|
||
pkBdAccountList: [],
|
||
rules: {
|
||
cashAmount: [
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
],
|
||
payPwd: [
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请输入',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
],
|
||
pkAccountName: [
|
||
{
|
||
required: true,
|
||
message: '请选择',
|
||
trigger: ['change'],
|
||
},
|
||
],
|
||
},
|
||
bankData: {},
|
||
widthDrwaData: {},
|
||
ifeye: false,
|
||
canbind: true,
|
||
showWithdrawalGuide: false,
|
||
unBindDefaultModal: false,
|
||
}
|
||
},
|
||
watch: {
|
||
'dataForm.cashAmount': 'checkAccount',
|
||
},
|
||
onNavigationBarButtonTap() {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/balance/withdrawlDetail',
|
||
})
|
||
},
|
||
onShow() {
|
||
this.getList()
|
||
},
|
||
methods: {
|
||
isLocaled,
|
||
//绑定银行卡
|
||
goBindbank() {
|
||
uni.navigateTo({
|
||
url: '/pages/mine/bindBank/bindBank',
|
||
})
|
||
},
|
||
getList() {
|
||
bal
|
||
.getPkBdAccountList({
|
||
accountProperty: 3,
|
||
})
|
||
.then(res => {
|
||
res.data.forEach(ele => {
|
||
ele.name = ele.accountName
|
||
})
|
||
this.pkBdAccountList = [res.data]
|
||
|
||
if (this.pkBdAccountList.length > 0) {
|
||
this.dataForm.pkAccountName = res.data[0].accountName
|
||
this.dataForm.pkAccount = res.data[0].pkId
|
||
}
|
||
})
|
||
bal.getDefaultBank().then(res => {
|
||
if (res.data && Object.keys(res.data).length > 0) {
|
||
this.bankData = res.data
|
||
this.dataForm.pkBank = res.data.pkId
|
||
} else {
|
||
this.unBindDefaultModal = true
|
||
}
|
||
})
|
||
},
|
||
unBindDefaultConfirm() {
|
||
this.unBindDefaultModal = false
|
||
uni.navigateTo({
|
||
url: '/pages/mine/bindBank/index',
|
||
})
|
||
},
|
||
submit() {
|
||
this.$refs.uForm
|
||
.validate()
|
||
.then(res => {
|
||
bal.addWithdraw(this.dataForm).then(res => {
|
||
if (res.code == 200) {
|
||
this.$refs.uToast.show({
|
||
message: res.msg || '提现成功',
|
||
type: 'success',
|
||
})
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 500)
|
||
|
||
// 显示提现引导弹窗
|
||
// setTimeout(() => {
|
||
// this.showWithdrawalGuide = true
|
||
// }, 300)
|
||
}
|
||
})
|
||
})
|
||
.catch(errors => {
|
||
uni.$u.toast('校验失败')
|
||
})
|
||
},
|
||
confirm(e) {
|
||
this.dataForm.pkAccountName = e.value[0].accountName
|
||
this.dataForm.pkAccount = e.value[0].pkId
|
||
this.showAmount = false
|
||
this.checkAccount()
|
||
},
|
||
checkAccount() {
|
||
if (!this.dataForm.cashAmount) {
|
||
uni.$u.toast('请先输入金额')
|
||
return
|
||
} else if (!this.dataForm.pkAccount) {
|
||
uni.$u.toast('请先选择账户')
|
||
return
|
||
}
|
||
bal
|
||
.getWidthdrawShow({
|
||
pkAccount: this.dataForm.pkAccount,
|
||
cashAmount: this.dataForm.cashAmount,
|
||
})
|
||
.then(res => {
|
||
this.widthDrwaData = res.data
|
||
})
|
||
},
|
||
// 处理提现引导弹窗确认
|
||
onWithdrawalGuideConfirm() {
|
||
this.showWithdrawalGuide = false
|
||
uni.navigateBack()
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content {
|
||
background: #f2f2f2;
|
||
|
||
.theform {
|
||
margin-top: 6rpx;
|
||
background: #ffffff;
|
||
padding: 20rpx 23rpx 48rpx 23rpx;
|
||
|
||
.contentbox {
|
||
background: rgba(251, 48, 36, 0.15);
|
||
border-radius: 20rpx;
|
||
padding: 35rpx 20rpx;
|
||
margin-top: 20rpx;
|
||
|
||
.linebox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-top: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btnbox {
|
||
margin-top: 38rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.subbtn {
|
||
background: #005bac;
|
||
border-radius: 46rpx;
|
||
font-size: 30rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|