mp_exhibitor_miniprog/pages/news/components/news-recommend.vue

<template>
	<view class="news-recommend">
		<view v-if="recommendType === 'home'" class="news-tab">
			<u-tabs :active.sync="newsType" :tabs="tabs" tab-style="default" @change="tabChange"/>
		</view>
		<view class="news-list">
			<template v-for="(item, index) in newsList">
				<news-item :item="item" :key="index" :type="newsType" />
			</template>
		</view>
	</view>
</template>

<script>
	import UTabs from '@/components/common/u-tabs'
	import NewsItem from '@/pages/news/components/news-item.vue'
	import { exhibitorsNewsList, newsList } from '@/api/exhibitor'
	
	export default {
		components: {
			UTabs,
			NewsItem
		},
		props: {
			// 特定的展商ID
			exhibitorId: Number,
			recommendType: {
				type: String,
				default: 'home'
			}
		},
		mounted() {
			this.getNewsList()
		},
		data() {
			return {
				newsType: 'exhibition',
				tabs: [{
					label: '展会新闻',
					value: 'exhibition'
				}, {
					label: '展商新闻',
					value: 'exhibitor'
				}],
				newsList: [],
				newsListParams: {
					page: 1,
					page_size: 4,
					keyword: ''
				},
				newsListLoading: false
			}
		},
		created() {
			if (this.recommendType === 'detail') {
				this.newsType = 'exhibitor'
			}
		},
		methods: {
			getList() {
				if (this.tabActive === 'exhibitor') {
					this.getExhibitorsNewsList()
				}
				if (this.tabActive === 'exhibition') {
					this.getNewsList()
				}
			},
			getNewsList() {
				this.newsListLoading = true
				newsList(this.newsListParams).then(res => {
					if (res.data.data) {
						if (this.newsListParams.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.newsListParams).then(res => {
					if (res.data.data) {
						if (this.newsListParams.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
				})
			},
			tabChange(e) {
				this.tabActive = e.detail.value
				this.newsListParams.page = 1
				this.getList()
			}
		}
	}
</script>
<style lang="scss" scoped>
	.news-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 18rpx;
		margin-top: 28rpx;
	}
</style>