<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="没有更多了"
@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: [], // 接口传过来数组
type: 1, // tab类型的判断
refreshing: false,
};
},
methods: {
// 切换Tab时改变的值
onClick(index, name) {
this.type = name
this.pageNo = 1 //由于数据量很大，这里页数需要重置为第一页
this.loading = false; // 将loading状态设为false
this.finished = false;
this.shopInfo = []; //接口数据清空
},
// 调用接口数据
getList() {
axios.get(`接口?current=${this.pageNo}&size=${this.pageSize}&couponStatus=${this.type}`, {
headers: {
"Content-Type": "application/json",
lineId: this.lineID,
lineId: 'U2497a5a6ca953af34fa613dae6521a64'
}
}).then((res) => {
// 空数据 停止加载
if (res.data.data.records.length == 0) {
this.shopInfo = [];
this.finished = true;
return;
}
// 有数据 赋值列表 加载状态结束
res.data.data.records.forEach(item => {
this.finished = false
this.shopInfo.push(item)
})
this.loading = false;
this.refreshing = false;
// 如果list长度大于等于总数据条数，数据全部加载完成
if (this.shopInfo.length >= res.data.data.total) {
this.finished = true;//结束加载
}
}).catch((err) => {
console.log('err', err);
})
},
// 若加载条到了底部
onLoad() {
this.getList(); // 调用上面方法,请求数据
this.pageNo++; // 分页数加一
},
// 加载失败调用方法
onRefresh() {
this.finished = false; // 清空列表数据
this.refreshing = true;
this.loading = true; // 加载状态
this.pageNo = 1; // 分页数赋值为1
this.shopInfo = []; // 清空数组
this.onLoad(); // 重新加载数据
},
}
};
</script>
