AstraZeneca_uniapp/pages/subPackages/yy_history/index.vue

<template>
  <div class="yy_history">
    <van-tabs
      :active="active"
      color="rgba(138, 5, 84, 1)"
      bind: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-tabs>
    <div class="list">
      <div class="list-item">
        <div class="status qd">待签到</div>
        <!-- <div class="status rz">待入厂</div>
        <div class="status zx">装卸中</div>
        <div class="status wc">已完成</div>
        <div class="status gq">已过期</div>
        <div class="status qx">已取消</div> -->

        <div
          class="time"
          @click="jumpPage('/pages/subPackages/yy_history/edit')"
        >
          2024-04-15 11：00 装货
        </div>
        <div class="info">10个托盘</div>
        <div class="info1">车辆：车牌号/胡装箱</div>
        <div class="info1">司机：李靠谱</div>
        <div 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"
            >取消</van-button
          >
          <van-button
            style="margin-left: 24rpx"
            color="rgba(138, 5, 84, 1)"
            type="default"
            size="small"
            @click="jumpPage('/pages/subPackages/yy_history/edit')"
            >修改</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    jumpPage(path) {
      console.log(path);
      uni.navigateTo({
        url: path,
        fail: (fail) => {},
      });
    },
  },
};
</script>

<style lang="scss">
.yy_history {
  .list {
    .list-item {
      padding: 24rpx 32rpx;
      background: #ffffff;
      position: relative;
      .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>