去掉活动卡片的备选背景图
This commit is contained in:
WindowBird
parent
35540269d8
commit
d078627e08
|
|
@ -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 {
|
||||
ACTIVITY_STATUS,
|
||||
ACTIVITY_STATUS_TEXT,
|
||||
ACTIVITY_STATUS_CLASS,
|
||||
DEFAULT_ACTIVITY_IMAGES,
|
||||
} from '../../enum/activity.js'
|
||||
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,
|
||||
},
|
||||
export default {
|
||||
name: "ActivityCard",
|
||||
props: {
|
||||
activity: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
id: "",
|
||||
name: "",
|
||||
theme: "",
|
||||
type: "prayer",
|
||||
status: ACTIVITY_STATUS.REGISTERING,
|
||||
time: "",
|
||||
location: "",
|
||||
backgroundImage: "",
|
||||
}),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ACTIVITY_STATUS,
|
||||
}
|
||||
showTitle: {
|
||||
type: Boolean,
|
||||
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() {
|
||||
return ACTIVITY_STATUS_CLASS[this.activity.status] || ''
|
||||
},
|
||||
activityName() {
|
||||
return this.activity.name.split(' ')[0] || this.activity.name
|
||||
},
|
||||
// 状态样式类
|
||||
statusClass() {
|
||||
return ACTIVITY_STATUS_CLASS[this.activity.status] || "";
|
||||
},
|
||||
methods: {
|
||||
// 获取默认背景图片
|
||||
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)
|
||||
},
|
||||
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;
|
||||
.activity-card-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.card-title {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
.card-title {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.title-text {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
.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);
|
||||
.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 {
|
||||
.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 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.card-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.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%);
|
||||
.activity-theme {
|
||||
.theme-text {
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #ffffff;
|
||||
line-height: 38rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.card-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
padding: 40rpx 30rpx;
|
||||
.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;
|
||||
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 {
|
||||
.theme-text {
|
||||
.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;
|
||||
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 {
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user