494 lines
13 KiB
Vue
494 lines
13 KiB
Vue
<template>
|
|
<div class="event-detail-page">
|
|
<!-- 活动封面 -->
|
|
<div class="event-cover">
|
|
<swiper>
|
|
<swiper-item v-for="(item, imgIndex) in eventDetail.ImageList" :key="imgIndex">
|
|
<image class="cover-image" :src="item.ImageUrl" mode="aspectFill" />
|
|
</swiper-item>
|
|
</swiper>
|
|
|
|
<div class="event-status"
|
|
:class="new Date(eventDetail.ACTIVITY_ENDDATE).getTime() < new Date().getTime() ? 'status-ended' : new Date(eventDetail.ACTIVITY_STARTDATE).getTime() < new Date().getTime() ? 'status-draft' : 'status-active'">
|
|
{{ getStatusText(eventDetail) }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动基本信息 -->
|
|
<div class="event-header">
|
|
<div class="event-title">{{ eventDetail.ACTIVITY_NAME }}</div>
|
|
|
|
<div class="event-meta">
|
|
<div class="meta-item">
|
|
<span class="meta-icon">📅</span>
|
|
<span class="meta-text">{{ eventDetail.ACTIVITY_STARTDATE ? eventDetail.ACTIVITY_STARTDATE : ""
|
|
}}{{ eventDetail.ACTIVITY_ENDDATE ? `-` + eventDetail.ACTIVITY_ENDDATE : "" }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-icon">📍</span>
|
|
<span class="meta-text">{{ eventDetail.ACTIVITY_LOCATION }}</span>
|
|
</div>
|
|
<div class="meta-item">
|
|
<span class="meta-icon">👥</span>
|
|
<span class="meta-text">
|
|
{{ eventDetail.MAXIMUM_CAPACITY || '不限' }}人
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 活动内容 -->
|
|
<div class="content-section">
|
|
<div class="section-title">活动介绍</div>
|
|
<text class="content-text">{{ eventDetail.ACTIVITY_INFO }}</text>
|
|
</div>
|
|
|
|
<!-- 报名按钮 -->
|
|
<div class="action-section" v-if="errorType > 0">
|
|
<div
|
|
:class="errorType === 1 || errorType === 2 || errorType === 3 || errorType === 5 ? 'action-btn action-registered' : 'action-btn action-normal'"
|
|
@click="handleAction">
|
|
<span class="btn-text">{{ errorType === 0 ? '' : errorType === 1 ? '活动已结束' : errorType === 2 ? '活动已经开始' :
|
|
errorType === 3 ? '已报名' : errorType === 4 ? '重新报名' : errorType === 5 ? '未参加' : errorType === 6 ? '立即报名' : ''
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
eventId: "",
|
|
eventDetail: {},
|
|
hasRegistered: false, // 是否已报名当前活动
|
|
errorType: 0, // 0 默认 1 表示活动已经结束 2 表示活动已经开始 3 表示已经报名该活动 4 表示报过名 但是取消了 5 报名了 但是没有参加 6 从未报名
|
|
statusDetail: {},// 状态详情
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
user: "user",
|
|
}),
|
|
},
|
|
onLoad(query) {
|
|
if (query.id) {
|
|
this.eventId = query.id;
|
|
}
|
|
// 活动详情
|
|
this.loadEventDetail();
|
|
|
|
},
|
|
onShow() {
|
|
this.loadEventDetail();
|
|
},
|
|
methods: {
|
|
// 加载活动详情
|
|
async loadEventDetail() {
|
|
const req = {
|
|
ACTIVITYId: this.eventId,
|
|
type: 'encryption'
|
|
}
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask: true
|
|
});
|
|
const data = await this.$api.$posMemberPost("/Member/GetACTIVITYDetail", req)
|
|
uni.hideLoading();
|
|
|
|
let detail = data.Result_Data
|
|
console.log('详情djaksjda', detail);
|
|
// 判断一下当前活动是不是已经开始 或结束了
|
|
let nowTime = new Date().getTime()
|
|
if (new Date(detail.ACTIVITY_ENDDATE).getTime() < nowTime) {
|
|
// 1 表示活动已经结束
|
|
this.errorType = 1
|
|
} else if (new Date(detail.ACTIVITY_STARTDATE).getTime() < nowTime) {
|
|
// 2 表示活动已经开始
|
|
this.errorType = 2
|
|
}
|
|
this.eventDetail = detail;
|
|
if (this.errorType > 0) {
|
|
|
|
} else {
|
|
|
|
}
|
|
// 查询当前用户是否报名了 这个活动
|
|
this.checkRegistrationStatus()
|
|
},
|
|
|
|
// 检查报名状态
|
|
async checkRegistrationStatus() {
|
|
const req = {
|
|
SearchParameter: {
|
|
ACTIVITY_IDS: this.eventId,
|
|
MEMBERSHIP_IDS: this.user.MEMBERSHIP_ID,
|
|
},
|
|
PageIndex: 1,
|
|
PageSize: 999999,
|
|
type: 'encryption'
|
|
}
|
|
const data = await this.$api.$posMemberPost("/Member/GetACTIVITYDETAILList", req)
|
|
let list = data.Result_Data.List
|
|
// 若这个list 有值 则说明之前报名过 看看是啥状态
|
|
console.log('这个用户这个活动的报名详细', list);
|
|
if (list && list.length > 0) {
|
|
let detail = list[0]
|
|
if (detail.ACTIVITYDETAIL_STATE === 1) {
|
|
// 1 表示当前是报名状态
|
|
this.hasRegistered = true;
|
|
// 3 表示已经报名该活动
|
|
this.errorType = 3
|
|
} else if (detail.ACTIVITYDETAIL_STATE === 0) {
|
|
// 0 表示报过名 但是取消了
|
|
// 4 表示报过名 但是取消了
|
|
this.errorType = 4
|
|
} else if (detail.ACTIVITYDETAIL_STATE === 2) {
|
|
// 2 报名了 但是没有参加
|
|
// 5 报名了 但是没有参加
|
|
this.errorType = 5
|
|
}
|
|
this.statusDetail = detail
|
|
} else {
|
|
this.hasRegistered = false;
|
|
// 6 从没报过名
|
|
this.errorType = 6
|
|
// 没查到 说明这个活动当前用户还没报名
|
|
}
|
|
},
|
|
|
|
// 处理按钮点击
|
|
handleAction() {
|
|
if (this.errorType === 1) {
|
|
uni.showToast({
|
|
title: "活动已结束",
|
|
icon: 'none'
|
|
})
|
|
} else if (this.errorType === 2) {
|
|
uni.showToast({
|
|
title: "活动已开始",
|
|
icon: 'none'
|
|
})
|
|
} else if (this.errorType === 3) {
|
|
let _this = this
|
|
uni.showModal({
|
|
title: "注意",
|
|
content: "您已报名成功，确认要取消报名？",
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
let req = {
|
|
..._this.statusDetail,
|
|
ACTIVITYDETAIL_STATE: 0,
|
|
type: 'encryption'
|
|
}
|
|
const data = await _this.$api.$posMemberPost("/Member/SynchroACTIVITYDETAIL", req)
|
|
if (data.Result_Code === 100) {
|
|
uni.showToast({
|
|
title: '取消成功！',
|
|
icon: 'none'
|
|
})
|
|
_this.errorType = 0
|
|
_this.eventDetail = {}
|
|
_this.hasRegistered = false
|
|
_this.statusDetail = {}
|
|
_this.loadEventDetail();
|
|
} else {
|
|
uni.showToast({
|
|
title: data.Result_Desc,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
});
|
|
} else if (this.errorType === 4) {
|
|
let _this = this
|
|
uni.showModal({
|
|
title: "注意",
|
|
content: "您有报名记录，是否重新报名",
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
let req = {
|
|
..._this.statusDetail,
|
|
ACTIVITYDETAIL_STATE: 1,
|
|
type: 'encryption'
|
|
}
|
|
const data = await _this.$api.$posMemberPost("/Member/SynchroACTIVITYDETAIL", req)
|
|
if (data.Result_Code === 100) {
|
|
uni.showToast({
|
|
title: '重新报名成功！',
|
|
icon: 'none'
|
|
})
|
|
_this.errorType = 0
|
|
_this.eventDetail = {}
|
|
_this.hasRegistered = false
|
|
_this.statusDetail = {}
|
|
_this.loadEventDetail();
|
|
} else {
|
|
uni.showToast({
|
|
title: data.Result_Desc,
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
});
|
|
} else if (this.errorType === 5) {
|
|
|
|
} else if (this.errorType === 6) {
|
|
// 跳转到报名页面
|
|
uni.navigateTo({
|
|
url: `/pages/eventRegistration/registration?eventId=${this.eventId}`
|
|
});
|
|
}
|
|
|
|
|
|
|
|
// if (this.hasRegistered === true) {
|
|
// uni.showToast({
|
|
// title: "已报名！请勿重复报名",
|
|
// icon: 'none'
|
|
// })
|
|
|
|
// } else {
|
|
// // 跳转到报名页面
|
|
// uni.navigateTo({
|
|
// url: `/pages/eventRegistration/registration?eventId=${this.eventId}`
|
|
// });
|
|
// }
|
|
},
|
|
|
|
// 跳转到报名信息页面
|
|
goToRegistrationInfo() {
|
|
uni.navigateTo({
|
|
url: `/pages/eventRegistration/registration?eventId=${this.eventId}`
|
|
});
|
|
},
|
|
|
|
// 获取活动状态文本
|
|
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-detail-page {
|
|
width: 100vw;
|
|
min-height: 100vh;
|
|
background: #f8fafc;
|
|
overflow-y: scroll;
|
|
|
|
.event-cover {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
overflow: hidden;
|
|
|
|
.cover-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.event-status {
|
|
position: absolute;
|
|
top: 40rpx;
|
|
right: 40rpx;
|
|
padding: 16rpx 32rpx;
|
|
border-radius: 24rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
backdrop-filter: blur(10rpx);
|
|
|
|
&.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-header {
|
|
background: white;
|
|
padding: 24rpx;
|
|
margin: -40rpx 32rpx 32rpx;
|
|
border-radius: 24rpx 24rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
position: relative;
|
|
z-index: 2;
|
|
|
|
.event-title {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
line-height: 1.4;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.event-meta {
|
|
.meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 12rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.meta-icon {
|
|
font-size: 24rpx;
|
|
margin-right: 16rpx;
|
|
width: 40rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.meta-text {
|
|
font-size: 24rpx;
|
|
color: #374151;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-section,
|
|
.requirements-section,
|
|
.notice-section {
|
|
background: white;
|
|
margin: 0 32rpx 32rpx;
|
|
padding: 32rpx;
|
|
border-radius: 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 12rpx;
|
|
position: relative;
|
|
padding-left: 16rpx;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8rpx;
|
|
bottom: 8rpx;
|
|
width: 6rpx;
|
|
background: #22c55e;
|
|
border-radius: 3rpx;
|
|
}
|
|
}
|
|
|
|
.content-text {
|
|
font-size: 24rpx;
|
|
color: #374151;
|
|
line-height: 1.6;
|
|
white-space: pre-wrap;
|
|
}
|
|
}
|
|
|
|
.notice-section {
|
|
margin: 0 32rpx calc(24rpx + env(safe-area-inset-bottom) + 24rpx + 28rpx + 40rpx);
|
|
}
|
|
|
|
.action-section {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: white;
|
|
border-top: 1rpx solid #f0f0f0;
|
|
padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
|
|
z-index: 100;
|
|
|
|
.action-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: 2rpx solid #e5e7eb;
|
|
|
|
&.action-normal {
|
|
background: linear-gradient(135deg, #22c55e, #16a34a);
|
|
color: white;
|
|
border-color: #22c55e;
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn-text {
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.btn-icon {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
&.action-registered {
|
|
background: #f3f4f6;
|
|
color: #9ca3af;
|
|
border-color: #e5e7eb;
|
|
|
|
&:active {
|
|
background: #e5e7eb;
|
|
}
|
|
|
|
.btn-text {
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.registered-icon {
|
|
font-size: 24rpx;
|
|
color: #6b7280;
|
|
}
|
|
}
|
|
|
|
&.action-full {
|
|
background: #f3f4f6;
|
|
color: #9ca3af;
|
|
border-color: #e5e7eb;
|
|
|
|
&:active {
|
|
background: #e5e7eb;
|
|
}
|
|
}
|
|
|
|
&.action-disabled {
|
|
background: #f9fafb;
|
|
color: #d1d5db;
|
|
border-color: #f3f4f6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.event-detail-page::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style> |