MOSE-Official-Website-20250712/subPages/index/activityDetail.vue

<template>
  <view class="activity-detail">
    <!-- 轮播图 -->
    <view class="banner-container">
      <swiper class="banner-swiper" height="450rpx" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
        <swiper-item v-for="(image, index) in bannerImages" :key="index">
          <image class="banner-image" :src="image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 活动信息 -->
    <view class="activity-info">
      <!-- 活动标题和标签 -->
      <view class="title-section">
        <view class="activity-badge">
          <text class="badge-text">{{ activityData.duration }}</text>
        </view>
        <text class="activity-title">{{ activityData.title }}</text>
      </view>
      
      <!-- 活动详细信息 -->
      <view class="info-section">
        <view class="info-item">
          <uv-icon name="calendar" size="16" color="#666"></uv-icon>
          <text class="info-label">活动时间：</text>
          <text class="info-value">{{ activityData.time }}</text>
        </view>
        
        <view class="info-item">
          <uv-icon name="clock" size="16" color="#666"></uv-icon>
          <text class="info-label">报名时间：</text>
          <text class="info-value">{{ activityData.registrationTime }}</text>
        </view>
        
        <view class="info-item">
          <uv-icon name="account-fill" size="16" color="#666"></uv-icon>
          <text class="info-label">联系人：</text>
          <text class="info-value">{{ activityData.contact }}</text>
        </view>
        
        <view class="info-item">
          <uv-icon name="phone" size="16" color="#666"></uv-icon>
          <text class="info-label">取消规则：</text>
          <text class="info-value">{{ activityData.cancelRule }}</text>
        </view>
        
        <view class="info-item">
          <uv-icon name="map-fill" size="16" color="#666"></uv-icon>
          <text class="info-label">活动地点：</text>
          <text class="info-value">{{ activityData.location }}</text>
        </view>
      </view>
      
      <!-- 活动详情 -->
      <view class="detail-section">
        <view class="section-title">
          <text class="title-text">活动详情</text>
        </view>
        <view class="detail-content">
          <text class="detail-text" v-for="(item, index) in activityData.details" :key="index">
            {{ index + 1 }}. {{ item }}
          </text>
        </view>
      </view>
      
      <!-- 活动图集 -->
      <view class="gallery-section">
        <view class="section-title">
          <text class="title-text">活动图集</text>
        </view>
        <view class="gallery-grid">
          <image 
            v-for="(image, index) in activityData.gallery" 
            :key="index"
            class="gallery-image" 
            :src="image" 
            mode="aspectFill"
            @click="previewImage(image, activityData.gallery)"
          ></image>
          <!-- <uv-album :urls="activityData.gallery"></uv-album> -->
        </view>
      </view>
    </view>
    
    <!-- 固定底部操作栏 -->
    <view class="bottom-action">
      <view class="action-left">
        <view class="action-item" @click="shareActivity">
          <uv-icon name="share" size="24" color="#000"></uv-icon>
          <text class="action-text">分享</text>
        </view>
        <view class="action-item" @click="collectActivity">
          <uv-icon name="heart-fill" size="24" :color="isCollected ? '#ff4757' : '#999'"></uv-icon>
          <text class="action-text">收藏</text>
        </view>
        <view class="action-item">
          <text class="participants-count">
            <text :style="{'color': activityData.registeredCount >= activityData.maxCount ? '#999' : '#1488DB'}">{{ activityData.registeredCount }}</text>
            /{{ activityData.maxCount }}</text>
          <text class="action-text">已报名</text>
        </view>
      </view>
      <view class="action-right">
        <uv-button 
          type="primary" 
          size="normal" 
          text="我要报名"
          shape="circle"
          @click="signUpActivity"
          :disabled="activityData.registeredCount >= activityData.maxCount"
        ></uv-button>
      </view>
    </view>
    <SignUpForm 
      ref="signUpFormRef"
      @close="onSignUpFormClose" 
      @submit="onSignUpFormSubmit"
    />
  </view>
  
  <!-- 报名表单弹窗 -->
</template>

<script>
import SignUpForm from '@/subPages/index/components/SignUpForm.vue'

