''

liukangdong

2024-07-04 5a85dcab83e969d6b21c599b512a15117e9b8651

 h5/pages/staff/vehicle/shinei.vue

@@ -16,7 +16,11 @@
    <view class="time_list">
      <view
        class="item"
        :class="{ disable: item.isUse == 1, active: item.checked == '1' }"
        :class="{
          disable: item.isUse == 1,
          active: item.checked == '1',
          hasSub: item.carUseBookId,
        }"
        @click="datetimeClick(item, i)"
        v-for="(item, i) in timeList"
        :key="i"
@@ -56,18 +60,63 @@
      @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 } from '@/api'
import { getCarsList, carCanReservationDate, carUseBookDetail } from '@/api'
export default {
  data() {
    return {
      isShowCar: false,
      isShowDate: false,
      param: {},
      isShowDetail: false,
      activeInfo: {},

      minDate: '',
      carsList: [[{ name: 'aa', value: '11' }]],
@@ -109,6 +158,10 @@
      // this.$jump('/pages/staff/vehicle/apply')
    },
    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')
@@ -156,6 +209,14 @@
        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
@@ -181,6 +242,13 @@
          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
              }
            }
          })
        }
      })
@@ -260,8 +328,7 @@
  }
  .time_list {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 0;
    padding: 30rpx 0 240rpx;
    flex-wrap: wrap;
    .item {
      width: 220rpx;
@@ -272,15 +339,60 @@
      border-radius: 4rpx;
      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-color: #cccccc;
      color: #999999;
      background: #f7f7f7;
      color: #cccccc;
    }
    .hasSub {
      color: #fff;
      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>