解决h5访客申请bug

MrShi

2025-03-28 3363af77fa23bdc599c3f746ba9802b799c780eb

 h5/pages/driver/reservedRecord.vue

@@ -1,160 +1,217 @@
<template>
   <view class="main_app">
      <!--  -->
      <view class="box_list">
         <view class="box_list_item" v-for="(item, index) in 3" :key="index" @click="handleDetail()">
            <view class="box_list_item_head">
               <text>丁恩凯的劳务入厂申请</text>
               <text class="loading">待审核</text>
            </view>
            <view class="box_list_item_nr">
               <view class="box_list_item_nr_item">
                  <text>被访问人：</text>
                  <text>人事部-王亚蓝</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>进厂时间：</text>
                  <text>12-12 09:00</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>离厂时间：</text>
                  <text>12-12 12:00</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>来访事由：</text>
                  <text>业务来往</text>
               </view>
               <view class="box_list_item_nr_item">
                  <text>随行车辆：</text>
                  <text>皖A88888</text>
               </view>
            </view>
<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 v-if="item.arriveDate">{{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" v-if="item.createDate">{{item.createDate.slice(0,16)}}提交</text>

               </view>

            </view>

         </view>
      </view>
      <!-- 选择车辆 -->
      <u-picker keyName="name" closeOnClickOverlay @close="isShowCar = false" :show="isShowCar" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
      <!-- 日期 -->
      <u-datetime-picker :show="isShowDate" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDate = false" mode="date"></u-datetime-picker>
   </view>
</template>

<script>
export default {
   data() {
      return {
         isShowCar: false,
         isShowDate: false,
         param: {},
         carList: [[{ name: 'aa', value: '11' }]],
         timeList: [{ time: '08:30-09:00' }, { time: '08:30-09:00' }, { time: '08:30-09:00' }, { time: '08:30-09:00' }]
      };
   },
   methods: {
      handleDetail() {
         uni.navigateTo({
            url: "/pages/driver/reservedDetail"
         })
      },
      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">
   .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: 500;
               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>
         <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.datalist = []

         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>