hldy_app_mini/pages/NursingNew/component/pleasetake/common/carditem.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">
							<view class="imgs">
								<image :src="v?.materialImg?serverUrl+v?.materialImg:'/static/index/procurement/k.png'"
									mode="aspectFill">
								</image>
							</view>
							<view class="cardp">
								<view v-if="v.categoryId_dictText">{{v.categoryId_dictText}}</view>
								<view v-if="v.typeId_dictText">{{v.typeId_dictText}}</view>
								<view v-if="v.medicationId_dictText">{{v.medicationId_dictText}}</view>
							</view>
						</view>
						<view class="msitem guodu">
							<view>
								<view>{{v?.materialName}}</view>
							</view>

							<view class="msitem-item">
								<text class="msitem-item-left">
									物料编码:
								</text>
								<text class="msitem-item-right">
									{{ v?.materialNo }}
								</text>
							</view>
							<view class="msitem-item">
								<text class="msitem-item-left">
									规格型号:
								</text>
								<text class="msitem-item-right">
									{{ v?.specificationModel }}
								</text>
							</view>
							<view class="msitem-item">
								<text class="msitem-item-left">
									请领数量:
								</text>
								<text class="msitem-item-right" :style="v.qlNum?{fontWeight:`600`}:{}">
									{{v.qlNum?v.qlNum:'--'}}
								</text>
							</view>
							<view class="msitem-item">
								<text class="msitem-item-left">
									请领单位:
								</text>
								<text class="msitem-item-right">
									{{ v?.twoUnit }}
								</text>
							</view>
							<!-- <view>
								<text  style="white-space: nowrap;"> 规格型号: </text>
								<view>{{v?.specificationModel}}</view>
							</view>
							<view>
								<view>
									<text>{{v.qlNum?v.qlNum:'--'}}</text>
									<text>请领数量</text>
								</view>
								<view>
									<text>{{v.materialUnits}}</text>
									<text>请领单位</text>
								</view>
							</view> -->
						</view>
						<view class="add" @click.stop="comfig(v,index,0)">
							<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="zkadd guodu" :class="v.isAdd==1?'zkf':''">
							<view @click.stop="comfig(v,index,1)" @touchend.stop>
								请领记录
							</view>
							<view @click.stop="comfig(v,index,2)" @touchend.stop>
								物料详情
							</view>
							<view @click.stop="comfig(v,index,3)" @touchend.stop>
								{{v.zhiDingId?'取消置顶':'置 顶'}}
							</view>
						</view>
					</scroll-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>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	const props = defineProps({
		InvoicingList: {
			type: Array,
			required: true
		},
		status: {
			type: String
		}
	})
	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 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 comfig = (v, i, t) => {
		emit('comfig', v, i, t)
	}
	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: 12vw;
		height: 100%;
		display: inline-flex;
		justify-content: flex-end;
		position: absolute;
		top: 0;
		right: -12vw;

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

		>view {
			width: 4vw;
			height: 100%;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			writing-mode: vertical-rl;
			text-orientation: upright;
			letter-spacing: 2px;

			&:nth-child(3) {
				background: rgba(224, 225, 228, .6);
				color: #555555;
			}

			&:nth-child(2) {
				background: rgba(224, 225, 228, .4);
				color: #666666;
			}

			&:nth-child(1) {
				background: rgba(224, 225, 228, .2);
				color: #666666;
			}
		}
	}

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

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

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

		}
	}

	.msitem {
		width: 11.5vw;
		height: 100%;
		position: absolute;
		top: 0;
		left: 15vw;

		.msitem-item {
			width: 25vw;
			// background-color: red;
			margin-top: 10rpx;
			font-size: 34rpx;
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 超出隐藏 */
			text-overflow: ellipsis;
			/* 显示 ... */

			.msitem-item-left {
				color: #777777;
			}

			.msitem-item-right {
				margin-left: 10rpx;
			}
		}


		>view {
			margin-top: 0vw;

			&:nth-child(1) {
				view {
					display: inline-block;
					width: 10vw;
					font-weight: bold;
					font-size: 1.8vw;
					color: #222222;
					padding-top: 1.9vw;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 30rpx;
				}
			}
		}
	}

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

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

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

		.cardp {
			width: 9vw;
			display: flex;
			margin: 0.3vw auto;
			margin-top: 0;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;

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

		.imgs {
			width: 11vw;
			height: 11vw;
			// background: #fff;
			border-radius: 1.1vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0.8vw auto 0;
			padding: 0.3vw;

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



	.itembox {
		// width: 100%;
		// height: 66vh;
		padding: 1vw 2vw 0 0;
		width: 90vw;
		height: 64.5vh;

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

		.fler {
			width: 44vw;
			height: 20.5vw;

			// margin-bottom: 0.9vw;
			.carditem {
				width: 44vw;
				height: 19.5vw;
				background: rgba(255, 255, 255, 1);
				border-radius: 1.6vw;
				position: relative;
				margin-bottom: 1.1vw;
				display: flex;
				overflow: hidden;
				justify-content: flex-start;
				white-space: nowrap;
			}
		}
	}
</style>