筛选条件增加

components/UserTab/UserTab.vue

@@ -33,7 +33,7 @@
                 //教练
                 _this.list = [{
 					"pagePath": "/pages/tabbar/statistics/index",
-					"text": "首页",
+					"text": "统计",
 					"iconPath": require("../../static/images/tabbar/tj.png"),
 					"selectedIconPath": require("../../static/images/tabbar/tjActive.png")
 				},

pages/tabbar/operateTrain/index.vue

@@ -14,20 +14,20 @@
 				@click="changeTab(item)">{{ item.text }}</view>
 		</view>
 		<view class="screen_row">
-			<view class="selectItem">
+			<view class="selectItem" @click="showSubject=true">
 				<view class="text oneRowText">{{screen.subject}}</view>
 				<view class="downIcon">
 					<u-icon name="arrow-down"></u-icon>
 				</view>
 			</view>
-			<view class="selectItem">
+			<view class="selectItem" @click="showCar=true">
 				<view class="text oneRowText">{{screen.car}}</view>
 				<view class="downIcon">
 					<u-icon name="arrow-down"></u-icon>
 				</view>
 			</view>
-			<view class="selectItem">
-				<view class="text oneRowText">{{screen.timer}}</view>
+			<view class="selectItem" @click="showDatePicker=true">
+				<view class="text">{{screen.timer}}</view>
 				<view class="downIcon">
 					<u-icon name="arrow-down"></u-icon>
 				</view>
@@ -40,6 +40,17 @@
 			</view>
 		</view>
 		<UserTab name ='实操训练'></UserTab>
+		
+		<u-datetime-picker
+				:show="showDatePicker"
+				mode="date"
+				:visibleItemCount="4"
+				:closeOnClickOverlay="false"
+				@confirm="confirmDatePicker"
+		></u-datetime-picker>
+		
+		<u-picker :show="showCar" :columns="carArr" keyName="lab" @confirm="confirmCar" @cancel="showCar=false"></u-picker>
+		<u-picker :show="showSubject" :columns="subjectArr" keyName="lab" @confirm="confirmSubject" @cancel="showSubject=false"></u-picker>
 	</view>
 </template>
 
@@ -65,7 +76,22 @@
 					subject: '训练科目',
 					car: '预约车辆',
 					timer: '预约时间'
-				}
+				},
+				showDatePicker: false,
+				showCar: false,
+				showSubject: false,
+				carArr: [
+					[
+						{lab: 'C1',id: 1},
+						{lab: 'C2',id: 2},
+					]
+				],
+				subjectArr: [
+					[
+						{lab: '浙00006',id: 1},
+						{lab: '浙00007',id: 2},
+					]
+				],
 			}
 		},
 		onLoad() {
@@ -77,6 +103,23 @@
 		methods: {
 			changeTab(item) {
 				this.currentTab = item.id
+			},
+			confirmDatePicker(val) {
+				this.showDatePicker = false
+				console.log(val)
+				console.log(uni.$u.date(val.value, 'yyyy-mm-dd'))
+				this.screen.timer = uni.$u.date(val.value, 'yyyy-mm-dd')
+				console.log(this.screen.timer)
+			},
+			confirmCar(val) {
+				let item = val.value[0]
+				this.screen.car = item.lab
+				this.showCar = false
+			},
+			confirmSubject(val) {
+				let item = val.value[0]
+				this.screen.subject = item.lab
+				this.showSubject = false
 			}
 		}
 	}
@@ -146,10 +189,12 @@
 				background-color: #FFFFFF;
 				line-height: 60rpx;
 				align-items: center;
-				width: 28.6%;
+				width: 29%;
 				.text {
 					color: $themC;
 					flex: 1;
+					white-space: nowrap;
+					text-align: center;
 				}
 				.downIcon {
 					width: 24rpx;

pages/tabbar/student/index.vue

@@ -28,19 +28,19 @@
 		</view>
 		
 		<view class="screen_row">
-			<view class="selectItem">
-				<view class="text oneRowText">{{screen.timer}}</view>
+			<view class="selectItem" @click="showDatePicker=true">
+				<view class="text ">{{screen.timer}}</view>
 				<view class="downIcon">
 					<u-icon name="arrow-down" :size="'28rpx'"></u-icon>
 				</view>
 			</view>
-			<view class="selectItem">
+			<view class="selectItem" @click="showCar=true">
 				<view class="text oneRowText">{{screen.car}}</view>
 				<view class="downIcon">
 					<u-icon name="arrow-down" :size="'28rpx'"></u-icon>
 				</view>
 			</view>
-			<view class="selectItem">
+			<view class="selectItem" @click="showClass=true">
 				<view class="text oneRowText">{{screen.className}}</view>
 				<view class="downIcon">
 					<u-icon name="arrow-down" :size="'28rpx'"></u-icon>
@@ -54,6 +54,17 @@
 			</view>
 		</view>
 		<UserTab name ='学员'></UserTab>
+		
+		<u-datetime-picker
+				:show="showDatePicker"
+				mode="date"
+				:visibleItemCount="4"
+				:closeOnClickOverlay="false"
+				@confirm="confirmDatePicker"
+		></u-datetime-picker>
+		
+		<u-picker :show="showCar" :columns="carArr" keyName="lab" @confirm="confirmCar" @cancel="showCar=false"></u-picker>
+		<u-picker :show="showClass" :columns="classArr" keyName="lab" @confirm="confirmClass" @cancel="showClass=false"></u-picker>
 	</view>
 </template>
 
@@ -65,12 +76,46 @@
 					timer: '报名时间',
 					car: '全部车型',
 					className: '全部班型'
-				}
+				},
+				showDatePicker: false,
+				showCar: false,
+				showClass: false,
+				carArr: [
+					[
+						{lab: 'C1',id: 1},
+						{lab: 'C2',id: 2},
+					]
+				],
+				classArr: [
+					[
+						{lab: '普通班型',id: 1},
+						{lab: 'C2vip',id: 2},
+					]
+				],
 			}
 		},
 		onShow() {
 			uni.hideTabBar();
 		},
+		methods: {
+			confirmDatePicker(val) {
+				this.showDatePicker = false
+				console.log(val)
+				console.log(uni.$u.date(val.value, 'yyyy-mm-dd'))
+				this.screen.timer = uni.$u.date(val.value, 'yyyy-mm-dd')
+				console.log(this.screen.timer)
+			},
+			confirmCar(val) {
+				let item = val.value[0]
+				this.screen.car = item.lab
+				this.showCar = false
+			},
+			confirmClass(val) {
+				let item = val.value[0]
+				this.screen.className = item.lab
+				this.showClass = false
+			}
+		}
 	}
 </script>
 
@@ -137,17 +182,18 @@
 		justify-content: space-between;
 		.selectItem {
 			display: flex;
-			padding: 0 18rpx;
+			padding: 0 16rpx;
 			border: 2rpx solid rgba(25,137,250,0.3);
 			height: 60rpx;
 			border-radius: 16rpx;
 			background-color: #FFFFFF;
 			line-height: 60rpx;
 			align-items: center;
-			width: 28.6%;
+			width: 29%;
 			.text {
 				color: $themC;
 				flex: 1;
+				text-align: center;
 			}
 			.downIcon {
 				width: 24rpx;