Merge remote-tracking branch 'origin/master'

jiangping

2024-05-31 6be28040e74e1ff7764478174a9b5d706fe4fc39

 h5/pages/staff/vehicle/shinei.vue

@@ -1,172 +1,289 @@
<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>
  <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="isShowDate = true">
        <text v-if="param.queryDate">{{ param.queryDate }}</text>
        <text v-else class="placeholder9">选择日期</text>
        <u-icon name="arrow-down" color="#999999" />
      </view>
    </view>
    <!--  -->
    <view class="time_list">
      <view
        class="item"
        :class="{ disable: item.isUse == 1, active: item.checked == '1' }"
        @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="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
      :show="isShowDate"
      :minDate="minDate"
      @confirm="confirmDate"
      @cancel="isShowDate = false"
      mode="date"
    ></u-datetime-picker>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import { getCarsList, carCanReservationDate } from '@/api'
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
      }
   }
  data() {
    return {
      isShowCar: false,
      isShowDate: false,
      param: {},

      minDate: '',
      carsList: [[{ name: 'aa', value: '11' }]],
      timeList: [],
      selDatetime: '',

      colorOptions: [
        { color: '#279BAA', name: '已选择' },
        { color: '#F7F7F7', name: '可预约' },
        { color: '#cccccc', name: '不可预约' },
      ]
    }
  },
  onLoad() {
    this.minDate = new Date().getTime()
    this.initData()
  },
  methods: {
    onSubmit() {
         const { param } = this
      const selTimeList = this.timeList.filter(i => i.checked == '1')
      if (selTimeList.length == -1) {
        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')
    },
    datetimeClick(item, index) {
      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 = ''
      } else {
        this.selDatetime = this.param.queryDate.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[selTimeLists.length - 1].endHours
      }
      // if(true){
      //    this.selDatetime.push(item)
      // }
    },
    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: 1
      }).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
          })
        }
      })
    },
    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: #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;
      }
   }
	
  .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>