339 lines
9.1 KiB
Vue
339 lines
9.1 KiB
Vue
<template>
|
||
<div class="event-list-page">
|
||
<!-- 活动列表 -->
|
||
<div class="events-section">
|
||
<div class="events-list" v-if="eventsList.length > 0">
|
||
<div class="event-item" v-for="(event, index) in eventsList" :key="index" @click="goToDetail(event)">
|
||
<div class="event-cover">
|
||
<swiper>
|
||
<swiper-item v-for="(item, imgIndex) in event.ImageList" :key="imgIndex">
|
||
<image class="cover-image" :src="item.ImageUrl" mode="aspectFill" />
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<div class="event-status"
|
||
:class="new Date(event.ACTIVITY_ENDDATE).getTime() < new Date().getTime() ? 'status-ended' : new Date(event.ACTIVITY_STARTDATE).getTime() < new Date().getTime() ? 'status-draft' : 'status-active'">
|
||
<!-- :class="[
|
||
event.ACTIVITY_STATE === 'active' ? 'status-active' :
|
||
(event.ACTIVITY_STATE === 'ended' ? 'status-ended' : 'status-draft')
|
||
]" -->
|
||
{{ getStatusText(event) }}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="event-content">
|
||
<div class="event-title">{{ event.ACTIVITY_NAME }}</div>
|
||
|
||
<div class="event-info">
|
||
<div class="info-item">
|
||
<span class="info-icon">📅</span>
|
||
<span class="info-text">{{ event.ACTIVITY_STARTDATE ? event.ACTIVITY_STARTDATE : ""
|
||
}}{{ event.ACTIVITY_ENDDATE ? `-` + event.ACTIVITY_ENDDATE : "" }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-icon">📍</span>
|
||
<span class="info-text">{{ event.ACTIVITY_LOCATION }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="event-footer" v-if="Number(event.ACTIVITY_TYPE) === 1000">
|
||
<div class="participation-info">
|
||
<div class="current-participants">
|
||
已报名：{{ event.currentParticipants || 0 }}人
|
||
</div>
|
||
<div class="max-participants">
|
||
限：{{ event.MAXIMUM_CAPACITY || '不限' }}人
|
||
</div>
|
||
</div>
|
||
<div class="action-btn action-normal">立即报名</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div class="empty-state" v-else>
|
||
<div class="empty-icon">📅</div>
|
||
<div class="empty-title">暂无活动</div>
|
||
<div class="empty-desc">敬请期待更多精彩活动</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
eventsList: [],
|
||
};
|
||
},
|
||
onLoad() {
|
||
this.loadEventsList();
|
||
},
|
||
onPullDownRefresh() {
|
||
this.loadEventsList();
|
||
},
|
||
methods: {
|
||
// 加载活动列表
|
||
async loadEventsList() {
|
||
const req = {
|
||
SearchParameter: {
|
||
// ACTIVITY_ENDDATE_Start: params.ACTIVITY_ENDDATE_Start,
|
||
// ACTIVITY_STARTDATE_End: params.ACTIVITY_STARTDATE_End,
|
||
// SERVERPART_IDS: params?.SERVERPART_IDS,
|
||
PROVINCE_CODE: "530000",
|
||
ACTIVITY_STATES: 1
|
||
},
|
||
PageIndex: 1,
|
||
PageSize: 999999,
|
||
type: 'encryption'
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
});
|
||
|
||
const data = await this.$api.$posMemberPost("/Member/GetACTIVITYList", req)
|
||
|
||
uni.hideLoading();
|
||
let list = data.Result_Data.List
|
||
this.eventsList = list;
|
||
console.log('活动列表sda', list);
|
||
},
|
||
|
||
// 跳转到活动详情
|
||
goToDetail(event) {
|
||
if (Number(event.ACTIVITY_TYPE) === 1000) {
|
||
uni.navigateTo({
|
||
url: `/pages/eventRegistration/detail?id=${event.ACTIVITY_ID}`
|
||
});
|
||
} else {
|
||
let currentService = uni.getStorageSync("currentService");
|
||
uni.navigateTo({
|
||
url: `/pages/shopMallPage/shopType/index?selectIndex=3&comeForm=serviceDetail&comeService=${this.processString(currentService.SERVERPART_NAME)}`,
|
||
});
|
||
}
|
||
},
|
||
processString(inputString) {
|
||
// 定义要检查的关键字
|
||
const keywords = ['服务区', '停车区', '加水站', '加油站', '观景台', '休息区'];
|
||
|
||
// 遍历关键字，检查是否包含在字符串中
|
||
for (let keyword of keywords) {
|
||
const index = inputString.indexOf(keyword);
|
||
if (index !== -1) {
|
||
// 截取关键字之前的部分
|
||
return inputString.substring(0, index);
|
||
}
|
||
}
|
||
|
||
// 如果没有找到任何关键字，返回原始字符串
|
||
return inputString;
|
||
},
|
||
// 获取活动状态文本
|
||
getStatusText(status) {
|
||
if (new Date(status.ACTIVITY_ENDDATE).getTime() < new Date().getTime()) {
|
||
return '已结束'
|
||
} else if (new Date(status.ACTIVITY_STARTDATE).getTime() < new Date().getTime()) {
|
||
return '已开始'
|
||
} else {
|
||
return '报名中'
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.event-list-page {
|
||
width: 100vw;
|
||
min-height: 100vh;
|
||
background: #f8f8f8;
|
||
overflow-y: auto;
|
||
|
||
.events-section {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
|
||
.events-list {
|
||
.event-item {
|
||
background: white;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.event-cover {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 300rpx;
|
||
overflow: hidden;
|
||
|
||
.cover-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.event-status {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
|
||
&.status-active {
|
||
background: rgba(34, 197, 94, 0.9);
|
||
color: white;
|
||
}
|
||
|
||
&.status-ended {
|
||
background: rgba(107, 114, 128, 0.9);
|
||
color: white;
|
||
}
|
||
|
||
&.status-draft {
|
||
background: rgba(251, 146, 60, 0.9);
|
||
color: white;
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-content {
|
||
padding: 16rpx 24rpx;
|
||
|
||
.event-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
line-height: 1.4;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.event-info {
|
||
margin-bottom: 16rpx;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 16rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.info-icon {
|
||
font-size: 24rpx;
|
||
margin-right: 12rpx;
|
||
width: 32rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.info-text {
|
||
font-size: 24rpx;
|
||
color: #6b7280;
|
||
line-height: 1.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-top: 16rpx;
|
||
border-top: 1rpx solid #f0f0f0;
|
||
|
||
.participation-info {
|
||
.current-participants {
|
||
font-size: 24rpx;
|
||
color: #374151;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.max-participants {
|
||
font-size: 24rpx;
|
||
color: #9ca3af;
|
||
}
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 16rpx 32rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
transition: all 0.3s ease;
|
||
|
||
&.action-normal {
|
||
background: linear-gradient(135deg, #22c55e, #16a34a);
|
||
color: white;
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
|
||
&.action-registered {
|
||
background: #dcfce7;
|
||
color: #15803d;
|
||
border: 2rpx solid #bbf7d0;
|
||
}
|
||
|
||
&.action-full {
|
||
background: #f3f4f6;
|
||
color: #9ca3af;
|
||
border: 2rpx solid #e5e7eb;
|
||
}
|
||
|
||
&.action-disabled {
|
||
background: #f9fafb;
|
||
color: #d1d5db;
|
||
border: 2rpx solid #f3f4f6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
padding: 200rpx 40rpx;
|
||
|
||
.empty-icon {
|
||
font-size: 120rpx;
|
||
margin-bottom: 32rpx;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 32rpx;
|
||
color: #6b7280;
|
||
margin-bottom: 16rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.empty-desc {
|
||
font-size: 26rpx;
|
||
color: #9ca3af;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-list-page::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
</style> |