mp_exhibitor_miniprog/pages/news/index.vue

<template>
  <page-layout 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" :type="tabActive" />
          </template>
        </view>
        <disclaimer-text></disclaimer-text>
      </view>
    </u-scroll-view>
    <contact-us :show.sync="showContactUs" :qrcode_url="q_url" />
    <float-button @custom-event="updateContactStatus()"></float-button>
    <van-dialog id="van-dialog" />
  </page-layout>
</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'
	import DisclaimerText from '@/components/disclaimer-text/index.vue'
	import floatButton from "@/components/layout/float-button"
	import ContactUs from '@/pages/index/components/contact-us.vue'
  import PageLayout from "@/components/layout/page-layout";

	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
      PageLayout,
			NavBar,
			UTabs,
			UScrollView,
			NewsItem,
			DisclaimerText,
			floatButton,
			ContactUs
		},
		data() {
			return {
				tabActive: 'exhibition',
				tabs: [{
					label: '展会新闻',
					value: 'exhibition'
				}, {
					label: '展商新闻',
					value: 'exhibitor'
				}],
				newsList: [],
				newsParams: {
					page: 1,
					page_size: 10,
					keyword: '',
				},
				newsListLoading: false,
				newsListLastPage: 1,
				showContactUs: false,
				q_url: ''
			}
		},
		onLoad(options) {
			if (options.type) {
				this.tabActive = options.type
			}
		},
		mounted() {
			this.getNewsList()
		},
		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()
			},
			updateContactStatus(data) {
				this.showContactUs = data.showContactUs
				this.q_url = data.q_url
			}
		}
	}
</script>

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