mall-front-app/pages/user/wallet/topupConsumptionPoints.vue

<!-- 消费分充值 -->
<template>
	<s-layout title="消费分充值">
		<view class="bg-white ss-modal-box ss-flex-col">

			<!-- 提现金额 -->
			<view class="modal-content ss-m-t-30">
				<uni-forms :model="state.model" :rules="state.rules" validateTrigger="bind" labelPosition="left" border
					class="form-box" labelWidth='200' ref="FormRef">
					<view class="bg-white ss-p-x-30">
						<uni-forms-item name="quota" label="充值金额" :required="true">
							<uni-easyinput v-model="state.payPrice" type="number" placeholder="请输入金额"
								:inputBorder="false" :clearable="false" @input="validateInput" :maxlength="9" />
						</uni-forms-item>
						<uni-forms-item name="quota" label="实到消费分">
							<view class="ss-flex ss-h-100">
								{{consumption}}
							</view>
						</uni-forms-item>

					</view>
				</uni-forms>
				<view class="ss-flex ss-row-center ss-col-center ss-m-t-30 text-red text-center">备注：充值{{state.percentage.triggerMagnificationPoints}}元及以上，可获得{{parseFloat(state.percentage.consumptionMagnification)}}倍消费分
				</view>
			</view>
			<view class="modal-footer ss-flex ss-row-center ss-col-center ss-m-t-80 ss-m-b-40 ss-flex-5">
				<button class="ss-reset-button save-btn" @tap="submit">
					确定
				</button>
			</view>
		</view>
	</s-layout>
</template>
<script setup>
	import {
		computed,
		reactive,
		watchEffect,
		nextTick,
		onUnmounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		clone
	} from 'lodash';
	import {
		fen2yuan,
		points2point
	} from '@/sheep/hooks/useGoods';
	import md5 from 'blueimp-md5';
	import PayWalletApi from '@/sheep/api/pay/wallet';
	import WithdrawalApi from '@/sheep/api/distri/withdrawal';
	import {
		showAuthModal,
		showShareModal
	} from '@/sheep/hooks/useModal';
	const userWallet = computed(() => sheep.$store('user').userWallet);
	const userInfo = computed(() => sheep.$store('user').userInfo);

	const state = reactive({
		model: {},
		payPrice: undefined,
		percentage: {
			consumptionMagnification: 0,
			userTopUpConsumptionPoints: 0,
			triggerMagnificationPoints: 0
		}
	});

	const consumption = computed(() => {
		if (!state.payPrice) {
			return 0;
		}
		let result;
		if (state.payPrice >= parseFloat(state.percentage.triggerMagnificationPoints)) {
			result = (parseFloat(state.percentage.consumptionMagnification) * state.payPrice).toFixed(2)
		} else {
			result = state.payPrice
		}
		return result;
	});

	// 确保输入是整数
	async function validateInput(value) {
		const intValue = parseInt(value);
		const strPoints = value.toString()
		const [integerPart, decimalPart] = strPoints.split('.')
		if (decimalPart) {
			nextTick(() => {
				state.payPrice = integerPart;
			});
		}
	}

	const submit = async () => {
		if (!state.payPrice) {
			sheep.$helper.toast('请输入充值金额');
			return;
		}
		if (parseFloat(state.payPrice) < state.percentage.userTopUpConsumptionPoints) {
			sheep.$helper.toast(`充值金额不能少于${state.percentage.userTopUpConsumptionPoints}`);
			return;
		}
		let {
			code,
			data
		} = await PayWalletApi.topupConsumptionPointsCreate({
			payPrice: state.payPrice,
			topUpConsumptionPoints: state.payPrice,
			userName: userInfo.value.username,
		});
		if (code === 0) {
			sheep.$router.redirect('/pages/pay/index', {
				id: data.payOrderId,
				type: 2
			});
		}
	};

	const getpercentage = async () => {
		const {
			code,
			data
		} = await WithdrawalApi.getWithdrawalPercentage();
		if (code === 0) {
			state.percentage = data;
		}
	}

	onLoad(async (options) => {
		await getpercentage();
	});
</script>

<style lang="scss" scoped>
	.all-btn {
		height: 60rpx;
		line-height: 60rpx;
		min-width: 80rpx;
		padding: 0 30rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
		margin-right: 10rpx;
		border: 2rpx solid var(--ui-BG-Main);
		color: var(--ui-BG-Main);
	}

	.out-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 26rpx;
	}

	.ss-modal-box {
		height: calc(100vh - 88rpx);

		// max-height: 1000rpx;
		.input-money {
			width: 90%;
			padding: 0 10rpx;
			// text-indent: 20rpx;
			height: 80rpx;
			border: 1px solid #bbbbbb;
			border-radius: 10rpx;
			margin: 15rpx auto;
			font-size: 28rpx;

			input {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
			}
		}

		.modal-header {
			position: relative;
			padding: 60rpx 20rpx 40rpx;


			.money-text {
				color: $red;
				font-size: 46rpx;
				font-weight: bold;
				font-family: OPPOSANS;

				&::before {
					content: '￥';
					font-size: 30rpx;
				}
			}

			.time-text {
				font-size: 26rpx;
				color: $gray-b;
			}

			.close-icon {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				font-size: 46rpx;
				opacity: 0.2;
			}
		}

		.modal-content {
			overflow-y: auto;

			.out-title {
				font-size: 26rpx;
				font-weight: 500;
				color: #333333;
			}

			.out-tip {
				font-size: 26rpx;
				color: #bbbbbb;
			}

			.out-item {
				height: 86rpx;
			}

			.disabled-out-item {
				.out-title {
					color: #999999;
				}
			}

			.userInfo-money {
				font-size: 26rpx;
				color: #bbbbbb;
				line-height: normal;
			}
		}

		.save-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
			color: $white;
		}

		.disabled-btn {
			background: #e5e5e5;
			color: #999999;
		}

		.past-due-btn {
			width: 710rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #999;
			color: #fff;
		}
	}
</style>