153 lines
4.3 KiB
Markdown
153 lines
4.3 KiB
Markdown
# ActivityCard 活动卡片组件
|
||
|
||
## 组件描述
|
||
|
||
ActivityCard 是一个用于展示寺庙活动信息的卡片组件，支持多种活动状态和类型，每个卡片都可以显示独立的标题。
|
||
|
||
## 功能特性
|
||
|
||
- 🎨 美观的卡片设计，支持背景图片
|
||
- 📊 多种活动状态显示（报名中、进行中、已结束）
|
||
- 🏷️ 支持不同活动类型（祈福、法会、禅修、捐赠、义工）
|
||
- 📱 响应式设计，适配移动端
|
||
- 🎯 支持点击事件和报名功能
|
||
- 📝 支持卡片标题显示
|
||
|
||
## 使用方法
|
||
|
||
### 基础用法
|
||
|
||
```vue
|
||
<template>
|
||
<activity-card
|
||
:activity="activityData"
|
||
:show-title="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>
|
||
```
|
||
|
||
## Props
|
||
|
||
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|
||
|------|------|------|--------|------|
|
||
| activity | Object | 是 | - | 活动数据对象 |
|
||
| showTitle | 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 的间距 |