去掉活动卡片的备选背景图

components/activity-card/activity-card.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="activity-card-container">
     <!-- 卡片标题 -->
-    <view class="card-title" v-if="showTitle">
+    <view v-if="showTitle" class="card-title">
       <text class="title-text">{{ activity.name }}</text>
     </view>
 
@@ -9,8 +9,8 @@
     <view class="activity-card" @click="handleCardClick">
       <view class="card-background">
         <image
-          class="background-image"
           :src="activity.backgroundImage || getDefaultImage()"
+          class="background-image"
           mode="aspectFill"
         />
         <view class="overlay"></view>
@@ -29,13 +29,13 @@
 
         <!-- 活动状态 -->
         <view class="activity-status">
-          <text class="status-text" :class="statusClass">
+          <text :class="statusClass" class="status-text">
             {{ statusText }}
           </text>
         </view>
 
         <!-- 活动时间 -->
-        <view class="activity-time" v-if="activity.time">
+        <view v-if="activity.time" class="activity-time">
           <text class="time-label">活动时间:</text>
           <text class="time-text">{{ activity.time }}</text>
         </view>
@@ -45,16 +45,19 @@
           <view class="divider-line"></view>
           <!-- 报名按钮 -->
           <view
+            v-if="
+              showRegisterButton &&
+              activity.status === ACTIVITY_STATUS.REGISTERING
+            "
             class="register-button"
             @click.stop="handleRegister"
-            v-if="showRegisterButton && activity.status === ACTIVITY_STATUS.REGISTERING"
           >
             <text class="button-text">立即报名</text>
           </view>
         </view>
 
         <!-- 活动地点 -->
-        <view class="activity-location" v-if="activity.location">
+        <view v-if="activity.location" class="activity-location">
           <text class="location-label">地点:</text>
           <text class="location-text">{{ activity.location }}</text>
         </view>
@@ -64,228 +67,235 @@
 </template>
 
 <script>
-  import {
+import {
-    ACTIVITY_STATUS,
+  ACTIVITY_STATUS,
-    ACTIVITY_STATUS_TEXT,
+  ACTIVITY_STATUS_CLASS,
-    ACTIVITY_STATUS_CLASS,
+  ACTIVITY_STATUS_TEXT,
-    DEFAULT_ACTIVITY_IMAGES,
+} from "../../enum/activity.js";
-  } from '../../enum/activity.js'
 
-  export default {
+export default {
-    name: 'ActivityCard',
+  name: "ActivityCard",
-    props: {
+  props: {
-      activity: {
+    activity: {
-        type: Object,
+      type: Object,
-        required: true,
+      required: true,
-        default: () => ({
+      default: () => ({
-          id: '',
+        id: "",
-          name: '',
+        name: "",
-          theme: '',
+        theme: "",
-          type: 'prayer',
+        type: "prayer",
-          status: ACTIVITY_STATUS.REGISTERING,
+        status: ACTIVITY_STATUS.REGISTERING,
-          time: '',
+        time: "",
-          location: '',
+        location: "",
-          backgroundImage: '',
+        backgroundImage: "",
-        }),
+      }),
-      },
-      showTitle: {
-        type: Boolean,
-        default: true,
-      },
-      showRegisterButton: {
-        type: Boolean,
-        default: true,
-      },
     },
-    data() {
+    showTitle: {
-      return {
+      type: Boolean,
-        ACTIVITY_STATUS,
+      default: true,
-      }
+    },
+    showRegisterButton: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      ACTIVITY_STATUS,
+    };
+  },
+  computed: {
+    // 状态文本
+    statusText() {
+      return ACTIVITY_STATUS_TEXT[this.activity.status] || "未知状态";
     },
-    computed: {
-      // 状态文本
-      statusText() {
-        return ACTIVITY_STATUS_TEXT[this.activity.status] || '未知状态'
-      },
 
-      // 状态样式类
+    // 状态样式类
-      statusClass() {
+    statusClass() {
-        return ACTIVITY_STATUS_CLASS[this.activity.status] || ''
+      return ACTIVITY_STATUS_CLASS[this.activity.status] || "";
-      },
-      activityName() {
-        return this.activity.name.split(' ')[0] || this.activity.name
-      },
     },
-    methods: {
+    activityName() {
-      // 获取默认背景图片
+      return this.activity.name.split(" ")[0] || this.activity.name;
-      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)
-      },
     },
-  }
+  },
+  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 {
+.activity-card-container {
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: center;
+  align-items: center;
-    margin-bottom: 30rpx;
+  margin-bottom: 30rpx;
 
-    .card-title {
+  .card-title {
-      width: 100%;
+    width: 100%;
-      margin-bottom: 20rpx;
+    margin-bottom: 20rpx;
 
-      .title-text {
+    .title-text {
-        font-size: 36rpx;
+      font-size: 36rpx;
-        font-weight: bold;
+      font-weight: bold;
-        color: #333;
+      color: #333;
-        text-align: center;
+      text-align: center;
-      }
     }
   }
+}
 
-  .activity-card {
+.activity-card {
-    width: 684rpx;
+  width: 684rpx;
-    height: 370rpx;
+  height: 370rpx;
-    border-radius: 24rpx;
+  border-radius: 24rpx;
-    overflow: hidden;
+  overflow: hidden;
-    position: relative;
+  position: relative;
-    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
 
-    .card-background {
+  .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%
+      );
+    }
+  }
 
-      .background-image {
+  .card-content {
-        width: 100%;
+    position: relative;
-        height: 100%;
+    z-index: 2;
-      }
+    height: 100%;
+    padding: 40rpx 30rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 
-      .overlay {
+    .activity-theme {
-        position: absolute;
+      .theme-text {
-        top: 0;
+        font-weight: 400;
-        left: 0;
+        font-size: 28rpx;
-        width: 100%;
+        color: #ffffff;
-        height: 100%;
+        line-height: 38rpx;
-        background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
       }
     }
 
-    .card-content {
+    .activity-name {
-      position: relative;
+      .name-text {
-      z-index: 2;
+        font-weight: 500;
-      height: 100%;
+        font-size: 32rpx;
-      padding: 40rpx 30rpx;
+        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;
-      flex-direction: column;
+      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%;
 
-      .activity-theme {
+      .divider-line {
-        .theme-text {
+        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;
-          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;
+          width: auto; /* 移除固定宽度 */
+          padding: 0 20rpx; /* 左右对称留白 */
+          text-align: center;
         }
+      }
+    }
 
-        .location-text {
+    .activity-location {
-          font-size: 26rpx;
+      display: flex;
-          color: #fff;
+      align-items: flex-start;
-          line-height: 1.4;
+      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>

utils/activity-data-formatter.js

@@ -37,7 +37,8 @@ export default {
       ),
       time: this.formatActivityTime(item.actStartTime, item.actEndTime),
       location: item.address || "",
-      backgroundImage: item.imgUrl || this.getDefaultImageByType(item.type),
+      // backgroundImage: item.imgUrl || this.getDefaultImageByType(item.type),
+      backgroundImage: item.imgUrl,
       // 额外信息
       templeId: item.templeId,
       currentBooking: item.currentBooking || 0,