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>