wx-qhb/pageC/myPackage/myPackage.vue

<template>
  <view>
    <view class="top-search">
      <u--input
        placeholder="请输入订单编号搜索"
        prefixIcon="search"
        shape="circle"
        v-model="orderId"
        prefixIconStyle="font-size: 22px;color: #909399;background: #f4f4f4;"
      ></u--input>
      <view class="top-tab">
        <view
          :class="{ commodity: follow == 'to_transit' }"
          class="tab"
          @click="tabSwitch('to_transit')"
        >
          发往中转点{{ statusNum.to_transit }}
        </view>
        <view
          :class="{ commodity: follow == 'transit_receipt' }"
          class="tab"
          @click="tabSwitch('transit_receipt')"
        >
          中转已签收 {{ statusNum.transit_receipt }}
        </view>
        <view
          :class="{ commodity: follow == 'to_overseas' }"
          class="tab"
          @click="tabSwitch('to_overseas')"
        >
          正发往海外 {{ statusNum.to_overseas }}
        </view>
        <view
          :class="{ commodity: follow == 'other' }"
          class="tab"
          @click="tabSwitch('other')"
        >
          其他 {{ statusNum.other }}
        </view>
      </view>
    </view>

    <view class="content">
      <view class="prompt">
        <image
          class="prompt-icon"
          src="../../static/mine/336.png"
          mode=""
        ></image>
        当前页面加载的订单总重量{{ weights }}kg
      </view>
      <view v-for="item in orderList" :key="item.orderStatus">
        <PackageCard :itemInfo="item" @toInformation="toInformation" />
      </view>
    </view>
  </view>
</template>

<script>
import PackageCard from "./component/packageCard.vue";
export default {
  components: {
    PackageCard,
  },
  data() {
    return {
      follow: "to_transit",
      weights: 0,
      orderId: "",
      containerId: "",
      statusNum: {},
      page: 1,
      orderList: [],
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onLoad(options) {
    this.follow = options.type || "to_transit";
    this.getPackageList(1);
  },
  onShow() {
    this.getPackageList(1);
    this.getNum();
  },
  methods: {
    tabSwitch(num) {
      this.page = 1;
      this.follow = num;
      this.getPackageList(1);
    },
    toInformation(value) {
      if (value.status == "imperfect") {
        return;
      }
      uni.navigateTo({
        url: `/pageD/orderInformation/orderInformation?orderStatus=${value.id}`,
      });
    },
    //获取每个状态数量
    getNum() {
      uni.$u.http.get(`/api/express-order/status-count`).then((res) => {
        this.statusNum = res;
      });
    },
    //获取订单列表，默认获取发往中转点的包裹,
    getPackageList(value) {
      uni.$u.http
        .get(
          `/api/express-order?container_id=${this.containerId}&status_collection=${this.follow}&order_no=${this.orderId}&page=${this.page}&limit=10`
        )
        .then((res) => {
          if (value == 1) {
            this.weights = 0; //所有包裹重量
            this.orderList = res.data;
          } else {
            this.orderList = this.orderList.concat(res.data);
          }
          //将获取到的包裹重量相加
          this.orderList.map((item) => {
            this.weights += Number(item.actual_weight);
          });
          this.total = res.total;
        });
    },
  },

  onReachBottom() {
    //商品总数量小于当前获取到的商品数量
    if (this.total > this.orderList.length) {
      this.page++;
      this.getPackageList(0);
    }
  },
  created() {
    // this.getPackageList(1);
    uni.setNavigationBarTitle({
      title: this.i18n.myPackage,
    });
  },
};
</script>

<style lang="scss" scoped>
.top-search {
  background-color: #fff;
  padding: 20rpx 24rpx;
}

/deep/.u-input {
  background-color: #f4f4f4;
}

.top-tab {
  margin-top: 10rpx;
  display: flex;
  justify-content: space-between;
  overflow-y: auto;
  // flex-shrink: 1;
  width: 100vw;

  .tab {
    margin-right: 40rpx;
    font-size: 26rpx;
    color: #555;
    flex-shrink: 0;
    height: 44rpx;
    display: flex;
    align-items: flex-end;
    font-size: 32rpx;
  }

  .commodity {
    position: relative;
    font-weight: 600;
    color: #222;
  }

  .commodity::before {
    content: "";
    display: block;
    height: 8rpx;
    width: 100%;
    background: linear-gradient(to right, #f83224, #fff);
    position: absolute;
    bottom: 5rpx;
    opacity: 0.8;
  }
}

.content {
  padding: 20rpx 24rpx;

  .prompt {
    background-color: #fbe8e6;
    border-radius: 10rpx;
    padding: 16rpx 22rpx;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    color: #f83224;

    .prompt-icon {
      width: 36rpx;
      height: 36rpx;
      margin-right: 20rpx;
    }
  }
}
</style>