<template>
|
<view class="main_app">
|
<view class="app_header">
|
<view class="item" @click="isShowCar = true">
|
<text v-if="false">xx</text>
|
<text v-else class="placeholder9">选择车辆</text>
|
<u-icon name="arrow-down" color="#999999" />
|
</view>
|
<view class="item" @click="isShowDate = true">
|
<text v-if="param.aa">{{ param.aa }}</text>
|
<text v-else class="placeholder9">选择日期</text>
|
<u-icon name="arrow-down" color="#999999" />
|
</view>
|
</view>
|
<!-- -->
|
<view class="time_list">
|
<view class="item" v-for="item,i in timeList" :key="i">{{ item.time }}</view>
|
</view>
|
<!-- -->
|
<view class="main_footer">
|
<view class="df_ac">
|
<view>已选择：</view>
|
<view class="sel_time">xxxxxx</view>
|
</view>
|
<view class="btns">
|
<view class="left">
|
<view class="item" v-for="item in colorOptions" :key="item.name">
|
<view class="box" :style="{ background: item.color }"></view>
|
<view class="">{{ item.name }}</view>
|
</view>
|
</view>
|
<view class="sub" @click="$jump('/pages/staff/vehicle/apply')">确认预约</view>
|
</view>
|
</view>
|
<!-- -->
|
<!-- 选择车辆 -->
|
<u-picker keyName="name" :show="isShowCar" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
|
<!-- 日期 -->
|
<u-datetime-picker :show="isShowDate" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDate = false" mode="date"></u-datetime-picker>
|
</view>
|
</template>
|
|
<script>
|
import dayjs from 'dayjs'
|
export default {
|
data() {
|
return {
|
isShowCar: false,
|
isShowDate: false,
|
param: {},
|
|
minDate: '',
|
carList: [[{ name: 'aa', value: '11' }]],
|
timeList: [
|
{ time: '08:30-09:00' },
|
{ time: '08:30-09:00' },
|
{ time: '08:30-09:00' },
|
{ time: '08:30-09:00' },
|
],
|
|
colorOptions: [
|
{ color: '#279BAA', name: '已选择' },
|
{ color: '#F7F7F7', name: '可预约' },
|
{ color: '#cccccc', name: '不可预约' },
|
]
|
};
|
},
|
created(){
|
this.minDate = new Date().getTime()
|
},
|
methods: {
|
confirmDate(e) {
|
console.log(e.value);
|
this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
|
this.isShowDate = false
|
},
|
seletedCar(e) {
|
console.log(e.value);
|
this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
|
this.isShowDate = false
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.main_app {
|
.app_header {
|
display: flex;
|
align-items: center;
|
margin: 0 -15rpx;
|
.item {
|
width: 330rpx;
|
height: 72rpx;
|
margin: 15rpx;
|
padding: 0 30rpx;
|
border-radius: 36rpx;
|
border: 1rpx solid #e5e5e5;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
align-items: center;
|
}
|
}
|
.main_footer{
|
position: absolute;
|
width: 100%;
|
left: 0;
|
bottom: 0;
|
padding: 20rpx 30rpx 84rpx;
|
box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
|
.sel_time{
|
color: #279BAA;
|
}
|
.btns{
|
margin-top: 10rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.left{
|
display: flex;
|
.item{
|
display: flex;
|
align-items: center;
|
margin-right: 20rpx;
|
.box{
|
margin-right: 10rpx;
|
width: 32rpx;
|
height: 32rpx;
|
}
|
}
|
}
|
.sub{
|
width: 184rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #279BAA;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
border-radius: 36rpx;
|
font-size: 30rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.time_list{
|
display: flex;
|
justify-content: space-between;
|
padding: 30rpx 0;
|
flex-wrap: wrap;
|
.item{
|
width: 220rpx;
|
height: 80rpx;
|
line-height: 80rpx;
|
text-align: center;
|
background: #F7F7F7;
|
border-radius: 4rpx;
|
margin-bottom: 24rpx;
|
font-size: 30rpx;
|
}
|
.active{
|
background-color: #279BAA;
|
color: #fff;
|
}
|
.disable{
|
background-color: #cccccc;
|
color: #999999;
|
}
|
}
|
|
}
|
</style>
|
