VUE 利用tab切换+同路由跳转传参(check)+vant上拉加载制作订单列表(终)

做的过程中，遇到了很多坑，比如说上拉加载中，当切换tab标签时，page1/2/3/4互相影响 ；而引起此原因是因为点击tab时应该再做一次相应的数据初始化、以及防止数据重复的flag还有就是重复调用接口，导致的诸多问题。最后，终于好了，但代码还有待优化。有什么想法的朋友请联系我，大家共同进步学习。

<template>
  <div class="orderIndex" ref="orderIndex">
    <div class="orderTop" ref="orderTop">
      <div class="orderSearch">
        <div class="searchBox">
          <form>
            <i class="iconfont icon-search"></i>
            <input type="text" placeholder="搜索订单信息" />
          </form>
        </div>
        <span>搜索</span>
      </div>
      <ul class="tab" :style="{height: tabheight}">
        <li
          ref="iWidth"
          v-for="(item,index) in tabList"
          :key="index"
          :class="{'on': checkindex == index}"
          @click="checkli(index)"
        >{{item}}</li>
        <i :style="{transform:`translateX(${iWidths/2+checkindex*iWidths}px) translateX(-50%)`}"></i>
      </ul>
    </div>
    <div class="orderContent" :style="{height:`${contentHeight}px`}">
      <ul v-show="this.orders.length">
        <van-list
          v-model="isUpLoading"
          :finished="upFinished"
          finished-text="已经到底了"
          @load="onLoadList"
          :offset="offset"
          :immediate-check="false"
        >
          <li class="item paddingDiv" v-for="(item,index) in orders" :key="index">
            <div class="orderNumber">
              <span class="numLeft">订单号：{{item.orderNo}}</span>
              <span class="numRight">{{item.payState}}</span>
            </div>
            <div class="program">
              <dl>
                <dd>
                  <div class="proLeft">
                    <img :src="item.headicon" alt />
                  </div>
                  <div class="proRight">
                    <div class="titlePrice pbPadding">
                      <h4>调理方案一·普通制粉</h4>
                      <h5>¥50.00</h5>
                    </div>
                    <div class="proCotent pbPadding">
                      <p>规格说明规格说明规哈哈哈哈哈哈</p>
                    </div>
                    <div class="proDoctor pbPadding">
                      <h4>张萌医生</h4>
                      <p>x1</p>
                    </div>
                  </div>
                </dd>
                <dd>
                  <div class="proLeft">
                    <img src="../../assets/img/erweima/erweima_yufa.png" alt />
                  </div>
                  <div class="proRight">
                    <div class="titlePrice pbPadding">
                      <h4>调理方案二·普通制粉</h4>
                      <h5>¥50.00</h5>
                    </div>
                    <div class="proDoctor pbPadding">
                      <h4>张萌医生</h4>
                      <p>x1</p>
                    </div>
                  </div>
                </dd>
              </dl>
            </div>
            <div class="total" align="right">
              合计：¥90.00
              <span>(含运费 ¥23.00)</span>
            </div>
            <div class="programBtn">
              <div class="btnLeft">
                <img src="../../assets/img/kefu.png" alt /> 联系客服
              </div>
              <div class="btnRight">
                <span>修改收货信息</span>
              </div>
            </div>
          </li>
        </van-list>
      </ul>
      <p v-show="!this.orders.length" class="overBottom">暂无订单</p>
    </div>
  </div>
</template>

