ll

liukangdong

2025-01-07 9b80c42df73cb99b37d95b5c0a186ceec5e45a27

 h5/pages/driver/reservedRecord.vue

@@ -2,12 +2,7 @@
  <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" 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>
@@ -34,12 +29,22 @@
          </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"
   import {

      driverApplyRecord

   } from "@/api"

export default {
  data() {
    return {
@@ -64,7 +69,10 @@
      this.getList()
   },
   onReachBottom() {
      const { total,  datalist} = this
         const {

            total,

            datalist

         } = this

     if(datalist.length < total){
         this.page = this.page + 1
         this.getList()
@@ -74,9 +82,14 @@
   },
  methods: {
      getList() {
         const { page, capacity } = this
            const {

               page,

               capacity

            } = this

         driverApplyRecord({
            page, capacity,model: {}
               page,

               capacity,

               model: {}

         }).then(res => {
            this.datalist = [...this.datalist, ...res.data.records]
            this.total = res.data.total
@@ -105,15 +118,18 @@
   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;
@@ -125,16 +141,20 @@
    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;
@@ -145,37 +165,45 @@
      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;