buddhism/pages/activity/activity.vue

<template>
  <view class="page">
    <custom-navbar ref="customNavbar" title="寺庙活动" />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <!-- 状态展示 -->
      <status-display v-if="loading" loading-text="加载中..." type="loading" />

      <!-- 错误状态 -->
      <status-display
        v-if="error"
        :error-text="error"
        type="error"
        @retry="loadPageData"
      />

      <!-- 空状态 -->
      <status-display
        v-if="!loading && !error && activityList.length === 0"
        empty-text="暂无活动"
        type="empty"
      />

      <!-- 活动卡片列表 -->
      <view
        v-if="!loading && !error && activityList.length > 0"
        class="activity-list"
      >
        <activity-card
          v-for="activity in activityList"
          :key="activity.id"
          :activity="activity"
          :show-title="true"
          @register="handleRegister"
          @card-click="handleCardClick"
        />
      </view>
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import StatusDisplay from "../../components/status-display/status-display.vue";
import ActivityCard from "../../components/activity-card/activity-card.vue";
import activityApi from "../../api/activity/activity.js";
import activityFormatter from "../../utils/activity-data-formatter.js";
import { checkLogin } from "../../composables/goToLogin";

export default {
  components: {
    StatusDisplay,
    ActivityCard,
  },
  data() {
    return {
      CommonEnum,
      loading: false,
      error: "",
      activityList: [],
      // 分页参数
      pageNum: 1,
      pageSize: 20,
      hasMore: true,
    };
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadPageData();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.refreshData();
  },
  // 上拉加载更多
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMoreData();
    }
  },
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.loading = true;
      this.error = "";

      try {
        const response = await activityApi.getActivityList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        });

        if (response.code === 200 && response.data) {
          // 格式化数据
          const formattedData = activityFormatter.formatActivityList(
            response.data,
          );
          this.activityList = formattedData;

          // 判断是否还有更多数据
          this.hasMore = response.data.length >= this.pageSize;
        } else {
          this.error = response.msg || "获取活动列表失败";
        }
      } catch (error) {
        console.error("获取活动列表失败:", error);
        this.error = "网络错误，请稍后重试";
      } finally {
        this.loading = false;
        uni.stopPullDownRefresh();
      }
    },

    // 刷新数据
    async refreshData() {
      this.pageNum = 1;
      this.hasMore = true;
      await this.loadPageData();
    },

    // 加载更多数据
    async loadMoreData() {
      if (!this.hasMore || this.loading) return;

      this.loading = true;
      try {
        const nextPage = this.pageNum + 1;
        const response = await activityApi.getActivityList({
          pageNum: nextPage,
          pageSize: this.pageSize,
        });

        if (response.code === 200 && response.data) {
          const formattedData = activityFormatter.formatActivityList(
            response.data,
          );
          this.activityList = [...this.activityList, ...formattedData];
          this.pageNum = nextPage;
          this.hasMore = response.data.length >= this.pageSize;
        } else {
          this.hasMore = false;
        }
      } catch (error) {
        console.error("加载更多活动失败:", error);
        this.hasMore = false;
      } finally {
        this.loading = false;
      }
    },

    // 处理卡片点击
    handleCardClick(activity) {
      console.log("点击活动卡片:", activity);
      // 跳转到活动详情页
      uni.navigateTo({
        url: `/pages/activity/activityDetail?actId=${activity.id}`,
      });
    },

    // 处理报名
    handleRegister(activity) {
      if (!checkLogin()) {
        return;
      }
      console.log("报名活动:", activity);

      // 直接跳转到活动报名页面
      uni.navigateTo({
        url: `/pages/activity/application?actId=${activity.id}`,
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #faf8f3;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 34rpx 40rpx 34rpx;
}

.activity-list {
  margin-top: 34rpx;
  width: 100%;
  align-items: center;
  flex-direction: column;
  //border: red 1rpx solid;
}
</style>