buddhism/components/activity-card

ActivityCard 活动卡片组件

组件描述

ActivityCard 是一个用于展示寺庙活动信息的卡片组件，支持多种活动状态和类型，每个卡片都可以显示独立的标题。

功能特性

• 🎨 美观的卡片设计，支持背景图片
• 📊 多种活动状态显示（报名中、进行中、已结束）
• 🏷️ 支持不同活动类型（祈福、法会、禅修、捐赠、义工）
• 📱 响应式设计，适配移动端
• 🎯 支持点击事件和报名功能
• 📝 支持卡片标题显示

使用方法

基础用法

<template>
  <activity-card
    :activity="activityData"
    :show-title="true"
    :show-register-button="true"
    @card-click="handleCardClick"
    @register="handleRegister"
  />
</template>

<script>
  import ActivityCard from '@/components/activity-card/activity-card.vue'

  export default {
    components: {
      ActivityCard,
    },
    data() {
      return {
        activityData: {
          id: '1',
          name: '初一祈福',
          theme: '活动主题: 初一祈福,诸事圆满,心生欢喜',
          type: 'prayer',
          status: 'registering',
          time: '2025年10月03日 周四 10:00~11:00',
          location: '福建省泉州市惠安县西北街北门小坪顶',
          backgroundImage: '/static/image/a1.png',
        },
      }
    },
    methods: {
      handleCardClick(activity) {
        console.log('点击活动卡片:', activity)
      },
      handleRegister(activity) {
        console.log('报名活动:', activity)
      },
    },
  }
</script>

不显示报名按钮

<template>
  <activity-card
    :activity="activityData"
    :show-title="true"
    :show-register-button="false"
    @card-click="handleCardClick"
  />
</template>

Props

参数	类型	必填	默认值	说明
activity	Object	是	-	活动数据对象
showTitle	Boolean	否	true	是否显示卡片标题
showRegisterButton	Boolean	否	true	是否显示报名按钮

activity 对象结构

{
  id: String,           // 活动ID
  name: String,         // 活动名称（同时作为卡片标题）
  theme: String,        // 活动主题（可选）
  type: String,         // 活动类型：prayer/ceremony/meditation/donation/volunteer
  status: String,       // 活动状态：registering/ongoing/finished
  time: String,         // 活动时间（可选）
  location: String,     // 活动地点（可选）
  backgroundImage: String // 背景图片（可选，会自动使用默认图片）
}

Events

事件名	参数	说明
card-click	activity	点击卡片时触发
register	activity	点击报名按钮时触发

活动状态

状态值	显示文本	样式
registering	正在报名中	金色背景
ongoing	进行中	绿色背景
finished	已结束	灰色背景

活动类型

类型值	显示文本	默认背景图
prayer	祈福活动	a1.png
ceremony	法会活动	a2.png
meditation	禅修活动	a3.png
donation	捐赠活动	a4.png
volunteer	义工活动	a5.png

样式定制

组件使用 SCSS 编写，支持样式定制。主要样式类：

• .activity-card-container - 卡片容器（包含标题和卡片）
• .card-title - 卡片标题区域
• .title-text - 标题文本样式
• .activity-card - 卡片主体
• .card-background - 背景图片容器
• .card-content - 内容区域
• .activity-theme - 活动主题
• .activity-name - 活动名称
• .activity-status - 活动状态
• .activity-time - 活动时间
• .activity-location - 活动地点
• .register-button - 报名按钮

布局结构

activity-card-container
├── card-title (可选)
│   └── title-text
└── activity-card
    ├── card-background
    │   ├── background-image
    │   └── overlay
    └── card-content
        ├── activity-theme
        ├── activity-name
        ├── activity-status
        ├── activity-time
        ├── activity-location
        └── register-button

注意事项

1. 组件会自动根据活动类型选择默认背景图片
2. 只有状态为 registering 的活动才会显示报名按钮
3. 时间、地点、主题等字段为可选，不传则不显示对应区域
4. 卡片标题使用活动名称，可通过 showTitle 属性控制显示
5. 组件高度固定为 370rpx，宽度为 684rpx，可根据需要调整样式
6. 标题区域与卡片之间有 20rpx 的间距