mayiming/toutoukan_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加活动列表页面

Browse Source
This commit is contained in:
马懿铭
2025-09-28 01:01:21 +08:00
parent ca84b75bd1
commit 5faa33deda
6 changed files with 495 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
miniprogram/pages/activities/activities.json Normal file
View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
}
}

191
miniprogram/pages/activities/activities.ts Normal file
View File

@@ -0,0 +1,191 @@
// 定义活动数据类型
interface Activity {
id: number;
title: string;
description: string;
imageUrl: string;
startTime: string;
endTime: string;
participants: number;
category: string;
status: 'ongoing' | 'upcoming';
}
// 定义分类数据类型
interface Category {
id: string;
name: string;
}
Page({
data: {
// 搜索关键词
searchKeyword: '',
// 当前选中的分类
currentCategory: 'all',
// 活动分类
categories: [] as Category[],
// 所有活动数据
activities: [] as Activity[],
// 过滤后的活动列表
filteredActivities: [] as Activity[]
},
onLoad() {
// 初始化分类
this.initCategories();
// 初始化活动数据
this.initActivities();
},
// 初始化分类
initCategories() {
const categories: Category[] = [
{ id: 'all', name: '全部活动' },
{ id: 'online', name: '线上活动' },
{ id: 'offline', name: '线下活动' },
{ id: 'exhibition', name: '展览活动' },
{ id: 'lecture', name: '讲座活动' }
];
this.setData({
categories
});
},
// 初始化活动数据
initActivities() {
const activities: Activity[] = [
{
id: 1,
title: '2023年度科技创新峰会',
description: '汇聚行业精英，探讨科技创新趋势与未来发展方向',
imageUrl: 'https://picsum.photos/400/300?random=1',
startTime: '2023-10-15',
endTime: '2023-10-17',
participants: 356,
category: 'offline',
status: 'ongoing'
},
{
id: 2,
title: '数字艺术线上展览',
description: '探索数字艺术的无限可能，足不出户欣赏艺术盛宴',
imageUrl: 'https://picsum.photos/400/300?random=2',
startTime: '2023-10-10',
endTime: '2023-11-10',
participants: 1243,
category: 'online',
status: 'ongoing'
},
{
id: 3,
title: '环保志愿者招募活动',
description: '一起参与环保行动，为城市绿化贡献一份力量',
imageUrl: 'https://picsum.photos/400/300?random=3',
startTime: '2023-10-20',
endTime: '2023-10-20',
participants: 89,
category: 'offline',
status: 'upcoming'
},
{
id: 4,
title: '现代艺术作品展',
description: '展示当代艺术家的最新创作，感受艺术的多元魅力',
imageUrl: 'https://picsum.photos/400/300?random=4',
startTime: '2023-10-05',
endTime: '2023-10-25',
participants: 752,
category: 'exhibition',
status: 'ongoing'
},
{
id: 5,
title: '人工智能前沿讲座',
description: '知名专家解析AI发展现状与未来应用场景',
imageUrl: 'https://picsum.photos/400/300?random=5',
startTime: '2023-10-22',
endTime: '2023-10-22',
participants: 156,
category: 'lecture',
status: 'upcoming'
},
{
id: 6,
title: '创意写作工作坊',
description: '提升写作技巧，激发创作灵感，适合各类写作爱好者',
imageUrl: 'https://picsum.photos/400/300?random=6',
startTime: '2023-10-18',
endTime: '2023-10-25',
participants: 68,
category: 'offline',
status: 'upcoming'
}
];
this.setData({
activities,
filteredActivities: activities
});
},
// 切换分类
switchCategory(e: { currentTarget: { dataset: { category: string } } }) {
const category = e.currentTarget.dataset.category;
this.setData({
currentCategory: category
}, () => {
this.filterActivities();
});
},
// 搜索输入变化
onSearchInput(e: { detail: { value: string } }) {
const keyword = e.detail.value.trim();
this.setData({
searchKeyword: keyword
}, () => {
this.filterActivities();
});
},
// 过滤活动列表
filterActivities() {
const { activities, currentCategory, searchKeyword } = this.data;
let filtered = [...activities];
// 按分类过滤
if (currentCategory !== 'all') {
filtered = filtered.filter(activity => activity.category === currentCategory);
}
// 按搜索关键词过滤
if (searchKeyword) {
const keyword = searchKeyword.toLowerCase();
filtered = filtered.filter(activity =>
activity.title.toLowerCase().includes(keyword) ||
activity.description.toLowerCase().includes(keyword)
);
}
this.setData({
filteredActivities: filtered
});
},
// 跳转到活动详情页
navigateToDetail(e: { currentTarget: { dataset: { id: number } } }) {
const id = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/activityDetail/activityDetail?id=${id}`
});
}
});

87
miniprogram/pages/activities/activities.wxml Normal file
View File

@@ -0,0 +1,87 @@
<view class="activity-list-container">
<!-- 页面标题 -->
<view class="page-header">
<text class="page-title">最新活动</text>
<text class="page-subtitle">{{filteredActivities.length}}个活动正在进行中</text>
</view>
<!-- 搜索框 -->
<view class="search-box">
<view class="search-icon">
<icon type="search" size="24" color="#999"></icon>
</view>
<input
class="search-input"
placeholder="搜索活动..."
value="{{searchKeyword}}"
bindinput="onSearchInput"
/>
</view>
<!-- 分类标签 -->
<view class="category-tabs">
<view
wx:for="{{categories}}"
wx:key="id"
class="category-tab {{currentCategory === item.id ? 'active' : ''}}"
bindtap="switchCategory"
data-category="{{item.id}}"
>
{{item.name}}
</view>
</view>
<!-- 活动列表 -->
<view class="activities-grid">
<view
wx:for="{{filteredActivities}}"
wx:key="id"
class="activity-card"
bindtap="navigateToDetail"
data-id="{{item.id}}"
>
<!-- 活动图片 -->
<view class="activity-image-container">
<image
class="activity-image"
src="{{item.imageUrl}}"
mode="widthFix"
lazy-load
></image>
<!-- 活动状态标签 -->
<view class="activity-tag {{item.status === 'ongoing' ? 'ongoing' : 'upcoming'}}">
{{item.status === 'ongoing' ? '进行中' : '即将开始'}}
</view>
</view>
<!-- 活动信息 -->
<view class="activity-info">
<text class="activity-title">{{item.title}}</text>
<!-- 时间信息 -->
<view class="activity-time">
<icon type="clock" size="16" color="#666"></icon>
<text class="time-text">
{{item.startTime}} - {{item.endTime}}
</text>
</view>
<!-- 活动简介 -->
<text class="activity-desc">{{item.description}}</text>
<!-- 参与人数 -->
<view class="activity-participants">
<icon type="group" size="16" color="#666"></icon>
<text class="participants-text">{{item.participants}}人已参与</text>
</view>
</view>
</view>
</view>
<!-- 空状态 -->
<view wx:if="{{filteredActivities.length === 0}}" class="empty-state">
<image src="/images/empty-activities.png" class="empty-image" mode="widthFix"></image>
<text class="empty-text">暂无相关活动</text>
</view>
</view>

207
miniprogram/pages/activities/activities.wxss Normal file
View File

@@ -0,0 +1,207 @@
/* 页面容器 */
.activity-list-container {
padding: 20rpx 30rpx;
background-color: #f8f9fa;
min-height: 100vh;
box-sizing: border-box;
}
/* 页面标题 */
.page-header {
margin-bottom: 30rpx;
text-align: center;
}
.page-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 10rpx;
display: inline-block;
}
.page-subtitle {
font-size: 24rpx;
color: #666;
}
/* 搜索框 */
.search-box {
display: flex;
align-items: center;
background-color: #fff;
border-radius: 60rpx;
padding: 15rpx 25rpx;
margin-bottom: 30rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}
.search-icon {
margin-right: 15rpx;
}
.search-input {
flex: 1;
font-size: 28rpx;
height: 50rpx;
line-height: 50rpx;
}
/* 分类标签 */
.category-tabs {
display: flex;
overflow-x: auto;
padding-bottom: 10rpx;
margin-bottom: 30rpx;
scrollbar-width: none; /* 隐藏滚动条 */
}
.category-tabs::-webkit-scrollbar {
display: none; /* 隐藏滚动条 */
}
.category-tab {
padding: 12rpx 30rpx;
background-color: #fff;
border-radius: 60rpx;
font-size: 26rpx;
color: #666;
margin-right: 15rpx;
white-space: nowrap;
box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.03);
}
.category-tab.active {
background-color: #51bdb6;
color: #fff;
}
/* 活动列表 */
.activities-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25rpx;
}
/* 活动卡片 */
.activity-card {
background-color: #fff;
border-radius: 18rpx;
overflow: hidden;
box-shadow: 0 3rpx 15rpx rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.activity-card:active {
transform: translateY(2rpx);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
}
/* 活动图片 */
.activity-image-container {
position: relative;
width: 100%;
}
.activity-image {
width: 100%;
height: 200rpx;
object-fit: cover;
}
/* 活动状态标签 */
.activity-tag {
position: absolute;
top: 15rpx;
right: 15rpx;
padding: 5rpx 15rpx;
border-radius: 20rpx;
font-size: 22rpx;
color: #fff;
}
.activity-tag.ongoing {
background-color: #51bdb6;
}
.activity-tag.upcoming {
background-color: #f5a623;
}
/* 活动信息 */
.activity-info {
padding: 20rpx;
}
.activity-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 15rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
/* 时间信息 */
.activity-time {
display: flex;
align-items: center;
margin-bottom: 12rpx;
font-size: 22rpx;
color: #666;
}
.time-text {
margin-left: 8rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 活动简介 */
.activity-desc {
font-size: 24rpx;
color: #999;
margin-bottom: 15rpx;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
}
/* 参与人数 */
.activity-participants {
display: flex;
align-items: center;
font-size: 22rpx;
color: #666;
}
.participants-text {
margin-left: 8rpx;
}
/* 空状态 */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 200rpx;
}
.empty-image {
width: 300rpx;
height: 300rpx;
margin-bottom: 30rpx;
}
.empty-text {
font-size: 28rpx;
color: #999;
}