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

<template>
	<view>
		<view class="kcyj">
			<view class="kjlt">
				请领物料
				<view class="mhao" v-if="Material.length>0">
					<view class="mhao-font">
						{{Material.length}}
					</view>

				</view>
			</view>
			<scroll-view scroll-x="true" class="kcscrol guodu" @scroll="onScroll" scroll-with-animation
				:scroll-left="scrollleft" :style="qb?'width:calc(100% - 21.8vw)':'width:calc(100% - 10vw)' ">
				<view class="yjbox" v-for="(v,i) in Material" :key="i">
					<image
						:src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
						mode="aspectFill"></image>
					<view>{{v.materialInfo?.materialName}}</view>
					<text class="ytj" v-if="v.qlNum>=0">{{v.qlNum}}</text>
					<view class="zhanwei" v-if="moredex==1" @click.stop="del(v)">
						<view>-</view>
					</view>
				</view>
				<view class="que" v-if="Material.length==0&&timeout">
					<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
					<view>暂无数据</view>
				</view>
				<!-- <defaultr cont="暂无数据" v-if="Material.length==0&&timeout"
					style="position: absolute;width: 10vw;height: 10vw;"></defaultr> -->
			</scroll-view>
			<view class="kjlt more guodu" :style="qb?'width:15vw':'' " @touchstart="ts" @touchmove="canmove"
				v-if="Material.length>0">
				<view @click="zksq" class="righ0">
					{{!qb?'更多':'收起'}}
					<image class="guodu" :style="qb?'transform: rotate(180deg);':''"
						src="/static/index/procurement/zjt.png" mode="aspectFill"></image>
				</view>
				<view class="guodu" :class="qb?(moredex==1?'avt':''):'righ0'" @click="moredex = moredex==1?0:1; ">
					批量移除
				</view>
				<view class="guodu" :class="qb?(moredex==2?'avt':''):'righ0'" @click="moredex=2; ">
					清空列表
				</view>
				<view class="guodu" :class="qb?(moredex==3?'avt':''):'righ0'" @click="moredex=3;emit('submit')">
					提交请领单
				</view>
			</view>
		</view>
		<tanchuang @back="moredex = 0" :show="moredex==2" font="确定将本次请领清单中的所有物料都移除吗？" @right="delall"></tanchuang>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import defaultr from './default.vue'
	import tanchuang from '../common/tanchuang.vue';
	const props = defineProps({
		Material: {
			type: Array,
			required: true,
		}
	});
	const emit = defineEmits(['delall', 'del', 'submit'])
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const qb = ref(false)
	const moredex = ref(0)
	watch(() => props.Material,
		() => {
			if (props.Material.length == 0) {
				qb.value = false;
				moredex.value = 0;
			}
		})
	const delall = () => {
		emit('delall');
		setTimeout(() => {
			moredex.value = 0;
			qb.value = false;
		}, 100)
	}
	const del = (v) => {
		emit('del', v)
	}
	const zksq = () => {
		if (props.Material.length == 0) {
			uni.showToast({
				icon: 'none',
				title: '请添加请领物料！'
			})
			return
		}
		qb.value = !qb.value;
		moredex.value = 0;
		moveleft();
	}
	const startX = ref(0)
	const ts = (e) => {
		startX.value = e.touches[0].clientX
	}
	const savescrollleft = ref(0)
	// 监听用户滚动
	function onScroll(e : any) {
		savescrollleft.value = e?.detail?.scrollLeft ?? 0
	}
	const scrollleft = ref(0)
	const canmove = (e : any) => {
		if (props.Material.length == 0) { return }
		const moveX = e.touches[0].clientX
		const diff = moveX - startX.value
		// diff 为负值就是向左滑
		if (diff < -60 && !qb.value) {  // 👉 60px 阈值，随便改
			qb.value = !qb.value;
			moredex.value = 0;
			// 这么写是解决这个组件的响应丢失的bug
			scrollleft.value = savescrollleft.value + 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value + 126
			}, 50)
		}
		if (diff > 60 && qb.value) {  // 👉 60px 阈值，随便改
			qb.value = !qb.value;
			moredex.value = 0;
			scrollleft.value = savescrollleft.value - 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value - 126
			}, 50)
		}
	}
	const moveleft = () => {
		if (qb.value) {
			scrollleft.value = savescrollleft.value + 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value + 126
			}, 50)
		} else {
			scrollleft.value = savescrollleft.value - 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value - 126
			}, 50)
		}
	}
	const timeout = ref(false)
	onMounted(() => {
		setTimeout(() => {
			timeout.value = true
		}, 500)
	})
