ll

liukangdong

2024-11-07 b158a9a85078d57a0e660aba680f6ad88da7ab6a

 h5/pages/staff/vehicle/shinei.vue

@@ -1,172 +1,437 @@
<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>
<template>

   <view class="main_app">

      <view class="app_header">

         <view class="item" @click="isShowCar = true">

            <text v-if="param.carCode">{{ param.carCode }}</text>

            <text v-else class="placeholder9">选择车辆</text>

            <u-icon name="arrow-down" color="#999999" />

         </view>

         <view class="item" @click="showDate">

            <text v-if="param.queryDate">{{ param.queryDate }}</text>

            <text v-else class="placeholder9">选择日期</text>

            <u-icon name="arrow-down" color="#999999" />

         </view>

      </view>

      <!-- pastFlag -->

      <view class="time_list">

         <view class="item" :class="{

          disable: item.pastFlag,

          active: item.checked == '1',

          hasSub: item.carUseBookId,

        }" @click="datetimeClick(item, i)" v-for="(item, i) in timeList" :key="i">

            {{ item.startHours }}-{{ item.endHours }}

         </view>

      </view>

      <!--  -->

      <view class="main_footer">

         <view class="df_ac">

            <view>已选择：</view>

            <view class="sel_time">{{ selDatetime }}</view>

         </view>

         <view class="df_ac red">

            {{selPastDatetime}}

         </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="onSubmit">确认预约</view>

         </view>

      </view>

      <!--  -->

      <!-- 选择车辆 -->

      <u-picker keyName="code" :show="isShowCar" :columns="carsList" @confirm="seletedCar"

         @cancel="isShowCar = false"></u-picker>

      <!-- 日期 -->

      <u-datetime-picker ref="startPick" :show="isShowDate" :minDate="minDate" @confirm="confirmDate"

         @cancel="isShowDate = false" mode="date"></u-datetime-picker>

      <!-- 详情 -->

      <u-popup :show="isShowDetail" :round="12" mode="bottom" @close="isShowDetail = false">

         <view class="detail_modal">

            <view class="title">车辆预约情况</view>

            <view class="h1">{{ activeInfo.carCode }}</view>

            <view class="line">

               <view class="label">预计用车时段</view>

               <view class="value" v-if="activeInfo.startTime">{{ activeInfo.startTime.slice(5, 16) }} -

                  {{ activeInfo.endTime.slice(5, 16) }}

               </view>

            </view>

            <view class="line">

               <view class="label">目的地</view>

               <view class="value">{{ activeInfo.addr }}</view>

            </view>

            <view class="line">

               <view class="label">乘车人数</view>

               <view class="value" v-if="activeInfo.memberIds">{{ activeInfo.memberIds.split(",").length }}人</view>

            </view>

            <view class="line">

               <view class="label">用车事由</view>

               <view class="value">{{ activeInfo.content || "" }}</view>

            </view>

            <view class="line">

               <view class="label">申请人</view>

               <view class="value">{{ activeInfo.memberName }}

                  <text class="primaryColor ml12">{{

              activeInfo.memberPhone

            }}</text>

               </view>

            </view>

            <view class="btn" @click="isShowDetail = false">关闭</view>

         </view>

      </u-popup>

   </view>

</template>



