<template>
<div>
<van-tabs v-model="active" animated line-width="100" title-active-color='#262626' color='#00BF7F' @click="onClick">
<van-tab v-for="(index) in listName" :title="index" />
</van-tabs>
<div class='home-main-txt'>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list style=" min-height:750px" v-model="loading" :finished="finished" finished-text="沒(méi)有更多了"
@load="onLoad">
<div v-for="(item, index) in shopInfo" :key="index">
<div class="table-row">
<span class="table-cell">{{ item.couponName }}</span>
</div>
</div>
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
pageNo: 1,
pageSize: 10,
loading: false,
finished: false,
active: '',
listName: [
"1", "2", "3", "4"
],
shopInfo: [], // 接口傳過(guò)來(lái)數(shù)組
type: 1, // tab類型的判斷
refreshing: false,
};
},
methods: {
// 切換Tab時(shí)改變的值
onClick(index, name) {
this.type = name
this.pageNo = 1 //由于數(shù)據(jù)量很大，這里頁(yè)數(shù)需要重置為第一頁(yè)
this.loading = false; // 將loading狀態(tài)設(shè)為false
this.finished = false;
this.shopInfo = []; //接口數(shù)據(jù)清空
},
// 調(diào)用接口數(shù)據(jù)
getList() {
axios.get(`接口?current=${this.pageNo}&size=${this.pageSize}&couponStatus=${this.type}`, {
headers: {
"Content-Type": "application/json",
lineId: this.lineID,
lineId: 'U2497a5a6ca953af34fa613dae6521a64'
}
}).then((res) => {
// 空數(shù)據(jù) 停止加載
if (res.data.data.records.length == 0) {
this.shopInfo = [];
this.finished = true;
return;
}
// 有數(shù)據(jù) 賦值列表 加載狀態(tài)結(jié)束
res.data.data.records.forEach(item => {
this.finished = false
this.shopInfo.push(item)
})
this.loading = false;
this.refreshing = false;
// 如果list長(zhǎng)度大于等于總數(shù)據(jù)條數(shù)灾而，數(shù)據(jù)全部加載完成
if (this.shopInfo.length >= res.data.data.total) {
this.finished = true;//結(jié)束加載
}
}).catch((err) => {
console.log('err', err);
})
},
// 若加載條到了底部
onLoad() {
this.getList(); // 調(diào)用上面方法,請(qǐng)求數(shù)據(jù)
this.pageNo++; // 分頁(yè)數(shù)加一
},
// 加載失敗調(diào)用方法
onRefresh() {
this.finished = false; // 清空列表數(shù)據(jù)
this.refreshing = true;
this.loading = true; // 加載狀態(tài)
this.pageNo = 1; // 分頁(yè)數(shù)賦值為1
this.shopInfo = []; // 清空數(shù)組
this.onLoad(); // 重新加載數(shù)據(jù)
},
}
};
</script>