<script>
import { List, Cell, PullRefresh } from "vant";
export default {
  name: "orderIndex",
  data() {
    return {
      tabheight: "1rem",
      checkindex: 0, //点击的是导航中的哪一个
      orderNo: "", //
      tabList: ["全部订单", "待付款", "待收货", "待评价"],
      contentHeight: 0, //主要内容的高度
      iWidths: 0, //获取tab导航li的宽度
      orders: [], //全部订单集合
      isUpLoading: false, //上拉加载
      upFinished: false, //上拉加载完毕
      offset: 100, //滚动条与底部距离小于offset时触发load事件
      page1: 0,
      page2: 0,
      page3: 0,
      page4: 0,
      row: 10,
      flag: 1 //防重复：允许滑动加载，标识数据是否回来才能加载
    };
  },

  mounted() {
    this.orderNo = this.$utils.getQueryVariable("orderNo");
    //判断来自不同的订单的高亮显示
    if (this.$route.query.check) {
      this.checkindex = this.$route.query.check;
    } else {
      this.checkindex = 0;
    }
    this.$nextTick(function() {
      //获取tab导航li的宽度
      this.iWidths = this.$refs.iWidth[0].clientWidth;
      //订单列表主要内容的高度
      this.contentHeight =
        this.$refs.orderIndex.clientHeight - this.$refs.orderTop.clientHeight;
    });
    //实现tab切换显示对应内容的逻辑
    this.onLoadList();
  },

  methods: {
    checkli(index) {
      //点击tab的时候进行初始化数据，防止page之间相互影响
      this.checkindex = index;
      this.page1 = 0;
      this.page2 = 0;
      this.page3 = 0;
      this.page4 = 0;
      this.orders = [];
      this.isUpLoading = false; //上拉加载
      this.upFinished = false; //上拉加载完毕
      this.$router.push({
        path: "/order/orderIndex",
        query: { check: this.checkindex }
      });
      this.$nextTick(() => {
        this.onLoadList();
      });
    },

    requestData() {
      //全部订单
      this.$post("/order/queryAllOrderList.action", {
        page: this.page1,
        row: this.row,
        orderNo: this.orderNo || ""
      }).then(response => {
        if (response.data && response.respCode == 1001) {
          if (this.isUpLoading && this.orders) {
            this.orders = this.orders.concat(response.data);
            this.$nextTick(() => {
              //在下次 DOM 更新循环结束之后执行延迟回调
              this.isUpLoading = false; //关闭上拉加载中
            });
            if (response.data.length < 10) {
              this.upFinished = true; //没有更多数据,上拉加载完毕
            }
          } else {
            this.orders = response.data;
          }
        }
        this.flag = 1;
      });
    },
    requestPendingPayment() {
      //待付款
      this.$post("/order/queryAllOrderList.action", {
        page: this.page2,
        row: this.row,
        orderNo: this.orderNo || "",
        paymentStatus: 1
      }).then(response => {
        if (response.data && response.respCode == 1001) {
          if (this.isUpLoading && this.orders) {
            this.orders = this.orders.concat(response.data);
            this.$nextTick(() => {
              //在下次 DOM 更新循环结束之后执行延迟回调
              this.isUpLoading = false; //关闭上拉加载中
            });
            if (response.data.length < 10) {
              this.upFinished = true; //没有更多数据,上拉加载完毕
            }
          } else {
            this.orders = response.data;
          }
        }
        this.flag = 1;
      });
    },
    requestReceivedd() {
      //待收货
      this.$post("/order/queryAllOrderList.action", {
        page: this.page3,
        row: this.row,
        orderNo: this.orderNo || "",
        paymentStatus: 2,
        orderStatus: 120
      }).then(response => {
        if (response.data && response.respCode == 1001) {
          if (this.isUpLoading && this.orders) {
            this.orders = this.orders.concat(response.data);
            this.$nextTick(() => {
              //在下次 DOM 更新循环结束之后执行延迟回调
              this.isUpLoading = false; //关闭上拉加载中
            });
            if (response.data.length < 10) {
              this.upFinished = true; //没有更多数据,上拉加载完毕
            }
          } else {
            this.orders = response.data;
          }
        }
        this.flag = 1;
      });
    },
    requestEvaluate() {
      this.$post("/order/queryAllOrderList.action", {
        page: this.page4,
        row: this.row,
        orderNo: this.orderNo || "",
        paymentStatus: 5
      }).then(response => {
        if (response.data && response.respCode == 1001) {
          if (this.isUpLoading && this.orders) {
            this.orders = this.orders.concat(response.data);
            this.$nextTick(() => {
              //在下次 DOM 更新循环结束之后执行延迟回调
              this.isUpLoading = false; //关闭上拉加载中
            });
            if (response.data.length < 10) {
              this.upFinished = true; //没有更多数据,上拉加载完毕
            }
          } else {
            this.orders = response.data;
          }
        }
        this.flag = 1;
      });
    },
    //上拉加载
    onLoadList() {
      if (this.flag === 0) {
        return flase;
      }
      this.isUpLoading = true;
      this.flag = 0;
      if (this.$route.query.check == 1) {
        this.page2++;
        this.requestPendingPayment();
      } else if (this.$route.query.check == 2) {
        this.page3++;
        this.requestReceivedd();
      } else if (this.$route.query.check == 3) {
        this.page4++;
        this.requestEvaluate();
      } else {
        this.page1++;
        this.requestData(); //ajax请求
      }
    }
  },
  components: {
    [List.name]: List,
    [Cell.name]: Cell,
    [PullRefresh.name]: PullRefresh
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.paddingDiv {
  padding: 0 0.25rem;
}
.orderIndex {
  background-color: #f3f3f3;
  height: 100%;
  overflow: auto;
  .orderTop {
    background-color: #fff;
    .orderSearch {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.35rem 0.25rem 0 0.25rem;
      .searchBox {
        width: 5.98rem;
        background-color: #f5f5f5;
        height: 0.7rem;
        line-height: 0.7rem;
        padding: 0 0.32rem;
        position: relative;
        i {
          font-size: 0.34rem;
          color: #ccc;
          position: absolute;
        }
        input,
        form {
          height: 100%;
        }
        input {
          width: 100%;
          padding-left: 0.48rem;
          font-size: 0.3rem;
        }
        input::placeholder {
          font-size: 0.3rem;
          color: #ccc;
        }
      }
      span {
        font-size: 0.32rem;
        color: #333;
      }
    }
  }
  .orderContent {
    margin-top: 0.2rem;
    overflow: auto;
    ul {
      li.item {
        background-color: #fff;
        margin-bottom: 0.21rem;
        border-radius: 0.1rem;
        .orderNumber {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #e6e6e6;
          padding: 0.38rem 0;
          .numLeft {
            color: #333;
            font-size: 0.26rem;
            line-height: 0.42rem;
          }
          .numRight {
            font-size: 0.3rem;
            color: #c18456;
          }
        }
        .program {
          dl {
            dd {
              display: flex;
              padding: 0.24rem 0;
              .proLeft {
                margin-right: 0.28rem;
                img {
                  width: 1.34rem;
                  height: 1.34rem;
                  border-radius: 0.06rem;
                }
              }
              .proRight {
                display: flex;
                flex-direction: column;
                align-self: center;
                flex: 1;
                .pbPadding {
                  padding-bottom: 0.1rem;
                }

                .titlePrice,
                .proDoctor {
                  display: flex;
                  justify-content: space-between;
                }
                .titlePrice {
                  h4,
                  h5 {
                    font-size: 0.3rem;
                    color: #333;
                    font-weight: 500;
                  }
                  h5 {
                    font-weight: 400;
                  }
                }
                .proCotent {
                  p {
                    color: #999;
                    font-size: 0.28rem;
                    width: 3.61rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                  }
                }
                .proDoctor {
                  color: #999;
                  h4 {
                    font-size: 0.28rem;
                  }
                  p {
                    font-size: 0.3rem;
                  }
                }
              }
            }
          }
        }
        .total {
          font-size: 0.32rem;
          color: #333;
          border-bottom: 1px solid #e6e6e6;
          padding: 0.2rem 0 0.3rem 0;
          span {
            font-size: 0.28rem;
          }
        }
        .programBtn {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0.29rem 0;
          .btnLeft {
            color: #666;
            font-size: 0.24rem;
            img {
              width: 0.31rem;
              height: 0.32rem;
              vertical-align: bottom;
              margin-right: 0.03rem;
            }
          }
          .btnRight {
            span {
              display: inline-block;
              min-width: 1.6rem;
              height: 0.6rem;
              padding: 0 0.21rem;
              border-radius: 0.5rem;
              border: 1px solid #999;
              line-height: 0.55rem;
              font-size: 0.28rem;
              text-align: center;
              &.goPay {
                border-color: #da0428;
                color: #da0428;
              }
            }
          }
        }
      }
    }
    .overBottom {
      color: #999;
      font-size: 0.26rem;
      text-align: center;
      padding-bottom: 0.21rem;
    }
  }
}
ul.tab {
  height: 1000px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  line-height: 1rem;
  font-size: 0.32rem;
  color: #333333;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all 0.5s;
}
.tab li {
  flex: 1;
  text-align: center;
  transition: all 0.5s;
}
.tab li.on {
  color: #da0428;
}
.tab i {
  width: 0.6rem;
  height: 0.05rem;
  border-radius: 0.03rem;
  background: #da0428;
  bottom: 0;
  position: absolute;
  transition: all 0.5s;
}
</style>