dou_fire/pages/account/withdraws.vue

<template>
	<view class="content">
		<view class="block" v-if="banks.length > 0">
			<view class="bank">
				<view class="block-title">到账银行卡</view>
				<view class="bank-input">
					<label>开户银行</label>
					<picker class="banks-picker" :range="banks" range-key="name" :value="bankVal" @change="bankVal = $event.detail.value">
						<view class="banks-text" :class="{'gray': bankVal === 0}">{{banks[bankVal].name}}<uni-icons class="banks-icon" type="bottom" size="18" color="gray"></uni-icons></view>
					</picker>
				</view>
				<view class="bank-input">
					<label>银行卡号</label>
					<input type="number" placeholder="输入银行卡号" maxlength="20" v-model="bankNo">
				</view>
				<view class="bank-input">
					<label>预留手机号</label>
					<input type="number" placeholder="输入银行开户预留手机号" maxlength="11" v-model="mobile">
				</view>
				<view class="bank-input">
					<label>持卡人姓名</label>
					<input type="text" placeholder="输入开户人真实姓名" maxlength="15" v-model="name">
				</view>
			</view>
			<view class="cny">
				<view class="bank-from">
					<view class="block-title">提现金额</view>
					<view class="title"><text v-if="min >= 1">最小提现金额：{{min}}元，</text><text>提现手续费{{rate}}%</text></view>
					<view class="input">
						<label>￥</label>
						<input placeholder="0.00" type="number" v-model="amount" />
					</view>
					<view class="balance" v-if="!greater">当前账户余额{{balance}}<text @click="amount = balance">全部提现</text></view>
					<view class="balance red" v-else>输入金额超过账户余额</view>
				</view>
				<button class="cny-btn" :disabled="greater" @click="onSubmit">申请提现</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { withdrawsCreate, withdraws } from '@/apis/interfaces/account.js'
	export default {
		data() {
			return {
				banks	: [],
				bankVal : 0,
				bankNo	: '',
				mobile	: '',
				name	: '',
				amount	: '',
				min		: 0,
				rate	: 0,
				balance	: '0.00'
				
			};
		},
		computed: {
			greater(){
				return parseFloat(this.amount) > parseFloat(this.balance)
			}
		},
		created() {
			uni.showLoading({
				title: '加载中...',
				mask : true
			})
			withdrawsCreate().then(res => {
				let { bank, tax, min, balance, banks} = res;
				let bankIndex
				this.rate 	 = tax
				this.min  	 = min
				this.balance = balance
				this.banks   = [ { id: '', name: '请选择开户银行'}, ...banks ]
				if(bank.bank_no){
					bankIndex = this.banks.findIndex(val => val.name === bank.bank_name)
					this.bankNo	 = bank.bank_no
					this.mobile	 = bank.mobile
					this.name	 = bank.name
					this.bankVal = bankIndex >= 0 ? bankIndex : 0
				}
				uni.hideLoading()
			}).catch(err => {
				uni.showToast({
					title: err.message,
					icon : 'none'
				})
			})
		},
		methods: {
			onSubmit(){
				if(this.bankVal === 0){
					uni.showToast({
						title: '请选择开户银行',
						icon : 'none'
					})
					return
				}
				uni.showLoading({
					title: '提交中...',
					mask : true
				})
				withdraws({
					bank_name	: this.banks[this.bankVal].name,
					amount		: this.amount,
					name  		: this.name,
					mobileNo	: this.mobile,
					bank_no		: this.bankNo,
				}).then(res => {
					uni.showModal({
						title		: '提示',
						content		: res,
						showCancel	: false,
						success		: ModalRes => {
							if(ModalRes.confirm){
								this.$Router.back()
							}
						}
					})
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 30rpx;
	}
	.block{
		background: white;
		.block-title{
			font-size: 30rpx;
			color: gray;
			line-height: 50rpx;
		}
		.bank{
			background: #fdfdfd;
			padding: 50rpx;
			.bank-input{
				display: flex;
				justify-content: space-between;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 30rpx;
				@extend .border-solid;
				label{
					width: 200rpx;
					color: #333;
				}
				input{
					font-size: 30rpx;
					width: calc(100% - 200rpx);
					height: 100rpx;
					vertical-align: top;
					text-align: right;
				}
				.banks-picker{
					font-size: 30rpx;
					width: calc(100% - 200rpx);
					text-align: right;
					.banks-text{
						&.gray{
							color: gray;
						}
						.banks-icon{
							vertical-align: middle;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
		.cny{
			padding: 50rpx;
			.cny-btn{
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				background: $main-color;
				color: white;
				font-size: 34rpx;
				margin-top: 50rpx;
				&::after{
					display: none;
				}
				&[disabled]{
					opacity: .7;
				}
			}
			// 提现
			.bank-from{
				background: white;
				border-radius: 10rpx;
				.title{
					padding-bottom: 20rpx;
					line-height: 40rpx;
					font-size: 30rpx;
					color: #333;
					text{
						font-size: 90%;
						color: gray;
					}
				}
				.input{
					display: flex;
					@extend .border-solid;
					font-size: 60rpx;
					height: 120rpx;
					line-height: 120rpx;
					font-weight: 500;
					font-family: Arial, Helvetica, sans-serif;
					input{
						flex: 1;
						height: 120rpx;
						padding: 0;
						margin: 0;
						font-size: 70rpx;
					}
				}
				.balance{
					font-size: 28rpx;
					line-height: 60rpx;
					padding-top: 20rpx;
					text{
						color: $main-color;
						margin-left: 10rpx;
					}
					&.red{
						color: $text-price;
					}
				}
			}
		}
	}
</style>