Merge remote-tracking branch 'origin/master'

jiangping

2024-05-31 6be28040e74e1ff7764478174a9b5d706fe4fc39

 h5/pages/staff/vehicle/shiwai.vue

@@ -1,230 +1,343 @@
<template>
   <view class="main_app">
      <view class="main_wrap">
         <!--  -->
         <view class="line">
            <view class="label">
               <text>*</text>
               <text>选择车辆</text>
            </view>
            <view class="value" @click="isShowCar = true">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
         <view class="line">
            <view class="label">
               <text>*</text>
               <text>预计用车时段</text>
            </view>
            <view class="value" @click="isShowDate = true">
               <text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
               <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
            </view>
         </view>
      </view>
      <view class="have_info">
         <view class="tit">您申请的用车时段已有车辆预约</view>
         <view class="content">
            <view class="card">皖A1212</view>
            <view class="line">
               <text>用车时段</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>目的地</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>乘车人数</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>用车事由</text>
               <text>111111</text>
            </view>
            <view class="line">
               <text>申请人</text>
               <text>111111</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>
      </view>
      <!--  -->
      <!-- 选择车辆 -->
      <u-picker
         keyName="name"
         :show="isShowCar"
         @close="isShowCar = false"
         :closeOnClickOverlay="true"
         :columns="carList"
         @confirm="seletedCar"
         @cancel="isShowCar = false"
      ></u-picker>
      <u-datetime-picker
         mode="datetime"
         keyName="name"
         :show="isShowDate"
         :filter="timeFilter"
         @close="isShowDate = false"
         :closeOnClickOverlay="true"
         @confirm="seletedDate"
         @cancel="isShowDate = false"
      />
		
   </view>
  <view class="main_app">
    <view class="main_wrap">
      <!--  -->
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>选择车辆</text>
        </view>
        <view class="value" @click="isShowCar = true">
          <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>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>预计用车时段</text>
        </view>
        <view class="value" @click="isShowDate = true">
          <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" v-if="info && info.length > 0">
      <view class="tit">您申请的用车时段已有车辆预约</view>
      <view class="content" v-for="item,i in info" :key="i">
        <view class="card">{{ item.carCode }}</view>
        <view class="line">
          <text>用车时段</text>
          <text>
            {{ item.startTime.slice(5, 16) }}至{{
              item.endTime.slice(5, 16)
            }}</text
          >
        </view>
        <view class="line">
          <text>目的地</text>
          <text>{{ item.addr }}</text>
        </view>
        <view class="line">
          <text>乘车人数</text>
          <text>{{ item.memberIds.split(",").length }}人</text>
        </view>
        <view class="line">
          <text>用车事由</text>
          <text>{{ item.content }}</text>
        </view>
        <view class="line">
          <text>申请人</text>
          <text>{{ item.memberName }} {{ item.memberMobile}}</text>
        </view>
      </view>
    </view>
    <view class="main_footer">
      <text>已选择：</text>
      <text class="sel" v-if="param.startTime"
        >{{ param.startHours }}至{{ param.endHours }}</text
      >
      <text class="btn" @click="onSubmit">确认预约</text>
    </view>
    <!--  -->
    <!-- 选择车辆 -->
    <u-picker
      keyName="code"
      :show="isShowCar"
      @close="isShowCar = false"
      :closeOnClickOverlay="true"
      :columns="carsList"
      @confirm="seletedCar"
      @cancel="isShowCar = false"
    ></u-picker>
    <u-datetime-picker
      mode="datetime"
      :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: []
      };
   },
   methods: {
      seletedCar() {},
      seletedDate() {
         this.isShowDate = false;
      },
      timeFilter(mode, options) {
         if (mode === 'minute') {
            return options.filter(option => option === '00' || option === '30');
         }
         return options;
      }
   }
  data() {
    return {
      param: {},
      isShowCar: false,
      isShowDate: false,
      isShowEndDate: false,
      carsList: [],
      info: [],

      minDate: ''
    }
  },
  onLoad() {
    this.minDate = new Date(dayjs().format('YYYY-MM-DD HH:') + '00:00').getTime()
    this.initData()
  },
  methods: {
    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' || option === '60')
      }
      return options
    },
    initData() {
      getCarsList({
        type: 1
      }).then(res => {
        this.carsList = [res.data]
      })
    },
  }
};
</script>

