ll

liukangdong

2025-01-07 9b80c42df73cb99b37d95b5c0a186ceec5e45a27

 h5/pages/driver/reservedRecord.vue

@@ -1,188 +1,216 @@
<template>
  <view class="main_app">
    <!--  -->
    <view class="box_list">
      <view
        class="box_list_item"
        v-for="(item, index) in datalist"
        :key="index"
        @click="handleDetail(item.id)"
      >
        <view class="box_list_item_head">
          <text>{{item.driverName}}的入园预约</text>
          <text class="loading" :class="{red: item.status == 3}">{{ statusMap[item.status] }}</text>
        </view>
        <view class="box_list_item_nr">
          <view class="box_list_item_nr_item">
            <text>合同编号：</text>
            <text>{{item.contractNum}}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>到场时间：</text>
            <text>{{item.arriveDate.slice(5,16)}}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>司机姓名：</text>
            <text>{{item.driverName}} {{item.driverPhone}}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>车辆信息：</text>
            <text>{{item.carCodeFront}}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text class="placeholder9">{{item.createDate.slice(0,16)}}提交</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
   import { driverApplyRecord } from "@/api"
export default {
  data() {
    return {
      isShowCar: false,
      isShowDate: false,
      param: {},
         page: 1,
         capacity: 20,
         total: 0,
         datalist: [],
         statusMap: {
            0: '待审批',
            1: '审批中',
            2: '已通过',
            3: '已拒绝',
            4: '已取消',
         }
    }
  },
   onShow() {
      this.page = 1
      this.getList()
   },
   onReachBottom() {
      const { total,  datalist} = this
     if(datalist.length < total){
         this.page = this.page + 1
         this.getList()
      } else {
         this.showToast('暂无更多数据')
      }
   },
  methods: {
      getList() {
         const { page, capacity } = this
         driverApplyRecord({
            page, capacity,model: {}
         }).then(res => {
            this.datalist = [...this.datalist, ...res.data.records]
            this.total = res.data.total
         })
      },
    handleDetail(id) {
      uni.navigateTo({
        url: `/pages/driver/reservedDetail?id=${id}`
      })
    },
    confirmDate(e) {
      console.log(e.value)
      this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
      this.isShowDate = false
    },
    seletedCar(e) {
      console.log(e.value)
      this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
      this.isShowDate = false
    }
  }
};
</script>

<style lang="scss">
   page{
      background: #f7f7f7;
   }
.main_app {
  background: #f7f7f7;
  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;
      }
      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 30rpx 10rpx;
      width: 100%;
      box-sizing: border-box;
      background-color: #ffffff;
      .box_list_item_nr_item {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        text {
          font-size: 26rpx;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }
}
</style>
<template>

   <view class="main_app">

      <!--  -->

      <view class="box_list">

         <view class="box_list_item" v-for="(item, index) in datalist" :key="index" @click="handleDetail(item.id)">

            <view class="box_list_item_head">

               <text>{{item.driverName}}的入园预约</text>

               <text class="loading" :class="{red: item.status == 3}">{{ statusMap[item.status] }}</text>

            </view>

            <view class="box_list_item_nr">

               <view class="box_list_item_nr_item">

                  <text>合同编号：</text>

                  <text>{{item.contractNum}}</text>

               </view>

               <view class="box_list_item_nr_item">

                  <text>到场时间：</text>

                  <text>{{item.arriveDate.slice(5,16)}}</text>

               </view>

               <view class="box_list_item_nr_item">

                  <text>司机姓名：</text>

                  <text>{{item.driverName}} {{item.driverPhone}}</text>

               </view>

               <view class="box_list_item_nr_item">

                  <text>车辆信息：</text>

                  <text>{{item.carCodeFront}}</text>

               </view>

               <view class="box_list_item_nr_item">

                  <text class="placeholder9">{{item.createDate.slice(0,16)}}提交</text>

               </view>

            </view>

         </view>
         <view v-if="datalist.length === 0" style="text-align: center">
           <image
             src="@/static/empty.png"
             style="width: 320rpx; margin: 120px auto 0"
             mode="widthFix"
           />
           <view class="placeholder9 fs24">暂无数据</view>
         </view>

      </view>

   </view>

</template>



<script>

   import {

      driverApplyRecord

   } from "@/api"

   export default {

      data() {

         return {

            isShowCar: false,

            isShowDate: false,

            param: {},

            page: 1,

            capacity: 20,

            total: 0,

            datalist: [],

            statusMap: {

               0: '待审批',

               1: '审批中',

               2: '已通过',

               3: '已拒绝',

               4: '已取消',

            }

         }

      },

      onShow() {

         this.page = 1

         this.getList()

      },

      onReachBottom() {

         const {

            total,

            datalist

         } = this

         if (datalist.length < total) {

            this.page = this.page + 1

            this.getList()

         } else {

            this.showToast('暂无更多数据')

         }

      },

      methods: {

         getList() {

            const {

               page,

               capacity

            } = this

            driverApplyRecord({

               page,

               capacity,

               model: {}

            }).then(res => {

               this.datalist = [...this.datalist, ...res.data.records]

               this.total = res.data.total

            })

         },

         handleDetail(id) {

            uni.navigateTo({

               url: `/pages/driver/reservedDetail?id=${id}`

            })

         },

         confirmDate(e) {

            console.log(e.value)

            this.param.aa = dayjs(e.value).format('YYYY-MM-DD')

            this.isShowDate = false

         },

         seletedCar(e) {

            console.log(e.value)

            this.param.aa = dayjs(e.value).format('YYYY-MM-DD')

            this.isShowDate = false

         }

      }

   };

</script>



<style lang="scss">

   page {

      background: #f7f7f7;

   }



   .main_app {

      background: #f7f7f7;

      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;

            }



            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 30rpx 10rpx;

            width: 100%;

            box-sizing: border-box;

            background-color: #ffffff;



            .box_list_item_nr_item {

               width: 100%;

               display: flex;

               align-items: center;

               margin-bottom: 16rpx;



               text {

                  font-size: 26rpx;

                  font-weight: 400;

                  color: #666666;

               }

            }

         }

      }

   }

</style>