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-searchv-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-listv-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();},// 切换TabtabChange(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>
