hldy_app/component/storeroom/components/calculator.vue

<template>
	<view class="plsbuy-contain">
		<view class="draw-title">
			<view class="draw-flex">
				<view class="draw-title-gun"></view>
				<view class="draw-title-font">请购数量</view>
			</view>
		</view>
		<view class="calculator-father">
			<view v-for="(item,index) in calculatorArray" :key="index">
				<view :class="blueNumber == index ? `calculator-kuai-target` : `calculator-kuai`"
					@click="clickKuai(item,index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="qinggou-font">
			请购数量
		</view>
		<view class="stringShow-father">
			<view v-for="(item,index) in stringShow" :key="index">
				<view class="stringShow-kuai">
					{{item}}
				</view>
			</view>
		</view>
		<view class="plsbuy-bottom">
			<view class="plsbuy-bottom-blue" @click="closeIt">
				确认
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		computed,
		nextTick,
		watch
	} from 'vue';
	const emit = defineEmits(['right'])
	const blueNumber = ref(-1);
	const props = defineProps({
		doOnce: {
			type: Number,
			required: true,
		},
		translateNumber: {
			type: Number,
			required: true,
		},
	});

	watch(
		() => props.doOnce,
		() => {
			relNumber.value = props.translateNumber
			stringShow.value = toFixed4ByPadStart(relNumber.value)
		}
	)
	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "CE"];
	const stringShow = ref("0000");
	const relNumber = ref(0);
	// const isZero = ref(false);
	const clickKuai = (item : any, index : number) => {
		blueNumber.value = index;
		setTimeout(() => {
			blueNumber.value = -1
		}, 300)
		if (item == "AC") {
			relNumber.value = 0;
			stringShow.value = "0000"
			return
		}
		if (item == "CE") {
			relNumber.value = Math.trunc(relNumber.value / 10)
			stringShow.value = toFixed4ByPadStart(relNumber.value)
			return
		}

		if (digitCountByString(relNumber.value) > 3) {

		} else {
			if (!relNumber.value) {
				relNumber.value = item
			} else {
				relNumber.value = relNumber.value * 10 + item;
			}

			stringShow.value = toFixed4ByPadStart(relNumber.value)
		}

	}
	const closeIt = () => {
		emit('right', relNumber.value)
	}

	// 这个方法是查看数字有多少位
	function digitCountByString(n) {
		// 先处理负数
		const s = Math.abs(n).toString();
		// 若不想统计小数点，可去掉小数点后再取长度：
		// return s.replace('.', '').length;
		return s.length;
	}
	// 这个方法是将Number转为String
	function toFixed4ByPadStart(n) {
		// 1. 取绝对值并向下取整，防止小数和负号影响
		const intPart = Math.floor(Math.abs(n));
		// 2. 转字符串并 padStart 到长度 4，不足时前面补 '0'
		return String(intPart).padStart(4, '0');
	}
</script>

<style lang="less" scoped>
	.plsbuy-contain {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: url("/static/index/pink.png") center/cover;
		overflow: hidden;
	}

	.draw-title {
		width: 100%;
		height: 60rpx;
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		.draw-flex {
			display: flex;
		}
		.draw-title-gun {
			margin-left: 20rpx;
			margin-right: 20rpx;
			width: 13rpx;
			height: 40rpx;
			background: linear-gradient(to bottom, #04BCED, #0160CE);
			border-radius: 10rpx;
		}

		.draw-title-font {
			font-size: 35rpx;
			font-weight: 700;

		}
	}

	.plsbuy-bottom {
		width: 100%;
		margin-top: 20rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		font-size: 35rpx;

		.plsbuy-bottom-blue {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 230rpx;
			height: 80rpx;
			border-radius: 20rpx;
			background: linear-gradient(to right bottom, #00c9ff, #0076ff);
			color: #fff;
			border: 1rpx #fff solid;
			// margin-right: 20rpx;
			box-shadow: 2rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.3);
		}
	}

	.calculator-father {
		width: 420rpx;
		height: 500rpx;
		margin-top: 20rpx;
		flex-wrap: wrap;
		display: flex;

		.calculator-kuai {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #DCDCEE;
			border-radius: 25rpx;
			font-size: 45rpx;
			font-weight: 500;
			margin: 15rpx 20rpx 0 20rpx;
			width: 100rpx;
			height: 100rpx;
		}

		.calculator-kuai-target {
			background: linear-gradient(to bottom, #00C9FF, #0076FF);
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #DCDCEE;
			border-radius: 25rpx;
			font-size: 45rpx;
			font-weight: 500;
			margin: 15rpx 20rpx 0 20rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}

	.stringShow-father {
		width: 420rpx;
		height: 70rpx;
		margin-top: 20rpx;
		margin-left: 23rpx;
		// flex-wrap: wrap;
		display: flex;

		.stringShow-kuai {
			display: flex;
			justify-content: center;
			align-items: center;
			// background-color: #DCDCEE;
			border-radius: 25rpx;
			// border-radius: 15rpx;
			font-size: 45rpx;
			font-weight: 500;
			margin: 0 15rpx;
			width: 70rpx;
			height: 70rpx;
			border: 3rpx solid #303C57;
		}
	}

	.qinggou-font {
		font-size: 35rpx;
		font-weight: 500;
		margin-top: 10rpx;

	}
</style>