Merge remote-tracking branch 'origin/master'

jiangping

2024-05-31 6be28040e74e1ff7764478174a9b5d706fe4fc39

 h5/pages/staff/vehicle/shiwai.vue

@@ -8,7 +8,11 @@
               <text>选择车辆</text>
            </view>
            <view class="value" @click="isShowCar = true">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
          <text
            class="mr6"
            :style="{ color: param.carCode ? '#000000' : '#999999' }"
            >{{ param.carCode ? param.carCode : "请选择" }}</text
          >
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
@@ -18,95 +22,202 @@
               <text>预计用车时段</text>
            </view>
            <view class="value" @click="isShowDate = true">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
          <text
            class="mr6"
            :style="{ color: param.startTime ? '#999999' : '#999999' }"
          >
            <template v-if="param.startTime">
              {{ param.startHours }}至{{ param.endHours }}
            </template>
            <template v-else> 请选择 </template>
          </text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
      </view>
      <view class="have_info">
    <view class="have_info" v-if="info && info.length > 0">
         <view class="tit">您申请的用车时段已有车辆预约</view>
         <view class="content">
            <view class="card">皖A1212</view>
      <view class="content" v-for="item,i in info" :key="i">
        <view class="card">{{ item.carCode }}</view>
            <view class="line">
               <text>用车时段</text>
               <text>111111</text>
          <text>
            {{ item.startTime.slice(5, 16) }}至{{
              item.endTime.slice(5, 16)
            }}</text
          >
            </view>
            <view class="line">
               <text>目的地</text>
               <text>111111</text>
          <text>{{ item.addr }}</text>
            </view>
            <view class="line">
               <text>乘车人数</text>
               <text>111111</text>
          <text>{{ item.memberIds.split(",").length }}人</text>
            </view>
            <view class="line">
               <text>用车事由</text>
               <text>111111</text>
          <text>{{ item.content }}</text>
            </view>
            <view class="line">
               <text>申请人</text>
               <text>111111</text>
          <text>{{ item.memberName }} {{ item.memberMobile}}</text>
            </view>
         </view>
      </view>
      <view class="main_footer">
         <text>已选择：</text>
         <text class="sel">132123</text>
         <text class="btn" @click="$jump('/pages/staff/vehicle/apply')">确认预约</text>
      <text class="sel" v-if="param.startTime"
        >{{ param.startHours }}至{{ param.endHours }}</text
      >
      <text class="btn" @click="onSubmit">确认预约</text>
      </view>
      <!--  -->
      <!-- 选择车辆 -->
      <u-picker
         keyName="name"
      keyName="code"
         :show="isShowCar"
         @close="isShowCar = false"
         :closeOnClickOverlay="true"
         :columns="carList"
      :columns="carsList"
         @confirm="seletedCar"
         @cancel="isShowCar = false"
      ></u-picker>
      <u-datetime-picker
         mode="datetime"
         keyName="name"
         :show="isShowDate"
         :filter="timeFilter"
      title="开始时间"
      :minDate="minDate"
         @close="isShowDate = false"
         :closeOnClickOverlay="true"
         @confirm="seletedDate"
         @cancel="isShowDate = false"
      />
		
    <u-datetime-picker
      mode="datetime"
      :show="isShowEndDate"
      :filter="timeFilter"
      title="结束时间"
      :minDate="new Date(param.startTime || null).getTime()"
      @close="endtimeClose"
      :closeOnClickOverlay="true"
      @confirm="seletedEndDate"
      @cancel="endtimeClose"
    />
   </view>
</template>

<script>
import { getCarsList, carUseBookList } from '@/api'
import dayjs from 'dayjs'
export default {
   data() {
      return {
         param: {},
         isShowCar: false,
         isShowDate: false,
         carList: [],
         datetimeOp: []
      };
      isShowEndDate: false,
      carsList: [],
      info: [],

      minDate: ''
    }
  },
  onLoad() {
    this.minDate = new Date(dayjs().format('YYYY-MM-DD HH:') + '00:00').getTime()
    this.initData()
   },
   methods: {
      seletedCar() {},
      seletedDate() {
         this.isShowDate = false;
    onSubmit() {
      const { param, info } = this
         if (info.length > 0) return uni.showToast({
        title: '请重新选择时间段',
        icon: 'none'
      })
      if (!param.startTime) return uni.showToast({
        title: '请先选择用车时间段',
        icon: 'none'
      })
      if (!param.carId) return uni.showToast({
        title: '请选择车辆',
        icon: 'none'
      })
      const obj = {
        carCode: param.carCode,
        carId: param.carId,
        startTime: param.startTime,
        endTime: param.endTime,
        type: '1'
      }
      uni.navigateTo({
        url: `/pages/staff/vehicle/apply?carCode=${obj.carCode}&carId=${obj.carId}&startTime=${obj.startTime}&endTime=${obj.endTime}&type=${obj.type}`
      })
      // this.$jump('/pages/staff/vehicle/apply')
    },
    getInfo() {
      const { param } = this
      carUseBookList({
        carId: param.carId,
        startTime: param.startTime,
        endTime: param.endTime,
      }).then(res => {
        if (res.code == 200) {
          this.info = res.data
        }
      })
    },
    seletedCar(e) {
      const item = e.value[0]
      this.$set(this.param, 'carCode', item.code)
      this.$set(this.param, 'carId', item.id)
      this.isShowCar = false
      if (this.param.carId && this.param.startTime) {
        this.getInfo()
      }
    },
    seletedDate(e) {
      this.param.startTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
      this.param.startHours = dayjs(e.value).format('MM-DD HH:mm')
      console.log(this.param.startTime)
      this.isShowDate = false
      this.isShowEndDate = true
    },
    seletedEndDate(e) {
      this.param.endTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
      this.param.endHours = dayjs(e.value).format('MM-DD HH:mm')
      console.log(this.param.endTime)
      this.isShowEndDate = false
      if (this.param.carId && this.param.startTime) {
        this.getInfo()
      }
      this.$forceUpdate()
    },
    endtimeClose() {
      this.param.endTime = ''
      this.param.startTime = ''
      this.isShowEndDate = false
      },
      timeFilter(mode, options) {
         if (mode === 'minute') {
            return options.filter(option => option === '00' || option === '30');
        return options.filter(option => option === '00' || option === '30' || option === '60')
         }
         return options;
      }
      return options
    },
    initData() {
      getCarsList({
        type: 1
      }).then(res => {
        this.carsList = [res.data]
      })
    },
   }
};
</script>

<style lang="scss">
.have_info {
   padding: 0 0 200rpx;
   .tit {
      color: #ed4545;
      margin: 40rpx 0 24rpx;
@@ -115,6 +226,7 @@
      background: #f7f7f7;
      border-radius: 16rpx;
      padding: 30rpx 30rpx 10rpx;
      margin-bottom: 20rpx;
      .card {
         margin-bottom: 30rpx;
         font-weight: 500;
@@ -202,9 +314,10 @@
   }
}
.main_footer {
   position: absolute;
  position: fixed;
   width: 100%;
   left: 0;
   background-color: #fff;
   bottom: 0;
   padding: 20rpx 30rpx 84rpx;
   box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;