hldy_app_mini/pages/material/component/carditem.vue

<template>
	<view>
		<scroll-view scroll-y="true" class="crdcroll" scroll-with-animation @scrolltolower="scrolltolower()"
			lower-threshold="300" :enhanced="true" :bounce="true" enable-back-to-top>
			<view class="box">
				<view class="fler" v-for="(v,index) in InvoicingList" :key="index">
					<view class="fler-view" @touchstart="ts($event)" @touchmove="canmove($event,index)">

						<view class="carditem guodu"
							:style="openwhitchindex === index? { transform: 'translateX(-14vw)' }: { transform: 'translateX(0)' }">
							<view class="cgdh">
								采购单号：{{ v.ddNo }} <text class="s"
									v-if="v.procurementPrice < v.arrivalPrice">↑</text><text class="j"
									v-if="v.procurementPrice > v.arrivalPrice">↓</text>
							</view>
							<view class="cgsl">
								<text>{{ Number(v.kcsl || 0).toFixed(2) }}</text>
								<view>库存数量</view>
							</view>
							<view class="speitem guodu">
								<view class="imghs">
									<image style="border-radius: 1vw;"
										:src="v.materialImg?serverUrl+v.materialImg:'/static/index/procurement/k.png'"
										mode="aspectFill">
									</image>
								</view>
								<view class="cardp">
									<view>{{ v.categoryId_dictText }}</view>
									<view>{{ v.typeId_dictText }}</view>
								</view>
							</view>
							<view class="msitem guodu">
								<view>
									<view>{{ v.materialName }}</view>
								</view>
								<view style="margin-top: 1vw;">
									<view class="left-text">
										物料编码:
									</view>
									<text class="right-text"> {{ v.materialNo }}</text>
								</view>
								<view>
									<view class="left-text">
										规格型号:
									</view>
									<text class="right-text"> {{ v.specificationModel }}</text>
								</view>
								<view>
									<view class="left-text">
										品牌型号:
									</view>
									<text class="right-text"> {{ v.brandType }}</text>
								</view>
								<view>
									<view class="left-text">
										生产厂家:
									</view>
									<text class="right-text"> {{ v.manufacturer }}</text>
								</view>
								<view>
									<view class="left-text letter ">
										供应商:
									</view>
									<text class="right-text"> {{ v.gysName }}</text>
								</view>
							</view>
							<view class="zkadd guodu">
								<view class="zkadd-white" style="background: #F1F1F1;" @click.stop="pandian(v)"
									@touchend.stop>盘点</view>
								<view class="zkadd-white" @click.stop="crk(v,index)" @touchend.stop>出入库</view>
								<view class="zkadd-blue" @click.stop="addcar(v)" v-if="v.isAdd!=1" @touchend.stop>
									<view>
										销售价格
									</view>
								</view>
							</view>
							<!--  v-if="v.pdType !== null" -->
							<view class="pandianthen white-tag" v-if="v.pdType == `0`">
								已盘点
							</view>
							<view class="pandianthen blue-tag" v-if="v.pdType == `1`">
								盘盈
							</view>
							<view class="pandianthen red-tag" v-if="v.pdType == `2`">
								盘亏
							</view>
							<view class="no-price" v-if="!v.xsjg">
								无销售价格
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
				<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="InvoicingList.length>6" />
			</view>
		</scroll-view>
		<view class="mengban" v-if="priceshow" @click="priceshow = false"> </view>
		<price :show="priceshow" @close="priceshow = false" :cardvalue="cardvalue" @finishit="finishit"></price>

		<view class="mengban" v-if="pd" @click="guanbipd"> </view>
		<inventory :isShow="pd" v-if="pds" :cardvalue="cardvalue" @finishit="finishit"></inventory>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
	import price from './price.vue'
	import inventory from './inventory.vue'
	const props = defineProps({
		InvoicingList: {
			type: Array
		},
		status: {
			type: String
		},
		show: {
			type: Boolean,
			default: false
		},
	})
	const priceshow = ref(false)
	const pd = ref(false)
	const pds = ref(false)
	const emit = defineEmits(['scrolltolower', 'crk', `finishit`])
	const serverUrl = ref('')
	onMounted(() => {
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
	})

	const cardvalue = ref({})

	const pandian = (item) => {
		cardvalue.value = item;
		pds.value = true
		setTimeout(() => {
			pd.value = true
		}, 10)
	}
	const guanbipd = () => {
		pd.value = false;
		setTimeout(() => {
			pds.value = false
		}, 450)

	}
	// const caigouobj = ref({})
	const addcar = (v : any, i : number) => {
		console.log("看看值", v)
		cardvalue.value = v;
		priceshow.value = true
		// console.log("为啥点击不上啊",i)
		// if (Number(v.kcsl) >= Number(v.upperLimit)) {
		// 	uni.showToast({
		// 		title: '库存数量已满，不可添加购物车！',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		// caigouobj.value = v;
		// caigouobj.value.index = i;
		// caigouobj.value.yj = false;
		// emit('addcartory', caigouobj.value)
	}
	// const pageX = ref(0);
	// const pageY = ref(0);
	// const touchstart = (event : any, v : any, i : number) => {
	// 	pageX.value = event.changedTouches[0].pageX;
	// 	pageY.value = event.changedTouches[0].pageY;
	// 	solleft(v, i)
	// }
	// 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)
	// 	if (absy > 30 && absx + 10 < absy) {
	// 		v.scrollleft = 1
	// 		setTimeout(() => {
	// 			v.scrollleft = 0
	// 		}, 20)
	// 		return
	// 	}
	// 	if (absx < 10 && absy < 10) {
	// 		if (v.zk == false) {
	// 			setTimeout(() => {
	// 				v.scrollleft = 0
	// 			}, 20)
	// 		}
	// 		console.log("2")
	// 		return
	// 	}
	// 	caigouobj.value = v;
	// 	caigouobj.value.Limitnum = Number(caigouobj.value?.upperLimit) - Number(caigouobj.value.kcsl);
	// 	caigouobj.value.index = i;
	// 	caigouobj.value.yj = false;
	// 	v.zk = x > pageX.value ? false : true;
	// 	v.scrollleft = v.zk ? 150 : 0;

	// }
	// const solleft = (v : any, i : number) => {
	// 	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)
	// }
	const crk = (v, i) => {
		emit('crk', v, i)
	}
	const startX = ref(0)
	const openwhitchindex = ref(-1)
	const ts = (e) => {
		startX.value = e.touches[0].clientX;
	}
	const canmove = (e : any, index : number) => {
		const moveX = e.touches[0].clientX
		const diff = moveX - startX.value
		// diff 为负值就是向左滑
		if (diff < -40) {  // 👉 60px 阈值，随便改
			openwhitchindex.value = index
		}
		if (diff > 40) {  // 👉 60px 阈值，随便改
			openwhitchindex.value = -1
		}
	}

	const finishit = () => {
		pds.value = false;
		pd.value = false;
		openwhitchindex.value = -1
		emit('finishit')
	}
