JinShan_uniapp/pages/activeList/index.vue

<template>
	<view class="activity-list-page">
		<!-- 活动列表容器 -->
		<view class="activity-container">
			<view class="activity-item" v-for="(item, index) in activityList" :key="index"
				@click="goDetail('activeDetail',item.id)" :class="{'ended': item.status === '已结束'}">
				<!-- 活动图片 -->
				<view class="activity-img-container">
					<image class="activity-img" :src="item.cover" mode="aspectFill"></image>
					<!-- 活动状态标签 -->
					<view class="status-tag" v-if="item.status === 2">
						未开始
					</view>
					<view class="status-tag" v-else-if="item.status === 3">
						进行中
					</view>
					<view class="status-tag" v-else="item.status === 4">
						已结束
					</view>
				</view>
				

				<!-- 活动内容 -->
				<view class="activity-content">
					<!-- 活动标题 -->
					<view class="activity-title">{{ item.title }}</view>
					<!-- 活动时间 -->
					<view class="activity-time">
						<uni-icons type="calendar" size="16" color="#999"></uni-icons>
						{{ formatTime(item.createdAt, 'YYYY-MM-DD') }}
					</view>
				</view>
			</view>
		</view>
	    <view><Footer></Footer></view>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/utils/request';
	import {
		IMAGE_BASE_URL,
		BASE_URL
	} from '@/utils/config';
	import {
		formatTime,
		formatRelativeTime
	} from '@/utils/timeFormat';
	import Footer from '@/components/footer_common.vue';

	export default {
		components:{Footer},
		data() {
			return {
				formatTime,
				IMAGE_BASE_URL,
				activityList: []
			};
		},
		mounted(){
			this.getActivities();
		},
		methods: {
			goDetail(type,id) {
				uni.navigateTo({
					url: `/pages/${type}/index?Id=${id}`
				});
			},
			async getActivities(){
				let params = {
					current:1,
					pageSize:10,
					statusArray:"2,3,4",
				};
				try {
					const res = await get('/api/v1/apps/home/activities', params);
					if (!res || !res.success) {
						throw new Error('获取热门活动失败');
					}
					res.data.forEach(item => {
						let imgUrl = item.cover;
						if (!imgUrl.startsWith('http') && !imgUrl.startsWith('https')) {
							item.cover = IMAGE_BASE_URL + imgUrl;
						}
					})
					this.activityList = [...res.data];
					
				} catch (err) {
					console.error('获取热门活动失败:', err);
				}
				
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	$primary-color: #42b983; // 主色调
	$secondary-color: #f7f7f7; // 次色调
	$text-color: #333; // 主要文字颜色
	$text-light: #666; // 次要文字颜色
	$border-radius: 12rpx; // 圆角大小
	$box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08); // 阴影效果
	$transition: all 0.3s ease; // 过渡效果

	.activity-list-page {
		padding: 20rpx;
		background-color: $secondary-color;
		min-height: 100vh;
		box-sizing: border-box;

		.activity-container {
			// display: grid;
			// grid-template-columns: repeat(2, 1fr);
			// gap: 20rpx;
		}

		.activity-item {
			background-color: #fff;
			border-radius: $border-radius;
			overflow: hidden;
			box-shadow: $box-shadow;
			transition: $transition;
			position: relative;
			margin-bottom: 20rpx;

			&:active {
				transform: scale(0.98);
			}

			&.ended {
				opacity: 0.8;

				.activity-img {
					filter: grayscale(50%);
				}
			}

			.activity-img-container {
				position: relative;
				width: 100%;
				height: 260rpx;
				overflow: hidden;

				.activity-img {
					width: 100%;
					height: 100%;
					transition: $transition;
				}

				&:hover .activity-img {
					transform: scale(1.05);
				}
			}

			.status-tag {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				background-color: rgba(0, 0, 0, 0.7);
				color: #fff;
				padding: 6rpx 12rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				z-index: 2;
			}

			.activity-content {
				padding: 20rpx;

				.activity-title {
					font-size: 28rpx;
					font-weight: 600;
					color: $text-color;
					margin-bottom: 10rpx;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					height: 40rpx;
					line-height: 40rpx;
				}

				.activity-time {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: $text-light;
					margin-top: 10rpx;

					.uni-icons {
						margin-right: 8rpx;
					}
				}
			}
		}
	}

	/* 响应式调整 */
	@media (max-width: 600rpx) {
		.activity-list-page .activity-container {
			grid-template-columns: 1fr;
		}
	}
</style>