Browse Source

筛选条件增加

master
unknown 1 year ago
parent
commit
0a8de92470
  1. 2
      components/UserTab/UserTab.vue
  2. 57
      pages/tabbar/operateTrain/index.vue
  3. 60
      pages/tabbar/student/index.vue

2
components/UserTab/UserTab.vue

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

57
pages/tabbar/operateTrain/index.vue

@ -14,20 +14,20 @@
@click="changeTab(item)">{{ item.text }}</view> @click="changeTab(item)">{{ item.text }}</view>
</view> </view>
<view class="screen_row"> <view class="screen_row">
<view class="selectItem">
<view class="selectItem" @click="showSubject=true">
<view class="text oneRowText">{{screen.subject}}</view> <view class="text oneRowText">{{screen.subject}}</view>
<view class="downIcon"> <view class="downIcon">
<u-icon name="arrow-down"></u-icon> <u-icon name="arrow-down"></u-icon>
</view> </view>
</view> </view>
<view class="selectItem">
<view class="selectItem" @click="showCar=true">
<view class="text oneRowText">{{screen.car}}</view> <view class="text oneRowText">{{screen.car}}</view>
<view class="downIcon"> <view class="downIcon">
<u-icon name="arrow-down"></u-icon> <u-icon name="arrow-down"></u-icon>
</view> </view>
</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"> <view class="downIcon">
<u-icon name="arrow-down"></u-icon> <u-icon name="arrow-down"></u-icon>
</view> </view>
@ -40,6 +40,17 @@
</view> </view>
</view> </view>
<UserTab name ='实操训练'></UserTab> <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> </view>
</template> </template>
@ -65,7 +76,22 @@
subject: '训练科目', subject: '训练科目',
car: '预约车辆', car: '预约车辆',
timer: '预约时间' 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() { onLoad() {
@ -77,6 +103,23 @@
methods: { methods: {
changeTab(item) { changeTab(item) {
this.currentTab = item.id 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; background-color: #FFFFFF;
line-height: 60rpx; line-height: 60rpx;
align-items: center; align-items: center;
width: 28.6%;
width: 29%;
.text { .text {
color: $themC; color: $themC;
flex: 1; flex: 1;
white-space: nowrap;
text-align: center;
} }
.downIcon { .downIcon {
width: 24rpx; width: 24rpx;

60
pages/tabbar/student/index.vue

@ -28,19 +28,19 @@
</view> </view>
<view class="screen_row"> <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"> <view class="downIcon">
<u-icon name="arrow-down" :size="'28rpx'"></u-icon> <u-icon name="arrow-down" :size="'28rpx'"></u-icon>
</view> </view>
</view> </view>
<view class="selectItem">
<view class="selectItem" @click="showCar=true">
<view class="text oneRowText">{{screen.car}}</view> <view class="text oneRowText">{{screen.car}}</view>
<view class="downIcon"> <view class="downIcon">
<u-icon name="arrow-down" :size="'28rpx'"></u-icon> <u-icon name="arrow-down" :size="'28rpx'"></u-icon>
</view> </view>
</view> </view>
<view class="selectItem">
<view class="selectItem" @click="showClass=true">
<view class="text oneRowText">{{screen.className}}</view> <view class="text oneRowText">{{screen.className}}</view>
<view class="downIcon"> <view class="downIcon">
<u-icon name="arrow-down" :size="'28rpx'"></u-icon> <u-icon name="arrow-down" :size="'28rpx'"></u-icon>
@ -54,6 +54,17 @@
</view> </view>
</view> </view>
<UserTab name ='学员'></UserTab> <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> </view>
</template> </template>
@ -65,12 +76,46 @@
timer: '报名时间', timer: '报名时间',
car: '全部车型', car: '全部车型',
className: '全部班型' 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() { onShow() {
uni.hideTabBar(); 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> </script>
@ -137,17 +182,18 @@
justify-content: space-between; justify-content: space-between;
.selectItem { .selectItem {
display: flex; display: flex;
padding: 0 18rpx;
padding: 0 16rpx;
border: 2rpx solid rgba(25,137,250,0.3); border: 2rpx solid rgba(25,137,250,0.3);
height: 60rpx; height: 60rpx;
border-radius: 16rpx; border-radius: 16rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
line-height: 60rpx; line-height: 60rpx;
align-items: center; align-items: center;
width: 28.6%;
width: 29%;
.text { .text {
color: $themC; color: $themC;
flex: 1; flex: 1;
text-align: center;
} }
.downIcon { .downIcon {
width: 24rpx; width: 24rpx;

Loading…
Cancel
Save