Vant Tab标签页+下拉刷新+上拉加载

Vant Tab标签页+下拉刷新+上拉加载

<template>
  <div class="invoicePickupBox">
    <div class="headerBox">
      <div class="backBox">
        <div class="backIcon" @click="goBack">
          <img :src="require('@/assets/images/backIcon.png')" alt=""/>
        </div>
      </div>
      <span class="titleBox">{{motorcadeName}}</span>
      <div class="featureBox">
        <img :src="require('@/assets/images/company-icon.svg')" alt="">
      </div>
    </div>

    <div class="searchBox">
      <form action="/">
        <van-search
          v-model="customerNameAndPhone"
          placeholder="请输入客户姓名/手机号进行搜索"
          @search="onSearch"
          @clear="onClear"
        />
      </form>
    </div>

    <div class="contentBox">
      <van-tabs v-model="activeName" @change="tabChange">
        <van-tab v-for="item in tabList" :title="item.name" :key="item.value" :disabled="tabDisabled">
          <div class="listBox">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                v-if="isData"
              >
                <div v-for="item in dataList" :key="item.id" class="cellBox" @click="goDetail(item)">
                  <div class="cellText">
                    <div style="display: flex; justify-content: space-between;">
                      <div class="detailBox">
                        <div style="display: flex;align-items:center">
                          <div class="nameBox">{{item.rentName}}</div>
                          <span style="color: #888; marginLeft: 0.08rem">{{item.rentPhone}}</span>
                        </div>
                      </div>

                      <div class="statusBox">
                        <span style="color: #FF6633" v-if="item.invoiceStatus == 0">待提交</span>
                        <span style="color: #FF6060" v-if="item.invoiceStatus == 3 || item.invoiceStatus == 5">审批退回</span>
                        <span style="color: #FA9D3B" v-if="item.invoiceStatus == 1">审批中</span>
                        <span style="color: #39C09D" v-if="item.invoiceStatus == 2 || item.invoiceStatus == 4 || item.invoiceStatus == 6 || item.invoiceStatus == 7">审批完成</span>
                        <img :src="require('@/assets/images/right-arrow.svg')" alt=""/>
                      </div>

                    </div>

                    <div style="display: flex; justify-content: space-between; margin-top: 0.1rem">
                      <span style="color: #333;fontSize: 0.14rem">{{item.carType}}</span>
                    </div>

                    <div style="display: flex; justify-content: space-between; margin-top: 0.1rem">
                      <p style="color: #333">{{item.rentCode}}</p>
                      <p style="">{{item.createTimeSort}}</p>
                    </div>
                  </div>
                </div>
              </van-list>

              <div class="defaultBox" v-if="!isData">
                <img :src="require('@/assets/images/noCar-bg.png')" alt=""/>
                <p>暂无数据</p>
              </div>

            </van-pull-refresh>
          </div>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
  import { fetchContractImprintList } from "@/api/contractimprint";
  import { fetchInvoicePickupList } from "@/api/invoicePickup";
  import Vue from 'vue';
  import { Search, Tab, Tabs } from 'vant';

  Vue.use(Tab);
  Vue.use(Tabs);
  Vue.use(Search);

  export default {
    name: "InvoicePickupList",
    data() {
      return {
        dataList: [],
        page: 1,
        customerNameAndPhone: "",
        activeName: 0,
        motorcadeName: '',
        tabList: [
          {name: '全部', value: 99},
          {name: '待提交', value: 0},
          {name: '审批退回', value: 3},
          {name: '审批中', value: 1},
          {name: '审批完成', value: 2},
        ],

        tabDisabled: false, // 切换Tab时禁用
        loading: false, // 是否上拉加载
        finished: false, // 是否加载完毕
        refreshing: false, // 是否下拉重置
        isData: true, // 是否展示空太页面
      };
    },

    mounted(){
      if(sessionStorage.getItem('activeName')) {
        this.activeName = parseInt(sessionStorage.getItem('activeName'));
      }
      if (JSON.parse(sessionStorage.getItem('motorcadeForm'))) {
        let obj = JSON.parse(sessionStorage.getItem('motorcadeForm'))
        this.motorcadeName = obj.name
      }
    },
    methods: {
      // 返回上一页
      goBack() {
        history.back();
      },

      // 搜索
      onSearch() {
        this.page = 1;
        this.isData = true,
          this.dataList = [];
        this.loading = true;
        this.finished = false;
        this.getDataList();
      },

      // 清楚搜索时，回调
      onClear() {
        this.tabChange();
      },

      // 切换Tab
      tabChange(val) {
        sessionStorage.setItem('activeName', val);
        this.page = 1;
        this.isData = true,
          this.customerNameAndPhone = "";
        this.dataList = [];
        this.loading = true;
        this.finished = false;
        this.getDataList();
      },

      // 进入页面加载数据（上滑加载）
      onLoad() {
        this.getDataList();
      },

      // 下拉重置数据
      onRefresh() {
        this.page = 1;
        this.loading = true;
        this.finished = false;
        this.onLoad();
      },

      // 获取数据
      getDataList() {
        let par = {
          page: this.page,
          customerNameAndPhone: this.customerNameAndPhone,
          motorcadeId: this.$route.query.motorcadeId,
          contractType: 2,
          orderStatus: 1,
        };

        if(this.tabList[this.activeName].value != 99) {
          par.invoiceStatus = this.tabList[this.activeName].value;
        }
        else {
          par.invoiceStatus = '';
        }

        this.tabDisabled = true;
        fetchInvoicePickupList(par).then( res => {
          if (!res.data.success) { alert(res.data.message); return;}
          if(this.page == 1) {
            this.dataList = res.data.info;

            if(!this.dataList || this.dataList.length == 0) {
              this.isData = false;
            }else {
              this.isData = true;
            }
          } else {
            if (res.data.info) {
              this.dataList = this.dataList.concat(res.data.info);
            }
          }



          this.loading = false;
          this.refreshing = false;
          this.tabDisabled = false;

            if (!res.data.info || res.data.info.length < 10 ) {
              this.finished = true;
            }
            else {
              this.page++;
              this.finished = false;
            }

        })
          .catch(() => {
            this.refreshing = false;
            this.tabDisabled = false;
            setTimeout(() => {
              this.loading = false;
            },5000)
          })
      },

      goDetail(val) {
        this.$router.push({ path: "/invoice-pickup-detail", query: {id: val.id} });
      }
    },
  };
