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="form.amount"></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" @click="cashClick"></up-button>
	</view>

	<uni-popup ref="inputDialogRef" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="提现" v-model="form.name" 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 userInfo = computed(() => {
		return store.getters.userInfo
	})

	const form = ref({
		amount: '',
        name : '',
	})
	const inputDialogRef = ref(null)
	const inputClose =  ref(null)
	const cashClick = () => {
		
		if (form.value.amount) {
			form.value.name = ''
			inputDialogRef.value.open()
		} else {
			uni.showToast({
				icon: 'error',
				title: '金额不能为空',
				duration: 2000
			})
		}
	}

	const dialogInputConfirm = async (val) => {
		if (val) {
			
            let response = await cashOut({
                ...form.value,
                type: 0,
                userId: userInfo.value.userId
            })
            if (response.code == 200) {
                uni.showToast({
                    title: response.msg,
                    icon: "none"
                })
            }
			form.value.name = val
			inputClose.value.close()
			form.value.name = ''
		} else {
			uni.showToast({
				icon: 'error',
				title: '请输入姓名',
				duration: 2000
			})
		}
	}

	const close = () => {
		inputDialogRef.value.close()	
		form.value.name = ''
	}
</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>