订单详情完善

2025-03-11 16:42:37 +08:00
parent 5342133cbd
commit cab9f836af
16 changed files with 506 additions and 126 deletions
--- a/pages/order/components/IntegralInput.vue
+++ b/pages/order/components/IntegralInput.vue
@@ -0,0 +1,152 @@
+<template>
+	<view class="integral-modal" v-if="visible">
+		<view class="modal-mask" @click="closeModal"></view>
+		<view class="modal-content">
+			<view class="input-wrapper">
+				<input type="number" v-model="inputValue" :min="minValue" :max="maxValue" @input="handleInput"
+					placeholder="请输入积分" />
+			</view>
+			<view class="instructions">{{ instructions }}</view>
+			<up-button type="primary" @click="confirmIntegral" text="确定"></up-button>
+			<button style="margin-top: 20rpx;" @click="IntegralInputclose">取消</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		defineProps,
+		defineEmits
+	} from 'vue';
+
+	// 定义接收的属性
+	const props = defineProps({
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		minValue: {
+			type: Number,
+			default: 1
+		},
+		maxValue: {
+			type: Number,
+			default: 100
+		},
+		instructions: {
+			type: String,
+			default: '请输入有效积分值'
+		}
+	});
+
+	// 定义事件发射器
+	const emits = defineEmits(['confirm', 'close','IntegralInputclose']);
+
+	// 定义响应式变量
+	const inputValue = ref('');
+
+	// 处理输入事件，确保输入为整数且在有效范围内
+	const handleInput = (e) => {
+		// 兼容不同平台获取输入值的方式
+		let value = e.detail ? e.detail.value : (e.target ? e.target.value : '');
+		// if (value > props.maxValue || value < props.minValue) {
+		// 	inputValue.value = value > props.maxValue ? props.maxValue : props.minValue
+		// 	return false;
+		// }
+		// 只允许输入数字，去除非数字字符
+		value = value.replace(/\D/g, '');
+		if (value) {
+			value = parseInt(value, 10);
+			// 限制输入值在最小和最大值之间
+			// if (value < props.minValue) {
+			// 	value = props.minValue;
+			// } else if (value > props.maxValue) {
+			// 	value = props.maxValue;
+			// }
+			inputValue.value = value.toString();
+		} else {
+			inputValue.value = '';
+		}
+	};
+
+	// 确认积分并返回值给父组件
+	const confirmIntegral = () => {
+		console.log(inputValue.value, 444)
+		if (inputValue.value < props.minValue || inputValue.value > props.maxValue) {
+			uni.showToast({
+				title: '输入的积分值不在有效范围内',
+				icon: 'none'
+			});
+			return false;
+		}
+		if (inputValue.value) {
+			const value = parseInt(inputValue.value, 10);
+			if (value >= props.minValue && value <= props.maxValue) {
+				emits('confirm', value);
+				emits('close');
+			} else {
+				uni.showToast({
+					title: '输入的积分值不在有效范围内',
+					icon: 'none'
+				});
+			}
+		} else {
+			uni.showToast({
+				title: '请输入有效的积分值',
+				icon: 'none'
+			});
+		}
+	};
+
+	const IntegralInputclose = () => {
+		emits('IntegralInputclose');
+	}
+
+	// 关闭模态框
+	const closeModal = () => {
+		emits('close');
+	};
+</script>
+
+<style scoped>
+	.integral-modal {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 999;
+	}
+
+	.modal-mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+
+	.modal-content {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		background-color: #fff;
+		padding: 20px;
+		box-sizing: border-box;
+		border-top-left-radius: 10px;
+		border-top-right-radius: 10px;
+		text-align: center;
+	}
+
+	.input-wrapper {
+		margin-bottom: 15px;
+	}
+
+	.instructions {
+		margin-bottom: 20px;
+		color: #666;
+	}
+</style>