AstraZeneca_uniapp/pages/subPackages/sj_history/index.vue

<template>
  <div class="sj_history">
    <van-tabs :active="active" color="rgba(138, 5, 84, 1)" @change="onChange">
      <van-tab title="待签到"></van-tab>
      <van-tab title="待入场"></van-tab>
      <van-tab title="装卸中"></van-tab>
      <van-tab title="已完成"></van-tab>
      <van-tab title="已过期"></van-tab>
      <van-tab title="已取消"></van-tab>
      <van-tab title="全部"></van-tab>
    </van-tabs>
    <div class="list">
      <div class="list-item" v-for="item in list" :key="item.id">
        <div class="status qd" v-if="item.status == 0">待签到</div>
        <div class="status rz" v-if="item.status == 1">待入厂</div>
        <div class="status zx" v-if="item.status == 2">装卸中</div>
        <div class="status wc" v-if="item.status == 3">已完成</div>
        <div class="status gq" v-if="item.status == 4">已过期</div>
        <div class="status qx" v-if="item.status == 5">已取消</div>

        <div
          class="time"
          @click="jumpPage('/pages/subPackages/sj_history/edit?id=' + item.id)"
        >
          {{ item.reservationDate }}
          {{ item.timeStart + "~" + item.timeEnd }} 装货
        </div>
        <div class="info">{{ item.loadNum }}个托盘</div>
        <div class="info1">车辆：{{ item.carNo }}/{{ item.carType }}</div>
        <div class="info1">司机：{{ item.driverName }}</div>
        <div v-if="item.status == 5" class="info1 qxrq">
          取消日期：2024-07-31 15：00
        </div>

        <div class="bottborder"></div>
        <div class="foot-btn">
          <van-button
            color="rgba(138, 5, 84, 1)"
            plain
            type="default"
            size="small"
            @click="cancelRow(item)"
            >取消</van-button
          >
          <van-button
            style="margin-left: 24rpx"
            color="rgba(138, 5, 84, 1)"
            type="default"
            size="small"
            @click="
              jumpPage('/pages/subPackages/sj_history/edit?id=' + item.id)
            "
            >修改</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reservationListPage } from "@/js_sdk/sjTools.js";
import { getUserLocalStorageInfo } from "@/js_sdk/localUserInfo.js";

export default {
  data() {
    return {
      searchData: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      total: 0,
      list: [],
    };
  },
  onLoad() {
    console.log(getUserLocalStorageInfo().user.id);
    this.searchData.userId = getUserLocalStorageInfo().user.id;

    this.reservationListPage();
  },
  onReachBottom() {
    // 触底加载更多
    this.searchData.pageNum += 1;
    this.reservationListPage();
  },
  methods: {
    cancelRow(e) {
      console.log(e);
    },
    onChange(e) {
      console.log(e);
      this.list = [];
      let statusList = {
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: null,
      };
      this.searchData.status = statusList[e.detail.index];
      this.reservationListPage();
    },
    async reservationListPage() {
      let { data } = await reservationListPage(this.searchData);
      console.log(data);
      if (this.list.length != data.total) {
        this.list.push(...data.list);
      }
    },
    jumpPage(path) {
      console.log(path);
      uni.navigateTo({
        url: path,
        fail: (fail) => {},
      });
    },
  },
};
</script>

<style lang="scss">
.sj_history {
  .list {
    .list-item {
      padding: 24rpx 32rpx;
      background: #ffffff;
      position: relative;
      margin-top: 24rpx;
      .foot-btn {
        display: flex;
        justify-content: flex-end;
        padding-top: 16rpx;
        .van-button {
          border-radius: 30rpx 30rpx 30rpx 30rpx;
        }
      }
      .bottborder {
        padding-bottom: 24rpx;
        border-bottom: 2rpx solid #e8edf5;
      }
      .info {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
      }
      .info1 {
        margin-top: 8rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #666666;
      }
      .qxrq {
        color: rgba(142, 139, 228, 1);
      }
      .time {
        font-weight: 400;
        font-size: 32rpx;
        color: #333333;
        margin-bottom: 8rpx;
      }
      .status {
        width: 144rpx;
        height: 56rpx;
        text-align: center;
        line-height: 56rpx;
        border-top-right-radius: 5%;
        border-bottom-left-radius: 50%;
        position: absolute;
        top: -1rpx;
        right: 0;
        font-weight: 400;
        font-size: 28rpx;
      }
      .qd {
        background: rgba(3, 101, 249, 0.2);
        color: #0365f9;
      }
      .rc {
        background: rgba(255, 184, 0, 0.3);
        color: #d99f00;
      }
      .zx {
        background: rgba(138, 5, 84, 0.2);
        color: #8a0554;
      }
      .wc {
        background: rgba(34, 181, 101, 0.2);
        color: #22b565;
      }
      .gq {
        color: #c7191f;
        background: rgba(199, 25, 31, 0.2);
      }
      .qx {
        color: #888888;
        background: rgba(136, 136, 136, 0.3);
      }
    }
  }
}
</style>