hldy_app/component/storeroom/components/calculatorfly.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="(char, idx) in stringShowChars" :key="idx">
				<view class="stringShow-kuai">{{ char }}</view>
			</view>
		</view>
		<view class="plsbuy-bottom">
			<view class="plsbuy-bottom-blue" @click="closeIt">确认</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch } from 'vue'
	const emit = defineEmits(['right'])
	const props = defineProps({ doOnce: { type: Number, required: true }, translateNumber: { type: [Number, String], required: true } })

	// 输入字符串
	const inputString = ref('')
	const stringShowChars = ref<string[]>([])
	const blueNumber = ref(-1)
	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.', 'CE', 'AC']

	// 当 props.doOnce 或 props.translateNumber 变化时初始化显示
	watch(
		() => props.doOnce,
		() => {
			// 直接将传入值转为字符串
			inputString.value = String(props.translateNumber)
			updateDisplay()
		},
		{ immediate: true }
	)

	function clickKuai(item : any, index : number) {
		blueNumber.value = index
		setTimeout(() => { blueNumber.value = -1 }, 300)

		if (item === 'AC') {
			inputString.value = ''
		} else if (item === 'CE') {
			inputString.value = inputString.value.slice(0, -1)
		} else if (item === '.') {
			if (!inputString.value.includes('.') && inputString.value.length < 7) {
				inputString.value = inputString.value || '0'
				inputString.value += '.'
			}
		} else {
			const char = item.toString()
			if (canAppend(char)) {
				inputString.value += char
			}
		}
		updateDisplay()
	}

	function closeIt() {
		const val = parseFloat(inputString.value) || 0
		emit('right', val)
	}

	function updateDisplay() {
		// 如果传入值正好为 "0"，显示全空白
		if (inputString.value === '0') {
			stringShowChars.value = Array(7).fill(' ')
			return
		}
		// 空时显示空白
		if (!inputString.value) {
			stringShowChars.value = Array(7).fill(' ')
			return
		}
		// 截取或补全至七位
		const padded = padToSeven(inputString.value)
		stringShowChars.value = padded.split('')
	}

	// 限制输入是否可追加
	function canAppend(char : string) {
		const newStr = inputString.value + char
		const parts = newStr.split('.')
		if (parts[1] && parts[1].length > 2) return false
		return newStr.length <= 7
	}

	function padToSeven(str : string) {
		// 1. 分离整数和小数部分
		let [intPart, decPart] = str.split('.');

		// 2. 限制小数最多两位
		if (decPart !== undefined) {
			decPart = decPart.slice(0, 2);
		}

		// 3. 去掉整数部分的前导零，但保留 "0"（防止把 "0.56" 变成 ".56"）
		//    如果去掉后变成空串，就手动置为 "0"
		intPart = intPart.replace(/^0+/, '');
		if (intPart === '') {
			intPart = '0';
		}

		// 4. 重组字符串
		let newStr = decPart !== undefined ? `${intPart}.${decPart}` : intPart;

		// 5. 如果总长度超过 7，截断左侧多余字符
		if (newStr.length > 7) {
			newStr = newStr.slice(0, 7);
		}

		// 6. 最后补齐到 7 位（左侧补空格）
		return newStr.padStart(7, ' ');
	}
</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: 600rpx;
		height: 500rpx;
		margin-top: 20rpx;
		flex-wrap: wrap;
		display: flex;
		margin-left: 45rpx;

		.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: 25rpx;
		// flex-wrap: wrap;
		display: flex;

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

	.qinggou-font {
		font-size: 35rpx;
		font-weight: 500;
		margin-top: 10rpx;
		display: flex;
		justify-content: center;
	}
</style>