jpcj-h5/src/views/cashOut/components/cashout.vue

<template>
	<Overlay :show="true">
		<div class="wrapper" @click.stop>
			<div class="block">
				<Form @submit="handleCashout">
					<CellGroup inset>
						<Field v-model="amount" label="提现金额(元)" type="number" placeholder="请输入提现金额" />
					</CellGroup>
					<div class="submit-box">
						<Button :loading="loading" :disabled="!amount" type="primary" hairline native-type="submit" loading-text="结算中..."> 提现 </Button>
						<Button type="default" hairline @click="props.unmount"> 取消 </Button>
					</div>
				</Form>
			</div>
		</div>
	</Overlay>
</template>

<script lang="ts">
	import { Toast } from "vant";
	import { CashOutModel } from "@/model/cashOut";
	const cashOutModel = new CashOutModel();
	const useCashout = () => {
		const amount = ref<number>();
		const loading = ref(false);
		const cashout = async () => {
			if (!amount.value) {
				Toast.fail("请输入金额");
				return false;
			}
			loading.value = true;
			const data = await cashOutModel.cashout(amount.value * 100);
			loading.value = false;
			if (data.code === 200) {
				Toast.success("提现成功");
				return true;
			} else {
				Toast.fail(data.msg);
				return false;
			}
		};
		return {
			amount,
			loading,
			cashout,
		};
	};
</script>

<script lang="ts" setup>
	import { Overlay, Field, CellGroup, Form, Button } from "vant";
	import { ref } from "vue";
	import { useUpdateUserInfo } from "@/hooks";
	const props = defineProps<{
		unmount: () => void;
		callback: () => any;
	}>();

	const { amount, loading, cashout } = useCashout();

	const handleCashout = async () => {
		if (await cashout()) {
			props.unmount();
			useUpdateUserInfo();
			props.callback();
		}
	};
</script>

<style scoped lang="scss">
	.wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.block {
		width: 300px;
		background-color: #fff;
		padding: 20px;
		border-radius: 10px;
	}
	.user-img {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		margin-bottom: 10px;
	}
	.submit-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 10px;
	}
</style>