diff --git a/components/activity-card/README.md b/components/activity-card/README.md new file mode 100644 index 0000000..1091f39 --- /dev/null +++ b/components/activity-card/README.md @@ -0,0 +1,153 @@ +# ActivityCard 活动卡片组件 + +## 组件描述 + +ActivityCard 是一个用于展示寺庙活动信息的卡片组件,支持多种活动状态和类型,每个卡片都可以显示独立的标题。 + +## 功能特性 + +- 🎨 美观的卡片设计,支持背景图片 +- 📊 多种活动状态显示(报名中、进行中、已结束) +- 🏷️ 支持不同活动类型(祈福、法会、禅修、捐赠、义工) +- 📱 响应式设计,适配移动端 +- 🎯 支持点击事件和报名功能 +- 📝 支持卡片标题显示 + +## 使用方法 + +### 基础用法 + +```vue + + + +``` + +## 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 的间距 \ No newline at end of file diff --git a/components/activity-card/activity-card.vue b/components/activity-card/activity-card.vue new file mode 100644 index 0000000..85ec765 --- /dev/null +++ b/components/activity-card/activity-card.vue @@ -0,0 +1,288 @@ + + + + + \ No newline at end of file diff --git a/enum/activity.js b/enum/activity.js new file mode 100644 index 0000000..4c1b412 --- /dev/null +++ b/enum/activity.js @@ -0,0 +1,65 @@ +// 活动状态枚举 +export const ACTIVITY_STATUS = { + REGISTERING: 'registering', // 正在报名中 + ONGOING: 'ongoing', // 进行中 + FINISHED: 'finished' // 已结束 +} + +// 活动状态文本映射 +export const ACTIVITY_STATUS_TEXT = { + [ACTIVITY_STATUS.REGISTERING]: '正在报名中', + [ACTIVITY_STATUS.ONGOING]: '进行中', + [ACTIVITY_STATUS.FINISHED]: '已结束' +} + +// 活动状态样式类映射 +export const ACTIVITY_STATUS_CLASS = { + [ACTIVITY_STATUS.REGISTERING]: 'status-registering', + [ACTIVITY_STATUS.ONGOING]: 'status-ongoing', + [ACTIVITY_STATUS.FINISHED]: 'status-finished' +} + +// 活动类型枚举 +export const ACTIVITY_TYPE = { + PRAYER: 'prayer', // 祈福活动 + CEREMONY: 'ceremony', // 法会活动 + MEDITATION: 'meditation', // 禅修活动 + DONATION: 'donation', // 捐赠活动 + VOLUNTEER: 'volunteer' // 义工活动 +} + +// 活动类型文本映射 +export const ACTIVITY_TYPE_TEXT = { + [ACTIVITY_TYPE.PRAYER]: '祈福活动', + [ACTIVITY_TYPE.CEREMONY]: '法会活动', + [ACTIVITY_TYPE.MEDITATION]: '禅修活动', + [ACTIVITY_TYPE.DONATION]: '捐赠活动', + [ACTIVITY_TYPE.VOLUNTEER]: '义工活动' +} + +// 默认活动背景图片 +export const DEFAULT_ACTIVITY_IMAGES = { + [ACTIVITY_TYPE.PRAYER]: '/static/image/a1.png', + [ACTIVITY_TYPE.CEREMONY]: '/static/image/a2.png', + [ACTIVITY_TYPE.MEDITATION]: '/static/image/a3.png', + [ACTIVITY_TYPE.DONATION]: '/static/image/a4.png', + [ACTIVITY_TYPE.VOLUNTEER]: '/static/image/a5.png' +} + +// 活动卡片配置 +export const ACTIVITY_CARD_CONFIG = { + HEIGHT: 600, // 卡片高度(rpx) + BORDER_RADIUS: 20, // 圆角(rpx) + PADDING: 30, // 内边距(rpx) + MARGIN_BOTTOM: 30 // 底部间距(rpx) +} + +export default { + ACTIVITY_STATUS, + ACTIVITY_STATUS_TEXT, + ACTIVITY_STATUS_CLASS, + ACTIVITY_TYPE, + ACTIVITY_TYPE_TEXT, + DEFAULT_ACTIVITY_IMAGES, + ACTIVITY_CARD_CONFIG +} \ No newline at end of file diff --git a/pages.json b/pages.json index 7f61ee2..ffecedd 100644 --- a/pages.json +++ b/pages.json @@ -118,6 +118,15 @@ "enablePullDownRefresh": false, "navigationStyle": "custom" } + }, + { + "path" : "pages/activity/activity", + "style" : + { + "navigationBarTitleText": "", + "enablePullDownRefresh": false, + "navigationStyle": "custom" + } } ], diff --git a/pages/activity/activity.vue b/pages/activity/activity.vue new file mode 100644 index 0000000..1e91126 --- /dev/null +++ b/pages/activity/activity.vue @@ -0,0 +1,173 @@ + + + + + \ No newline at end of file