活动列表静态界面
This commit is contained in:
minimaxagent1
parent
359d24fa67
commit
720a6d34f5
153
components/activity-card/README.md
Normal file
153
components/activity-card/README.md
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
# 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 的间距
|
||||||
288
components/activity-card/activity-card.vue
Normal file
288
components/activity-card/activity-card.vue
Normal file
|
|
@ -0,0 +1,288 @@
|
||||||
|
<template>
|
||||||
|
<view class="activity-card-container">
|
||||||
|
<!-- 卡片标题 -->
|
||||||
|
<view class="card-title" v-if="showTitle">
|
||||||
|
<text class="title-text">{{ activity.name }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 活动卡片 -->
|
||||||
|
<view class="activity-card" @click="handleCardClick">
|
||||||
|
<view class="card-background">
|
||||||
|
<image class="background-image" :src="activity.backgroundImage || getDefaultImage()" mode="aspectFill" />
|
||||||
|
<view class="overlay"></view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="card-content">
|
||||||
|
<!-- 活动主题 -->
|
||||||
|
<view class="activity-theme" v-if="activity.theme">
|
||||||
|
<text class="theme-text">{{ activity.theme }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 活动名称 -->
|
||||||
|
<view class="activity-name">
|
||||||
|
<text class="name-text">{{ activity.name }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 活动状态 -->
|
||||||
|
<view class="activity-status">
|
||||||
|
<text class="status-text" :class="getStatusClass(activity.status)">
|
||||||
|
{{ getStatusText(activity.status) }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 活动时间 -->
|
||||||
|
<view class="activity-time" v-if="activity.time">
|
||||||
|
<text class="time-label">活动时间:</text>
|
||||||
|
<text class="time-text">{{ activity.time }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="line-button">
|
||||||
|
<!-- 水平分割线 -->
|
||||||
|
<view class="divider-line"></view>
|
||||||
|
<!-- 报名按钮 -->
|
||||||
|
<view class="register-button" @click.stop="handleRegister" v-if="activity.status === ACTIVITY_STATUS.REGISTERING">
|
||||||
|
<text class="button-text">立即报名</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 活动地点 -->
|
||||||
|
<view class="activity-location" v-if="activity.location">
|
||||||
|
<text class="location-label">地点:</text>
|
||||||
|
<text class="location-text">{{ activity.location }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ACTIVITY_STATUS, ACTIVITY_STATUS_TEXT, ACTIVITY_STATUS_CLASS, DEFAULT_ACTIVITY_IMAGES } from '../../enum/activity.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'ActivityCard',
|
||||||
|
props: {
|
||||||
|
activity: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => ({
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
theme: '',
|
||||||
|
type: 'prayer',
|
||||||
|
status: ACTIVITY_STATUS.REGISTERING,
|
||||||
|
time: '',
|
||||||
|
location: '',
|
||||||
|
backgroundImage: ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
showTitle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ACTIVITY_STATUS
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 获取状态文本
|
||||||
|
getStatusText(status) {
|
||||||
|
return ACTIVITY_STATUS_TEXT[status] || '未知状态'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取状态样式类
|
||||||
|
getStatusClass(status) {
|
||||||
|
return ACTIVITY_STATUS_CLASS[status] || ''
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取默认背景图片
|
||||||
|
getDefaultImage() {
|
||||||
|
return DEFAULT_ACTIVITY_IMAGES[this.activity.type] || '/static/image/a1.png'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理卡片点击
|
||||||
|
handleCardClick() {
|
||||||
|
this.$emit('card-click', this.activity)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理报名
|
||||||
|
handleRegister() {
|
||||||
|
this.$emit('register', this.activity)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.activity-card-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-card {
|
||||||
|
width: 684rpx;
|
||||||
|
height: 370rpx;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.card-background {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.background-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-content {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
height: 100%;
|
||||||
|
padding: 40rpx 30rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.activity-theme {
|
||||||
|
.theme-text {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-name {
|
||||||
|
.name-text {
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin: 10rpx 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-status {
|
||||||
|
.status-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
padding: 8rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&.status-registering {
|
||||||
|
color: #FFD700;
|
||||||
|
background: rgba(255, 215, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-ongoing {
|
||||||
|
color: #4CAF50;
|
||||||
|
background: rgba(76, 175, 80, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.status-finished {
|
||||||
|
color: #9E9E9E;
|
||||||
|
background: rgba(158, 158, 158, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-time {
|
||||||
|
flex-direction: column; /* 改为垂直排列 */
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
.time-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line-button{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
.divider-line {
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.3); /* 上边框作为分隔线 */
|
||||||
|
width: 404rpx;
|
||||||
|
}
|
||||||
|
.register-button {
|
||||||
|
width: 132rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: rgba(255, 255, 255, 0.9);
|
||||||
|
border-radius: 30rpx;
|
||||||
|
|
||||||
|
.button-text {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 400;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: auto; /* 移除固定宽度 */
|
||||||
|
padding: 0 20rpx; /* 左右对称留白 */
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.activity-location {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
|
||||||
|
.location-label {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
65
enum/activity.js
Normal file
65
enum/activity.js
Normal file
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
@ -118,6 +118,15 @@
|
||||||
"enablePullDownRefresh": false,
|
"enablePullDownRefresh": false,
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path" : "pages/activity/activity",
|
||||||
|
"style" :
|
||||||
|
{
|
||||||
|
"navigationBarTitleText": "",
|
||||||
|
"enablePullDownRefresh": false,
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
|
||||||
173
pages/activity/activity.vue
Normal file
173
pages/activity/activity.vue
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
<template>
|
||||||
|
<view class="page">
|
||||||
|
<custom-navbar title="寺庙活动" />
|
||||||
|
<view class="header" :style="{ backgroundColor: CommonEnum.BASE_COLOR }">
|
||||||
|
<!-- 状态展示 -->
|
||||||
|
<status-display
|
||||||
|
v-if="loading"
|
||||||
|
type="loading"
|
||||||
|
loading-text="加载中..."
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- 活动卡片列表 -->
|
||||||
|
<view class="activity-list">
|
||||||
|
<activity-card
|
||||||
|
v-for="activity in activityList"
|
||||||
|
:key="activity.id"
|
||||||
|
:activity="activity"
|
||||||
|
:show-title="true"
|
||||||
|
@card-click="handleCardClick"
|
||||||
|
@register="handleRegister"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import CommonEnum from "../../enum/common";
|
||||||
|
import { ACTIVITY_STATUS, ACTIVITY_TYPE } from "../../enum/activity";
|
||||||
|
import StatusDisplay from "../../components/status-display/status-display.vue";
|
||||||
|
import ActivityCard from "../../components/activity-card/activity-card.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
StatusDisplay,
|
||||||
|
ActivityCard
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
CommonEnum,
|
||||||
|
loading: false,
|
||||||
|
activityList: [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
name: '初一祈福',
|
||||||
|
theme: '活动主题: 初一祈福,诸事圆满,心生欢喜',
|
||||||
|
type: ACTIVITY_TYPE.PRAYER,
|
||||||
|
status: ACTIVITY_STATUS.REGISTERING,
|
||||||
|
time: '2025年10月03日 周四 10:00~11:00',
|
||||||
|
location: '福建省泉州市惠安县西北街北门小坪顶',
|
||||||
|
backgroundImage: '/static/image/a1.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '2',
|
||||||
|
name: '腊八福粥 随缘随喜',
|
||||||
|
theme: '活动主题: 腊八福粥,随缘随喜',
|
||||||
|
type: ACTIVITY_TYPE.CEREMONY,
|
||||||
|
status: ACTIVITY_STATUS.REGISTERING,
|
||||||
|
time: '2025年10月03日 周四 10:00~11:00',
|
||||||
|
location: '福建省泉州市惠安县西北街北门小坪顶',
|
||||||
|
backgroundImage: '/static/image/a2.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '3',
|
||||||
|
name: '佛诞节法会',
|
||||||
|
theme: '活动主题: 庆祝佛陀诞辰,弘扬佛法',
|
||||||
|
type: ACTIVITY_TYPE.CEREMONY,
|
||||||
|
status: ACTIVITY_STATUS.ONGOING,
|
||||||
|
time: '2025年10月15日 周三 09:00~12:00',
|
||||||
|
location: '福建省泉州市惠安县西北街北门小坪顶',
|
||||||
|
backgroundImage: '/static/image/a3.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '4',
|
||||||
|
name: '禅修体验',
|
||||||
|
theme: '活动主题: 静心禅修,寻找内心平静',
|
||||||
|
type: ACTIVITY_TYPE.MEDITATION,
|
||||||
|
status: ACTIVITY_STATUS.FINISHED,
|
||||||
|
time: '2025年09月20日 周六 14:00~16:00',
|
||||||
|
location: '福建省泉州市惠安县西北街北门小坪顶',
|
||||||
|
backgroundImage: '/static/image/a4.png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '5',
|
||||||
|
name: '慈善捐赠',
|
||||||
|
theme: '活动主题: 慈悲为怀,广种福田',
|
||||||
|
type: ACTIVITY_TYPE.DONATION,
|
||||||
|
status: ACTIVITY_STATUS.REGISTERING,
|
||||||
|
time: '2025年10月25日 周六 09:00~17:00',
|
||||||
|
location: '福建省泉州市惠安县西北街北门小坪顶',
|
||||||
|
backgroundImage: '/static/image/a5.png'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
// 页面加载时获取数据
|
||||||
|
this.loadPageData()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 加载页面数据
|
||||||
|
async loadPageData() {
|
||||||
|
this.loading = true
|
||||||
|
try {
|
||||||
|
// TODO: 调用页面数据API
|
||||||
|
// const response = await getPageData()
|
||||||
|
// this.activityList = response.data
|
||||||
|
// 模拟加载
|
||||||
|
setTimeout(() => {
|
||||||
|
this.loading = false
|
||||||
|
}, 1000)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取页面数据失败:', error)
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理卡片点击
|
||||||
|
handleCardClick(activity) {
|
||||||
|
console.log('点击活动卡片:', activity)
|
||||||
|
// TODO: 跳转到活动详情页
|
||||||
|
uni.showToast({
|
||||||
|
title: '活动详情功能开发中',
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理报名
|
||||||
|
handleRegister(activity) {
|
||||||
|
console.log('报名活动:', activity)
|
||||||
|
uni.showModal({
|
||||||
|
title: '确认报名',
|
||||||
|
content: `确定要报名参加"${activity.name}"活动吗？`,
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
uni.showToast({
|
||||||
|
title: '报名成功',
|
||||||
|
icon: 'success'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background: #F5F0E7;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 34rpx;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activity-list {
|
||||||
|
margin-top: 40rpx;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user