添加活动列表页面

miniprogram/app.json

@@ -11,7 +11,8 @@
     "pages/notifications/notifications",
     "pages/setting/setting",
     "pages/opinion/opinion",
-    "pages/helpcenter/helpcenter"
+    "pages/helpcenter/helpcenter",
+    "pages/activities/activities"
   ],
   "window": {
     "navigationBarTextStyle": "black",

miniprogram/pages/activities/activities.json

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

miniprogram/pages/activities/activities.ts

@@ -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}`
+    });
+  }
+});
+    

miniprogram/pages/activities/activities.wxml

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

miniprogram/pages/activities/activities.wxss

@@ -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;
+}
+    

miniprogram/pages/user/user.wxml

@@ -50,7 +50,7 @@
         <view class="function-icon">
           <t-icon name="article" size="40rpx" />
         </view>
-        <view class="function-name">我的订单</view>
+        <view class="function-name">我的兑换</view>
       </view>
       <view class="function-item" bind:tap="gotoAddress">
         <view class="function-icon">
@@ -104,7 +104,7 @@
 
         <t-divider />
 
-  <t-cell title="最新活动" leftIcon="logout" hover arrow  class="redicon"/>
+  <t-cell title="最新活动" leftIcon="logout" hover arrow  class="redicon" url="/pages/activities/activities"/>
   
 </t-cell-group>
     <!-- 底部区域 -->