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" @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>

    <!-- 客服组件 -->
		<CustomerService />
</template>

<script setup>
	import {
		ref,
		computed,
	} from "vue"
	import { useStore } from 'vuex'
	import {
		cashOut,
		withdrawalSuccessful,
	} from "@/api/amount/index.js"
	
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	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 type =  ref(null)
	
	onLoad((options) => {
		console.log('options', options);
		type.value = options.type || 0;
	});
	
	
	const cashClick = () => {
		// 验证金额
		if (!num.value || num.value.trim() === '') {
			uni.showToast({
				icon: 'error',
				title: '金额不能为空',
				duration: 2000
			})
			return
		}
		
		const amount = parseFloat(num.value)
		if (isNaN(amount) || amount <= 0) {
			uni.showToast({
				icon: 'error',
				title: '请输入有效的金额',
				duration: 2000
			})
			return
		}
		
		if (amount < 0.01) {
			uni.showToast({
				icon: 'error',
				title: '提现金额不能小于0.01元',
				duration: 2000
			})
			return
		}
		
		
		// 转账成功后调用成功接口 65
		// withdrawalSuccessful({ id: 65 })
		
		fullName.value = ''
		inputDialogRef.value.open()
	}
	
	// 提现功能已改为审核流程，不再需要立即转账

	const dialogInputConfirm = (val) => {
		if (val) {
			
			//提现接口
			
			cashOut({
				userId: store.state.user.userInfo.userId,
				amount: num.value,
				nameValue: val,
				moneyType: type.value,
			}).then(res => {
				if (res.code == 200) {
					store.dispatch("getUserInfo")
					
					fullName.value = ''
					num.value = ''
					
					// 提现申请提交成功，跳转到流水页面查看审核状态
					uni.showToast({
						title: '提现申请已提交，等待审核',
						icon: 'none',
						duration: 1500,
						success() {
							setTimeout(() => {
								uni.navigateTo({
									url: '/otherPages/myOrdersManage/transaction/index?type=1'
								})
							}, 1500)
						}
					})
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg || '提现申请失败',
						duration: 2000
					})
				}
			}).catch(error => {
				console.error('提现申请失败:', error)
				uni.showToast({
					icon: 'error',
					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>