<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>