</script>

<style scoped lang="less">
	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		background: RGBA(240, 240, 240, 0.64);
		top: 0;
		left: 0;
		z-index: 99;
	}

	.crdcroll {
		width: 90vw;
		height: calc(100vh - 2vw);

		.box {
			width: 90vw;
			display: grid;
			grid-template-columns: 1fr 1fr;
		}

		.fler {
			width: 44vw;
			height: 19.1vw;
			position: relative;
			// background-color: red;

			.fler-view {
				width: 44vw;
				height: 18.2vw;
				background: rgba(255, 255, 255, 1);
				border-radius: 1.6vw;
				position: relative;
				margin-bottom: 1.1vw;
				overflow: hidden;
				white-space: nowrap;
			}
		}
	}

	.zkadd {
		width: 14vw;
		height: 18.8vw;
		display: flex;
		justify-content: flex-end;
		// background-color: blue;
		position: absolute;
		top: -3vw;
		right: -14vw;
		z-index: 55;

		>view {
			width: 4.66vw;
			height: 100%;
			font-weight: 400;
			font-size: 1.5vw;
			display: flex;
			justify-content: center;
			align-items: center;
			writing-mode: vertical-rl;
			text-orientation: upright;
			text-align: center;

		}

		.zkadd-blue {
			background: #1083F8;
			color: #fff;

			view {
				width: 3.8vw;
				height: 3.8vw;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: -0.7vw;
			}
		}

		.zkadd-white {
			background: #e3e5e7;
			color: #555555;
		}
	}

	.carditem {
		position: absolute;
		top: 3vw;
		left: 0;
		height: 100%;
		display: flex;
		transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
		will-change: transform;

		.cgsl {
			position: absolute;
			width: 5vw;
			height: 4.5vw;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			right: 2.6vw;
			top: -1.5vw;

			text {
				font-weight: bold;
				font-size: 2.3vw;
				color: #222222;
				font-style: normal;
				text-transform: none;
				margin: 0;
			}

			view {
				font-size: 1.3vw;
				color: #777777;
				font-style: normal;
				text-transform: none;
			}
		}

		.cgdh {
			position: absolute;
			width: 25vw;
			height: 3vw;
			display: flex;
			align-items: center;
			top: -2vw;
			left: 2.3vw;

			text {
				width: 1.5vw;
				height: 1.5vw;
				border-radius: 0.3vw;
				font-weight: bold;
				font-size: 1vw;
				line-height: 1.5vw;
				text-align: center;
				display: block;
				color: #fff;
				margin-left: 1.2vw;
			}

			.s {
				background: #FF5B5B;
			}

			.j {
				background: #1083F8;
			}
		}

		.pandianthen {
			position: absolute;
			bottom: 86rpx;
			right: 32rpx;
			width: 130rpx;
			height: 62rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			border-radius: 12rpx;
		}

		.no-price {
			position: absolute;
			top: 80rpx;
			right: 32rpx;
			width: 150rpx;
			height: 50rpx;
			border: 2rpx solid #FF6161;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 30rpx;
			font-size: 23rpx;
			color: #FF6161;
		}

		.white-tag {
			color: #666666;
			/* 字体灰 */
			background-color: #F5F5F5;
			/* 浅灰背景 */
		}

		.blue-tag {
			color: #2391FA;
			background-color: #EFF7FF;
		}

		.red-tag {
			color: #FF6161;
			background-color: #FFF0F0;
		}

		.zkf {
			width: 7vw;
			right: -7vw;
		}

		.add {
			width: 4.5vw;
			height: 100%;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			top: 50%;
			transform: translateY(-50%);
			// top: 0.8vw;
			right: 16vw;
			// background-color: red;

			>view {
				width: 5.5vw;
				height: 2.2vw;
				background: #fff;
				border-radius: 0.9vw;
				border: 1px solid #1083F8;
				font-weight: 400;
				font-size: 1.4vw;
				color: #1083F8;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 2.3vw;
				right: 0.8vw;
			}

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

		.msitem {
			min-width: 25vw;
			height: 14vw;
			margin-right: 4.2vw;
			position: relative;

			>view {

				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(6),
				&:nth-child(5) {
					margin-top: 0.25vw;
					max-width: 25vw;
					// white-space: nowrap;
					// text-overflow: ellipsis;
					// overflow: hidden;
					display: flex;
					// align-items: center;
					font-weight: 400;
					font-size: 1.3vw;
					color: #777777;
					margin-top: 0.25vw;

					

					.left-text {
						width: 140rpx;
					}
					.right-text{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 320rpx;
					}
					.letter {
						letter-spacing: 9.2rpx;
					}
				}

				&:nth-child(1) {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 2vw;
					margin-top: 1vw;

					>view {
						width: 19vw;
						height: 2vw;
						font-weight: bold;
						font-size: 1.8vw;
						color: #222222;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

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

			>.wlsy {
				width: 100%;
				height: 3.4vw;
				display: flex;
				justify-content: space-between;
				margin-top: 0vw;

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

					&:nth-child(1) {
						width: 30%;
						align-items: left;
					}

					&:nth-child(2) {
						width: 40%;
						align-items: center;
					}

					&:nth-child(3) {
						width: 30%;
						text-align: right;
						align-items: right;
					}

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

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

						&:nth-child(2) {
							font-weight: 400;
							font-size: 1.2vw;
							color: #999999;
						}
					}
				}
			}
		}

		// .spleft{
		// 	margin-left: -15vw !important;
		// }
		.speitem {
			min-width: 14.8vw;
			height: 14vw;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.cardp {
				width: 12.5vw;
				height: 4vw;
				display: flex;
				flex-wrap: wrap;
				margin: 0 auto;
				align-items: center;

				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;

					&:nth-child(1),
					&:nth-child(2) {
						max-width: 6vw;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
						line-height: 1.8vw;
						text-align: center;
					}

					&:nth-child(3) {
						max-width: 11.5vw;
						padding: 0 0.8vw;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						display: block;
						line-height: 1.8vw;
						text-align: center;
					}
				}
			}

			.imghs {
				width: 10vw;
				height: 10vw;
				margin: 1vw auto 0.25vw;
				padding: 0.2vw;
				background: #fff;
				border-radius: 1.1vw;

				>image {
					width: 100%;
					height: 100%;
					border-radius: 1.1vw;
				}
			}

		}
	}
</style>