ll

liukangdong

2024-11-07 b158a9a85078d57a0e660aba680f6ad88da7ab6a

 h5/pages/staff/vehicle/shinei.vue

@@ -6,32 +6,30 @@
        <text v-else class="placeholder9">选择车辆</text>
        <u-icon name="arrow-down" color="#999999" />
      </view>
      <view class="item" @click="isShowDate = true">
         <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.isUse == 1,
         <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
      >
        }" @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">
@@ -45,37 +43,21 @@
    </view>
    <!--  -->
    <!-- 选择车辆 -->
    <u-picker
      keyName="code"
      :show="isShowCar"
      :columns="carsList"
      @confirm="seletedCar"
      @cancel="isShowCar = false"
    ></u-picker>
      <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>
      <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"
    >
      <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 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>
@@ -83,9 +65,7 @@
        </view>
        <view class="line">
          <view class="label">乘车人数</view>
          <view class="value" v-if="activeInfo.memberIds"
            >{{ activeInfo.memberIds.split(",").length }}人</view
          >
               <view class="value" v-if="activeInfo.memberIds">{{ activeInfo.memberIds.split(",").length }}人</view>

        </view>
        <view class="line">
          <view class="label">用车事由</view>
@@ -93,12 +73,11 @@
        </view>
        <view class="line">
          <view class="label">申请人</view>
          <view class="value"
            >{{ activeInfo.memberName }}
               <view class="value">{{ activeInfo.memberName }}

            <text class="primaryColor ml12">{{
              activeInfo.memberPhone
            }}</text></view
          >
            }}</text>

               </view>

        </view>
        <view class="btn" @click="isShowDetail = false">关闭</view>
      </view>
@@ -108,7 +87,11 @@

<script>
import dayjs from 'dayjs'
import { getCarsList, carCanReservationDate, carUseBookDetail } from '@/api'
   import {

      getCarsList,

      carCanReservationDate,

      carUseBookDetail

   } from '@/api'

export default {
  data() {
    return {
@@ -119,24 +102,40 @@
      activeInfo: {},

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

               [{

                  name: 'aa',

                  value: '11'

               }]

            ],

      timeList: [],
      selDatetime: '',
            selPastDatetime: '',


      colorOptions: [
        { color: this.$store.state.primaryColor, name: '已选择' },
        { color: '#F7F7F7', name: '可预约' },
        { color: '#cccccc', name: '不可预约' },
            colorOptions: [{

                  color: this.$store.state.primaryColor,

                  name: '已选择'

               },

               {

                  color: '#F7F7F7',

                  name: '可预约'

               },

               {

                  color: '#cccccc',

                  name: '不可预约'

               },

      ]
    }
  },
  onLoad() {
    this.minDate = new Date().getTime()
         this.minDate = new Date().getTime() - (6 * 24 * 60 * 60 * 1000)

    this.initData()
  },
  methods: {
    onSubmit() {
      const { param } = this
            const {

               param

            } = this

      const selTimeList = this.timeList.filter(i => i.checked == '1')
      if (selTimeList.length == 0) {
        return uni.showToast({
@@ -157,13 +156,21 @@
      })
      // 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 {

               timeList

            } = this

      const selTimeList = timeList.filter(i => i.checked == '1')
      if (selTimeList.length === 0) {
        this.timeList.forEach((ite, i) => {
@@ -205,8 +212,16 @@
      // console.log('selTimeList', selTimeList);
      if (selTimeLists.length === 0) {
        this.selDatetime = ''
               this.selPastDatetime = ''

      } else {
        this.selDatetime = this.param.queryDate.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[selTimeLists.length - 1].endHours
               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) {
@@ -232,7 +247,9 @@
      })
    },
    gettimes() {
      const { param } = this
            const {

               param

            } = this

      carCanReservationDate({
        dateDay: param.queryDate,
        carId: param.carId
@@ -242,13 +259,14 @@
          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()
              if (endTime < nowTime) {
                i.isUse = 1
              }
            }
                     // 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

                     // }

                     // }

          })
        }
      })
@@ -272,6 +290,7 @@
    display: flex;
    align-items: center;
    margin: 0 -15rpx;


    .item {
      width: 330rpx;
      height: 72rpx;
@@ -285,6 +304,7 @@
      align-items: center;
    }
  }


  .main_footer {
    position: absolute;
    width: 100%;
@@ -292,20 +312,25 @@
    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;
@@ -313,6 +338,7 @@
          }
        }
      }


      .sub {
        width: 184rpx;
        height: 72rpx;
@@ -326,10 +352,12 @@
      }
    }
  }


  .time_list {
    display: flex;
    padding: 30rpx 0 240rpx;
    flex-wrap: wrap;


    .item {
      width: 220rpx;
      height: 80rpx;
@@ -340,48 +368,59 @@
      margin-bottom: 24rpx;
      font-size: 30rpx;
      margin-right: 15rpx;


      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
    .active {
      background-color: $uni-color-primary;
      color: #fff;
    }


    .disable {
      background: #f7f7f7;
      color: #cccccc;
    }
    .hasSub {


         .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;