jpcj-h5/src/views/myIntegral/components/settlement.vue

<template>
	<Overlay :show="true">
		<div class="wrapper" @click.stop>
			<div class="block">
				<Form @submit="settlementIntegral">
					<CellGroup inset>
						<div class="user-img">
							<Image round width="50px" height="50px" :src="props.headImage" />
							<span style="margin-left: 5px">{{ props.nickName }}</span>
						</div>
						<Field label="未结算积分" :model-value="props.achievement" disabled />
						<Field label="已结算积分" :model-value="props.achievementSettled" disabled />
						<Field v-model="settlePoints" label="结算积分" type="number" placeholder="请输入结算积分" />
					</CellGroup>
					<div class="submit-box">
						<Button :loading="loading" type="primary" hairline native-type="submit" loading-text="结算中..."> 提交 </Button>
						<Button type="default" hairline @click="unmountComponent"> 取消 </Button>
					</div>
				</Form>
			</div>
		</div>
	</Overlay>
</template>

<script lang="ts" setup>
	import { Overlay, Field, CellGroup, Form, Button, Image } from "vant";
	import { ref } from "vue";
	import { useUnmountComponent } from "@/utils/mount-component";
	import { useSettlementIntegral } from "./settlement";
	const { unmountComponent } = useUnmountComponent();
	const props = defineProps<{
		openid: string;
		nickName: string;
		headImage: string;
		achievement: number;
		achievementSettled: number;
	}>();
	const settlePoints = ref<number>(props.achievement);

	const { loading, settlementIntegral } = useSettlementIntegral({ openid: props.openid, settlePoints: settlePoints.value });
</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>