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

This commit is contained in:
WindowBird 2025-09-19 10:55:38 +08:00
parent 35540269d8
commit d078627e08
2 changed files with 207 additions and 196 deletions

View File

@ -1,7 +1,7 @@
<template> <template>
<view class="activity-card-container"> <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> <text class="title-text">{{ activity.name }}</text>
</view> </view>
@ -9,8 +9,8 @@
<view class="activity-card" @click="handleCardClick"> <view class="activity-card" @click="handleCardClick">
<view class="card-background"> <view class="card-background">
<image <image
class="background-image"
:src="activity.backgroundImage || getDefaultImage()" :src="activity.backgroundImage || getDefaultImage()"
class="background-image"
mode="aspectFill" mode="aspectFill"
/> />
<view class="overlay"></view> <view class="overlay"></view>
@ -29,13 +29,13 @@
<!-- 活动状态 --> <!-- 活动状态 -->
<view class="activity-status"> <view class="activity-status">
<text class="status-text" :class="statusClass"> <text :class="statusClass" class="status-text">
{{ statusText }} {{ statusText }}
</text> </text>
</view> </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-label">活动时间:</text>
<text class="time-text">{{ activity.time }}</text> <text class="time-text">{{ activity.time }}</text>
</view> </view>
@ -45,16 +45,19 @@
<view class="divider-line"></view> <view class="divider-line"></view>
<!-- 报名按钮 --> <!-- 报名按钮 -->
<view <view
v-if="
showRegisterButton &&
activity.status === ACTIVITY_STATUS.REGISTERING
"
class="register-button" class="register-button"
@click.stop="handleRegister" @click.stop="handleRegister"
v-if="showRegisterButton && activity.status === ACTIVITY_STATUS.REGISTERING"
> >
<text class="button-text">立即报名</text> <text class="button-text">立即报名</text>
</view> </view>
</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-label">地点:</text>
<text class="location-text">{{ activity.location }}</text> <text class="location-text">{{ activity.location }}</text>
</view> </view>
@ -66,26 +69,25 @@
<script> <script>
import { import {
ACTIVITY_STATUS, ACTIVITY_STATUS,
ACTIVITY_STATUS_TEXT,
ACTIVITY_STATUS_CLASS, ACTIVITY_STATUS_CLASS,
DEFAULT_ACTIVITY_IMAGES, ACTIVITY_STATUS_TEXT,
} 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: { showTitle: {
@ -100,39 +102,40 @@
data() { data() {
return { return {
ACTIVITY_STATUS, ACTIVITY_STATUS,
} };
}, },
computed: { computed: {
// //
statusText() { statusText() {
return ACTIVITY_STATUS_TEXT[this.activity.status] || '未知状态' return ACTIVITY_STATUS_TEXT[this.activity.status] || "未知状态";
}, },
// //
statusClass() { statusClass() {
return ACTIVITY_STATUS_CLASS[this.activity.status] || '' return ACTIVITY_STATUS_CLASS[this.activity.status] || "";
}, },
activityName() { activityName() {
return this.activity.name.split(' ')[0] || this.activity.name return this.activity.name.split(" ")[0] || this.activity.name;
}, },
}, },
methods: { methods: {
// //
getDefaultImage() { getDefaultImage() {
return DEFAULT_ACTIVITY_IMAGES[this.activity.type] || '/static/image/a1.png' // return DEFAULT_ACTIVITY_IMAGES[this.activity.type];
return null;
}, },
// //
handleCardClick() { handleCardClick() {
this.$emit('card-click', this.activity) this.$emit("card-click", this.activity);
}, },
// //
handleRegister() { handleRegister() {
this.$emit('register', this.activity) this.$emit("register", this.activity);
}, },
}, },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -181,7 +184,11 @@
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%); background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.6) 100%
);
} }
} }
@ -241,15 +248,18 @@
line-height: 1.4; line-height: 1.4;
} }
} }
.line-button { .line-button {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
.divider-line { .divider-line {
border-top: 1px solid rgba(255, 255, 255, 0.3); /* 上边框作为分隔线 */ border-top: 1px solid rgba(255, 255, 255, 0.3); /* 上边框作为分隔线 */
width: 404rpx; width: 404rpx;
} }
.register-button { .register-button {
width: 132rpx; width: 132rpx;
height: 40rpx; height: 40rpx;

View File

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