pet-front/otherPages/binding/withdrawal/index.vue

<template>
	<!-- <div>提现</div> -->
	<view class="box">
		<view class="top" :style="{ borderRadius: '16rpx' }">
			<view class="">
				提现金额
			</view>
			<view class="level">
				<view class="money level">
					<text>¥</text>
					<up-input class="amount" placeholderClass="placeInput" placeholder="请输入提现金额" clearable fontSize="34rpx"
						border="bottom" type="number" color="#FF2742" v-model="num"></up-input>
				</view>
				<!-- <DForm :list="state. " @submit="handleSubmit" /> -->
			</view>
		</view>
	</view>
	
	<view class="center">
		<view class="text">
			提现说明
		</view>
		<view>
			1、单日提现次数上限为5次;单笔提现上限200元;
		</view>
		<view>
			2、直接提现至微信账户，无法提现至支付宝;
		</view>
		<up-button class="buttom" type="warning" text="提现" shape="circle" @click="cashClick"></up-button>
	</view>

	<uni-popup ref="inputDialogRef" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="提现" v-model="fullName" placeholder="请输入姓名"
			@confirm="dialogInputConfirm" @close="close" :before-close="true"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const num = ref('');;
	const fullName = ref('')
	const inputDialogRef = ref(null)
	const inputClose =  ref(null)
	const cashClick = () => {
		
		if (num.value) {
			fullName.value = ''
			inputDialogRef.value.open()
		} else {
			uni.showToast({
				icon: 'error',
				title: '金额不能为空',
				duration: 2000
			})
		}
	}

	const dialogInputConfirm = (val) => {
		if (val) {
			uni.showToast({
				icon: 'success',
				title: '提现成功',
				duration: 2000
			})
			fullName.value = val
			inputClose.value.close()
			fullName.value = ''
		} else {
			uni.showToast({
				icon: 'error',
				title: '请输入姓名',
				duration: 2000
			})
		}
	}

	const close = () => {
		inputDialogRef.value.close()	
		fullName.value = ''
	}
</script>

<style scoped lang="scss">
	.box {
		width: 750rpx;
		height: 180rpx;
		background-image: linear-gradient(to bottom, #FFBF60, #FFFFFF);
		padding: 60rpx 24rpx 0 24rpx;
		box-sizing: border-box;
	}

	.top {
		width: 702rpx;
		height: 227rpx;
		background-color: #FFFFFF;
		padding: 24rpx 34rpx 0 34rpx;
		box-sizing: border-box;
	}

	.money {
		width: 550rpx;
		height: 71rpx;
		/* background-color: #FFBF60; */
		color: red !important;
		font-size: 54rpx !important;
		margin: 3% 0 0 5%;
		font-weight: 700;

		.amount {
			margin-left: 5%;
			height: 71rpx;
		}

		.placeInput {
			font-weight: 100;
		}
	}



	.center {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		font-size: 30rpx;
		color: #707070;
		padding: 0 50rpx;
		;
		box-sizing: border-box;
		margin-top: 80rpx;
	}

	.text {
		color: #000000;
		font-weight: 700;
		margin-bottom: 30rpx;
	}

	.buttom {
		width: 544rpx;
		height: 89rpx;
		background-color: #FFBF60;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 41rpx;
		margin-top: 300rpx;
	}

	.level {
		display: flex;
	}
</style>