hldy_app_mini/pages/procurement/components/calculator.vue

<template>
	<view class="plsbuy-contain guodu" :class="show?'':'unclass'" :style="showbox?'z-index:999':'z-index:-2'">
		<view class="gys">
			<view class="tlt">供应商</view>
			<view class="gssel" @click="gysflag = true">
				<view>
					{{gysarr[gysidnum]?.name}}
				</view>
				<text @click.stop="gysflag = !gysflag">
					<image class="guodu" :style="gysflag?'transform: rotate(180deg);':''"
						:src=" '/static/index/procurement/sj.png' " mode="aspectFill"></image>
				</text>
			</view>
			<view class="tanchu guodu" :class="gysflag?'':'hei0'"
				:style="`height: ${(gysarr && gysarr.length*8) || 0}vh`">
				<scroll-view scroll-y="true" class="gysscrol" v-if="gysflag">
					<view v-for="(v,i) in gysarr" :key='i' :class="gysidnum==i?'acts':''" @click="gysid(i)">
						<text>{{v.name}}</text>
						<!-- <image src="/static/index/procurement/d.png" mode="aspectFill"></image> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="calculator-father">
			<view v-for="(item,index) in calculatorArray" :key="index">
				<view :class="blueNumber == index ? `calculator-kuai-target` : ``" class="calculator-kuai"
					style="font-size: 33rpx;" v-if="item==`AC`" @click="clickKuai(item,index)">
					清零
				</view>
				<view :class="blueNumber == index ? `calculator-kuai-target` : ``" class="calculator-kuai"
					v-else-if="item==`AE`" @click="clickKuai(item,index)">
					<image src="/static/cleanone.png" mode="aspectFill"
						style="width: 50%;height: 50%;margin-left: -5rpx;"></image>
				</view>
				<view :class="blueNumber == index ? `calculator-kuai-target` : ``" class="calculator-kuai" v-else
					@click="clickKuai(item,index)">
					{{item}}
				</view>

			</view>
		</view>
		<view class="qinggou-font">
			采购数量 <text style="color: red;" v-if="sx==true">超过库存上限！</text>
		</view>
		<view class="stringShow-father">
			<view class="jj" @click="jjnum(-1)" @touchstart="clickstart(-1)"
				@touchend="handleTouchEnd">
				-
			</view>
			<view class="stringShow-kuai">
				<view v-for="(item,index) in stringShow" :key="index" :style="sx==true?'color: red':''">
					{{item}}
				</view>
			</view>
			<view class="jj" :style="sx==true?'background:#f8f8f8':''" @click="jjnum(1)"  @touchstart="clickstart(1)"
				 @touchend="handleTouchEnd">
				+
			</view>
		</view>
		<view class="cgdw">
			<view class="leftr" @click.stop="cgdwflag = !cgdwflag,cgdwec = false">
				<view>{{type.unit}}</view>
				<text>
					<image class="guodu" :style="!cgdwflag?'transform: rotate(180deg);':''"
						:src=" '/static/index/procurement/sj.png' " mode="aspectFill"></image>
				</text>
			</view>
			<!-- <view class="tz" @click="cgdwflag=!cgdwflag">调整</view> -->
			<view class="dwdw guodu" :class="cgdwflag?'':'hei0'"
				:style="`height: ${(cgdwarr && cgdwarr.length*8) || 0}vh`">
				<view class="gysscrol guodu" v-if="cgdwec" :class="cgdwflag?'':'hei0'">
					<view v-for="(v,i) in cgdwarr" :key='i' :class="type.multiUnitType==v.multiUnitType?'acts':''"
						@click="cd(v,i)" :style="v.unit&&v.num?'':'height:0 !important;margin-top:-0.5vw'">
						<text v-if="v.unit&&v.num">{{v.unit}}</text><text
							v-if="v.unit&&v.num">{{v.num}}{{caigouobj.materialUnits}}</text>
						<!-- <image src="/static/index/procurement/d.png" mode="aspectFill"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="plsbuy-bottom">
			<view class="quxiao" @click="colse">
				取消
			</view>
			<view class="plsbuy-bottom-blue" @click="closeIt">
				确定
			</view>
		</view>
		<view class="mengban" v-if="cgdwflag||gysflag" @click="gysflag = false;cgdwflag = false;cgdwec = false;"></view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		computed,
		nextTick,
		watch
	} from 'vue';
	const emit = defineEmits(['right', 'colse', 'jjnum'])
	const blueNumber = ref(-1);
	const gysflag = ref(false)
	const cgdwflag = ref(false)
	const sx = ref(false)
	const type = ref({})

	const downslength = ref(0);
	const gysarr = ref([])
	const cgdwarr = ref([])
	const gysidnum = ref(0)
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		},
		caigouobj: {
			type: Object,
			required: true,
		}
	});

	// watch(
	// 	() => type.value,
	// 	(news,old) => {
	// 		 console.log(old,news)
	// 		 if(!old.num){return}
	// 		 if(old.num==1){
	// 			 let num = Number(props.caigouobj.upperLimit)-Number(props.caigouobj.kcsl);
	// 			 let m = Math.floor(relNumber.value/news.num);
	// 			 huansuan(m)
	// 		 }
	// 		 if(old.num!=1){
	// 			let f = relNumber.value*old.num;
	// 			let num = Number(props.caigouobj.upperLimit)-Number(props.caigouobj.kcsl);
	// 			f = f>num?num:f;
	// 			// let m = Math.floor(num/type.value.num)
	// 			let m = Math.floor(f/news.num);
	// 			huansuan(m)
	// 		 }
	// 	}
	// )
	const cgdwec = ref(false)
	const showbox = ref(false)
	watch(() => cgdwflag.value,
		() => {
			if (cgdwflag.value == true) {
				setTimeout(() => {
					cgdwec.value = true
				}, 200)
			}
		})
	watch(
		() => props.show,
		() => {
			console.log(props.caigouobj)
			if (props.show) {
				let a = [
					{
						multiUnitType: 1,
						price: props.caigouobj.oneUnitPrice,
						unit: props.caigouobj.oneUnit,
						num: props.caigouobj.oneUnitProportion
					},
					{
						multiUnitType: 2,
						price: props.caigouobj.twoUnitPrice,
						unit: props.caigouobj.twoUnit,
						num: props.caigouobj.twoUnitProportion
					},
					{
						multiUnitType: 3,
						price: props.caigouobj.unitPrice ? props.caigouobj.unitPrice : props.caigouobj.referenceUnitPrice,
						unit: props.caigouobj.materialUnits,
						num: 1
					}
				];
				if (props.caigouobj.wlUnits) {
					type.value = a.find(item =>
						item.unit == props.caigouobj.wlUnits
					);
				} else {
					type.value = a.find(item =>
						item.multiUnitType == props.caigouobj.multiUnitType
					);
				}

				cgdwarr.value = []
				downslength.value = 0;
				a.forEach((element : any) => {
					if (element.unit && element.num) {
						cgdwarr.value.push(element)
					}
				})

				let n = [];
				let id = [];
				gysarr.value = [];
				console.log("为啥报错", props.caigouobj)
				n = props.caigouobj.suppliers_dictText?.split(/[, ]+/);
				id = props.caigouobj.suppliers?.split(/[, ]+/);
				n.forEach((item, i) => {
					gysarr.value.push({ 'name': item, 'id': id[i] })

					if (item == props.caigouobj.suppliersName) {
						gysid(i)
					}
				})
				if (props.caigouobj.purchaseQuantity) {
					props.caigouobj.upperLimit = props.caigouobj.wlUpperLimit
					huansuan(props.caigouobj.purchaseQuantity)
				} else {
					jssl()
				}
				setTimeout(() => {
					showbox.value = true;
				}, 50)
			} else {
				gysflag.value = false;
				cgdwflag.value = false;
				cgdwec.value = false;
				type.value = {};
				sx.value = false;
				gysidnum.value = 0;
				isZero.value = false;
				setTimeout(() => {
					showbox.value = false;
				}, 400)
			}
		})
	const jssl = () => {
		let num = Number(props.caigouobj.upperLimit) - Number(props.caigouobj.kcsl);
		let m = Math.floor(num / type.value.num)
		huansuan(m);
		cy()
	}
	const huansuan = (m : number) => {
		relNumber.value = m;
		stringShow.value = toFixed4ByPadStart(relNumber.value);
	}
	const cy = () => {
		let num = Number(props.caigouobj.upperLimit) - Number(props.caigouobj.kcsl);
		let bl = relNumber.value * type.value.num
		if (bl > num) {
			sx.value = true
		} else {
			sx.value = false
		}
	}
	const cd = (v, i) => {
		type.value = v;
		cgdwflag.value = false;
		cgdwec.value = false;
		jssl()
	}
	const gysid = (e : number) => {
		gysidnum.value = e;
		gysflag.value = false;
	}
	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "AE"];
	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";
			cy()
			return
		}
		if (item == "AE") {
			relNumber.value = Math.trunc(relNumber.value / 10)
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			cy()
			return
		}
		if (isZero.value == false) {
			isZero.value = true;
			relNumber.value = item;
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			cy()
			return
		}
		if (digitCountByString(relNumber.value) > 3) {

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

	}
	const InteroutId = ref(null)
	const handleTouchStart = (e : number) => {

		// Interval(e)
	}
	let longPressTimer = null;
	let longPressed = false;
	const clickstart = (e : number) => {
		// console.log("开始长按")
		longPressed = false;
		if (longPressTimer) {
			clearTimeout(longPressTimer);
			longPressTimer = null;
		}
		longPressTimer = setTimeout(() => {
			longPressTimer = null;
			longPressed = true;
			Interval(e)
		}, 800); // 1000ms = 1s
	}
	const handleTouchEnd = () => {
		// console.log("取消了吗？？？")
		// 如果定时器还在，说明没到 1 秒，取消长按
		if (longPressTimer) {
			clearTimeout(longPressTimer);
			longPressTimer = null;
			// console.log('未达到 1 秒：取消长按');
			return;
		}

		// 如果已经触发过长按
		if (longPressed) {
			// console.log('长按已触发，用户放手');
			clearInterval(InteroutId.value);
			longPressed = false; // 重置状态（按需）
		} else {
			console.log('无效状态（通常不会到这）');
		}
		

	}
	const Interval = (e : number) => {
		InteroutId.value = setInterval(() => {
			jjnum(e);
		}, 120);
	}
	const jjnum = (e : number) => {
		let num = Number(props.caigouobj.upperLimit) - Number(props.caigouobj.kcsl);
		let m = Math.floor(num / type.value.num)
		if (m <= relNumber.value && e == 1) { relNumber.value = m; return }
		if (relNumber.value <= 1 && e == -1) { relNumber.value = 1; return }
		relNumber.value += e;
		stringShow.value = toFixed4ByPadStart(relNumber.value)
		cy()
		// emit('jjnum',e)
	}
	const closeIt = () => {
		if (relNumber.value < 1) {
			uni.showToast({
				title: '采购数量不能为0！',
				icon: 'none'
			})
			return
		}

		emit('right', relNumber.value, gysarr.value[gysidnum.value], type.value, props.caigouobj)
	}
	const colse = () => {
		emit('colse')
	}
	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 lang="less" scoped>
	.hei0 {
		height: 0 !important;

		view {
			height: 0 !important;
		}
	}

	.unclass {
		opacity: 0 !important;
	}

	.cgdw {
		width: 26vw;
		display: flex;
		height: 3.3vw;
		justify-content: space-between;
		align-items: center;
		margin: 0.8vw  0;
		
		background: #F3F5F9;
		border-radius: 1.1vw;
		padding: 0 1vw;
		position: relative;

		text {
			width: 3.3vw;
			height: 3.3vw;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 1.6vw;
				height: 1.6vw;
			}
		}

		.dwdw {
			width: 26vw;
			// max-height: 21vh;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174, 175, 176, 0.35);
			border-radius: 1.1vw;
			padding: 0 2vw;
			// background-color: red;
			position: absolute;
			left: 0vw;
			bottom: 3.5vw;
			z-index: 211;

			.gysscrol {
				width: 100%;
				height: 100%;

				// max-height: 21vw;
				>.acts {
					color: #0385FA !important;

					image {
						display: block;
					}
				}

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 400;
					font-size: 1.5vw;
					color: #666666;
					// margin-bottom: 1.2vw;
					// padding-right: 1.5vw;
					height: 8vh;
					position: relative;
					white-space: nowrap;

					text {
						white-space: nowrap;
						padding-right: 1vw;
					}

					&:nth-child(1) {
						// margin-top: 1vw;
					}

					>image {
						position: absolute;
						right: -0.2vw;
						top: 50%;
						transform: translateY(-50%);
						width: 1vw !important;
						height: 0.7vw !important;
						display: none;
					}
				}
			}
		}

		.tz {
			width: 7vw;
			height: 3.3vw;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 1.6vw;
			border: 1px solid #D9DADC;
			box-shadow: 0.05vw 0.5vw 0.5vw #dadee1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 400;
			font-size: 1.5vw;
			color: #555555;
		}

		.leftr {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			white-space: nowrap;
			height: 3.3vw;
			padding: 0 1vw;

			view {
				width: 8.6vw;
				font-weight: 400;
				font-size: 1.6vw;
				color: #555555;
			}

			text {
				font-weight: 400;
				font-size: 1.4vw;
				color: #888888;
			}
		}
	}

	.gys {
		width: 100%;
		height: 7vw;
		position: relative;
		margin-top: 0.5vw;

		>.tanchu {
			width: 26vw;
			max-height: 35vh;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(174, 175, 176, 0.35);
			border-radius: 1.1vw;
			padding: 0 1vw;
			position: absolute;
			left: 4vw;
			top: 6.5vw;
			z-index: 211;

			.gysscrol {
				width: 100%;
				height: 100%;

				.acts {
					color: #0385FA !important;

					image {
						display: block;
					}
				}

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					// justify-content: center;
					font-weight: 400;
					font-size: 1.5vw;
					color: #666666;
					height: 8vh;
					// margin-bottom: 1.2vw;
					// padding-right: 1.5vw;
					position: relative;

					&:nth-child(1) {
						// margin-top: 1.2vw;
					}

					image {
						position: absolute;
						right: 0.2vw;
						top: 50%;
						transform: translateY(-50%);
						width: 1vw !important;
						height: 0.7vw !important;
						display: none;
					}
				}
			}

		}

		.gssel {
			width: 26vw;
			display: flex;
			height: 3.3vw;
			justify-content: space-between;
			align-items: center;
			margin: 0.8vw auto 0;
			background: #F3F5F9;
			border-radius: 1.1vw;
			padding: 0 1vw;
			margin-bottom: 10rpx;

			text {
				width: 3.3vw;
				height: 3.3vw;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 1.6vw;
					height: 1.6vw;
				}
			}

			view {
				width: 22vw;
				height: 3.3vw;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-weight: 400;
				font-size: 1.6vw;
				color: #555555;
				line-height: 3.3vw;
			}
		}

		.tlt {
			font-weight: bold;
			font-size: 1.5vw;
			color: #333333;
			padding-left: 3vw;
			font-weight: 400;
			margin-bottom: 30rpx;
		}
	}

	.plsbuy-contain {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 34vw;
		height: 95vh;
		background: rgba(250, 251, 252, 1);
		overflow: hidden;
		box-shadow: 0rpx 0rpx 1.6vw 0rpx rgba(136, 141, 153, 0.28);
		border-radius: 2.2vw;
		top: 50%;
		transform: translateY(-50%);
		right: 32vw;
		position: fixed;
		padding: 1.5vw 0vw;
	}


	.plsbuy-bottom {
		width: 75%;
		margin-top: 3vw;
		height: 7vw;
		display: flex;
		justify-content: flex-end;
		font-size: 35rpx;

		view {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 9vw;
			height: 3.8vw;
			color: rgba(92, 121, 146, 1);
			border-radius: 1.9vw;
			font-size: 1.8vw;
			border: 1px solid #EDEDEF;
			margin-left: 1vw;
		}

		.quxiao {
			min-width: 8vw;
			height: 3.8vw;
			background: #EDEDEF;
			border-radius: 1.9vw;
			padding: 0 2vw;
			margin-left: 1vw;
			border: 1px solid #EDEDEF;
			font-size: 1.8vw;
			font-weight: 400;
			color: #888888;
			white-space: nowrap;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.plsbuy-bottom-blue {
			background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
			border: 1px solid rgba(3, 133, 250, 0.34);
			color: #0385FA;
		}
	}

	.calculator-father {
		width: 25vw;
		height: 45vh;
		margin-left: -20rpx;
		// margin: 0 auto 0;
		flex-wrap: wrap;
		display: grid;
		grid-template-columns: 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: 42rpx;
			font-weight: 500;
			margin: 12rpx 40rpx 0 0rpx;
			width: 7.6vw;
			height: 6.1vw;
		}

		.calculator-kuai:active {
			background: linear-gradient(to bottom, #00C9FF, #0076FF);
			color: #fff;
			font-size: 45rpx;
			font-weight: 500;
			border-radius: 2.6vw;
		}
	}

	.stringShow-father {
		width: 100%;
		height: 7vw;
		margin-top: 0.5vw;
		display: flex;
		align-items: center;
		justify-content: center;

		.jj {
			width: 5vw;
			height: 5vw;
			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: 42rpx;
		}

		.jj:active {
			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;
		}

		.stringShow-kuai {
			display: flex;
			align-items: center;
			width: 14vw;
			height: 5vw;
			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: 42rpx;
				font-weight: 500;
				width: 2.5vw;
				height: 5vw;
			}
		}
	}

	.qinggou-font {
		font-size: 27rpx;
		font-weight: 500;
		margin: 0.8vw auto 0;
	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 210;
		background: RGBA(239, 240, 244, 0);
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>