jp-railway/pages/staffHome/orderReport.vue

<template>
	<view>
		<u-navbar title="订餐上报"></u-navbar>
		<view class="head">
			<view class="department">
				订餐部门：机务段
			</view>
			<view class="date" @click="changeDateShow">
				2023年4月<u-icon name="arrow-down" size="24"></u-icon>
				<view class="date-box" v-if="dateShow">
					<view class="options-item">
						选项1
					</view>
					<view class="options-item">
						选项2
					</view>
					<view class="options-item">
						选项3
					</view>
				</view>
			</view>
		</view>
		
		<!-- 上报记录 -->
		<view class="records">
			<view class="record-item">
				<view class="date">
					4月10日 星期一
				</view>
				<view class="number report" @click="maskShow">
					{{report}} <u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="record-item" v-for="item in 8">
				<view class="date">
					4月10日 星期一
				</view>
				<view class="number">
					订餐9人
				</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<u-mask :show="show1" @click="show1 = false" :zoom='false'>
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="title">
						<u-icon name="close" color="#777777" @click="close"></u-icon>
						订餐人数
					</view>
		
					<!-- <textarea  placeholder="请填写订餐人数" name="" id="" cols="30" rows="10" v-model="name1" >
						
					</textarea> -->
					<u-input v-model="name1" :clearable="false" type="number"  placeholder="请填写订餐人数"> </u-input>
					<view class="unit">
						人
					</view>
					<u-button class="btn" @click="submit" >保存</u-button>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateShow:false,
				show1: false,
				report:'点击上报',
				name1:''
			}
		},
		methods: {
			changeDateShow() {
				this.dateShow = !this.dateShow
			},
			maskShow() {
				this.show1 = true;
			},
			close(){
				this.show1 =false ;
			},
			submit() {
				this.report ="订餐"+ this.name1+"人";
				this.show1 = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		background: linear-gradient(89.02deg, rgba(18,114,238,1) 1.34%,rgba(102,169,255,1) 99.5%);
	    padding: 40rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgba(255, 255, 255, 1);
		.department{
			
			font-size: 36rpx;
			font-family: 'Medium';
		}
		.date{
			width: 218rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 8px;
			border: 1px solid rgba(255, 255, 255, 1);
			position: relative;
			/deep/.uicon-arrow-down{
				margin-left: 8rpx;
			}
			.date-box{
				background-color: #fff;
				z-index: 999;
				width: 180rpx;
				box-shadow: 0px 0px 2px #999999;
				position: absolute;
				top: 70rpx;
			    left: 0px;
			
				.options-item {
					line-height: 60rpx;
					padding-left: 16rpx;
					background-color: #fff;
					color: #101010;
					text-align: left;
				}
			
			}
		}
	}

 // 上报记录
 .records{
	 background-color: #fff;
	 .record-item{
		 font-family: 'PingFang Regular';
		 padding: 0 24rpx;
		 line-height: 88rpx;
		 display: flex;
		 justify-content: space-between;
		 align-items: center;
		 color: rgba(16, 16, 16, 1);
		 border-bottom: 1px solid rgba(232, 232, 232, 1);
		 
	 }
	 .report{
		 color: rgba(18, 114, 238, 1);
		 /deep/.uicon-arrow-right{
			 margin-left: 8rpx;
		 }
	 }
 }
 
 .warp {
 
 	position: fixed;
 	left: 0;
 	bottom: 0;
 	width: 100%;
	/deep/.uicon-close{
		position: absolute;
		left: 32rpx;
		top: 6rpx !important;
		
	};
	.title {
		color: rgba(16, 16, 16, 100);
		line-height: 48rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 36rpx;
		text-align: center;
		position: relative;
		font-weight:bold
	}
 }
 .rect {
 	width: 100%;
 	height: 100%;
 	background-color: #fff;
 	padding: 32rpx 0;
   
 	
 
 	/deep/.u-input {
 		width: 87.2%;
 		border-radius: 8px;
 		background-color: rgba(229, 231, 234, 100);
 		margin: 40rpx auto 0;
 		height: 96rpx;
 		line-height: 96rpx !important;
 		padding: 0 16rpx;
 		position: relative;
		
 	}
	/deep/.u-input__input{
		height: 96rpx !important;
		line-height: 96rpx !important;
		text-indent: 24rpx;
	}
	.unit{
		width: 20px;
		height: 20px;
		position: absolute;
		top: 140rpx;
		right: 60rpx;
		color: rgba(16, 16, 16, 1);
		font-size: 36rpx;
		
	}
 
 	
 
 	.u-btn {
 		width: 89.2%;
 		color: rgba(255, 255, 255, 100);
 		font-size: 36rpx;
 		border-radius: 8px;
 		margin-top: 48rpx;
 		z-index: 99999;
		background-color: rgba(31, 74, 153, 1);
 	}
 }
</style>