554 lines
14 KiB
Vue
554 lines
14 KiB
Vue
<template>
|
||
<view class="activity-detail-container">
|
||
<!-- 顶部图片轮播 -->
|
||
<swiper class="activity-banner" :autoplay="false" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#5b9cf8">
|
||
<swiper-item v-for="(img, index) in bannerImages" :key="index">
|
||
<image
|
||
:src="img"
|
||
mode="aspectFill"
|
||
class="w-full h-full"
|
||
@click="previewImage(index)"
|
||
/>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 活动基本信息 -->
|
||
<view class="activity-base-info">
|
||
<view class="title-box">
|
||
<text class="title">{{activityInfo.title}}</text>
|
||
<view class="status-tag active" v-if="activityInfo.status === 2">
|
||
{{'未开始'}}
|
||
</view>
|
||
<view class="status-tag active" v-else-if="activityInfo.status === 3">
|
||
{{'进行中'}}
|
||
</view>
|
||
<view class="status-tag active" v-else="activityInfo.status === 4">
|
||
{{'已结束'}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-grid">
|
||
<view class="info-item">
|
||
<u-icon name="star" size="24" color="#5b9cf8"></u-icon>
|
||
<view class="info-text"><text>活动类型：</text>{{activityInfo.categoryName || '待确认'}} </view>
|
||
</view>
|
||
|
||
<view class="info-item">
|
||
<u-icon name="map" size="24" color="#5b9cf8"></u-icon>
|
||
<view class="info-text"><text>活动地址：</text>{{activityInfo.address || '待定'}}</view>
|
||
</view>
|
||
<view class="info-item">
|
||
<u-icon name="clock" size="24" color="#5b9cf8"></u-icon>
|
||
<view class="info-text">{{ activityInfo.openAt }}</view>
|
||
</view>
|
||
<!-- <view class="info-item">
|
||
<u-icon name="account" size="18" color="#36CFC9"></u-icon>
|
||
<text class="info-text">已报名 {{activityInfo.participants}}人</text>
|
||
</view> -->
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 活动详情卡片 -->
|
||
<view class="detail-card">
|
||
<!-- <view class="card-header">
|
||
<view class="header-line"></view>
|
||
<text class="header-title">活动详情</text>
|
||
</view> -->
|
||
|
||
<view class="detail-section">
|
||
<view class="section-title">
|
||
<view class="title-icon"></view>
|
||
<text>活动详情</text>
|
||
</view>
|
||
<view class="section-content">
|
||
<view v-html="activityInfo.content"></view>
|
||
<image
|
||
src="/static/route-map.jpg"
|
||
mode="widthFix"
|
||
class="route-map"
|
||
@click="previewImage(bannerImages.length)"
|
||
></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="detail-section">
|
||
<view class="section-title">
|
||
<view class="title-icon"></view>
|
||
<text>活动流程</text>
|
||
</view>
|
||
<view class="timeline">
|
||
<view class="timeline-item" v-for="(step, index) in timeline" :key="index">
|
||
<view class="timeline-dot" :style="{backgroundColor: dotColors[index]}"></view>
|
||
<view class="timeline-content">
|
||
<text class="timeline-time">{{step.time}}</text>
|
||
<text class="timeline-desc">{{step.desc}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- <view class="detail-section">
|
||
<view class="section-title">
|
||
<view class="title-icon"></view>
|
||
<text>积分规则</text>
|
||
</view>
|
||
<view class="point-rules">
|
||
<view class="rule-item" v-for="(rule, index) in pointRules" :key="index">
|
||
<view class="rule-icon">
|
||
<text>{{index + 1}}</text>
|
||
</view>
|
||
<text class="rule-text">{{rule}}</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 温馨提示 -->
|
||
<!-- <view class="tips-card">
|
||
<view class="card-header">
|
||
<view class="header-line"></view>
|
||
<text class="header-title">温馨提示</text>
|
||
</view>
|
||
<view class="tips-content">
|
||
<text class="tip-item" v-for="(tip, index) in tips" :key="index">
|
||
{{tip}}
|
||
</text>
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 底部操作栏 -->
|
||
<view class="action-bar">
|
||
<!-- <view class="action-btn favorite" @click="toggleFavorite">
|
||
<u-icon :name="isFavorite ? 'heart-fill' : 'heart'" size="24" :color="isFavorite ? '#FF5A5F' : '#666'"></u-icon>
|
||
<text>收藏</text>
|
||
</view> -->
|
||
<view class="action-btn share" @click="shareActivity">
|
||
<u-icon name="share" size="30" color="#666"></u-icon>
|
||
<text>分享</text>
|
||
</view>
|
||
<button class="signup-btn" @click="handleSignUp" >
|
||
立即报名
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { get, post } from '@/utils/request';
|
||
import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
|
||
import { formatTime, formatRelativeTime } from '@/utils/timeFormat';
|
||
export default {
|
||
data() {
|
||
return {
|
||
formatTime,
|
||
IMAGE_BASE_URL,
|
||
Id:null,
|
||
isFavorite: false,
|
||
isSignedUp: false,
|
||
bannerImages: [],
|
||
activityInfo: {},
|
||
// timeline: [
|
||
// {time: '19:00-19:20', desc: '签到领取装备'},
|
||
// {time: '19:20-19:30', desc: '热身运动'},
|
||
// {time: '19:30-20:15', desc: '集体夜跑'},
|
||
// {time: '20:15-20:30', desc: '拉伸放松'}
|
||
// ],
|
||
// pointRules: [
|
||
// '完成全程跑步可获得50积分',
|
||
// '连续参加4次额外奖励100积分',
|
||
// '邀请好友参加每人奖励30积分',
|
||
// '积分每月1日清零，请及时兑换'
|
||
// ],
|
||
// tips: [
|
||
// '建议穿着舒适运动服装和跑鞋',
|
||
// '活动前1小时请勿大量进食',
|
||
// '请自带水杯，现场提供饮用水',
|
||
// '如遇雨天，活动将延期举行',
|
||
// '未成年人需家长陪同参加'
|
||
// ],
|
||
dotColors: ['#36CFC9', '#5AC8FA', '#FF9500', '#FF5A5F']
|
||
}
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.Id) {
|
||
this.Id = options.Id;
|
||
}
|
||
},
|
||
mounted(){
|
||
this.getActivitiesDetail();
|
||
},
|
||
methods: {
|
||
toggleFavorite() {
|
||
this.isFavorite = !this.isFavorite
|
||
uni.showToast({
|
||
title: this.isFavorite ? '已收藏' : '已取消收藏',
|
||
icon: 'none'
|
||
})
|
||
},
|
||
|
||
async handleSignUp(){
|
||
try {
|
||
const res = await get(`/api/v1/app_auth/activities/${this.Id}`);
|
||
if ( !res.success) {
|
||
uni.showToast({
|
||
title: res.msg || '报名失败',
|
||
icon: 'error'
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title: '报名成功！',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
|
||
} catch (err) {
|
||
console.error('获取详情失败:', err);
|
||
}
|
||
},
|
||
shareActivity() {
|
||
uni.share({
|
||
title: this.activityInfo.title,
|
||
content: '一起来参加社区夜跑活动吧！',
|
||
href: '/pages/activity/detail',
|
||
imageUrl: this.bannerImages[0]
|
||
})
|
||
},
|
||
previewImage(index) {
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: [...this.bannerImages, '/static/route-map.jpg']
|
||
})
|
||
},
|
||
async getActivitiesDetail(){
|
||
try {
|
||
const res = await get(`/api/v1/apps/home/activities/${this.Id}`);
|
||
if (!res || !res.success) {
|
||
throw new Error('获取详情失败');
|
||
}
|
||
let imgs = res.data.images;
|
||
imgs.forEach(item => {
|
||
if (!item.startsWith('http') && !item.startsWith('https')) {
|
||
item = IMAGE_BASE_URL + item;
|
||
this.bannerImages.push(item);
|
||
}
|
||
});
|
||
this.activityInfo = {...res.data};
|
||
} catch (err) {
|
||
console.error('获取详情失败:', err);
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$primary-color: #5b9cf8;
|
||
$secondary-color: #F7F8FA;
|
||
$text-color: #333;
|
||
$light-text: #666;
|
||
$border-color: #eee;
|
||
$border-radius: 16rpx;
|
||
$shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
|
||
|
||
.activity-detail-container {
|
||
padding-bottom: 120rpx;
|
||
background-color: $secondary-color;
|
||
|
||
.activity-banner {
|
||
width: 100%;
|
||
height: 420rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.activity-base-info {
|
||
padding: 30rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
box-shadow: $shadow;
|
||
|
||
.title-box {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.status-tag {
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 30rpx;
|
||
font-size: 24rpx;
|
||
|
||
&.active {
|
||
background-color: rgba($primary-color, 0.1);
|
||
color: $primary-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(1, 1fr);
|
||
gap: 20rpx;
|
||
|
||
.info-item {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.info-text {
|
||
font-size: 26rpx;
|
||
color: $light-text;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.detail-card, .tips-card {
|
||
background-color: #fff;
|
||
border-radius: $border-radius;
|
||
padding: 30rpx;
|
||
margin: 0 20rpx 20rpx;
|
||
box-shadow: $shadow;
|
||
|
||
.card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 30rpx;
|
||
|
||
.header-line {
|
||
width: 6rpx;
|
||
height: 32rpx;
|
||
background-color: $primary-color;
|
||
border-radius: 4rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
}
|
||
}
|
||
|
||
.detail-section {
|
||
margin-bottom: 40rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
.title-icon {
|
||
width: 8rpx;
|
||
height: 28rpx;
|
||
background-color: $primary-color;
|
||
border-radius: 4rpx;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
text {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: $text-color;
|
||
}
|
||
}
|
||
|
||
.section-content {
|
||
font-size: 28rpx;
|
||
color: $light-text;
|
||
line-height: 1.6;
|
||
|
||
.route-map {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
border-radius: $border-radius;
|
||
}
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 40rpx;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 15rpx;
|
||
top: 10rpx;
|
||
bottom: 10rpx;
|
||
width: 2rpx;
|
||
background-color: $border-color;
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding-bottom: 30rpx;
|
||
|
||
&:last-child {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
.timeline-dot {
|
||
position: absolute;
|
||
left: -40rpx;
|
||
top: 4rpx;
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1;
|
||
|
||
&::after {
|
||
content: '';
|
||
width: 10rpx;
|
||
height: 10rpx;
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.timeline-content {
|
||
.timeline-time {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: $primary-color;
|
||
font-weight: bold;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.timeline-desc {
|
||
font-size: 28rpx;
|
||
color: $light-text;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.point-rules {
|
||
.rule-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 20rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.rule-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background-color: $primary-color;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
|
||
text {
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.rule-text {
|
||
font-size: 28rpx;
|
||
color: $light-text;
|
||
line-height: 1.5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips-content {
|
||
.tip-item {
|
||
display: block;
|
||
position: relative;
|
||
padding-left: 30rpx;
|
||
font-size: 28rpx;
|
||
color: $light-text;
|
||
line-height: 1.6;
|
||
margin-bottom: 16rpx;
|
||
|
||
&::before {
|
||
content: '•';
|
||
position: absolute;
|
||
left: 0;
|
||
color: $primary-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.action-bar {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 100rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.action-btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 120rpx;
|
||
height: 100%;
|
||
|
||
text {
|
||
font-size: 22rpx;
|
||
color: $light-text;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
|
||
.signup-btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
background-color: #5b9cf8;
|
||
color: #fff;
|
||
border-radius: 40rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-left: 20rpx;
|
||
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.activity-detail-container {
|
||
max-width: 750px;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
</style> |