mp_exhibitor_miniprog/pages/news/index.vue

<template>
	<view class="news-index">
		<nav-bar title="新闻" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="false" @scroll-near-lower="onScrollToLower">
			<view class="main-container">
				<u-tabs :active.sync="tabActive" :tabs="tabs" tab-style="default" @change="tabChange"/>
				<van-empty v-if="newsList.length === 0" description="暂无数据" />
				<view v-else class="news-list">	
					<template v-for="(item, index) in newsList">
						<news-item :item="item" :key="index" />
					</template>	
				</view>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UTabs from '@/components/common/u-tabs'
	import UScrollView from '@/components/common/u-scroll-view'
	import NewsItem from '@/pages/news/components/news-item.vue'
	import { exhibitorsNewsList, newsList } from '@/api/exhibitor'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UTabs,
			UScrollView,
			NewsItem
		},
		data() {
			return {
				tabActive: 'exhibition',
				tabs: [{
					label: '展会新闻',
					value: 'exhibition'
				}, {
					label: '展商新闻',
					value: 'exhibitor'
				}],
				newsList: [],
				newsParams: {
					page: 1,
					page_size: 10,
					keyword: '',
				},
				newsListLoading: false,
				newsListLastPage: 1,
			}
		},
		onLoad(options) {
			if (options.type) {
				this.tabActive = options.type
			}
			this.getList()
		},
		created() {
		},
		methods: {
			getList() {
				if (this.tabActive === 'exhibitor') {
					this.getExhibitorsNewsList()
				}
				if (this.tabActive === 'exhibition') {
					this.getNewsList()
				}
			},
			getNewsList() {
				this.newsListLoading = true
				newsList(this.newsParams).then(res => {
					if (res.data.data) {
						if (this.newsParams.page > 1) {
							this.newsList = [...this.newsList, ...res.data.data]
						} else {
							this.newsList = res.data.data
							this.newsListLastPage = res.data.last_page
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.newsListLoading = false
				})
			},
			getExhibitorsNewsList() {
				this.newsListLoading = true
				exhibitorsNewsList(this.newsParams).then(res => {
					if (res.data.data) {
						if (this.newsParams.page > 1) {
							this.newsList = [...this.newsList, ...res.data.data]
						} else {
							this.newsList = res.data.data
							this.newsListLastPage = res.data.last_page
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.newsListLoading = false
				})
			},
			onScrollToLower(e) {
				if (this.newsListLastPage === this.newsParams.page) {
					return
				}
				if (this.newsListLoading === true) {
					return
				}
				this.newsListLoading = true
				this.newsParams.page = this.newsParams.page+1
				this.getList()
			},
			tabChange(e) {
				this.tabActive = e.detail.value
				this.newsParams.page = 1
				this.getList()
			}
		}
	}
</script>

<style lang="scss">
	.news-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 18rpx;
		margin-top: 28rpx;
	}
</style>