hldy_app_mini/pages/procurement/common/thitem.vue

<template>
	<view>
		<scroll-view scroll-y="true" class="itembox" scroll-with-animation @scrolltolower="scrolltolower()"
			enable-back-to-top>
			<view class="box">
				<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
					<scroll-view class="carditem guodu" @touchend="handleTouchEnd($event,v,index)"
						@touchstart="touchstart($event,v,index)" scroll-with-animation scroll-x="true"
						:scroll-left="v.scrollleft" @scroll="scroll">
						<view class="zding" v-if="v.zhiDingId">
							<image src="/static/index/procurement/zd.png" mode="aspectFill"></image>
						</view>
						<view class="speitem guodu">
							<image
								:src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
								mode="aspectFill">
							</image>
							<view class="cardp">
								<view v-if="v.materialInfo?.categoryName">{{v.materialInfo?.categoryName}}</view>
								<view v-if="v.materialInfo?.typeName">{{v.materialInfo?.typeName}}</view>
							</view>
						</view>
						<view class="msitem guodu">
							<view>
								<view>{{v.materialInfo?.materialName}}</view>
							</view>
							<view>
								<text style="white-space: nowrap;"> 规格型号: </text>
								<view>{{v.materialInfo?.specificationModel}}</view>
							</view>
							<view>
								<view>
									<text>{{v.thNum?v.thNum:'--'}}</text>
									<text>退货数量</text>
								</view>
								<view>
									<text>{{v.materialInfo?.materialUnits}}</text>
									<text>退货单位</text>
								</view>
							</view>
						</view>
						<view class="add">
							<view v-if="v.isAdd==1">已添加</view>

							<!-- <image v-if="v.isAdd!=1" :src="'/static/index/procurement/+.png'" mode="aspectFill"></image>
							<image v-if="v.isAdd==1" :src="'/static/index/procurement/-.png'" mode="aspectFill"></image> -->
						</view>
						<view class="nextadd" @click.stop="clkzk(v,index)">
							<image class="guodu" :style="v.zk?'transform: rotate(180deg);':''"
								:src="'/static/index/procurement/l.png'" mode="aspectFill"></image>
						</view>
						<view class="zkadd guodu" v-if="status<2">
							<view @click.stop="comfig(v,index,1)" @touchend.stop>
								添加物料
							</view>
						</view>
					</scroll-view>
				</view>
				<defaultr cont="暂无数据" v-if="InvoicingList.length==0 "
					style="position: absolute;width: 10vw;height: 10vw;"></defaultr>
			</view>
		</scroll-view>
		<taking :show="tuihuoshow" :objtake="tuihuoobj" @fill="tuihuoshow = false" @right="right"></taking>
		<errorshow :show="openerror" :font="errmsg" @close="openerror=false" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import taking from './takeing.vue'
	import defaultr from '../components/default.vue'

	const props = defineProps({
		InvoicingList: {
			type: Array,
			required: true
		},
		status: {
			type: String
		}
	})
	const openerror = ref(false)
	const errmsg = ref('')
	const carnum = ref(0)
	const caigouobj = ref({})
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const emit = defineEmits(['scrolltolower', 'comfig'])

	const pageX = ref(0);
	const pageY = ref(0);
	const ones = ref(true)
	const clkzk = (v : any, i : number) => {
		if(v.zk==true){
			v.zk = false;
			v.scrollleft =0.01
			setTimeout(()=>{
				v.scrollleft = 0
			},20)
			
		}else{
			v.zk = true;
			v.scrollleft =149.99
			setTimeout(()=>{
				v.scrollleft = 150;
			},20)
			
		}
		solleft(v,i)
		 
	}
	const touchstart = (event : any, v : any, i : number) => {
		caigouobj.value = v;
		pageX.value = event.changedTouches[0].pageX;
		pageY.value = event.changedTouches[0].pageY;
		if (ones.value) {
			ones.value = false;
			solleft(v, i)
		}
	}
	const tuihuoshow = ref(false)
	const tuihuoobj = ref({})
	const comfig = (v, i, t) => {
		if (props.status == '0') {
			errmsg.value = '未开始服务不能添加退货物料！';
			openerror.value = true;
			return
		}
		tuihuoobj.value = v;
		tuihuoshow.value = true;

		// emit('comfig',v,i,t)
	}
	const right = (e, v) => {
		emit('comfig', e, v);
		tuihuoshow.value = false;
	}
	const handleTouchEnd = (event : any, v : any, i : number) => {
		let y = event.changedTouches[0].pageY;
		let x = event.changedTouches[0].pageX;
		let absx = Math.abs(x - pageX.value)
		let absy = Math.abs(y - pageY.value);
		ones.value = true;
		if (absy > 30 && absx + 10 < absy) {
			caigouobj.value.scrollleft = 0.01
			setTimeout(() => {
				caigouobj.value.scrollleft = 0
			}, 20)
			return
		}
		if (absx < 10 && absy < 10) {
			if (caigouobj.value.zk == false) {
				setTimeout(() => {
					caigouobj.value.scrollleft = 0
				}, 20)
			}
			return
		}
		if (scrollLeft.value <= 40) {
			caigouobj.value.scrollleft = scrollLeft.value;
			caigouobj.value.zk = false;
			nextTick(() => {
				caigouobj.value.scrollleft = 0;
				scrollLeft.value = 0;
			})
		} else {
			scrollLeft.value = 150
			caigouobj.value.scrollleft = scrollLeft.value;
			caigouobj.value.zk = true;
		}
		caigouobj.value.zk = x > pageX.value ? false : true;
		caigouobj.value.scrollleft = caigouobj.value.zk ? 150 : 0;
	}
	const solleft = (v : any, i : number) => {
		console.log(v)
		props.InvoicingList.forEach((item, k) => {
			if (k != i && item.zk == true) {
				item.zk = false;
				item.scrollleft = 0;
			}
		})
	}
	const scrolltolower = () => {
		emit('scrolltolower')
	}
	const scrollLeft = ref(0)
	const scroll = (e) => {
		scrollLeft.value = e.detail.scrollLeft
		// console.log(e.detail.scrollLeft)
	}
