buddhism/components/activity-card/activity-card.vue

<template>
  <view class="activity-card-container">
    <!-- 卡片标题 -->
    <view v-if="showTitle" class="card-title">
      <text class="title-text">{{ activity.name }}</text>
    </view>

    <!-- 活动卡片 -->
    <view class="activity-card" @click="handleCardClick">
      <view class="card-background">
        <image
          :src="activity.backgroundImage || getDefaultImage()"
          class="background-image"
          mode="aspectFill"
        />
        <view class="overlay"></view>
      </view>

      <view class="card-content">
        <!-- 活动主题 -->
        <view class="activity-theme">
          <text class="theme-text">活动主题：{{ activity.name }}</text>
        </view>

        <!-- 活动名称 -->
        <view class="activity-name">
          <text class="name-text">{{ activityName }}</text>
        </view>

        <!-- 活动状态 -->
        <view class="activity-status">
          <text :class="statusClass" class="status-text">
            {{ statusText }}
          </text>
        </view>

        <!-- 活动时间 -->
        <view v-if="activity.time" class="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
            v-if="
              showRegisterButton &&
              activity.status === ACTIVITY_STATUS.REGISTERING
            "
            class="register-button"
            @click.stop="handleRegister"
          >
            <text class="button-text">立即报名</text>
          </view>
        </view>

        <!-- 活动地点 -->
        <view v-if="activity.location" class="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_CLASS,
  ACTIVITY_STATUS_TEXT,
} 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,
    },
    showRegisterButton: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      ACTIVITY_STATUS,
    };
  },
  computed: {
    // 状态文本
    statusText() {
      return ACTIVITY_STATUS_TEXT[this.activity.status] || "未知状态";
    },

    // 状态样式类
    statusClass() {
      return ACTIVITY_STATUS_CLASS[this.activity.status] || "";
    },
    activityName() {
      return this.activity.name.split(" ")[0] || this.activity.name;
    },
  },
  methods: {
    // 获取默认背景图片
    getDefaultImage() {
      // return DEFAULT_ACTIVITY_IMAGES[this.activity.type];
      return null;
    },

    // 处理卡片点击
    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-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        line-height: 38rpx;
      }
    }

    .activity-name {
      .name-text {
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
      }
    }

    .activity-status {
      .status-text {
        padding: 8rpx 0rpx;
        border-radius: 20rpx;
        display: inline-block;
        font-weight: 500;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
      }
    }

    .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>