yicangzongtai_app_240321/pages/user/distribution/withdrawTwo.vue

<template>
	<view class="container">
		<navbar :config="config" backColor="#666666"></navbar>
		<view class="u-plr30">
		<!-- <view class="wd-bgImg">
			<image src="../../../static/my-top-bgImg.png"></image>
			<view class="moneyInfo">
				<view class="u-flex-center-sb" style="padding: 38rpx 22rpx;">
					<view class="u-FFF">
						<view class="u-font30">已提现：<text class="u-font24">￥</text> <text class="u-font28">102.00</text> </view>
						<view class="u-font30 mt40">待提现：<text class="u-font24">￥</text> <text class="u-font28">102.00</text> </view>
					</view>
					<view class="detail-btn" @click="goWdDetail">
						<button>
							<text class="iconfont">&#xe63d;</text>
							<text class="u-font24 u-ml10">提现明细</text>
						</button>
					</view>
				</view>
			</view>
		</view> -->
		<view class="u-bg-fff u-p30 u-mt20">
			<view class="u-flex-center-sb">
				<view>
					<text>可转入金额</text>
					<text class="u-ml20 u-FF0000 u-bold u-font36">{{walletInfo.commission_able}}</text>
				</view>
				<view @click="goWallet">
					<text class="iconfont">&#xe638;</text>
				</view>
			</view>
		
		</view>
		
		
			<view class="wdInput u-mt20">
				<view class="u-mt20 input u-flex">
					<text>￥</text>
					<input class="u-ml10" maxlength="10" type="digit" @input="getMoney" v-model="dataForm.money" placeholder="输入金额" />
				</view>
			</view>

			

			<view class="apply-btn" @click="requestWithdrawal">
				<button class="u-btn-two">确定转入</button>
			</view>
		</view>


	</view>
</template>

<script>

	export default {
		
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '转入余额',
					color: '#1A1A1A',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#FFF"],
					statusBarFontColor: '#1A1A1A'
				},
				bankCardList: [], //银行卡列表
				dataForm: {
					money: '', //提现金额
					
				},
				bankIcon: '',
				pitchOnIndex:-3,
				walletInfo:{
					min_extract:0,
					wait_account:0,
					freezing:0
				},//账户信息
			}
		},
		onLoad() {
			let that = this
			//获取账户信息
			this.$http.get('/withdraw/getWalletInfo', {}).then(async res => {
				if (res && res.code == 200) {
					if(res.data){
						this.walletInfo = res.data
					}
					
				}
				})
			
		},
		methods: {
			
			//跳转到钱包明细
			goWallet(){
				uni.navigateTo({
					url: "./wallet"
				})
				},
			//获取输入提现金额
			getMoney(e) {
				e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				//重新赋值给input
				this.$nextTick(() => {
					this.dataForm.money= e.target.value
				})
			},
			
			//申请提现
			requestWithdrawal() {
				if (!this.dataForm.money) {
					this.$mUtil.toast('请输入金额')
					return false
				}
				
			
				this.$http.post('/withdraw/commission-to-balance', this.dataForm).then( res => {
					if (res && res.code == 200) {
						this.$mUtil.toast('转入成功')
						setTimeout(() => {
							uni.navigateBack({
							  success: () => {
							    let page = getCurrentPages().pop();  //跳转页面成功之后
							    if (!page) {
							      return;
							    } else {
							      page.onLoad(page.options);// page自带options对象.
							    }
							  }
							})
						}, 2000)
					}else{
						this.$mUtil.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.wt112 {
		width: 140rpx;
	}

	.img30 {
		width: 30rpx;
		height: 30rpx;
	}

	.wd-bgImg {
		position: relative;
		padding: 25rpx 0rpx;

		image {
			width: 100%;
			height: 200rpx;
			vertical-align: bottom;
		}

		.moneyInfo {
			position: absolute;
			top: 25rpx;
			width: 92%;

			.mt40 {
				margin-top: 40rpx;
			}

			.detail-btn button {
				height: 56rpx;
				line-height: 30rpx;
				border-radius: 28px;
				opacity: 0.82;
				padding: 10rpx 30rpx;
				background-color: #EED9A9;
				color: #0B844A;
			}
		}
	}

	.wdInput {
		background-color: #FFFFFF;
		border-radius: 18rpx 18rpx 0px 0rpx;
		padding: 40rpx 22rpx 32rpx;

		.input {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 60rpx;
			border-bottom: 1rpx solid #D9D9D9;
			padding-bottom: 25rpx;

			input {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 36rpx;
			}
		}
	}

	.bg-fff {
		background-color: #FFFFFF;
		padding: 26rpx 22rpx 36rpx;
		border-radius: 0rpx 0rpx 18px 18rpx;
	}

	.ml46 {
		margin-left: 46rpx;
	}

	.apply-btn {
		margin-top: 80rpx;

		button {
			background: #0B844A;
			color: #FFFFFF;
		}
	}

	.zfb-wx {
		padding-bottom: 24rpx;

		.payIcon {
			color: #00aaef;
			font-size: 32rpx;
			margin-right: 18rpx;
		}

		.wxIcon {
			color: rgb(37, 171, 56);
			font-size: 32rpx;
			margin-right: 18rpx;
		}
	}

	.zhInput input {
		width: 62%;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0rpx 20rpx;
		border: 1rpx solid #D9D9D9;
		border-radius: 6rpx;
	}

	.popup {
		width: 100%;
		.bg-top {
			background-color: #F5F5F5;
			padding: 20rpx 30rpx;
			border-radius: 18rpx 18rpx 0px 0px;
		}
		.bankCardList {
			background-color: #FFFFFF;
			padding: 0rpx 30rpx;
			padding-bottom: 185rpx;
			.item {
				height: 84rpx;
				line-height: 84rpx;
				image {
					width: 48rpx;
					height: 42rpx;
					margin-top: 20rpx;
					vertical-align: bottom;
				}
				.rh-br {
					width: 100%;
					border-bottom: 1rpx solid #E6E6E6;
				}
				.pull-right {
					float: right !important;
				}
			}
		}
	}

	.ml56 {
		margin-left: 56rpx;
	}

	.ml200 {
		margin-left: 200rpx;
	}
</style>