</script>

<style scoped lang="less">
	.zkadd {
		width: 9vw;
		height: 100%;
		display: inline-flex;
		justify-content: flex-end;
		position: absolute;
		top: 0;
		right: -9vw;

		view:active {
			background: rgba(85, 166, 249, 1) !important;
			color: #FFFFFF !important;
		}

		>view {
			width: 3.6vw;
			height: 100%;
			font-weight: 400;
			font-size: 1.3vw;
			display: flex;
			justify-content: center;
			align-items: center;
			writing-mode: vertical-rl;
			text-orientation: upright;
			letter-spacing: 2px;
			background: rgba(85, 166, 249, 1) !important;
			color: #FFFFFF !important;
		}
	}

	.add {
		width: 5vw;
		height: 13vw;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		top: 0;
		right: 0.8vw;

		>view {
			width: 4.5vw;
			height: 1.8vw;
			background: #E3EEF7;
			border-radius: 0.9vw;
			border: 1px solid rgba(3, 133, 250, 0.34);
			font-weight: 400;
			font-size: 1.1vw;
			color: #1083F8;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0.8vw;
			right: 0vw;
		}

		image {
			width: 3vw;
			height: 3vw;
			position: absolute;
			bottom: 0.8vw;
			right: 0vw;
		}
	}

	.msitem {
		width: 11vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: 10vw;

		>view {
			margin-top: 0vw;

			&:nth-child(3) {
				width: 100%;
				height: 3.4vw;
				display: flex;
				justify-content: space-between;

				>view {
					width: 50%;
					height: 100%;
					display: flex;
					flex-direction: column;
					position: relative;
					margin-top: 1vw;
					white-space: nowrap;

					&:nth-child(1) {
						padding-right: 1.7vw;
						align-items: flex-start;
					}

					&:nth-child(2) {
						padding-left: 1.7vw;
						align-items: flex-start;
					}

					&:nth-child(1)::after {
						content: '';
						position: absolute;
						right: 0;
						width: 100%;
						height: 2.2vw;
						border-right: 1px solid #C9C9C9;
						top: 0.6vw;
					}

					text {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.7vw;
							color: #555555;
						}

						&:nth-child(2) {
							font-weight: 400;
							font-size: 1.1vw;
							color: #999999;
							white-space: nowrap;
						}
					}
				}
			}

			&:nth-child(2) {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-top: 0.1vw;

				view {
					font-size: 1.4vw;
					color: #888888;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				text {
					font-weight: 400;
					font-size: 1.1vw;
					color: #777777;
					margin-top: 0.25vw;
				}
			}

			&:nth-child(1) {
				view {
					display: inline-block;
					width: 10vw;
					font-weight: bold;
					font-size: 1.6vw;
					color: #222222;
					height: 3.1vw;
					padding-top: 0.8vw;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}

	.zding {
		width: 4.6vw;
		height: 4.6vw;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 11;

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

	.speitem {
		width: 10vw;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: 0;

		.cardp {
			width: 8vw;
			height: 4.2vw;
			display: flex;
			margin: 0 auto;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			view {
				min-width: 5.5vw;
				height: 1.8vw;
				border-radius: 0.9vw;
				border: 1px solid #D2D2D2;
				margin: 0.5vw 0 0 0.5vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 1vw;
				color: #555555;
				padding: 0 0.25vw;
			}
		}

		>image {
			width: 7.5vw;
			height: 7.5vw;
			margin: 0vw auto 0.25vw;
		}
	}



	.itembox {
		width: 100%;
		height: calc(100vh - 22vw);
		padding: 1vw 0.5vw 1vw;

		background: #fff;

		.box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			// display: grid;
			// grid-template-columns: 1fr 1fr;
		}

		.fler {
			width: 31.5vw;
			height: 13vw;
			margin-bottom: 0.9vw;
			margin-left: 0.5vw;

			.carditem {
				width: 31vw;
				height: 13vw;
				background: rgba(245, 246, 248, 1);
				border-radius: 1.1vw;
				position: relative;
				overflow: hidden;
			}
		}
	}

	.nextadd {
		position: absolute;
		right: 0;
		top: -2vw;
		width: 6vw;
		height: 17vw;
		display: inline-flex;
		justify-content: center;
		align-items: center;


		>view {
			width: 4.5vw;
			height: 1.9vw;
			background: #E3EEF7;
			border-radius: 0.9vw;
			border: 1px solid rgba(3, 133, 250, 0.34);
			font-weight: 400;
			font-size: 1.1vw;
			color: #1083F8;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0vw;
			right: 0vw;
		}

		image {
			width: 3vw;
			height: 3vw;

		}
	}

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