厂改园

liukangdong

2024-06-07 ac44819c6bb4e71161c0b042d27a91c4f2c6666e

 h5/pages/driver/reservedRecord.vue

@@ -1,160 +1,179 @@
<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>
         </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>
  <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>
      </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;
      }
   }
  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;
   }
.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;
   }
  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;
               }
            }
         }
      }
   }
  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>