txCar/pages/me/extract.vue

<template>
	<view class="box">
		<view class="header">
			<view class="title">支付宝提现</view>
			<view class="moneyView">
				<text class="icon">￥</text>
				<input type="digit" class="moneyInput" placeholder-style="color:#999999; font-size:30rpx"
					placeholder="请输入提现金额" v-model="money" />
				<view class="allBtn" @click="allBtn">全部提现</view>
			</view>
			<view class="zongMoney">可提现金额:￥{{okMoney}}</view>

			<view class="line"></view>
			<view class="name">
				<view class="leftTitle">姓名</view>
				<input type="text" class="Input" placeholder-style="color:#999999; font-size:30rpx" placeholder="支付宝实名"
					v-model="name" />
			</view>
			<view class="line"></view>

			<view class="name">
				<view class="leftTitle" style="margin-right: 60rpx;">支付宝</view>
				<input type="text" class="Input" placeholder-style="color:#999999; font-size:30rpx" placeholder="支付宝账户"
					v-model="account" />
			</view>
		</view>


		<view class="tishi" style="padding: 20rpx 44rpx;">支付宝账号或姓名输入错误将无法提现到账</view>

		<view class="sureBtn" @click="sure">确认提现</view>
		<view class="tishi">温馨提示</view>
		<view class="tishi">1、使用支付宝提现需要您已注册支付宝并在支付宝中实名认证过。</view>
		<view class="tishi">2、支付宝账号是您注册支付宝的手机号或者邮箱号，您可登录支付宝查看。</view>
		<view class="tishi">3、如您在提现中遇到其他问题，请在「我的」页面找到「联系我们」。</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				okMoney:'',
				money: '',
				name: '',
				account: '',
			}
		},
		onLoad(opt) {
			this.okMoney = opt.okMoney
		},
		methods: {
			allBtn(){
				this.money = this.okMoney
			},
			sure(){
				if (this.money > this.okMoney) {
					uni.showToast({
					     title: '提现金额不能大于可提现金额',
					 	 icon:'none',
					     duration: 3000,
					 });
					 return;
				}
				
				this.postData();
			},
			postData() {
				uni.showLoading({
					title: '提现中'
				})
				let url = 'worldKeepCar/worldDistribution/applyWithdrawal',
					params = {
						money:this.money,
						aliName:this.name,
						aliPhone:this.account,
					}
				this.$http(url, params, 'POST').then(res => {
					uni.hideLoading();
					uni.navigateBack({
						
					})
					
				
				})
			},
		}
	}
</script>

<style>
	.box {
		min-height: 100vh;
		background: #F4F5F7;
		padding-top: 20rpx;
	}

	.header {
		background-color: #FFFFFF;
		margin: 0 24rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		padding-bottom: 0;
	}

	.title {
		font-size: 30rpx;
		color: #3C3C3C;
		font-weight: bold;
	}

	.moneyView {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15rpx 0;
	}

	.icon {
		font-size: 50rpx;
		color: #222222;
		font-weight: bold;
	}

	.moneyInput {
		font-size: 70rpx;
		color: #222222;
		font-weight: bold;
		flex-grow: 1;
		height: 98rpx;
	}

	.allBtn {
		font-size: 26rpx;
		color: #FF4F00;
		width: 150rpx;
	}

	.zongMoney {
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}

	.line {

		background-color: #EEEEEE;
		height: 1rpx;
	}

	.name {
		display: flex;
		justify-content: flex-start;
		padding: 28rpx 0;
	}

	.leftTitle {
		font-size: 30rpx;
		color: #3C3C3C;
		margin-right: 90rpx;
	}

	.Input {
		font-size: 30rpx;
		color: #333333;

	}

	.tishi {
		padding: 0 44rpx;
		font-size: 26rpx;
		color: #999999;
		line-height: 1.5;
	}

	.sureBtn {
		width: 690rpx;
		margin: 20rpx 30rpx;
		border-radius: 37rpx;
		height: 74rpx;

		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		color: #FFFFFF;
		font-size: 30rpx;
		text-align: center;
		line-height: 74rpx;
	}
</style>