pet-front/otherPages/myOrdersManage/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>
					<input v-model="form.amount" type="digit" />
				</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>
		<view @click="handleSubmit" class="buttom level" :style="{ borderRadius: '41rpx' }">
			提现
		</view>
	</view>
	<view >
		<!-- <u-popup :show="show" mode="center" @close="close" @open="open"> -->
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed
	} from "vue";
	import DForm from "@/components/dForm/index.vue"
	import {
		cashOut
	} from "@/api/amount/index.js"
	import {
		useStore
	} from "vuex"

	const state = reactive({
		list: [{
			type: "input",
			key: "提现金额",
			placeholder: "请输入提现金额",
		}, ]
	})
	const store = useStore();
	const configList = computed(() => {
		return store.getters.configList
	})
	const userInfo = computed(() => {
		return store.getters.userInfo
	})
	const form = ref({
		amount: ''
	})

	const handleSubmit = async (val) => {
		if (!form.value.amount) {
			return uni.showToast({
				title: '请填写提现金额',
				icon: "none"
			})
		}
		let response = await cashOut({
			amount:form.value.amount,
			type: 0,
			userId: userInfo.value.userId,
			moneyType:1
		})
		if (response.code == 200) {
			uni.showToast({
				title: response.msg,
				icon: "none"
			})
			store.dispatch("getUserInfo")
			uni.showToast({
				icon: 'success',
				title: '提现成功',
				duration: 2000
			})
			uni.navigateBack(-1)
		}
	}
</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: #FFBF60 !important;
		font-size: 54rpx !important;
		;
		height: 71rpx;
		/* background-color: #FFBF60; */
		color: #FFBF60 !important;
		font-size: 54rpx !important;
		margin: 3% 0 0 5%;
	}

	.money input {
		margin-left: 5%;
		font-size: 61rpx;
		height: 71rpx;
	}

	.center {
		width: 100%;
		height: 1265rpx;
		background-color: #FFFFFF;
		font-size: 30rpx;
		color: #707070;
		padding: 84rpx 0 0 54rpx;
		box-sizing: border-box;
		line-height: 45rpx;
	}

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

	.buttom {
		width: 544rpx;
		height: 89rpx;
		background-color: #FFBF60;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 89rpx;
		margin: 800rpx 0 0 50rpx;
		justify-content: center;
	}

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