mall-front-app/sheep/components/s-consumptionPoints-pop/s-consumptionPoints-pop.vue

<!-- 订单确认的使用消费分弹窗 -->
<template>
	<su-popup :show="show" type="bottom" round="10" @close="emits('close')" showClose backgroundColor="#ffffff">
		<view class="title ss-m-t-16 ss-m-l-20 ss-flex">使用消费分</view>
		<view class="model-box ss-p-x-30">
			<input v-model.number="state.points" class="uni-input input-points ss-m-b-10" type="number"
				placeholder="请输入抵扣消费分" oninput="this.value=this.value.replace(/\D/g);" :disabled="state.disabled"/>
		</view>
		<view class="modal-footer text-center">
			<view class="subtitle text-disabled">您的可用消费分<text class="text-red">{{currentMemberConsumptionPoints}}</text></view>
			<view class="subtitle text-disabled">当前订单价格<text class="text-red">￥{{currentOrderTotalPrice}}</text>，可使用最高<text class="text-red"> {{canUesPoint}} </text>消费分 </view>
			<view class="ss-flex ss-m-y-20 ss-col-center">
				<button class="confirm-btn ss-reset-button"
					@tap="state.points = 0;emits('confirm', state.points)">取消</button>
				<button class="confirm-btn ss-reset-button" @tap="onConfirm">确认</button>
			</view>
		</view>
	</su-popup>
</template>
<script setup>
	import {
		computed,
		reactive,
		ref,
		watch,
		nextTick,
		watchEffect
	} from 'vue';

	const props = defineProps({
		modelValue: { // 优惠劵列表
			type: Object,
			default () {},
		},
		show: {
			type: Boolean,
			default: false,
		},
		currentMemberConsumptionPoints: {
			type: Number,
			default: 0
		},
		currentTotalPrice: {
			type: Number,
			default: 0
		},
		currentDeliveryPrice:{
			type: Number,
			default: 0
		}
	});
	const emits = defineEmits(['confirm', 'close']);
	const state = reactive({
		points: 0,
		disabled:false
	});
	const currentOrderMemberPoints = computed(()=>{
		return parseFloat(props.currentMemberConsumptionPoints)
	})
	const currentOrderTotalPrice = computed(()=>{
		return parseFloat(props.currentTotalPrice)
	})
	const currentOrderDeliveryPrice= computed(()=>{
		return parseFloat(props.currentDeliveryPrice)
	})
	
	// 当前可使用的最高消费分 = 当前的总价格（即最低也要给1分钱） 并且消费分只能是正数 且不能抵扣运费
	const canUesPoint = computed(()=>{
		// console.log("state.currentTotalPrice",currentOrderTotalPrice.value - 1)
		if(!currentOrderTotalPrice.value) return currentOrderTotalPrice.value
		// - 0.01  - 0.01分钱
		return (currentOrderTotalPrice.value  - currentOrderDeliveryPrice.value).toFixed(2)
	})
	watchEffect(() => {
		// 分割整数部分和小数部分
		const strPoints = state.points.toString()
		const [integerPart, decimalPart] = strPoints.split('.')
		if (decimalPart) {
			const points = parseFloat(`${integerPart}.${decimalPart.slice(0, 2)}`);
			// 使用 nextTick 确保 DOM 更新
			nextTick(() => {
				state.points = points;
			});
		}
		// 使用消费分不能大于可用消费分
		if (state.points > currentOrderMemberPoints.value) {
			// 使用 nextTick 确保 DOM 更新
			nextTick(() => {
				state.points = currentOrderMemberPoints.value;
			});
		}
		// 使用消费分不能大于当前可以使用的最大消费分
		if (state.points > canUesPoint.value) {
			nextTick(() => {
				state.points = canUesPoint.value;
			});
		}
		// 如果计算出来的当前可以使用的最大消费分等于小于0 则不给输入
		if(canUesPoint.value == 0 || canUesPoint.value < 0){
			state.disabled = true
		}
		if(canUesPoint.value > 0){
			state.disabled = false
		}
	})
	// 确认
	const onConfirm = () => {
		if(state.points === ''){
			state.points = 0
		}

		emits('confirm', state.points);
	}
</script>
<style lang="scss" scoped>
	:deep() {
		.uni-checkbox-input {
			background-color: var(--ui-BG-Main);
		}

		.uni-input-wrapper {
			width: 100% !important
		}
	}

	.model-box {
		// height: 10vh;
		text-align: center;
		font-size: 30rpx;

		.input-points {
			text-align: left;
			text-indent: 20rpx;
			height: 80rpx;
			border: 1px solid #bbbbbb;
			border-radius: 10rpx;
		}
	}
.text-disabled {
			color: #bbbbbb;
		}

	.title {
		font-size: 36rpx;
		height: 80rpx;
		font-weight: bold;
		color: #333333;
	}

	.subtitle {
		// font-size: 26rpx;
		font-weight: 500;
		color: #333333;
	}

	.model-content {
		height: 10vh;
	}

	.modal-footer {
		width: 100%;
		// height: 120rpx;
		//   background: #fff;
	}

	.confirm-btn {
		width: 710rpx;
		margin:0 20rpx;
		height: 80rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 40rpx;
		color: #fff;
	}

	.reason-title {
		font-weight: 600;
		font-size: 20rpx;
		line-height: 26rpx;
		color: #ff0003;
	}

	.reason-desc {
		font-weight: 600;
		font-size: 20rpx;
		line-height: 26rpx;
		color: #434343;
	}
</style>