buddhism/pages/activity/activity.vue

<template>
  <view class="page">
    <custom-navbar title="寺庙活动" />
    <view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
      <!-- 状态展示 -->
      <status-display
          v-if="loading"
          type="loading"
          loading-text="加载中..."
      />
      
      <!-- 活动卡片列表 -->
      <view class="activity-list">
        <activity-card
          v-for="activity in activityList"
          :key="activity.id"
          :activity="activity"
          :show-title="true"
          @card-click="handleCardClick"
          @register="handleRegister"
        />
      </view>
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import { ACTIVITY_STATUS, ACTIVITY_TYPE } from "../../enum/activity";
import StatusDisplay from "../../components/status-display/status-display.vue";
import ActivityCard from "../../components/activity-card/activity-card.vue";

export default {
  components: {
    StatusDisplay,
    ActivityCard
  },
  data() {
    return {
      CommonEnum,
      loading: false,
      activityList: [
        {
          id: '1',
          name: '初一祈福',
          theme: '活动主题: 初一祈福,诸事圆满,心生欢喜',
          type: ACTIVITY_TYPE.PRAYER,
          status: ACTIVITY_STATUS.REGISTERING,
          time: '2025年10月03日 周四 10:00~11:00',
          location: '福建省泉州市惠安县西北街北门小坪顶',
          backgroundImage: '/static/image/a1.png'
        },
        {
          id: '2',
          name: '腊八福粥 随缘随喜',
          theme: '活动主题: 腊八福粥,随缘随喜',
          type: ACTIVITY_TYPE.CEREMONY,
          status: ACTIVITY_STATUS.REGISTERING,
          time: '2025年10月03日 周四 10:00~11:00',
          location: '福建省泉州市惠安县西北街北门小坪顶',
          backgroundImage: '/static/image/a2.png'
        },
        {
          id: '3',
          name: '佛诞节法会',
          theme: '活动主题: 庆祝佛陀诞辰,弘扬佛法',
          type: ACTIVITY_TYPE.CEREMONY,
          status: ACTIVITY_STATUS.ONGOING,
          time: '2025年10月15日 周三 09:00~12:00',
          location: '福建省泉州市惠安县西北街北门小坪顶',
          backgroundImage: '/static/image/a3.png'
        },
        {
          id: '4',
          name: '禅修体验',
          theme: '活动主题: 静心禅修,寻找内心平静',
          type: ACTIVITY_TYPE.MEDITATION,
          status: ACTIVITY_STATUS.FINISHED,
          time: '2025年09月20日 周六 14:00~16:00',
          location: '福建省泉州市惠安县西北街北门小坪顶',
          backgroundImage: '/static/image/a4.png'
        },
        {
          id: '5',
          name: '慈善捐赠',
          theme: '活动主题: 慈悲为怀,广种福田',
          type: ACTIVITY_TYPE.DONATION,
          status: ACTIVITY_STATUS.REGISTERING,
          time: '2025年10月25日 周六 09:00~17:00',
          location: '福建省泉州市惠安县西北街北门小坪顶',
          backgroundImage: '/static/image/a5.png'
        }
      ]
    }
  },
  onLoad() {
    // 页面加载时获取数据
    this.loadPageData()
  },
  methods: {
    // 加载页面数据
    async loadPageData() {
      this.loading = true
      try {
        // TODO: 调用页面数据API
        // const response = await getPageData()
        // this.activityList = response.data
        // 模拟加载
        setTimeout(() => {
          this.loading = false
        }, 1000)
      } catch (error) {
        console.error('获取页面数据失败:', error)
        this.loading = false
      }
    },
    
    // 处理卡片点击
    handleCardClick(activity) {
      console.log('点击活动卡片:', activity)
      // TODO: 跳转到活动详情页
      uni.showToast({
        title: '活动详情功能开发中',
        icon: 'none'
      })
    },
    
    // 处理报名
    handleRegister(activity) {
      console.log('报名活动:', activity)
      uni.showModal({
        title: '确认报名',
        content: `确定要报名参加"${activity.name}"活动吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '报名成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

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

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

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