</script>

<style scoped>
  .invoicePickupBox {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgb(245, 245, 249);
  }

  .invoicePickupBox .headerBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 0.74rem;
    padding: 0 0.16rem;
    padding-top: 0.3rem;
    background: #fff;
  }

  .invoicePickupBox .headerBox .backBox {
    width: 15%;
    height: 0.4rem;
    display: flex;
    align-items: center;
  }

  .invoicePickupBox .headerBox .backIcon {
    width: 100%;
    height: 0.24rem;
    padding: 0.02rem 0;
  }

  .invoicePickupBox .headerBox .backIcon > img {
    width: 0.2rem;
    height: 0.2rem;
  }

  .invoicePickupBox .headerBox .titleBox {
    width: 100%;
    font-size: 0.14rem;
    color: #333;
    word-break: break-all;
  }

  .invoicePickupBox .headerBox .featureBox {
    /* width: 30%; */
    text-align: right;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .invoicePickupBox .headerBox .featureBox img {
    width: 0.2rem;
    height: 0.2rem;
  }


  .invoicePickupBox .headerBox .featureBox > span {
    line-height: 0.44rem;
    color: #333;
    font-size: 0.14rem;
  }
</style>

<style>
  .invoicePickupBox .searchBox {
    width: 100%;
    height: 0.44rem;
    padding: 0 0.16rem;
    padding-top: 0.06rem;
    background: #fff;
  }

  .invoicePickupBox .searchBox .van-search {
    padding: 0;
    height: 0.32rem;
  }

  .invoicePickupBox .searchBox .van-search__content.van-search__content--square {
    height: 100%;
    padding: 0;
    background: #f5f5f5;
    border-radius: 0.02rem;
  }

  .invoicePickupBox .searchBox .van-search .van-cell {
    padding: 0;
    background: none;
  }

  .invoicePickupBox .searchBox .van-search .van-field__left-icon {
    width: 0.32rem;
    margin: 0;
    background: url(../../assets/images/search.png) no-repeat center center;
    background-size: 0.16rem;
  }

  .invoicePickupBox .searchBox .van-search .van-field__left-icon i {
    display: none;
  }

  .invoicePickupBox .searchBox .van-search__content .van-field__body input {
    height: 0.32rem;
    padding: 0;
    margin: 0;
    background: none;
    text-align: left;
    font-size: 0.14rem;
  }

  .invoicePickupBox .searchBox .van-search__content .van-field__body .van-icon-clear {
    margin-right: 0.02rem;
  }

  .invoicePickupBox .contentBox {
    width: 100%;
    height: calc(100% - 0.74rem - 0.44rem);
  }

  .invoicePickupBox .contentBox .van-tabs__wrap--scrollable .van-tab {
    flex-basis: 22% !important;
    color: #666;
  }

  .invoicePickupBox .contentBox .van-tab.van-tab--active {
    color: #ff6633;
  }

  .invoicePickupBox .contentBox .van-tab.van-tab--active.van-tab--disabled {
    color: #ff6633;
  }

  .invoicePickupBox .contentBox .van-tabs__line {
    background-color: #ff6633;
  }

  .invoicePickupBox .contentBox .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
    border: none;
  }

  .invoicePickupBox .contentBox .van-tabs.van-tabs--line {
    width: 100%;
    height: 100%;
  }

  .invoicePickupBox .contentBox .van-tabs.van-tabs--line .van-tabs__content {
    width: 100%;
    height: calc(100% - 0.44rem);
  }

  .invoicePickupBox .contentBox .van-tabs.van-tabs--line .van-tabs__content .van-tab__pane {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
  }

  .invoicePickupBox .contentBox .listBox {
    width: 100%;
    height: calc(100% - 0.08rem);
    margin-top: 0.08rem;
    background: #fff;
    overflow: auto;
  }

  .invoicePickupBox .contentBox .listBox .defaultBox {
    text-align: center;
  }

  .invoicePickupBox .contentBox .listBox .defaultBox img {
    margin-top: 36%;
    width: 46%;
  }

  .invoicePickupBox .contentBox .listBox .defaultBox p {
    margin-top: 0.1rem;
    margin-bottom: 30%;
  }

  .invoicePickupBox .contentBox .listBox .cellBox {
    width: 100%;
    padding: 0 0.16rem;
  }

  .invoicePickupBox .contentBox .listBox .cellBox .cellText {
    /*display: flex;*/
    width: 100%;
    /*justify-content: space-between;*/
    padding: 0.16rem 0;
    border-bottom: 1px solid #e6e6e6;
  }

  .invoicePickupBox .contentBox .listBox .van-list :nth-last-child(3) .cellText{
    border: none;
  }

  .invoicePickupBox .contentBox .listBox .cellBox .cellText .detailBox {
    margin-top: 0.06rem;
    flex: 1;
  }

  .invoicePickupBox .contentBox .listBox .cellBox .cellText .detailBox .nameBox {
    font-size: 0.14rem;
    font-weight: 700;
    color: #333;
  }

  .invoicePickupBox .contentBox .listBox .cellBox .cellText .detailBox > div {
    /* margin-top: 0.08rem; */
    font-size: 0.14rem;
    color: #333;
  }

  .invoicePickupBox .contentBox .listBox .cellBox .cellText .detailBox > p {
    text-align: right;
    margin: 0;
    margin-top: 0.16rem;
    font-size: 0.14rem;
    color: #333;
  }

  .invoicePickupBox .contentBox .listBox .cellBox .cellText .statusBox {
    width: 26%;
    line-height: 0.24rem;
    text-align: right;
    font-size: 0.14rem;
    color: #888;
  }
  .invoicePickupBox .contentBox .listBox .cellBox .cellText .statusBox span {
    vertical-align: middle;
  }
  .invoicePickupBox .contentBox .listBox .cellBox .cellText .statusBox img {
    width: 0.2rem;
    height: 0.2rem;
  }
</style>