<style lang="scss">
.have_info {
   .tit {
      color: #ed4545;
      margin: 40rpx 0 24rpx;
   }
   .content {
      background: #f7f7f7;
      border-radius: 16rpx;
      padding: 30rpx 30rpx 10rpx;
      .card {
         margin-bottom: 30rpx;
         font-weight: 500;
         font-size: 32rpx;
         color: #222222;
         background: #f7f7f7;
         padding: 0;
      }
      .line {
         display: flex;
         margin-bottom: 20rpx;
         text {
            &:nth-of-type(1) {
               width: 150rpx;
               color: #888888;
            }
            &:nth-of-type(2) {
               flex: 1;
            }
         }
      }
   }
   padding: 0 0 200rpx;
  .tit {
    color: #ed4545;
    margin: 40rpx 0 24rpx;
  }
  .content {
    background: #f7f7f7;
    border-radius: 16rpx;
    padding: 30rpx 30rpx 10rpx;
      margin-bottom: 20rpx;
    .card {
      margin-bottom: 30rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #222222;
      background: #f7f7f7;
      padding: 0;
    }
    .line {
      display: flex;
      margin-bottom: 20rpx;
      text {
        &:nth-of-type(1) {
          width: 150rpx;
          color: #888888;
        }
        &:nth-of-type(2) {
          flex: 1;
        }
      }
    }
  }
}
.main_wrap {
   .line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      padding: 30rpx 0;
      .label {
         font-size: 30rpx;
         font-weight: 400;
         text {
            &:nth-child(1) {
               color: #e42d2d;
               margin-right: 4rpx;
            }
         }
      }
      .value {
         flex: 1;
         height: 100%;
         margin-left: 30rpx;
         display: flex;
         align-items: center;
         justify-content: flex-end;
         input {
            width: 100%;
            height: 100%;
            text-align: right;
            font-size: 28rpx;
            font-weight: 400;
            color: #222222;
         }
      }
   }
   .upload_line {
      padding: 30rpx 0;
      textarea {
         margin-top: 12rpx;
         width: 100%;
         height: 180rpx;
         font-size: 28rpx;
         font-weight: 400;
         color: #222222;
      }
      .adduser_list_item_ipt1_upload {
         margin-top: 24rpx;
         width: 120rpx;
         height: 120rpx;
         border: 2rpx solid #e5e5e5;
         background: #f7f7f7;
         color: #666666;
         font-size: 22rpx;
         display: flex;
         align-items: center;
         justify-content: center;
         overflow: hidden;
         image {
            width: 100%;
            height: 100%;
         }
      }
   }
  .line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .label {
      font-size: 30rpx;
      font-weight: 400;
      text {
        &:nth-child(1) {
          color: #e42d2d;
          margin-right: 4rpx;
        }
      }
    }
    .value {
      flex: 1;
      height: 100%;
      margin-left: 30rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      input {
        width: 100%;
        height: 100%;
        text-align: right;
        font-size: 28rpx;
        font-weight: 400;
        color: #222222;
      }
    }
  }
  .upload_line {
    padding: 30rpx 0;
    textarea {
      margin-top: 12rpx;
      width: 100%;
      height: 180rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #222222;
    }
    .adduser_list_item_ipt1_upload {
      margin-top: 24rpx;
      width: 120rpx;
      height: 120rpx;
      border: 2rpx solid #e5e5e5;
      background: #f7f7f7;
      color: #666666;
      font-size: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.main_footer {
   position: absolute;
   width: 100%;
   left: 0;
   bottom: 0;
   padding: 20rpx 30rpx 84rpx;
   box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
   display: flex;
   align-items: center;
   justify-content: space-between;
   .btn {
      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;
   }
   .sel {
      color: #279baa;
      flex: 1;
   }
  position: fixed;
  width: 100%;
  left: 0;
   background-color: #fff;
  bottom: 0;
  padding: 20rpx 30rpx 84rpx;
  box-shadow: 0rpx -3rpx 6rpx 0rpx #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .btn {
    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;
  }
  .sel {
    color: #279baa;
    flex: 1;
  }
}
</style>