<script>

   import dayjs from 'dayjs'

   import {

      getCarsList,

      carCanReservationDate,

      carUseBookDetail

   } from '@/api'

   export default {

      data() {

         return {

            isShowCar: false,

            isShowDate: false,

            param: {},

            isShowDetail: false,

            activeInfo: {},



            minDate: '',

            carsList: [

               [{

                  name: 'aa',

                  value: '11'

               }]

            ],

            timeList: [],

            selDatetime: '',

            selPastDatetime: '',



            colorOptions: [{

                  color: this.$store.state.primaryColor,

                  name: '已选择'

               },

               {

                  color: '#F7F7F7',

                  name: '可预约'

               },

               {

                  color: '#cccccc',

                  name: '不可预约'

               },

            ]

         }

      },

      onLoad() {

         this.minDate = new Date().getTime() - (6 * 24 * 60 * 60 * 1000)

         this.initData()

      },

      methods: {

         onSubmit() {

            const {

               param

            } = this

            const selTimeList = this.timeList.filter(i => i.checked == '1')

            if (selTimeList.length == 0) {

               return uni.showToast({

                  title: '请先选择用车时间段',

                  icon: 'none'

               })

            }

            const obj = {

               carCode: param.carCode,

               carId: param.carId,

               startTime: selTimeList[0].startTime,

               endTime: selTimeList[selTimeList.length - 1].endTime,

               dateDay: param.queryDate,

               type: '0'

            }

            uni.navigateTo({

               url: `/pages/staff/vehicle/apply?carCode=${obj.carCode}&carId=${obj.carId}&startTime=${obj.startTime}&endTime=${obj.endTime}&dateDay=${obj.dateDay}&type=${obj.type}`

            })

            // this.$jump('/pages/staff/vehicle/apply')

         },

         showDate() {

            this.isShowDate = true

            if (!this.param.queryDate) {

               this.$refs.startPick.innerValue = new Date().getTime()

            }

         },

         datetimeClick(item, index) {

            if (item.carUseBookId) {

               this.getDetail(item.carUseBookId)

               return

            }

            if (item.isUse == '1') return

            const {

               timeList

            } = this

            const selTimeList = timeList.filter(i => i.checked == '1')

            if (selTimeList.length === 0) {

               this.timeList.forEach((ite, i) => {

                  if (i === index) {

                     ite.checked = '1'

                     this.$forceUpdate()

                  }

               })

            } else {

               const findIndex = selTimeList.findIndex(i => i.index === index)

               console.log('findIndex', findIndex)

               if (findIndex === -1) {

                  const startNum = index - selTimeList[0].index

                  const endNum = index - selTimeList[selTimeList.length - 1].index

                  if (startNum == 1 || startNum == -1 || endNum == 1 || endNum == -1) {

                     console.log('相邻')

                     item.checked = true

                     this.$forceUpdate()

                  } else {

                     return uni.showToast({

                        title: '请选择相邻的时间段',

                        icon: 'none'

                     })

                  }

               } else {

                  if (index === selTimeList[0].index || index === selTimeList[selTimeList.length - 1].index) {

                     item.checked = false

                     this.$forceUpdate()

                  } else {

                     return uni.showToast({

                        title: '请先取消最外层的时间段',

                        icon: 'none'

                     })

                  }



               }

            }

            const selTimeLists = this.timeList.filter(i => i.checked == '1')

            // console.log('selTimeList', selTimeList);

            if (selTimeLists.length === 0) {

               this.selDatetime = ''

               this.selPastDatetime = ''

            } else {

               let pastList = selTimeLists.filter(i => i.pastFlag)

               if (pastList.length > 0) {

                  this.selPastDatetime = '当前选择包含已经过去时间，请确认后再提交；'

               } else {

                  this.selPastDatetime = ''

               }

               this.selDatetime = this.param.queryDate.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[

                  selTimeLists.length - 1].endHours

            }

         },

         getDetail(id) {

            carUseBookDetail(

               id

            ).then(res => {

               this.activeInfo = res.data

               this.isShowDetail = true

            })

         },

         confirmDate(e) {

            this.param.queryDate = dayjs(e.value).format('YYYY-MM-DD')

            this.isShowDate = false

            if (this.param.carId && this.param.queryDate) {

               this.gettimes()

            }

         },

         initData() {

            getCarsList({

               type: 0

            }).then(res => {

               this.carsList = [res.data]

            })

         },

         gettimes() {

            const {

               param

            } = this

            carCanReservationDate({

               dateDay: param.queryDate,

               carId: param.carId

            }).then(res => {

               if (res.code === 200) {

                  this.timeList = res.data || []

                  this.timeList.forEach((i, j) => {

                     i.checked = '0',

                        i.index = j

                     // if (dayjs().format('YYYY-MM-DD') == param.queryDate) {

                     // let endTime = new Date(i.endTime).getTime()

                     // let nowTime = new Date().getTime()

                     i.pastFlag = new Date().getTime() > new Date(i.startTime).getTime()

                     // if (endTime < nowTime) {

                     //   i.isUse = 1

                     // }

                     // }

                  })

               }

            })

         },

         seletedCar(e) {

            const item = e.value[0]

            this.$set(this.param, 'carCode', item.code)

            this.$set(this.param, 'carId', item.id)

            if (this.param.carId && this.param.queryDate) {

               this.gettimes()

            }

            this.isShowCar = 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: $uni-color-primary;

         }



         .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: $uni-color-primary;

               box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;

               border-radius: 36rpx;

               font-size: 30rpx;

               color: #ffffff;

            }

         }

      }



      .time_list {

         display: flex;

         padding: 30rpx 0 240rpx;

         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;

            margin-right: 15rpx;



            &:nth-of-type(3n) {

               margin-right: 0;

            }

         }



         .disable {

            background: #f7f7f7;

            color: #cccccc;

         }



         .active {

            background-color: $uni-color-primary;

            color: #fff;

         }



         .hasSub {

            color: #999999;

            background: #cccccc;

         }

      }

   }



   .detail_modal {

      padding: 40rpx 30rpx;



      .title {

         text-align: center;

         font-weight: 600;

         font-size: 32rpx;

         margin-bottom: 40rpx;

      }



      .h1 {

         font-weight: 600;

         font-size: 32rpx;

         margin-bottom: 30rpx;

      }



      .line {

         display: flex;

         margin-bottom: 20rpx;



         .label {

            width: 180rpx;

            color: #888888;

         }



         .value {

            color: #333333;

         }

      }



      .btn {

         margin-top: 230rpx;

         width: 690rpx;

         height: 88rpx;

         line-height: 88rpx;

         text-align: center;

         background: $uni-color-primary;

         border-radius: 44rpx;

         font-weight: 600;

         font-size: 32rpx;

         color: #ffffff;

      }

   }

</style>