cashier_app/pagesCreateOrder/index/components/weigh.vue

<template>
	<view class="">
		<up-overlay :show="overlayshow" @click="overlayshow = false">
			<view class="boxoverlay" v-if="form&&form.goods">
				<view class="rect" @tap.stop>
					<view class="title">
						<view> 标题 </view>
						<view class="" @click="overlayshow = false">
							<up-icon name="close" color="#93969b" size="20"></up-icon>
						</view>
					</view>
					<view class="inputtop">
						<view class="dj">
							<view class="text">单价</view>
							<view class="jg">￥{{form.goods.lowPrice}}/{{form.goods.unitName}}</view>
						</view>
						<view class="inputdj">
							<view>重量</view>
							<view class="inputdjbox">
								<view class="inputdisplay">{{ currentInput }}</view>
								<text>{{ form.goods.unitName }}</text>
							</view>
						</view>
					</view>
					<view class="keyboard">
						<button v-for="(num, index) in numberButtons" :key="index" @click="handleClick(num)">
							{{ num }}
						</button>
						<button @click="deleteLast">←</button>
					</view>
					<view class="classmoney">
						￥ {{ (Math.floor((form.goods.lowPrice * currentInput)*100)/100).toFixed(2) }}
					</view>
					<view class="classconfirm" @click="clickconfirm"> 确认 </view>
				</view>
			</view>
		</up-overlay>
	</view>
</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { reactive, ref, watch, defineExpose, defineEmits } from 'vue';
	
	const emit = defineEmits(['refresh'])
	const currentInput = ref('');

	const numberButtons = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '.'];

	const handleClick = (value) => {
		// 首位不能输入0
		if (currentInput.value === '') {
			if (value === '0') {
				return;
			}
		}
		if (value === '.' && currentInput.value.indexOf('.') !== -1) {
			return; // 如果已经存在小数点，不再添加
		}
		if (value === '.' && currentInput.value === '') {
			currentInput.value = '0.';
		} else {
			currentInput.value += value;
		}
		// 限制小数点后两位
		const parts = currentInput.value.split('.');
		if (parts.length > 1 && parts[1].length > 2) {
			currentInput.value = currentInput.value.slice(0, -1);
		}
	};
	
	const deleteLast = () => {
		currentInput.value = currentInput.value.slice(0, -1);
	};

	const clickconfirm = () => {
		// 首位不能输入0
		if (currentInput.value === '') {
			uni.showToast({
				title: '请输入',
				icon: 'none'
			})
			return false;
		}
		emit('weighgoodsUpdate', form.foodsindex, form.index, true, undefined, currentInput.value)
		overlayshow.value = false
	}
	//显示
	const overlayshow = ref(false);
	const form = reactive({})
	const open = (foodsindex, index, goods) => {
		console.log("222",goods)
		currentInput.value = ''
		Object.assign(form, {
			foodsindex,
			index,
			goods
		})
		overlayshow.value = true
	}
	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.boxoverlay {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.rect {
			padding: 32rpx 28rpx;
			width: 80%;
			background-color: #fff;
			border-radius: 18rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;
				font-size: 40rpx;
				border-bottom: 1rpx solid #ccc;
			}

			.inputtop {
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;

				.dj {
					width: 32%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;

					.text {
						font-weight: 300;
						font-size: 24rpx;
					}

					.jg {
						margin-top: 16rpx;
						background-color: #e8f4ff;
						color: #1890ff;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 20rpx;
						font-size: 24rpx;
						color: #1890ff;
						border-radius: 10rpx;
					}
				}

				.inputdj {
					width: 66%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					font-weight: 300;
					font-size: 24rpx;

					.inputdjbox {
						margin-top: 16rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border: 1rpx solid #ccc;
						border-radius: 10rpx;
						padding-left: 20rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #fff;

						.inputdisplay {
							width: auto;

						}

						text {
							border: 1rpx solid #ccc;
							border-radius: 10rpx;
							border-radius: 10rpx;
							padding: 0 20rpx;
							background: #f5f7fa;
							color: #a7aaaf;
						}
					}

				}
			}

			.keyboard {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;

				button {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 28%;
					margin: 10rpx;
				}

				.keyboard-button {
					width: 28%;
					margin: 10rpx;
					border: none;
					border-radius: 5rpx;
					box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.3), 0 0 10rpx rgba(0, 0, 0, 0.2);
					cursor: pointer;
					transition: all 0.3s ease;
				}

				// .keyboard-button:hover {
				// 	box-shadow: 0 0 10rpx rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3);
				// 	transform: translateY(-2rpx);
				// }

				.dot-button {
					// background-color: #FFC107;
				}

				.clear-button {
					// background-color: #FF5733;
				}

				.clear-button:hover {
					box-shadow: 0 0 10px rgba(255, 87, 51, 0.5), 0 0 20px rgba(255, 87, 51, 0.3);
				}

				.delete-button {
					// background-color: #33FF57;
				}

				.delete-button:hover {
					// box-shadow: 0 0 10px rgba(51, 255, 87, 0.5), 0 0 20px rgba(51, 255, 87, 0.3);
				}
			}

			.classmoney {
				margin-top: 16rpx;
				width: 100%;
				font-size: 40rpx;
				text-align: left;
				color: #ff5152;
				font-weight: 600;
			}

			.classconfirm {
				width: 100%;
				margin: 30rpx auto 0 auto;
				border-radius: 16rpx;
				text-align: center;
				background: #1890ff;
				color: #fff;
				padding: 10rpx 0;
			}
		}
	}
</style>