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 的间距
|