courier_mobile_front/src/pages/box.vue

<template>
	<div>
		
		<p style="text-align: center;font-size: .36rem;margin-top: .2rem;">快递列表</p>
		<div class="content">
			<div class="sm">
				<van-search placeholder="点击搜索" readonly @click="addshow=true"/>
			</div>
			<!-- table切换 -->
			<div class="tab">
				<div>
					<p @click="tab(1)" :class="[index==1?'active':'']">寄件</p>
					<p @click="tab(2)" :class="[index==2?'active':'']">收件</p>
				</div>		
			</div>
			<!-- 快件查询列表 -->
			<div class="jjlist">
				<div class="listinfo">
					<div class="list_top">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>内单 432432432123</p>
								<p><span>收</span>王伟</p>
								<p>5幢-6层  销售部</p>
							</div>
						</div>
						<p class="staus1" @click="slide">{{options}}</p>
					</div>
				</div>
			</div>
			<div class="jjlist">
				<div class="listinfo">
					<div class="list_top">
						<div class="list_top_left">
							<img src="../assets/images/ad_icon1.png" alt="">
							<div>
								<p>内单 432432432</p>
								<p><span>收</span>王伟</p>
								<p>5幢-6层  销售部</p>
							</div>
						</div>
						<p class="staus2">待派件</p>
					</div>
				</div>
			</div>
			
		</div>
		<!-- 选择下拉 -->
		<van-popup v-model="showPicker" position="bottom">
		  <van-picker title="" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker=false" />
		</van-popup>
		<!-- 筛选 -->
		<van-popup round v-model="addshow" class="whrite_add" closeable>
			<div>
				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">筛选</p>
				<van-form @submit="search">
				  <van-field v-model="box" name="寄包柜" label="寄包柜" placeholder="请选择" readonly/>
				  <van-field v-model="name" name="收件人" label="收件人" placeholder="请输入收件人"/>
				  <van-field v-model="starttime" name="开始时间" label="开始时间" placeholder="请选择" readonly @click="time(1)"/>
				  <van-field v-model="endtime" name="结束时间" label="结束时间" placeholder="请选择" readonly @click="time(2)"/>
				  <van-field v-model="staus" name="状态" label="状态" placeholder="请选择" readonly @click="ztshow=true"/>
				  <div style="margin-top: 16px;">
				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
				  </div>
				</van-form>
			</div>		  
		</van-popup>
		<!-- 时间 -->
		<van-popup v-model="timeshow" position="bottom">
			<van-datetime-picker
			  v-model="currentDate"
			  type="datetime"
			  title="选择时间"
			  :min-date="minDate"
			  @confirm="timedate"
			  @cancel="timeshow=false"
			/>
		</van-popup>
		<!-- 状态 -->
		<van-popup v-model="ztshow" position="bottom">
			<van-picker title="标状态" show-toolbar :columns="ztlist" @confirm="zt" @cancel="ztshow=false"/>
		</van-popup>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				titlename:"寄包柜子",
				showPicker:false,
				columns:["未派件","待派件"],
				options:"待揽件",
				index:1,
				addshow:false,
				name:"",
				timeshow:false,
				box:"",
				starttime:"",
				endtime:"",
				staus:"",
				currentDate:"",
				minDate:new Date(),
				timetype:"",//时间类别1开始、2结束
				ztshow:false,
				ztlist:["状态一","状态二"],
				
			}
		},
		created:function(){
			
		},
		methods:{
			// tab切换
			tab(obj){
				this.index=obj
			},
			// 下拉选择属性
			slide(){
				this.showPicker=true
			},
			// 下拉选择赋值
			onConfirm(e){
				this.options=e
				this.showPicker=false
			},
			search(){},
			timedate(e){
				var date=new Date(e)
				var year=date.getFullYear()
				var month=date.getMonth()+1
				month=month>9?month:'0'+month
				var day=date.getDate()
				day=day>9?day:'0'+day
				var hour=date.getHours()
				hour=hour>9?hour:'0'+hour
				var minute=date.getMinutes()
				minute=minute>9?minute:'0'+minute
				console.log(month)
				if(this.timetype==1){
					this.starttime=year+'-'+month+'-'+day+' '+hour+':'+minute
				}
				if(this.timetype==2){
					this.endtime=year+'-'+month+'-'+day+' '+hour+':'+minute
				}
				this.timeshow=false
							
			},
			time(obj){
				this.timeshow=true
				this.timetype=obj
				
			},
			// 状态显示
			zt(e){
				this.staus=e
				this.ztshow=false
			}
			
		},
		mounted:function(){
			
		}
	}
</script>

<style scoped lang="less">
	.content{
		padding: 0.25rem .37rem;
		.tab{
			font-size: .36rem;
			color: #00c4b8;	
					background: white;
			div{
				display: flex;
				text-align: center;			
				border-radius: .05rem;
				p{
					flex: 1;
					padding: .2rem 0rem;
					color: #333;				
				}
				p.active{
					border-bottom:.01rem solid #00c4b8;
					color: #00c4b8;
				}
			}
			
		}
		
		.sm{
			margin-bottom: .2rem;
			/deep/.van-search{
				width: 100%;
				height: .76rem;
				border-radius: 25px;
				overflow: hidden;
				padding: 0rem;
				background-color: white;
				.van-search__content{
					background-color: white;
				}
				input{
					background-color: white;
				}
			}
			img{
				width:.4rem;
				height: .4rem;
				position: relative;
				top: .18rem;
			}
		}
		.jjlist {
			font-size: .3rem;
			color: #999999;
		
			.listinfo {
				background: white;
				padding: .33rem .33rem .2rem;
				border-radius: .05rem;
				margin-bottom: .2rem;
				position: relative;
				.list_top {
					display: flex;
					justify-content: space-between;
		
					.list_top_left {
						img {
							display: inline-block;
							width: .9rem;
							height: .9rem;
							position: relative;
							top: -.1rem;
						}
		
						div {
							width: 3.8rem;
							margin-left: .2rem;
							display: inline-block;	
							position: relative;
							p:nth-of-type(1) {
								font-size: .28rem;
								color: #333;
								font-weight: bold;
							}
							p:nth-of-type(2) {
								font-size: .22rem;
								margin: .1rem 0rem;
								display: flex;
								align-items: center;
								span{
									background: #fa9c22;
									color: white;
									border-radius:50% ;
									display: inline-block;
									width: .4rem;
									height: .4rem;
									text-align: center;
									line-height: .4rem;
									margin-right: .1rem;
								}
							}		
							p:nth-of-type(3) {
								font-size: .22rem;
							}
						}
					}		
					>p {
						font-size: .24rem;
						font-weight: bold;
						display: flex;
						align-items: center;
					}
					>p:after{
						content: "";
						width: .1rem;
						height: .1rem;
						display: inline-block;
						border-right: .01rem solid #7a7a7a;
						border-bottom: .01rem solid #7a7a7a;
						transform: rotate(45deg);
						position: relative;
						margin-left: .05rem;
						top: -.02rem;
					}
					.staus1{
						color: #f5693d;
					}
					.staus2{
						color: #3d82f5;
					}
				}
			}
		}
	}
	.whrite_add{
		width: 6.6rem;
		padding: .4rem .2rem;
		/deep/.van-field__value{
			input{
				text-align: right;
			}
			
		}
		/deep/.van-popup__close-icon--top-right{
			top: 5px;
			right: 10px;
		}
	}
</style>