活动列表静态界面

2025-08-04 09:40:18 +08:00 · 2025-08-04 09:40:18 +08:00 · 720a6d34f5
commit 720a6d34f5
parent 359d24fa67
5 changed files with 688 additions and 0 deletions
--- a/components/activity-card/README.md
+++ b/components/activity-card/README.md
@ -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 的间距 
--- a/components/activity-card/activity-card.vue
+++ b/components/activity-card/activity-card.vue
@ -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> 
--- a/enum/activity.js
+++ 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
+} 
--- a/pages.json
+++ b/pages.json
@ -118,6 +118,15 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/activity/activity",
+			"style" : 
+			{
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
 		}
 	],

--- a/pages/activity/activity.vue
+++ b/pages/activity/activity.vue
@ -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>