caiyunyi/pages/eventRegistration/index.vue

<template>
  <div class="event-list-page">
    <!-- 活动列表 -->
    <div class="events-section">
      <div class="events-list" v-if="eventsList.length > 0">
        <div class="event-item" v-for="(event, index) in eventsList" :key="index" @click="goToDetail(event)">
          <div class="event-cover">
            <swiper>
              <swiper-item v-for="(item, imgIndex) in event.ImageList" :key="imgIndex">
                <image class="cover-image" :src="item.ImageUrl" mode="aspectFill" />
              </swiper-item>
            </swiper>

            <div class="event-status"
              :class="new Date(event.ACTIVITY_ENDDATE).getTime() < new Date().getTime() ? 'status-ended' : new Date(event.ACTIVITY_STARTDATE).getTime() < new Date().getTime() ? 'status-draft' : 'status-active'">
              <!-- :class="[
              event.ACTIVITY_STATE === 'active' ? 'status-active' :
              (event.ACTIVITY_STATE === 'ended' ? 'status-ended' : 'status-draft')
              ]" -->
              {{ getStatusText(event) }}
            </div>
          </div>

          <div class="event-content">
            <div class="event-title">{{ event.ACTIVITY_NAME }}</div>

            <div class="event-info">
              <div class="info-item">
                <span class="info-icon">📅</span>
                <span class="info-text">{{ event.ACTIVITY_STARTDATE ? event.ACTIVITY_STARTDATE : ""
                }}{{ event.ACTIVITY_ENDDATE ? `-` + event.ACTIVITY_ENDDATE : "" }}</span>
              </div>
              <div class="info-item">
                <span class="info-icon">📍</span>
                <span class="info-text">{{ event.ACTIVITY_LOCATION }}</span>
              </div>
            </div>

            <div class="event-footer">
              <div class="participation-info">
                <div class="current-participants">
                  已报名：{{ event.currentParticipants || 0 }}人
                </div>
                <div class="max-participants">
                  限：{{ event.MAXIMUM_CAPACITY || '不限' }}人
                </div>
              </div>
              <div class="action-btn action-normal">立即报名</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div class="empty-state" v-else>
        <div class="empty-icon">📅</div>
        <div class="empty-title">暂无活动</div>
        <div class="empty-desc">敬请期待更多精彩活动</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventsList: [],
    };
  },
  onLoad() {
    this.loadEventsList();
  },
  onPullDownRefresh() {
    this.loadEventsList();
  },
  methods: {
    // 加载活动列表
    async loadEventsList() {
      const req = {
        SearchParameter: {
          // ACTIVITY_ENDDATE_Start: params.ACTIVITY_ENDDATE_Start,
          // ACTIVITY_STARTDATE_End: params.ACTIVITY_STARTDATE_End,
          // SERVERPART_IDS: params?.SERVERPART_IDS,
          PROVINCE_CODE: "530000",
          ACTIVITY_STATES: 1
        },
        PageIndex: 1,
        PageSize: 999999,
        type: 'encryption'
      }

      uni.showLoading({
        title: '加载中...',
        mask: true
      });

      const data = await this.$api.$posMemberPost("/Member/GetACTIVITYList", req)

      uni.hideLoading();
      let list = data.Result_Data.List
      this.eventsList = list;
      console.log('活动列表sda', list);
    },

    // 跳转到活动详情
    goToDetail(event) {
      uni.navigateTo({
        url: `/pages/eventRegistration/detail?id=${event.ACTIVITY_ID}`
      });
    },

    // 获取活动状态文本
    getStatusText(status) {
      if (new Date(status.ACTIVITY_ENDDATE).getTime() < new Date().getTime()) {
        return '已结束'
      } else if (new Date(status.ACTIVITY_STARTDATE).getTime() < new Date().getTime()) {
        return '已开始'
      } else {
        return '报名中'
      }
    }
  }
};
</script>

<style scoped lang="less">
.event-list-page {
  width: 100vw;
  min-height: 100vh;
  background: #f8f8f8;
  overflow-y: auto;

  .events-section {
    width: 100%;
    box-sizing: border-box;
    padding: 32rpx;

    .events-list {
      .event-item {
        background: white;
        border-radius: 24rpx;
        margin-bottom: 32rpx;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        overflow: hidden;
        transition: all 0.3s ease;

        &:active {
          transform: scale(0.98);
          box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
        }

        .event-cover {
          position: relative;
          width: 100%;
          height: 300rpx;
          overflow: hidden;

          .cover-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .event-status {
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            padding: 12rpx 24rpx;
            border-radius: 20rpx;
            font-size: 24rpx;
            font-weight: 500;

            &.status-active {
              background: rgba(34, 197, 94, 0.9);
              color: white;
            }

            &.status-ended {
              background: rgba(107, 114, 128, 0.9);
              color: white;
            }

            &.status-draft {
              background: rgba(251, 146, 60, 0.9);
              color: white;
            }
          }
        }

        .event-content {
          padding: 16rpx 24rpx;

          .event-title {
            font-size: 28rpx;
            font-weight: 600;
            color: #1f2937;
            line-height: 1.4;
            margin-bottom: 24rpx;
          }

          .event-info {
            margin-bottom: 16rpx;

            .info-item {
              display: flex;
              align-items: center;
              margin-bottom: 16rpx;

              &:last-child {
                margin-bottom: 0;
              }

              .info-icon {
                font-size: 24rpx;
                margin-right: 12rpx;
                width: 32rpx;
                text-align: center;
              }

              .info-text {
                font-size: 24rpx;
                color: #6b7280;
                line-height: 1.4;
              }
            }
          }

          .event-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 16rpx;
            border-top: 1rpx solid #f0f0f0;

            .participation-info {
              .current-participants {
                font-size: 24rpx;
                color: #374151;
                margin-bottom: 8rpx;
              }

              .max-participants {
                font-size: 24rpx;
                color: #9ca3af;
              }
            }

            .action-btn {
              padding: 16rpx 32rpx;
              border-radius: 40rpx;
              font-size: 24rpx;
              font-weight: 500;
              transition: all 0.3s ease;

              &.action-normal {
                background: linear-gradient(135deg, #22c55e, #16a34a);
                color: white;

                &:active {
                  opacity: 0.9;
                }
              }

              &.action-registered {
                background: #dcfce7;
                color: #15803d;
                border: 2rpx solid #bbf7d0;
              }

              &.action-full {
                background: #f3f4f6;
                color: #9ca3af;
                border: 2rpx solid #e5e7eb;
              }

              &.action-disabled {
                background: #f9fafb;
                color: #d1d5db;
                border: 2rpx solid #f3f4f6;
              }
            }
          }
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 200rpx 40rpx;

      .empty-icon {
        font-size: 120rpx;
        margin-bottom: 32rpx;
        opacity: 0.3;
      }

      .empty-title {
        font-size: 32rpx;
        color: #6b7280;
        margin-bottom: 16rpx;
        font-weight: 500;
      }

      .empty-desc {
        font-size: 26rpx;
        color: #9ca3af;
        line-height: 1.5;
      }
    }
  }
}

.event-list-page::-webkit-scrollbar {
  display: none;
}
</style>