</script>

<style scoped lang="less">
	.kcyj {
		width: 100%;
		height: 10vw;
		display: flex;
		margin-top: 1vw;
		position: relative;

		.kjlt {
			width: 3.2vw;
			height: 10vw;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 1.1vw;
			writing-mode: vertical-rl;
			align-items: center;
			display: flex;
			justify-content: center;
			letter-spacing: 3px;
			font-size: 1.4vw;
			position: relative;
			z-index: 10;

			.mhao {
				position: absolute;
				top: -0.2vw;
				/* 根据视觉需要微调 */
				right: -0.2vw;
				box-sizing: border-box;
				width: 1.8vw;
				height: 1.8vw;
				border-radius: 50%;
				border: 1px solid #FF4E4E;
				color: #FF4E4E;
				display: flex;
				align-items: center;
				justify-content: center;
				background: transparent;
				writing-mode: horizontal-tb;
				overflow: hidden;
				.mhao-font{
					font-size: 25rpx;
					letter-spacing: -0.05em; /* 负值 = 字符之间更近 */
				}
			}
		}

		.more {
			margin-left: 0.6vw;
			position: relative;
			background: RGBA(239, 240, 244, 1);

			.righ0 {
				right: 0 !important;
			}

			view {
				writing-mode: vertical-rl;
				align-items: center;
				display: flex;
				justify-content: center;
				letter-spacing: 3px;
				width: 3.2vw;
				height: 10vw;
				position: absolute;
				top: 0;
				border-radius: 1.1vw;
				font-size: 1.4vw;
				color: #888888;
				background: #fff;

				&:nth-child(1) {
					letter-spacing: 6px;
					padding-top: 2vw;
					z-index: 5;

					image {
						width: 1.6vw;
						height: 1.6vw;
						margin-top: 10px;
					}
				}

				&:nth-child(2) {
					right: 3.9vw;
					z-index: 3;
				}

				&:nth-child(3) {
					right: 7.7vw;
					z-index: 2;
				}

				&:nth-child(4) {
					right: 11.6vw;
					z-index: 2;
				}
			}

			.avt {
				background: rgba(85, 166, 249, 1);
				color: #FFFFFF;
			}

		}

		.kcscrol {
			width: calc(100% - 10vw);
			height: 10vw;
			white-space: nowrap;
			margin-left: 0.6vw;
			position: relative;
			z-index: 9;

			.yjbox {
				display: inline-block;
				width: 12vw;
				height: 10vw;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 1.1vw;
				margin-right: 0.8vw;
				position: relative;

				.zhanwei {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 200;

					view {
						position: absolute;
						width: 2.2vw;
						height: 2.2vw;
						display: flex;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						border-radius: 50%;
						border: 2px solid rgba(255, 78, 78, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 3vw;
						color: rgba(255, 78, 78, 1);
					}
				}

				.ytj {
					min-width: 1.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;
					text-align: center;
					line-height: 1.75vw;
					position: absolute;
					padding: 0 0.8vw;
					top: 0.8vw;
					right: 0.8vw;
				}

				image {
					width: 7vw;
					height: 7vw;
					margin: 0.5vw auto 0.5vw;
					display: block;
					border-radius: 1vw;
				}

				>view {
					width: 100%;
					height: 1.4vw;
					font-weight: 400;
					font-size: 1.3vw;
					color: #212327;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					padding: 0 1vw;
					text-align: center;
				}
			}
		}
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.que{
		width: 16vw;
		height: 16vw;
		position: fixed;
		top: 0;
		left: 0;
		width: 82.2vw;
		height: 10vw;
		background: rgba(245, 246, 248, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		
		image{
			width: 12vw;
			height: 12vw;
		}
		view{
			width: 12vw;
			text-align: center;
			position: absolute;
			bottom: 0.5vw;
			left: 50%;
			transform: translateX(-50%);
			font-weight: 300;
			font-size: 1.4vw;
			color: #555555;
		}
	}
</style>