export default {
  components: {
    SignUpForm
  },
  data() {
    return {
      isCollected: false,
      showSignUpForm: false,
      bannerImages: [
        '/static/bannerImage.png',
        '/static/bannerImage.png',
        '/static/bannerImage.png'
      ],
      activityData: {
        title: '关爱自闭症儿童活动',
        duration: '30积分',
        time: '2025-06-12 14:30',
        registrationTime: '2025-06-01 14:30——2025-09-01 14:30',
        contact: '柳老师 (13256484512)',
        cancelRule: '报名随时可取消',
        location: '长沙市雨花区时代阳光大夏国际大厅2145',
        registeredCount: 9,
        maxCount: 30,
        details: [
          '身体健康，热爱志愿服务工作，富有责任感和奉献精神',
          '遵纪守法，思想上进，作风正派，服从安排',
          '年龄在60岁以下，具备广告宣传理能力'
        ],
        gallery: [
          '/static/bannerImage.png',
          '/static/bannerImage.png',
          '/static/bannerImage.png',
          '/static/bannerImage.png'
        ]
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.loadActivityDetail(options.id)
    }
  },
  methods: {
    loadActivityDetail(id) {
      // 根据ID加载活动详情
      console.log('加载活动详情:', id)
    },
    previewImage(current, urls) {
      uni.previewImage({
        current: current,
        urls: urls
      })
    },
    shareActivity() {
      uni.showToast({
        title: '分享功能',
        icon: 'none'
      })
    },
    collectActivity() {
      this.isCollected = !this.isCollected
      uni.showToast({
        title: this.isCollected ? '收藏成功' : '取消收藏',
        icon: 'none'
      })
    },
    signUpActivity() {
      if (this.activityData.registeredCount >= this.activityData.maxCount) {
        uni.showToast({
          title: '报名人数已满',
          icon: 'none'
        })
        return
      }
      
      this.$refs.signUpFormRef.open()
      
    },
    
    onSignUpFormClose() {
      this.$refs.signUpFormRef.close()
    },
    
    onSignUpFormSubmit(formData) {
      console.log('报名表单数据:', formData)
      // 这里可以调用API提交报名数据
      this.showSignUpForm = false
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-detail {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 120rpx;
  
  .banner-container {
    width: 100%;
    height: 450rpx;
    
    .banner-swiper {
      width: 100%;
      height: 100%;
      
      .banner-image {
        width: 100%;
        height: 100%;
      }
    }
  }
  
  .activity-info {
    background: #ffffff;
    // border: 1rpx dashed #F3F7F8;
    margin: 20rpx;
    border-radius: 16rpx;
    padding: 30rpx;
    
    .title-section {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      
      .activity-badge {
        background: #218CDD;
        border-radius: 8rpx;
        padding: 4rpx 10rpx;
        margin-right: 16rpx;
        
        .badge-text {
          color: #ffffff;
          font-size: 24rpx;
          font-weight: 500;
        }
      }
      
      .activity-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        flex: 1;
      }
    }
    
    .info-section {
      background: #F3F7F8;
      margin-bottom: 40rpx;
      // 虚线属性
      border: 2rpx dashed #F3F7F8;
      
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .info-label {
          font-size: 28rpx;
          color: #999999;
          margin-left: 12rpx;
          margin-right: 8rpx;
        }
        
        .info-value {
          font-size: 28rpx;
          color: #999999;
          flex: 1;
        }
      }
    }
    
    .detail-section {
      margin-bottom: 40rpx;
      
      .section-title {
        margin-bottom: 20rpx;
        
        .title-text {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }
      }
      
      .detail-content {
        .detail-text {
          display: block;
          font-size: 28rpx;
          color: #666666;
          line-height: 1.6;
          margin-bottom: 16rpx;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    
    .gallery-section {
      .section-title {
        margin-bottom: 20rpx;
        
        .title-text {
          font-size: 32rpx;
          font-weight: bold;
          color: #333333;
        }
      }
      
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16rpx;
        
        .gallery-image {
          width: 100%;
          height: 200rpx;
          border-radius: 12rpx;
        }
      }
    }
  }
  
  .bottom-action {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 20rpx 30rpx;
    border-top: 1rpx solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    
    .action-left {
      display: flex;
      align-items: center;
      gap: 100rpx;
      
      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;
        
        .action-text {
          font-size: 22rpx;
          color: #000;
        }
        
        .participants-count {
          font-size: 24rpx;
          color: #333333;
          // font-weight: bold;
        }
      }
    }
    
    .action-right {
      flex-shrink: 0;
    }
  }
}
</style>