hldy_app_mini/pages/procurement/common/torytor.vue

<template>
	<view>
		<view class="jsuq guodu" v-if="show">
			<view class="leftsa">
				<view class="shu">数量</view>
				<view class="stringShow-kuai">
					<view  v-for="(item,index) in stringShow" :key="index" >
						{{item}}
					</view>
				</view>
				<view class="jiajian">
					<view class="jj" @click="jjnum(-1)" @longpress="handleTouchStart(-1)" @touchend="handleTouchEnd">
						-
					</view>
					<view class="jj"   @click="jjnum(1)" @longpress="handleTouchStart(1)" @touchend="handleTouchEnd">
						+
					</view>
				</view>
			</view>
			<view class="rigsbt">
				<view class="calculator-father">
					<view v-for="(item,index) in calculatorArray" :key="index">
						<view  class="calculator-kuai" v-if="item==`AC`"
							@click="clickKuai(item,index)">
							<image src="/static/cleanone.png" mode="aspectFill" style="width: 50%;height: 50%;margin-left: -5rpx;"></image>
							
						</view>
						<view class="calculator-kuai" v-else-if="item==`AE`" 
						 style="font-size: 1.2vw;color: #0385FA;"
							@click="clickKuai(item,index)">
							同步
						</view>
						<view  class="calculator-kuai" v-else
							@click="clickKuai(item,index)">
							{{item}}
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryQld } from '../api/lunpan.js'
	const stringShow = ref("0000");
	const relNumber = ref(0);
	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9,0, "AC", "AE"];
	onMounted(()=>{
		stringShow.value = toFixed4ByPadStart(relNumber.value)
	})
	const props = defineProps({
		show: {
			type: Boolean 
		},
		tb:{
			type:Number
		},
		idex:{
			type:Number
		}
	});
	const emit = defineEmits([ 'pddjjnum' ])
	const isZero = ref(false);
	const clickKuai = (item : any, index : number) => {
		if (item == "AE") {
			relNumber.value = props.tb;
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			emit('pddjjnum',relNumber.value,props.idex);
			return
		}
		if (item == "AC") {
			relNumber.value = Math.trunc(relNumber.value / 10)
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			emit('pddjjnum',relNumber.value,props.idex);
			return
		}
		if(isZero.value == false){
			isZero.value = true;
			relNumber.value = item;
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			emit('pddjjnum',relNumber.value,props.idex);
			return
		}
		if (digitCountByString(relNumber.value) > 3) {
	
		} else {
			if (!relNumber.value) {
				relNumber.value = item
			} else {
				relNumber.value = relNumber.value * 10 + item;
			}
			emit('pddjjnum',relNumber.value,props.idex);
			stringShow.value = toFixed4ByPadStart(relNumber.value)
		}
	
	}
	const InteroutId = ref(null)
	const handleTouchStart = (e:number)=> {
		Interval(e)
	}
	const handleTouchEnd=()=> {
	  clearInterval(InteroutId.value);
	  // 清除定时器
	}
	const Interval = (e:number)=>{
		InteroutId.value = setInterval(() => {
		  jjnum(e); 
		}, 120); 
	}
	const jjnum = (e:number)=>{
		let num = 9999;
		if(num<=relNumber.value&&e==1){relNumber.value = num; return}
		if(relNumber.value<=0&&e==-1){relNumber.value = 0; return}
		relNumber.value+=e;
		stringShow.value = toFixed4ByPadStart(relNumber.value)
		emit('pddjjnum',relNumber.value,props.idex)
	}
	function digitCountByString(n) {
		const s = Math.abs(n).toString();
		return s.length;
	}
	function toFixed4ByPadStart(n) {
		const intPart = Math.floor(Math.abs(n));
		return String(intPart).padStart(4, '0');
	}
</script>

<style scoped lang="less">
	.jsuq{
		width: 100%;
		display: flex;
		height: 12vw;
		.rigsbt{
			width: 19vw;
			height: 100%;
			.calculator-father {
				width: 18vw;
				height: 100%;
				margin :0 auto 0;
				flex-wrap: wrap;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr;
				.calculator-kuai {
					display: flex;
					justify-content: center;
					align-items: center;
					background: url('/static/index/procurement/bt.png') no-repeat;
					background-size: 100% 100%;
					font-size: 1.5vw;
					font-weight: 500;
					width: 3.5vw;
					height:  3.5vw;
				}
				.calculator-kuai:active{
					background: linear-gradient(to bottom, #00C9FF, #0076FF);
					color: #fff !important;
					font-weight: 500;
					border-radius: 2.6vw;
				}
			}
		}
		.leftsa{
			width: 12vw;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			padding: 0 1.5vw;
			.shu{
				font-weight: 400;
				font-size: 1.2vw;
				color: #222222;
			}
			.stringShow-kuai {
				display: flex;
				align-items: center;
				width: 9vw;
				height: 3.4vw;
				background: #F3F5F9;
				border-radius: 1vw;
				border: 1px solid #CBCFD0;
				justify-content: space-around;
				box-shadow: 0rpx 0.1vw 0.3vw 0rpx rgba(140,143,153,0.17) inset;
				view{
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 1.7vw;
					font-weight: 500;
					width:2.2vw;
					height: 3.4vw;
				} 
			}
			.jiajian{
				display: flex;
				justify-content: space-between;
				
				.jj{
					width: 3.3vw;
					height: 3.3vw;
					margin: 0 1vw;
					display: flex;
					justify-content: center;
					align-items: center;
					background: url('/static/index/procurement/bt.png') no-repeat;
					background-size: 100% 100%;
					border-radius: 25rpx;
					font-size: 36rpx;
				}
				.jj:active{
					background: linear-gradient(to bottom, #00C9FF, #0076FF);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #DCDCEE;
					font-weight: 500;
				}
			}
			
		}
	}
</style>