buddhism/components/activity-card/README.md

# ActivityCard 活动卡片组件

## 组件描述

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

## 功能特性

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

## 使用方法

### 基础用法

```vue
<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>
```

### 不显示报名按钮

```vue
<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 对象结构

```javascript
{
  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 的间距