更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5/pages/staff/vehicle/sendACar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,294 @@
<template>
  <view class="main_app">
    <view class="app_header">
      <view class="item" @click="isShowDate = true">
        <text v-if="param.queryDate">{{ param.queryDate }}</text>
        <text v-else class="placeholder9">选择日期</text>
        <u-icon class="ml12" name="arrow-down" color="#999999" />
      </view>
      <view class="item" @click="isShowCar = true">
        <text>{{ param.carCode || '全部车辆' }}</text>
        <u-icon class="ml12" name="arrow-down" color="#999999" />
      </view>
    </view>
    <!--  -->
    <view class="box_list">
      <view
        class="box_list_item"
        v-for="(item, index) in dataList"
        :key="index"
        @click="itemDetail(item)"
      >
        <view class="box_list_item_head">
          <text>{{ item.carCode }}</text>
          <text class="loading" v-if="item.status == '0'">申请中</text>
          <text class="grr" v-if="item.status == '1'">审批中</text>
          <text class="grr" v-if="item.status == '2'">审批通过</text>
          <text class="error" v-if="item.status == '3'">审批不通过</text>
          <text class="grr" v-if="item.status == '4'">已取消</text>
        </view>
        <view class="box_list_item_nr">
          <view class="box_list_item_nr_item">
            <text>开始时间：</text>
            <text>{{ item.startTime.slice(5, 16) }}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>结束时间：</text>
            <text>{{ item.endTime.slice(5, 16) }}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>预约人：</text>
            <text>{{ item.memberName }}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>目的地：</text>
            <text>{{ item.addr }}</text>
          </view>
        </view>
      </view>
      <view v-if="dataList.length === 0" style="text-align: center">
        <image
          src="@/static/empty.png"
          style="width: 320rpx; margin: 120rpx auto 0"
          mode="widthFix"
        />
        <view class="placeholder9 fs24">暂无数据</view>
      </view>
    </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="date"
      v-model="param.queryDate"
         :formatter="formatter"
      :show="isShowDate"
      :minDate="minDate"
      closeOnClickOverlay
      @close="isShowDate = false"
      @confirm="seletedDate"
      @cancel="isShowDate = false"
    />
  </view>
</template>

<script>
import { carUseBookPaiche, getCarsList } from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      isShowCar: false,
      isShowDate: false,
      carsList: [],
      param: {
        queryDate: dayjs().format('YYYY-MM-DD'),
        // memberId: uni.getStorageSync('userInfo').memberId
      },
      minDate: '',
      pagination: {
        page: 0,
        capacity: 6
      },
      total: 0,
      dataList: [],
    }
  },
  onLoad() {
    this.minDate = new Date(dayjs().format('YYYY') + '-01-01').getTime()
    // this.param.queryDate = dayjs().format('YYYY-MM-DD')
    this.getList()
    this.initData()
  },
  onReachBottom() {
      console.log('onReachBottom');
    if (this.total > this.dataList.length) {
      this.getList()
    }else {
         this.showToast('暂无更多数据')
      }
  },
  methods: {
      formatter(type, value) {
         if (type === 'year') {
            return `${value}å¹´`
         }
         if (type === 'month') {
            return `${value}月`
         }
         if (type === 'day') {
            return `${value}日`
         }
         if (type === 'hour') {
            return `${value}时`
         }
         if (type === 'minute') {
            return `${value}分`
         }
         return value
      },
    getList() {
      const { param, pagination } = this
      pagination.page = pagination.page + 1
      if (param.queryDate) {
        param.queryStartTime = param.queryDate + ' 00:00:00'
        param.queryEndTime = param.queryDate + ' 23:59:59'
      }
         if(param.carCode == '全部车辆'){
            param.carCode = null
            param.carId = null
         }
      carUseBookPaiche({
        ...pagination,
        model: { ...param }
      }).then(res => {
        this.dataList = [...this.dataList, ...res.data.records]
        this.total = res.data.total
      })
    },
    itemDetail(item) {
      uni.navigateTo({
        url: `/pages/staff/vehicle/sendACarDetail?id=${item.id}`
      })
    },
    seletedCar(e) {
      const item = e.value[0]
      this.pagination.page = 0
         this.dataList = []
      this.$set(this.param, 'carCode', item.code)
      this.$set(this.param, 'carId', item.id)
      this.isShowCar = false
      this.getList()
    },
    seletedDate(e) {
      setTimeout(() => {
        this.param.queryDate = dayjs(e.value).format('YYYY-MM-DD')
        this.pagination.page = 0
        this.isShowDate = false
            this.dataList = []
        this.getList()
      })
    },
    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: 0
      }).then(res => {
        this.carsList = [[{ code: '全部车辆', id: '' }, ...res.data]]
      })
    },
  }
};
</script>

<style lang="scss">
.main_app {
  background: #f7f7f7;
  min-height: 100vh;
  padding: 0;
}
.app_header {
  display: flex;
  align-items: center;
  // margin: 0 -15rpx;
  background-color: #fff;
  .item {
    width: 360rpx;
    height: 72rpx;
    margin: 15rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
  }
}
.box_list {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  .box_list_item {
    width: 100%;
    margin-bottom: 20rpx;
    &:last-child {
      margin: 0 !important;
    }
    .box_list_item_head {
      width: 100%;
      height: 100rpx;
      padding: 0 30rpx;
      box-sizing: border-box;
      background: linear-gradient(270deg, #fefeff 0%, #e1f7fe 100%);
      border-radius: 8rpx 8rpx 0rpx 0rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .loading {
        color: #4c99a8;
      }
      .success {
        color: #03c68f;
      }
      .error {
        color: #e0312a;
      }
      .grr {
        color: #999999;
      }
      text {
        &:nth-child(1) {
          font-size: 32rpx;
          font-weight: 600;
          color: #222222;
        }
        &:nth-child(2) {
          font-size: 26rpx;
          font-weight: 400;
        }
      }
    }
    .box_list_item_nr {
      padding: 30rpx;
      width: 100%;
      box-sizing: border-box;
      background-color: #ffffff;
      .box_list_item_nr_item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        text {
          &:nth-child(1) {
            font-size: 26rpx;
            font-weight: 400;
            color: #666666;
          }
          &:nth-child(2) {
            font-size: 26rpx;
            font-weight: 400;
            color: #333333;
          }
        }
      }
    }
  }
}
</style>