hldy_app_mini/pages/NursingNew/component/requestform.vue

<template>
	<view class="index-content-other" :style="transition?{opacity: `1`}:{opacity: `0`}">
		<view class="right-container-title-nav">
			<text style="margin-left: 30rpx;">
				NUID：{{ uni.getStorageSync('nuId')}}
			</text>
			<text class="new-weight">
				{{ uni.getStorageSync('nuName')}}
			</text>
			<view class="right-icons">
				<image class="right-icons-img" src="/static/index/requestform/touxiang.png" />
				<view>{{name}}</view>
				<image class="right-icons-img-back" src="/static/index/requestform/back.png" />
				<view>返回</view>
			</view>
		</view>
		<view class="buttons-father">
			<view class="ipt">
				<input type="text" placeholder="物料名称/物料简拼" />
			</view>
			<view class="scr">
				检索
			</view>
			<view class="shx">
				<image src="/static/index/requestform/shaixuan.png" mode="aspectFill"></image>
				<view class="shx-font">
					筛选
				</view>
				
			</view>
			<view class="shx">
				<image src="/static/index/requestform/chongzhi.png" mode="aspectFill"></image>
				<view class="shx-font">
					重置
				</view>
			</view>
		</view>
		<view class="other-contain">
			<view class="other-contain-left">
				<view class="left-selecttype">
					<view :class="selectType===index?`selecttype-target`: `selecttype`" v-for="(item,index) in tagsarray" @click="changetype(index)" >
						{{ item }}
						<view class="heng-blue" v-if="selectType===index"></view>
					</view>
				</view>
				
			</view>
			<view class="other-contain-right">
				
			</view>
		</view>



	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch } from 'vue';

	const transition = ref(false);
	const tagsarray = ref(["全部","待出库","已出库","已收货 ","已作废"])
	
	const props = defineProps({
		isShow: {
			type: Boolean,
			required: true,
		},
	});

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			// 当旧值为false，新值为true时延迟0.2秒调用方法
			if (!oldVal && newVal) {
				transition.value = false;
				setTimeout(() => {
					transition.value = true;
				}, 50)
			} else {
				transition.value = false;
			}

		}
	)
	const name = ref("");
	onMounted(() => {
		name.value = uni.getStorageSync('realname')
	})
	const lanjie = ref(false);
	
	const selectType = ref(0)
	const changetype = (index:number) => {
		selectType.value = index
	}
</script>

<style scoped lang="less">
	.index-content-other {
		width: calc(100% - 260rpx);
		// background-color: red;
		height: 100%;
		transition: opacity 1s ease;
		position: relative;


	}

	.right-container-title-nav {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		height: 60rpx;
		position: relative;
		font-size: 28rpx;

		.new-weight {
			margin-left: 30rpx;
			font-weight: 600;
		}

		.right-icons {
			position: absolute;
			right: 40rpx;
			top: 0;
			display: flex;
			align-items: center;
			height: 60rpx;
			font-size: 30rpx;
		}

		.right-icons-img {
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.right-icons-img-back {
			width: 38rpx;
			height: 38rpx;
			margin-left: 60rpx;
			margin-right: 3rpx;
		}
	}

	.right-container-tem {
		display: flex;

		.right-container-tem-text {
			font-size: 30rpx;
			margin-right: 20rpx;
		}


		.right-container-tem-img {
			width: 38rpx;
			height: 38rpx;
		}
	}
	.buttons-father{
		width: 100%;
		height: 100rpx;
		// background-color: red;
		display: flex;
		.ipt {
			display: flex;
			align-items: center;
			width: 18vw;
			background: #E2E4E9;
			border-radius: 1.65vw;
			height: 3.3vw;
			
			image {
				width: 2.2vw;
				height: 2.2vw;
				margin:0 0.5vw;
			}
		
			input {
				width: 18vw;
				height: 3.5vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;
				
			}
		}
		.scr {
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 6.5vw;
			height: 3.3vw;
			margin: 0 0 0 0.7vw;
			background: rgba(255, 255, 255, 0.6);
			border: 1px solid #D9DADC;
			color: #555555;
			box-shadow: 0.5rpx 3rpx 3rpx #dadee1;
		}
		
		.shx {
			width: 6.5vw;
			height: 3.3vw;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 1.65vw;
			border: 1rpx solid #D9DADC;
			font-weight: 400;
			font-size: 1.2vw;
			color: #222;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0.5rpx 3rpx 3rpx #dadee1;
			margin: 0 0 0 0.5vw;
			color: #555555;
		
			image {
				width: 1.8vw;
				height: 1.8vw;
				margin: 0 0.2vw 0 0;
			}
			.shx-font{
				margin-top: 3rpx;
				// margin-left: -5rpx;
			}
		}
	}
	.other-contain{
		width: 100%;
		height: 1050rpx;
		display: flex;
		.other-contain-left{
			width: 35%;
			height: 100%;
			.left-selecttype{
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #FFFFFF;
				display: flex;
				padding: 0 30rpx;
				
				.heng-blue{
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 25rpx;
					height: 8rpx;
					border-radius: 10rpx;
					background-color: #1083F8;
					
				}
				.selecttype{
					width: 20%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #999999;
					font-size: 31rpx;
					position: relative;
					
				}
				.selecttype-target{
					width: 20%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #222222;
					font-size: 31rpx;
					font-weight: 600;
					position: relative;
				}
			}
		}
		.other-contain-right{
			width: 65%;
			height: 100%;
			// background-color: red;
		}
	}
</style>