pay-video-applet-uniapp-24-8-22/pages_mine/mine/withdraw.vue

<template>
	<view class="withdraw">
		<!--顶部导航栏-->
		<navbar leftClick @leftClick="$utils.navigateBack" title="提现" />

		<!--内容区-->
		<view class="content">

			<!--上部分-->
			<view class="content-top">
				<view class="aaa">
					<view class="top">￥{{money.money}}</view>
					<view class="bottom">可提现金额</view>
				</view>
			</view>

			<!--下部分-->
			<view class="content-bottom">

				<view class="inputComponent">
					<view class="left">填写提现金额</view>
					<view class="centerAndRight">
						<view class="center">
							<uv-input placeholder="输入金额" v-model="withdrawMoney" type="digit" border="none"></uv-input>
						</view>
						<view class="right" @click="withdrawMoney = money.money">全部提现</view>
					</view>
				</view>
				<view class="inputComponent">
					<view class="left">请输入真实姓名</view>
					<view class="centerAndRight">
						<view class="center">
							<uv-input placeholder="请输入真实姓名" v-model="name" border="none"></uv-input>
						</view>
					</view>
				</view>
				<view class="tips">
					温馨提示：真实姓名将影响到提现是否成功，请认真对待
				</view>
			</view>
		</view>
		
		<span class="income-record"
		style="bottom: 220rpx;"
		@click="$utils.navigateTo('/pages_mine/mine/withdrawalRecord')">提现记录</span>

		<!--提现按钮-->
		<button @click="withdrawPage" class="bottomBtn">
			提现
		</button>

	</view>
</template>

<script>
	import '../../common.css'; // 引入公共 CSS 文件

	export default {
		data() {
			return {
				withdrawMoney: "",
				name: "",
				money: {},
			};

		},
		onShow() {
			this.infoGetInfoMoney()
		},
		methods: {
			infoGetInfoMoney() {
				this.$api('infoGetInfoMoney', res => {
					if (res.code == 200) {
						this.money = res.result
					}
				})
			},

			// 提现
			withdrawPage() {
				let data = {
					money: this.withdrawMoney,
					name : this.name,
				}
				if(this.$utils.verificationAll(data, {
					money : '填写提现金额',//
					name : '请输入真实姓名',//
				})){
					return
				}
				this.$api('infoWithdraw', data, res => {
					if (res.code == 200) {
						uni.navigateTo({
							url: '/pages_mine/mine/withdrawalRecord'
						});
						// this.$utils.navigateTo('/pages_mine/mine/withdrawalRecord');
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdraw {
		.tips{
			color: #777;
			font-size: 28rpx;
		}
		.content {
			.content-top {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 60rpx;
				background-color: #f8faff;

				height: 10vh;

				.aaa {
					color: #000000;

					.top {
						font-size: 50rpx;
					}

					.bottom {
						font-size: 14px;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}


			}

			.content-bottom {
				border-radius: 50rpx 50rpx 0 0;
				box-shadow: 0 -10rpx 10rpx rgba(0, 0, 0, 0.2);
				/* 仅上边的阴影效果 */
				background-color: #fff;
				height: calc(90vh - 240rpx);
				//width: 100vw;
				padding: 40rpx;

				.inputComponent {
					display: flex;
					margin-bottom: 40rpx;
					//gap: 20rpx;
					//border: 1px solid red;

					.left {
						display: flex;
						justify-content: flex-start;
						align-items: center;

						font-size: 30rpx;

						width: 50%;
						margin-right: 20rpx;
					}

					.centerAndRight {
						display: flex;
						width: 60%;

						.center {
							width: 60%;
						}

						.right {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							font-size: 32rpx;
							margin-left: 20rpx;

							width: 40%;


							background: $uni-linear-gradient-color;
							-webkit-background-clip: text;
							/*将设置的背景颜色限制在文字中*/
							-webkit-text-fill-color: transparent;
							/*给文字设置成透明*/
						}
					}


				}
			}
		}
		.income-record {
			position: fixed;
			bottom: 160rpx;
			right: 40%;
			margin-bottom: 40rpx;
			background: $uni-linear-gradient-color;
			-webkit-background-clip: text;
			/*将设置的背景颜色限制在文字中*/
			-webkit-text-fill-color: transparent;
			/*给文字设置成透明*/
		}

	}
</style>