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

<template>
	<!-- <div>提现</div> -->
	<view class="box">
		<view class="top" :style="{ borderRadius: '16rpx' }">
			<view >
				提现金额
			</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>
			<up-parse :content="configList.withdrawal_statement.paramValueArea" containerStyle="{
          color: '#707070',
          fontSize: '30rpx',
          lineHeight: '45rpx',
        }"></up-parse>
		</view>
		<up-button class="buttom" type="warning" text="暂未开放" shape="circle" 
		style="color: #fff;background-color: #999;border: none;"
		></up-button>
		<!-- <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,
		computed,
	} from "vue"
	import { useStore } from 'vuex'
	import {
		cashOut
	} from "@/api/amount/index.js"
	
	const store = useStore()

	const configList = computed(() => {
		return store.getters.configList
	})

	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) {
			
			
			//提现接口
			
			cashOut({
				userId: store.state.user.userInfo.userId,
				amount:num.value,
				nameValue:val,
				moneyType:0,
			}).then(res => {
				if (res.code == 200) {
					store.dispatch("getUserInfo")
					uni.showToast({
						icon: 'success',
						title: '提现成功',
						duration: 2000
					})
					uni.navigateBack(-1)
				}
			})
			
			
			
			
			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>