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 rc" 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/detail?id=' + item.id)
          "
        >
          {{ item.reservationDate }}
          {{ item.timeStart + "~" + item.timeEnd }} {{ item.loadType }}
        </div>
        <div
          @click="
            jumpPage('/pages/subPackages/sj_history/detail?id=' + item.id)
          "
          class="info"
        >
          {{ item.loadNum }}个托盘
        </div>
        <div
          @click="
            jumpPage('/pages/subPackages/sj_history/detail?id=' + item.id)
          "
          class="info1"
        >
          车辆：{{ item.carNo }}/{{ item.carType }}
        </div>
        <div
          @click="
            jumpPage('/pages/subPackages/sj_history/detail?id=' + item.id)
          "
          class="info1"
        >
          司机：{{ item.driverName }}
        </div>
        <div
          @click="
            jumpPage('/pages/subPackages/sj_history/detail?id=' + item.id)
          "
          class="info1"
          v-if="item.createUser"
        >
          预约账号：{{ item.createUser }}
        </div>

        <div
          @click="
            jumpPage('/pages/subPackages/sj_history/detail?id=' + item.id)
          "
          v-if="item.status == 5"
          class="info1 qxrq"
        >
          取消日期：{{ item.cancelTime }}
        </div>

        <div class="bottborder"></div>
        <!--  -->
        <div class="foot-btn" v-if="item.status == 0">
          <van-button
            color="rgba(138, 5, 84, 1)"
            plain
            type="default"
            v-if="nowTimeCheck(item.reservationDate, item.status)"
            size="small"
            @click="cancelRow(item)"
            >取消</van-button
          >
          <van-button
            style="margin-left: 24rpx"
            color="rgba(138, 5, 84, 1)"
            type="default"
            size="small"
            v-if="nowTimeCheck(item.reservationDate, item.status)"
            @click="
              jumpPage('/pages/subPackages/sj_history/edit?id=' + item.id)
            "
            >修改</van-button
          >
          <van-button
            style="margin-left: 24rpx"
            color="rgba(138, 5, 84, 1)"
            type="default"
            size="small"
            @click="
              jumpPage('/pages/subPackages/yy_history/code?id=' + item.id)
            "
            >签到码</van-button
          >
        </div>
        <div class="foot-btn" v-if="item.status == 2">
          <van-button
            style="margin-left: 24rpx"
            color="rgba(138, 5, 84, 1)"
            type="default"
            size="small"
            @click="
              jumpPage('/pages/subPackages/yy_history/code?id=' + item.id)
            "
            >签退码</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      searchData: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      active: 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: {
    nowTimeCheck(yyTime, status) {
      const timeString = `${yyTime} 08`.replaceAll("-", "/");

      const fullTimeString = `${timeString}:00:00`;
      console.log(fullTimeString);
      const date = new Date(fullTimeString);
      const timestamp = date.getTime();
      // 预约日期的当天八点时间戳
      // console.log(timestamp);
      if (Date.now() < timestamp && status == 0) {
        return true;
      }
    },
    async cancelRow(e) {
      let that = this;
      console.log(e);
      // cancelReservation
      wx.showModal({
        title: "提示！",
        content: "是否取消该预约",
        success: async function (res) {
          if (res.confirm) {
            let data = await cancelReservation({
              id: e.id,
              userId: getUserLocalStorageInfo().user.id,
            });
            if (data.errmsg == "成功") {
              that.$showToast("取消成功");
              that.searchData.pageNum = 1;
              that.list = [];
              that.reservationListPage();
            }
          }
        },
      });
    },
    onChange(e) {
      console.log(e);
      this.list = [];
      let statusList = {
        0: 0,
        1: 1,
        2: 2,
        3: 3,
        4: 4,
        5: 5,
        6: "",
      };
      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>