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" @input="inputValue" />
				<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">
			<rich-text :nodes="couContent"></rich-text>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				okMoney: '',
				money: '',
				name: '',
				account: '',
				detailData: {},
				couContent: '', //提现规则
			}
		},
		onLoad() {
			this.getDetailData()
		},
		methods: {
			getDetailData() {
				uni.showLoading({
					title: '加载中'
				})
				let url = 'worldKeepCar/worldDistribution/queryDistributionIndexDetail',
					params = {

					}
				this.$http(url, params, 'GET').then(res => {
					uni.hideLoading();
					var data = res.data


					// 处理 undefined和null转为空白字符串

					for (const key in data) {
						data[key] = this.$praseStrEmpty(data[key])
					}

					this.detailData = data
					this.okMoney = this.detailData.cantidatMoney
					if (this.detailData.tSSetting.withdrawalRules) {
						this.couContent = this.detailData.tSSetting.withdrawalRules.replace(/\<p/gi,
							'<p style="display: inline-block"');
					}



				})
			},
			inputValue(event) {
				if (event.detail.value < 0) {
					setTimeout(() => {
						this.money = 0; // 解决
					}, 0)
				} else {
					this.money = event.detail.value;
				}
			},

			allBtn() {

				setTimeout(() => {
					this.money = this.okMoney; // 解决
				}, 0)


				console.log('money,allmoney', this.money, this.okMoney);
			},
			sure() {
				if (this.money > this.okMoney) {
					uni.showToast({
						title: '提现金额不能大于可提现金额',
						icon: 'none',
						duration: 3000,
					});
					return;
				}
				if (this.money <= 0) {
					uni.showToast({
						title: '提现金额不能为空',
						icon: 'none',
						duration: 3000,
					});
					return;
				}
				if (!this.name) {
					uni.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 3000,
					});
					return;
				}
				if (!this.account) {
					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.showModal({
						title: '提交成功',
						content: '请耐心等待平台审核',
						showCancel:false,
						confirmText:'知道了',
						success: function(res) {

							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;
		width: 100%;
	}

	.allBtn {
		font-size: 26rpx;
		color: #FF4F00;
		width: 200rpx;
		height: 50rpx;
		line-height: 50rpx;
		margin-left: 10rpx;
		text-align: right;
	}

	.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>