hldy_app_mini/pages/NursingNew/component/pleasetake/common/takeing.vue

<template>
	<view>
		<view class="mengban" @click="emit('fill')" v-if="show"> </view>
		<view class="takitem guodu" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
			<view class="tit">
				请领物料
			</view>
			<view class="cont">
				<view class="zuo">
					<view class="carp">
						<view class="zuoimg tp">
							<image
								:src="objtake?.materialImg?serverUrl+objtake?.materialImg:'/static/index/procurement/k.png'"
								mode="aspectFill" />
						</view>
						<view class="youcont">
							<view>{{objtake?.materialName}}</view>
							<view>
								<view>
									物料编码
									<text>{{objtake?.materialNo}}</text>
								</view>
								<view>
									请购单位
									<text>{{objtake?.materialUnits}}</text>
								</view>
							</view>
							<view>
								<view>
									规格型号
									<text style="white-space: nowrap;width:20vw ;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{objtake?.specificationModel}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="qinggou-font">
						数量
					</view>
					<view class="stringShow-father">
						<view class="jj" @click="jjnum(-1)" @longpress="handleTouchStart(-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" @click="jjnum(1)" @longpress="handleTouchStart(1)" @touchend="handleTouchEnd">
							+
						</view>
					</view>

				</view>
				<view class="you">
					<view class="calculator-father">
						<view v-for="(item,index) in calculatorArray" :key="index">
							<view class="calculator-kuai" style="font-size: 33rpx;" v-if="item==`AC`"
								@click="clickKuai(item,index)">
								清零
							</view>
							<view 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="calculator-kuai" v-else @click="clickKuai(item,index)">
								{{item}}
							</view>
						</view>
					</view>
					<view class="plsbuy-bottom">
						<view class="quxiao" @click="emit('fill')">
							取消
						</view>
						<view class="plsbuy-bottom-blue" @click="closeIt">
							确定
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	const props = defineProps({
		objtake: {
			type: Object,
			required: true
		},
		show: {
			type: Boolean
		},
		num: {
			type: Number
		}
	})
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const emit = defineEmits(['fill', 'right'])
	const showbox = ref(false)
	watch(() => props.show,
		() => {
			if (props.show == true) {
				relNumber.value = props.num ? props.num : 1;
				stringShow.value = toFixed4ByPadStart(relNumber.value)
				setTimeout(() => {
					showbox.value = true
				}, 50)
			} else {
				showbox.value = false;
				isZero.value = false;
			}
		})
	const sx = ref(false)

	const calculatorArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, "AC", 0, "AE"];
	const stringShow = ref("0000");
	const relNumber = ref(1);
	const isZero = ref(false);
	const clickKuai = (item : any, index : number) => {
		if (item == "AC") {
			relNumber.value = 0;
			stringShow.value = "0000";
			return
		}
		if (item == "AE") {
			relNumber.value = Math.trunc(relNumber.value / 10)
			stringShow.value = toFixed4ByPadStart(relNumber.value);
			return
		}
		if (isZero.value == false && item > 0) {
			isZero.value = true;
			relNumber.value = item;
			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 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 (relNumber.value >= num && e == 1) { relNumber.value = num; return }
		if (relNumber.value <= 1 && e == -1) { relNumber.value = 1; return }
		relNumber.value += e;
		stringShow.value = toFixed4ByPadStart(relNumber.value)
		// emit('jjnum',e)
	}
	const times = ref(false)
	const closeIt = () => {
		if (relNumber.value == 0) {
			uni.showToast({
				icon: 'none',
				title: "数量不能为0！"
			})
			return
		}
		if (times.value == false) {
			times.value = true;
			emit('right', relNumber.value, props.objtake)
			setTimeout(() => {
				times.value = false;
			}, 1500)
		}
	}
	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">
	.takitem {
		width: 53.3vw;
		height: 36vw;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
		border-radius: 1.6vw;
		position: fixed;
		z-index: 100;
		top: 13vw;
		right: 23.4vw;
		padding: 2vw;

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

				view {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 9.1vw;
					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 {
					background: #EDEDEF;
					color: #888888;
				}

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

			.calculator-father {
				width: 19vw;
				height: 20vw;
				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 20rpx 0 20rpx;
					width: 4.4vw;
					height: 4.4vw;
				}

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

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

			.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: 45rpx;
				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: 45rpx;
				font-size: 45rpx;
				font-weight: 500;
			}

			.stringShow-kuai {
				display: flex;
				align-items: center;
				width: 11.5vw;
				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: 1.4vw;
			font-weight: 500;
			text-align: center;
			margin-left: 1.5vw;
		}

		.cont {
			width: 100%;
			height: 26.5vw;
			display: flex;
			justify-content: space-between;
			padding-top: 1.7vw;

			.zuo {
				width: 27vw;
				height: 100%;

				.carp {
					width: 100%;
					height: 16vw;
					display: flex;
					justify-content: space-between;
					padding-top: 1.8vw;

					.youcont {
						width: 17vw;
						height: 100%;

						>view {

							&:nth-child(2),
							&:nth-child(3) {
								width: 100%;
								height: 3.6vw;
								display: flex;
								justify-content: space-between;
								margin-top: 1.8vw;

								>view {
									font-weight: 400;
									font-size: 1.1vw;
									color: #888888;
									display: flex;
									flex-direction: column;
									justify-content: space-between;

									text {
										font-weight: 300;
										font-size: 1.4vw;
										color: #222222;
									}
								}
							}

							&:nth-child(1) {
								width: 17vw;
								height: 1.8vw;
								font-weight: bold;
								font-size: 1.6vw;
								color: #222222;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								line-height: 1.8vw;
							}
						}
					}

					.zuoimg {
						width: 8vw;
						height: 8vw;

						image {
							width: 100%;
							height: 100%;
						}
					}

				}
			}
		}

		.tit {
			width: 100%;
			height: 2.6vw;
			border-bottom: 1px solid #E5E5E5;
			font-weight: 400;
			font-size: 1.6vw;
			color: #333333;
			line-height: 2.1vw;
		}
	}

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

	.hei0 {
		height: 0 !important;

		view {
			height: 0 !important;
		}
	}

	.unclass {
		opacity: 0 !important;
	}

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