web-store-retail-h5/pages/mine/balance/withdrawal.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 :disabled="canbind" class="subbtn" @click="submit">{{'提现'}}</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: '请输入',
						trigger: ['blur', 'change']
					}],
					payPwd: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					pkAccountName: [{
						required: true,
						message: '请选择',
						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('校验失败')
				})
			},
			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
				})
			}
		}
	}
</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>