效果图（点击更多订单加载，一次加载10条）：

<template>
  <div id="order" class="wap-el page-container wap-com-page">
    <section>
      <com-header></com-header>
    </section>
    <div class="com-top-blue-bg">
      <div class="com-top-blue-bg-cont"></div>
    </div>
    <div class="order-box">
      <div class="com-title-box">
        <!-- 返回按钮 -->
        <div class="wap-page-return" @click="$router.go(-1)"></div>
        <div class="com-page-title">我的订单</div>
      </div>
      <van-tabs v-model="activeStatus" @change="changeTab" animated>
        <van-tab
          v-for="item in orderTitle"
          :key="item.orderStatus"
          :title="item.name"
        >
          <div class="order-cont" v-show="isData">
            <div
              class="order-tab-content"
              v-for="(item1, index1) in list"
              :key="index1"
              @click="goDetail(item1)"
            >
              <div class="order-tab-box">
                <div class="order-tab-title-box">
                  <div class="order-tab-title flex-center-start">
                    <img
                      class="order-tab-title-img"
                      :src="item1.toolApplicationIcon"
                      alt=""
                    />
                    <div class="order-tab-title-text">
                      {{ item1.toolApplicationName }}
                    </div>
                  </div>
                  <div class="order-status-box">
                    <div
                      class="order-status 1"
                      :class="`order-status${item1.orderStatus == 1 ? 1 : 0}`"
                    >
                      {{ orderStatusVal[item1.orderStatus] }}
                    </div>
                  </div>
                </div>
                <div class="order-tab-item-box">
                  <div class="order-tab-item flex-center-between">
                    <div class="order-tab-item-name">订单总金额</div>
                    <div class="order-tab-item-cont">
                      {{ item1.totalPrice }}
                    </div>
                  </div>
                  <div class="order-tab-item flex-center-between">
                    <div class="order-tab-item-name">实付金额</div>
                    <div class="order-tab-item-cont">{{ item1.realPrice }}</div>
                  </div>
                  <div class="order-tab-item flex-center-between">
                    <div class="order-tab-item-name">下单时间</div>
                    <div class="order-tab-item-cont">
                      {{ item1.createDate }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-center-center" v-if="list.length < total">
              <div class="more-order flex-center-center" @click="moreOrder">
                <span>更多订单</span>
                <img
                  class="blue-double-right-arrow"
                  :src="`${NEW_ASSET_IMG}/common/blue_double_right_arrow.png`"
                  alt=""
                />
              </div>
            </div>
          </div>
          <!-- 无订单 -->
          <div
            class="wap-not-data-box flex-column-center-center"
            v-show="!isData"
          >
            <img
              class="wap-not-data-img"
              :src="`${NEW_ASSET_IMG}/common/wap_not_data.png`"
            />
            <p class="wap-not-data-text">暂无订单</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "order",
  components: {
    "com-header": () => import("@/components/common/com-header"),
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: "", //页总数
      nav_index: 0,
      activeStatus: this.$route.query.orderStatus
        ? Number(this.$route.query.orderStatus)
        : "", //订单状态（-3 已退款-2 退款申请中-1：已取消 0：待支付 1：已支付）
      orderStatus: "",
      orderStatusVal: {
        "-3": "已退款",
        "-2": "退款申请中",
        "-1": "已取消",
        0: "待支付",
        1: "已支付",
      }, //订单状态
      orderTitle: [
        { orderStatus: "", name: "全部" }, //status自定义
        { orderStatus: "1", name: "已支付" },
        { orderStatus: "0", name: "待支付" },
        { orderStatus: "-2", name: "退款申请中" },
        { orderStatus: "-3", name: "已退款" },
        { orderStatus: "-1", name: "已取消" },
      ],
      list: [], //订单数据
      isData: true, //是否有数据
    };
  },
  computed: {},
  watch: {},
  methods: {
    getOrderList(isMore) {
      const params = `?page=${this.page}&pageSize=${this.pageSize}&orderStatus=${this.orderStatus}`;
      this.$orderAPI.getOrders(params).then(({ code, msg, data }) => {
        if (code) {
          this.$message.warning(msg);
          return;
        }
        this.total = Number(data.pageNumVO.total);
        if (isMore) {
           //isMore==1为点击更多
          if (data.list.length <= this.total) {
            this.list.push(...data.list);
          } else {
            this.list = data.list;
          }
        } else {
          this.list = data.list;
        }
        this.isData = data.list.length <= 0 ? false : true; //是否显示无数据
      });
    },
    changeTab(e) {
      this.nav_index = e;
      let data = {
        0: "",
        1: 1,
        2: 0,
        3: -2,
        4: -3,
        5: -1,
      };
      this.orderStatus = data[e];
      this.getOrderList(0);
      let orderStatusIdx = {
        "": 0,
        1: 1,
        0: 2,
        "-2": 3,
        "-3": 4,
        "-1": 5,
      };
      window.sessionStorage.setItem(
        "order_idx",
        `${orderStatusIdx[this.orderStatus]}`
      );
    },
    goDetail(item) {
      this.$router.push({
        path: `/order-detail?toolOrderId=${item.toolOrderId}&orderStatus=${item.orderStatus}`,
      });
    },
    //点击加载更多
    moreOrder() {
      this.page++;
      this.getOrderList(1);
    },
  },
  created() {},
  mounted() {
    this.getOrderList(0);
    let order_idx = window.sessionStorage.getItem("order_idx") || "";
    if (order_idx != "") {
      this.activeStatus = Number(order_idx);
    }
    this.changeTab(this.nav_index);
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang='scss' scoped>
#order {
  ::v-deep .van-tab {
    padding: 0;
  }
  ::v-deep .van-tabs__nav {
    background-color: transparent;
  }
  .order-box {
    position: relative;
    z-index: 10;
  }

  .order-tab-title-box {
    padding: 0.31rem 0.33rem;
    background: linear-gradient(310deg, #ddebff 0%, #ece8ff 48%, #f3f1fd 100%);
    border-radius: 0.16rem 0.16rem 0 0;
    position: relative;
  }
  .order-status-box {
    position: absolute;
    top: 0;
    right: -0.11rem;
  }
  .order-status {
    width: fit-content;
    position: relative;
    padding: 0.06rem 0.15rem;
    font-size: 0.16rem;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    line-height: 0.27rem;
    letter-spacing: 0.02rem;
    border-radius: 0.06rem 0.06rem 0px 0.06rem;
  }
  .order-status1 {
    background: linear-gradient(315deg, #4265fe 0%, #10f7ff 100%);
    color: #ffffff;
  }
  .order-status0 {
    background: linear-gradient(315deg, #8e8e8e 0%, #d7d7d7 100%);
    color: #ffffff;
  }
  .clip-triangle {
    -webkit-clip-path: polygon(50% 40%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 40%, 0% 100%, 100% 100%);
  }
  .order-status0,
  .order-status1 {
    &::after {
      content: "";
      position: absolute;
      bottom: -0.08rem;
      right: 0.0178rem;
      width: 0.16rem;
      height: 0.14rem;
      transform: rotate(-45deg);
      @extend .clip-triangle;
    }
  }
  .order-status0::after {
    background-color: rgba(123, 123, 123, 1);
  }
  .order-status1::after {
    background-color: rgba(8, 53, 182, 1);
  }
  .order-cont {
    padding: 0 0.32rem 0.7rem 0.32rem;
  }
  .order-tab-title-img {
    width: 0.64rem;
    height: 0.64rem;
  }
  .order-tab-content {
    margin-top: 0.32rem;
  }
  .order-tab-title-text {
    font-size: 0.32rem;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #000000;
    line-height: 0.48rem;
    letter-spacing: 0.02rem;
    margin-left: 0.16rem;
  }
  .order-tab-item-box {
    padding: 0 0.32rem 0.4rem 0.32rem;
    background: rgba(255, 255, 255, 1);
    border-radius: 0 0 0.16rem 0.16rem;
    border: 1px solid #979797;
    border-top: none;
  }
  .order-tab-item {
    font-size: 0.28rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #242424;
    line-height: 0.36rem;
    letter-spacing: 0.01rem;
    padding-top: 0.32rem;
  }
  // 暂无数据
  .wap-not-data-box {
    padding: 1.74rem 0 0 0;
    .wap-not-data-img {
      width: 2.58rem;
      height: 2.52rem;
    }
    .wap-not-data-text {
      font-size: 0.26rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #242424;
      line-height: 0.37rem;
      letter-spacing: 1px;
      margin-top: 0.32rem;
    }
  }
  .more-order {
    font-size: 0.26rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #0064ff;
    line-height: 0.26rem;
    margin-top: 0.4rem;
    .blue-double-right-arrow {
      width: 0.27rem;
      height: 0.27rem;
    }
  }
}
</style>