jp-charge/pagesFinance/user/withdraw.vue

<template>
	<view>
		<u-navbar title="提现"></u-navbar>
		<view class="withdraw">
			<view class="withdraw-head">
				<p>提现至</p><span>{{code}}</span>
			</view>
			<view class="withdraw-main">
				<p>申请提现金额(元)</p>
				<view class="withdraw-input">
					<span>￥</span>
					<u-input v-model="value" :type="type" placeholder-style="font-size:28px;height:40px;line-height:40px;color:#ccc;" />
				</view>
			</view>
			<view class="withdraw-foot">
				<p>可提现余额 ¥{{home.accountBalance}}</p>
				<span @click="value=home.accountBalance">全部提现</span>
			</view>
		</view>
		<view class="applyBtn">
			<u-button :class="{
				'applyBtn-btn':!value
			}" @click="submit()" type="primary">申请提现，7日内到账</u-button>
		</view>
		<view class="withdraw-tips">
			<h4>提现说明：</h4>
			<p>由于银行清算，提现申请将于次日内到账。如遇高峰期，可能延时到账，请耐心等待。</p>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	import {
		substrMb
	} from '@/utils'
	export default {
		data() {
			return {
				code:"",
				value: '',
				type: 'number',
					home:{
						accountBalance:0
					},
			}
		},
		onReady() {
			
			this.getHomePage()
		},
		onShow(){
			this.getHomePage()
		},
		methods: {
			submit(){
				if(this.value>0&&this.value<=this.home.accountBalance){
					
				}else{
					uni.showToast({
						title: "请输入正确的金额"
					})
					return 
				}
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.applyWithdraw({
					amount:this.value
				}).then((res) => {
					
						uni.redirectTo({
							url:"/pagesFinance/user/applyResult?value="+this.value
						})
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			},
			getHomePage(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.homePage().then((res) => {
					this.home = res.data
					var bankCard="";
					if(this.home.bankCard){
						bankCard=substrMb(this.home.bankCard,0,4)+"****"+substrMb(this.home.bankCard,8,4)
					}
					this.code=this.home.bank+":"+bankCard;
					if(this.home.bank==null&&this.home.bankCard==null){
						this.code="未绑定"
					}
					
					uni.hideLoading()
					
				}).catch(error => {
					uni.showToast({
						title: error
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.withdraw-tips{
		margin:24px 16px;
		p{
			color:#999;
			margin-top: 4px;
		}
	}
	.withdraw{
		margin: 16px;
		background-color: #fff;
		padding: 16px;
		.withdraw-head{
			display: flex;
			align-items: center;
			p{
				color:#999;
			}
			span{
				margin-left: 12px;
			}
		}
		.withdraw-main{
			border-top: 1px solid #f7f7f7;
			border-bottom: 1px solid #f7f7f7;
			margin: 16px 0;
			padding: 16px 0;
			.withdraw-input{
				margin-top: 32px;
				display: flex;
				align-items: center;
				font-size: 28px;
				/deep/.uni-input-input{
					font-size: 28px;
				}
			}
		}
		.withdraw-foot{
			display: flex;
			align-items: center;
			p{
				color:#999
			}
			span{
				color:#2979FF;
				margin-left: 16px;
			}
		}
	}
	.applyBtn{
		margin: 16px;
	}
	.applyBtn-btn{
		background-color: #185AC6;
		opacity: 0.5;
		border-color:#185AC6 ;
		border-radius: 8px;
	}
</style>