xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/my-activities.vue

<template>
  <view class="my-activities-page">
    <view class="status-bar-placeholder" :style="{height: statusBarHeight + 'px', backgroundColor: '#FCE4EC'}"></view>
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <view class="navbar-title">我的活动</view>
      <view class="navbar-right"></view>
    </view>

    <!-- 活动列表 -->
    <view class="activity-grid">
      <view class="activity-card" v-for="(item, index) in activityList" :key="index"
        @click="goToDetail(item.id)">
        <image :src="item.cover_image" class="activity-image" mode="aspectFill"></image>
        <view class="activity-info">
          <view class="activity-name">{{ item.name }}</view>
          <view class="activity-meta">
            <text class="activity-location">📍 {{ item.location }}</text>
          </view>
          <view class="activity-footer">
            <view class="activity-points">
              <text class="points-symbol">💎</text>
              <text class="points-value">{{ item.points }}</text>
            </view>
            <text class="activity-participants">{{ item.participants || 0 }}人参加</text>
          </view>
          <view class="activity-btn" @click.stop="goToDetail(item.id)">查看详情</view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="activityList.length === 0 && !loading">
      <image src="https://img.icons8.com/color/96/000000/calendar--v1.png" class="empty-icon"></image>
      <text class="empty-text">暂无报名活动</text>
      <text class="empty-subtext">快去报名参加更多精彩活动吧</text>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore">
      <text class="load-text">{{ loading ? '加载中...' : '上拉加载更多' }}</text>
    </view>
    <view class="no-more" v-else-if="activityList.length > 0">
      <text class="no-more-text">没有更多了</text>
    </view>
  </view>
</template>

<script>
import api from '../../utils/api.js'
export default {
  data() {
    return {
      statusBarHeight: 0,
      activityList: [],
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      loading: false,
      // 模拟数据，当API返回为空时使用
      mockActivities: [
        {
          id: 1,
          name: '姻缘一线牵·大型相亲会',
          location: '雄安新区',
          points: 299,
          participants: 18,
          cover_image: 'https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
        },
        {
          id: 2,
          name: '一期一会·红娘心得分享',
          location: '北京',
          points: 389,
          participants: 54,
          cover_image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'
        }
      ]
    }
  },

  onLoad() {
    // 获取状态栏高度
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    this.loadMyActivityList()
  },

  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.pageNum++
      this.loadMyActivityList()
    }
  },

  methods: {
    // 加载我的活动列表
    async loadMyActivityList() {
      if (this.loading) return
      this.loading = true

      try {
        const userInfo = uni.getStorageSync('userInfo')
        const testUserId = 19
        const userId = userInfo && userInfo.userId ? userInfo.userId : testUserId
        
        const data = await api.activity.getMyActivities({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          userId: userId
        })

        if (data && data.length > 0) {
          this.activityList = [...this.activityList, ...data]
          this.hasMore = data.length >= this.pageSize
        } else {
          // 如果API返回为空，使用模拟数据
          this.hasMore = false
          if (this.pageNum === 1) {
            this.activityList = this.mockActivities
          }
        }
      } catch (error) {
    
        // 当API调用失败时，使用模拟数据
        if (this.pageNum === 1) {
          this.activityList = this.mockActivities
        }
        this.hasMore = false
      } finally {
        this.loading = false
      }
    },

    // 跳转到详情
    goToDetail(id) {
      uni.navigateTo({
        url: `/pages/activities/detail?id=${id}`
      })
    },

    // 返回
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
  .my-activities-page {
    min-height: 100vh;
    background-color: #FFF9F9;
    padding-top: 120rpx;
  }

  /* 状态栏占位符 */
  .status-bar-placeholder {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
  }

  /* 自定义导航栏 */
  .custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120rpx;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 30rpx 25rpx;
    background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
    z-index: 999;

    .navbar-left,
    .navbar-right {
      width: 80rpx;
    }

    .back-icon {
      font-size: 40rpx;
      color: #333333;
      font-weight: bold;
    }

    .navbar-title {
      flex: 1;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }
  }

  /* 活动列表 - 两列布局 */
  .activity-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
    padding: 20rpx;

    .activity-card {
      position: relative;
      background-color: #FFFFFF;
      border-radius: 20rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

      .activity-image {
        width: 100%;
        height: 240rpx;
        background-color: #F5F5F5;
      }

      .activity-info {
        padding: 20rpx;

        .activity-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333333;
          margin-bottom: 10rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .activity-meta {
          margin-bottom: 15rpx;

          .activity-location {
            font-size: 24rpx;
            color: #666666;
          }
        }

        .activity-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15rpx;

          .activity-points {
            display: flex;
            align-items: center;

            .points-symbol {
              font-size: 24rpx;
              margin-right: 5rpx;
            }

            .points-value {
              font-size: 26rpx;
              color: #FF6B8A;
              font-weight: bold;
            }
          }

          .activity-participants {
            font-size: 22rpx;
            color: #999999;
          }
        }

        .activity-btn {
          width: 100%;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #9C27B0;
          color: #FFFFFF;
          border-radius: 30rpx;
          font-size: 26rpx;
        }
      }
    }
  }

  /* 空状态 */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;

    .empty-icon {
      width: 120rpx;
      height: 120rpx;
      opacity: 0.5;
      margin-bottom: 20rpx;
    }

    .empty-text {
      font-size: 32rpx;
      color: #666666;
      margin-bottom: 10rpx;
    }

    .empty-subtext {
      font-size: 26rpx;
      color: #999999;
    }
  }

  /* 加载更多 */
  .load-more,
  .no-more {
    padding: 30rpx 0;
    text-align: center;

    .load-text,
    .no-more-text {
      font-size: 24rpx;
      color: #999999;
    }
  }
</style>