mp_exhibitor_miniprog/pages/activity/index.vue

<template>
	<view class="activity-index">
		<nav-bar title="同期活动" @init="onInitNavbar"></nav-bar>
		<u-scroll-view :tabbar-conflict="true">
			<view class="main-container">
				<view class="activity-head">
					<view class="activity-head-title">同期活动</view>
					<view class="activity-head-desc">{{ mettingDesc }}</view>
				</view>
				<van-empty v-if="activityList.length === 0" description="暂无数据" />
				<view v-else class="activity-list">
					<template v-for="(item, index) in activityList">
						<activity-item :item="item" :key="index" @updateItemCollect="updateItemCollect"/>
					</template>
				</view>
			</view>
		</u-scroll-view>
	</view>
</template>

<script>
	import NavBar from '@/components/layout/nav-bar'
	import UScrollView from '@/components/common/u-scroll-view'
	import ActivityItem from '@/pages/activity/components/activity-item.vue'
	import { mettingList, mettingDesc } from '@/api/exhibitor'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
			NavBar,
			UScrollView,
			ActivityItem
		},
		data() {
			return {
				activityList: [{ favourited: true }, {}, {}],
				activityParams: {
					page: 1,
					page_size: 10,
					keyword: '',
				},
				activityListLoading: false,
				activityListLastPage: 1,
				mettingDesc: ''
			}
		},
		created() {
			this.getMettingDesc()
			this.getList()
		},
		methods: {
			getList() {
				this.activityListLoading = true
				mettingList(this.activityParams).then(res => {
					if (res.data.data) {
						if (this.activityParams.page > 1) {
							this.activityList = [...this.activityList, ...res.data.data]
						} else {
							this.activityList = res.data.data
							this.activityListLastPage = res.data.last_page
						}
					} else {
						this.showToast('系统繁忙，稍候再试')
					}
					this.activityListLoading = false
				})
			},
			updateItemCollect(e) {
				this.activityList.forEach((item) => {
					if (item.id === e.id) {
						item.is_collect = item.is_collect === 1 ? 0 : 1
					}
				})
			},
			getMettingDesc() {
				mettingDesc().then(res => {
					this.mettingDesc = res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	.activity-head{
		color: #333333;
		.activity-head-title{
			font-weight: bold;
			font-size: $fontSize6;
			line-height: 49rpx;
		}
		.activity-head-desc{
			margin-top: 20rpx;
			font-size: $fontSize3;
			line-height: 40rpx;
		}
		.activity-favourites-text{
			white-space: nowrap;
		}
	}
	.activity-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 30rpx;
		margin-top: 40rpx;
		color: #333333;
	}
</style>