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

<template>
	<view class="activity-recommend">
		<view class="activity-list">
			<template v-for="(item, index) in activityList">
					<view class="activity-item" :key="index" @click="onClickActivity(item)">
						<view class="activity-title">{{ item.title }}</view>
						<view class="activity-time">{{ formatDate(item.start_time) }} | {{ item.address }}</view>
						<view class="activity-summary">
							<view class="text">{{ item.content }}</view>
							<van-button class="btn-to-detail" type="primary">
								<template>
									<view>了解详情</view> <view class="arrow iconfont icon-right-s"></view>
								</template>
							</van-button>
						</view>
					</view>
			</template>
		</view>
	</view>
</template>

<script>
	import { exhibitorsBoothActivityList } from '@/api/exhibitor'
	import { link } from '@/utils/request'
	
	export default {
		options: {
			styleIsolation: 'shared'
		},
		components: {
		},
		props: {
			// 特定的展商ID
			exhibitorId: Number
		},
		watch: {
			exhibitorId(val) {
				this.activityListParams.exhibitors_id = val
				this.getActivityList()
			}
		},
		data() {
			return {
				activityList: [],
				activityListParams: {
					page: 1,
					page_size: 4,
					exhibitors_id: 0
				},
				activityListLoading: false
			}
		},
		created() {
		},
		methods: {
			getActivityList() {
				if (this.activityListLoading === true) {
					return
				}
				this.activityListLoading = true
				exhibitorsBoothActivityList(this.activityListParams).then(res => {
					if (res.code === 0) {
						if (this.activityListParams.page > 1) {
							this.activityList = [...this.activityList, ...res.data.data]
						} else {
							this.activityList = res.data.data
						}
					}
					this.activityListLoading = false
				})
			},
			formatDate(dateString) {
			  const date = new Date(dateString);
			  const year = date.getFullYear();
			  const month = date.getMonth() + 1; // 月份从 0 开始
			  const day = date.getDate();
			  return `${year}年${month}月${day}日`;
			},
			onClickActivity(item) {
				this.navigateTo(link('/' + item.urla))
			}
		}
	}
</script>
<style lang="scss">
	.activity-list{
		display: grid;
		grid-template-columns: 1fr;
		grid-row-gap: 18rpx;
		margin-top: 28rpx;
	}
	.activity-item{
		display: flex;
		flex-direction: column;
		height: 210rpx;
		background-color: #F6F6F6;
		border-radius: 10rpx;
		padding: 24rpx 30rpx;
	}
	.activity-title{
		@include text-ellipsis-line;
		font-family: Arial, Arial;
		font-weight: bold;
		font-size: $fontSize3;
		line-height: 35rpx;
	}
	.activity-time{
		font-size: $fontSize2;
		color: #333333;
		margin: 12rpx 0;
	}
	.activity-summary{
		display: flex;
		align-items: center;
		font-size: $fontSize1;
		line-height: 25rpx;
		.btn-to-detail{
			flex-shrink: 0;
			.van-button__text{
				display: flex!important;
				align-items: center;
				font-size: $fontSize0;
			}
		}
		.text{
			padding-right: 30rpx;
			color: #555555;
			@include text-ellipsis-line;
			-webkit-line-clamp: 2;  
		}
		.arrow{
			margin-left: 12rpx;
			font-size: $fontSize0;
		}
	}
	
	.activity-tab{
		van-button{
			margin-right: 13rpx;
		}
	}
</style>