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

<template>
	<view>
		<view class="kcyj">
			<view class="kjlt">
				请领物料
			</view>
			<scroll-view scroll-x="true" class="kcscrol guodu"
				scroll-with-animation :scroll-top="scrollleft" @scrolltolower="scrolltolower(1)">
				<view class="yjbox" v-for="(v,i) in Material" :key="i" @click="clickaddcar(v,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.isAdd==1">已添加</text>
				</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:11.2vw':'' ">
				<view @click="qb=!qb;moredex=0" 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=1;Invenshow=true">查看全部
				</view>
				<view class="guodu" :class="qb?(moredex==2?'avt':''):'righ0'" @click="moredex=2">添加全部</view>

			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick,  watch, reactive } from 'vue';
	const props = defineProps({
		Material:{
			type:Array,
			required: true,
		}
	});
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const scrollleft = ref(0)
	watch(()=>props.Material,
	()=>{
		console.log(props.Material)
		if(props.Material.length>5){
			scrollleft.value = 100*props.Material.length
		}
	})
	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: 100;
		}

		.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: 4.2vw;
					z-index: 3;
				}

				&:nth-child(3) {
					right: 8.5vw;
					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: 99;

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

				.ytj {
					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;
					text-align: center;
					line-height: 1.75vw;
					position: absolute;
					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;
				}
			}
		}
	}
</style>