web-zk-h5/pages/mine/balance/withdrawal.vue

256 lines
6.5 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<view class="theform">
<u--form labelPosition="left" :model="dataForm" :rules="rules" ref="uForm">
<u-form-item label-width="200rpx" :label="$t('MY_WAL_24')" 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">
{{$t('MY_WAL_25')}}
</view>
</u-form-item>
<u-form-item label-width="200rpx" :label="`${$t('MY_WAL_26')}(${isLocaled()})`" prop="cashAmount"
borderBottom ref="item1">
<u--input type='number' v-model="dataForm.cashAmount" :placeholder="$t('S_C_70')"
border="none"></u--input>
</u-form-item>
<u-form-item label-width="200rpx" :label="$t('MY_WAL_21')" prop="payPwd" borderBottom ref="item1">
<template v-if="!ifeye">
<u--input type='password' v-model="dataForm.payPwd" :placeholder="$t('S_C_70')"
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="$t('S_C_70')" 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="$t('MY_WAL_22')" 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="$t('MY_WAL_28')" prop="pkAccountName"
@click="showAmount = true; " ref="item1">
<u--input v-model="dataForm.pkAccountName" disabled disabledColor="#ffffff"
:placeholder="$t('CK_KS_38')" 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>{{$t('MY_WAL_13')}}(¥)</view>
<view>{{widthDrwaData.amount||'0.00'}}</view>
</view>
<view class="linebox">
<view>{{$t('MY_WAL_29')}}(¥)</view>
<view>{{widthDrwaData.balance||'0.00'}}</view>
</view>
<view class="linebox">
<view>{{$t('MY_WAL_30')}}</view>
<view>{{widthDrwaData.srviceCharge||'0.00'}}</view>
</view>
<view class="linebox">
<view>{{$t('MY_WAL_31')}}(¥)</view>
<view>{{widthDrwaData.minAmount||'0.00'}}</view>
</view>
</view>
</view>
<view class="btnbox">
<u-button :disabled="canbind" class="subbtn" @click="submit">{{$t('MY_WAL_5')}}</u-button>
</view>
<u-toast ref="uToast"></u-toast>
</view>
</template>
<script>
import * as bal from "@/config/balance.js"
import {
isLocaled
} from '@/util/numberToCurrency'
export default {
data() {
return {
showAmount: false,
dataForm: {
cardNumber: "",
cashAmount: "",
payPwd: "",
remarks: "",
pkAccountName: "",
pkAccount: "",
pkBank: ""
},
pkBdAccountList: [],
rules: {
cashAmount: [{
type: 'string',
required: true,
message: this.$t('S_C_70'),
trigger: ['blur', 'change']
}],
payPwd: [{
type: 'string',
required: true,
message: this.$t('S_C_70'),
trigger: ['blur', 'change']
}],
pkAccountName: [{
required: true,
message: this.$t('CK_KS_38'),
trigger: ['change']
}],
},
bankData: {},
widthDrwaData: {},
ifeye: false,
canbind:false
}
},
watch: {
'dataForm.cashAmount': 'checkAccount'
},
onNavigationBarButtonTap() {
uni.navigateTo({
url:'/pages/mine/balance/withdrawlDetail'
})
},
onLoad() {
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) => {
this.bankData = res.data;
this.dataForm.pkBank = res.data.pkId;
});
//校验是否绑定银行卡
bal.checkIsbindBank().then(res => {
if (res.flag == 'Y') {
this.canbind = false
} else if (res.flag == 'N') {
this.canbind = true
}
})
},
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()
}, 1000);
}
})
}).catch(errors => {
uni.$u.toast(this.$t('MY_ORD_64'))
})
},
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(this.$t('MY_ORD_65'))
return
} else if (!this.dataForm.pkAccount) {
uni.$u.toast(this.$t('MY_ORD_66'))
return
}
bal.getWidthdrawShow({
pkAccount: this.dataForm.pkAccount,
cashAmount: this.dataForm.cashAmount,
}).then(res => {
this.widthDrwaData = res.data
})
}
}
}
</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: #FB3024;
border-radius: 46rpx;
font-size: 30rpx;
font-family: Source Han Sans CN;
font-weight: 400;
color: #FFFFFF;
}
}
}
</style>