<template>
|
<view class="container" @touchstart="touchStart" @touchend="touchEnd">
|
<!-- 顶部海报图 -->
|
<!-- 动态封面区域 -->
|
<view class="cover-container">
|
<!-- 图片类型 -->
|
<block v-if="activityInfo.coverType === 'image'">
|
<image :src="activityInfo.url" class="activity-cover" />
|
</block>
|
<block v-if=" activityInfo.coverType === 'video'">
|
<video :src="activityInfo.url" @play="handleVideoPlay" class="activity-cover"></video>
|
</block>
|
<!-- 文字类型 -->
|
<block v-if="activityInfo.coverType === 'text'">
|
<view class="text-cover">
|
<text class="cover-text">{{ activityInfo.cover }}</text>
|
</view>
|
</block>
|
</view>
|
|
<!-- 活动基本信息 -->
|
<view class="info-section">
|
<text class="title">{{ activityInfo.activityName }}</text>
|
<view class="meta-info">
|
<view>
|
<text class="time">
|
开始时间：{{ activityInfo.startTime }}
|
</text>
|
|
</view>
|
<view>
|
<text class="time">
|
结束时间：{{ activityInfo.endTime }}
|
</text>
|
</view>
|
<view>
|
<text class="location">地点：{{ activityInfo.activityLocation || '暂无' }}</text>
|
</view>
|
<view>
|
<text class="location">最大人数：{{ activityInfo.limitUserNum || '暂无' }}</text>
|
</view>
|
<view>
|
<text class="location">活动类型：{{ activityInfo.activityType || '暂无' }}</text>
|
</view>
|
</view>
|
<view class="tags">
|
<text v-for="(tag, index) in activityInfo.tags" :key="index" class="tag">{{ tag }}</text>
|
</view>
|
</view>
|
|
|
|
<!-- 活动详情内容 -->
|
<view class="rich-text-container">
|
<rich-text :nodes="activityInfo.activityContent" class="rich-text-content"></rich-text>
|
</view>
|
<!-- 报名状态 -->
|
<view class="status-bar" :style="{ backgroundColor: statusBarColor }">
|
<u-button class="signup-btn" @click.stop="activityReport()"
|
:disabled="reportBtn">{{ reportBtn ? '已报名': '立即报名'}}</u-button>
|
<view class="collect-icon" @click.stop="collect()">
|
<u-icon :name="isCollect ? 'star-fill' : 'star'" size="52"
|
:color="isCollect ? '#ffcc00' : '#999'"></u-icon>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import '@/components/uview-components/uview-ui';
|
import {changeCollect} from '@/api/collect.js'
|
import {getActivityDetail, activityReport} from '@/api/activity.js';
|
export default {
|
data() {
|
return {
|
startX: 0,
|
activityInfo: {
|
coverType: '',
|
cover: '',
|
activityName: '',
|
startTime: '', // 时间戳
|
endTime: '',
|
activityLocation: '',
|
tags: [],
|
activityContent: '',
|
activityType: '',
|
limitUserNum: '',
|
url: '',
|
},
|
isCollect: false,
|
reportBtn: false,
|
detailId: null, // 存储接收的参数
|
reportFrom: {
|
activityId: '',
|
cancel: false, //报名接口默认我false
|
},
|
collectForm: {
|
collectType: '',
|
refId: '',
|
},
|
};
|
},
|
onLoad(options) {
|
// 接收 URL 参数
|
if (options.id) {
|
this.detailId = options.id;
|
// 可在此处发起请求，根据 ID 加载详情数据
|
this.loadDetailData();
|
}
|
},
|
methods: {
|
/**
|
* 触摸开始
|
* @param {Object} e
|
*/
|
touchStart(e) {
|
if (e.touches.length == 1) {
|
//设置触摸起始点水平方向位置
|
this.startX = e.touches[0].clientX;
|
}
|
},
|
|
touchEnd(e) {
|
if (e.changedTouches.length == 1) {
|
//手指移动结束后水平位置
|
var endX = e.changedTouches[0].clientX;
|
let diff = endX - this.startX;
|
if (Math.abs(diff) > 20) {
|
if (diff > 0) {
|
console.log("左滑...");
|
|
} else {
|
console.log("右滑...");
|
}
|
}
|
}
|
},
|
collect() {
|
this.collectForm.collectType = 'activity'
|
this.collectForm.refId = this.detailId
|
changeCollect(this.collectForm).then(res => {
|
if (res.statusCode === 200) {
|
this.isCollect = true;
|
uni.showToast({
|
title: res.data.msg, // 提示文字
|
icon: 'success', // 图标类型（success/loading/none）
|
mask: true // 是否显示透明蒙层（防止触摸穿透）
|
});
|
}
|
this.getActivityDetail(this.detailId);
|
})
|
|
},
|
//报名
|
activityReport() {
|
this.reportFrom.activityId = this.detailId
|
activityReport(this.reportFrom).then(res => {
|
if (res.statusCode === 200) {
|
this.reportBtn = true;
|
uni.showToast({
|
title: res.data.msg, // 提示文字
|
icon: 'success', // 图标类型（success/loading/none）
|
mask: true // 是否显示透明蒙层（防止触摸穿透）
|
});
|
}
|
|
})
|
|
},
|
getActivityDetail(id) {
|
uni.showLoading({
|
title: '加载中'
|
});
|
getActivityDetail(id).then(res => {
|
uni.hideLoading();
|
console.log(res.data)
|
if (res.statusCode === 200) {
|
//赋值
|
this.activityInfo.coverType = res.data.data.coverType;
|
this.activityInfo.cover = res.data.data.cover;
|
this.activityInfo.activityName = res.data.data.activityName;
|
this.activityInfo.startTime = res.data.data.startTime;
|
this.activityInfo.endTime = res.data.data.endTime;
|
this.activityInfo.activityLocation = res.data.data.activityLocation;
|
this.activityInfo.activityContent = '<h2>活动介绍</h2>' + res.data.data.activityContent;
|
this.activityInfo.activityType = res.data.data.activityType;
|
this.activityInfo.limitUserNum = res.data.data.limitUserNum;
|
this.reportBtn = res.data.data.isReport;
|
this.isCollect = res.data.data.isCollect;
|
this.activityInfo.url = res.data.data.url;
|
}
|
})
|
},
|
loadDetailData() {
|
//获得详情接口
|
this.getActivityDetail(this.detailId);
|
|
|
|
}
|
}
|
};
|
</script>
|
<style lang="scss">
|
/* 封面容器 */
|
.cover-container {
|
position: relative;
|
width: 100%;
|
height: 400rpx;
|
overflow: hidden;
|
background-color: #f5f5f5;
|
}
|
|
/* 图片/视频封面样式 */
|
.activity-cover {
|
width: 100%;
|
height: 100%;
|
border-radius: 0;
|
/* 与列表页保持一致 */
|
}
|
|
/* 文字封面样式 - 与列表页保持一致 */
|
.text-cover {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
|
padding: 40rpx;
|
}
|
|
.cover-text {
|
color: #fff;
|
font-size: 36rpx;
|
font-weight: bold;
|
text-align: center;
|
line-height: 1.4;
|
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
}
|
|
.header-image {
|
width: 100%;
|
height: 400rpx;
|
}
|
|
.info-section {
|
padding: 30rpx;
|
background: #fff;
|
margin-top: 20rpx;
|
}
|
|
.title {
|
font-size: 40rpx;
|
font-weight: bold;
|
color: #333;
|
display: block;
|
margin-bottom: 20rpx;
|
}
|
|
.meta-info {
|
margin-bottom: 20rpx;
|
color: #666;
|
}
|
|
.time {
|
margin-right: 30rpx;
|
}
|
|
.tags {
|
display: flex;
|
flex-wrap: wrap;
|
margin-top: 20rpx;
|
}
|
|
.tag {
|
font-size: 24rpx;
|
padding: 8rpx 20rpx;
|
background: #f0f0f0;
|
border-radius: 30rpx;
|
margin-right: 15rpx;
|
margin-bottom: 15rpx;
|
}
|
|
.status-bar {
|
display: flex;
|
align-items: center;
|
padding: 10px 15px;
|
justify-content: space-between;
|
}
|
|
.signup-btn {
|
flex: 1;
|
margin-right: 15px;
|
}
|
|
.collect-icon {
|
width: 40px;
|
height: 40px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background-color: #f5f5f5;
|
border-radius: 8px;
|
}
|
|
.footer {
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
right: 0;
|
height: 100rpx;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
border-top: 1rpx solid #eee;
|
padding: 20rpx 0;
|
}
|
|
.footer-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
font-size: 24rpx;
|
color: #666;
|
}
|
|
.footer-icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.btn-container {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
margin-top: 8px;
|
/* 与上方标题保持间距 */
|
}
|
|
.rich-text-container {
|
padding: 15px;
|
}
|
|
.rich-text-content {
|
line-height: 1.6;
|
color: #333;
|
font-size: 16px;
|
}
|
|
.rich-text-content img {
|
max-width: 100%;
|
height: auto;
|
display: block;
|
margin: 10px auto;
|
}
|
|
.rich-text-content video {
|
max-width: 100%;
|
height: auto;
|
display: block;
|
margin: 10px auto;
|
}
|
|
.rich-text-content p {
|
margin-bottom: 10px;
|
}
|
|
.rich-text-content h1,
|
.rich-text-content h2,
|
.rich-text-content h3,
|
.rich-text-content h4 {
|
margin: 20px 0 10px;
|
color: #222;
|
}
|
|
.rich-text-content h1 {
|
font-size: 24px;
|
}
|
|
.rich-text-content h2 {
|
font-size: 22px;
|
}
|
|
.rich-text-content h3 {
|
font-size: 20px;
|
}
|
|
.rich-text-content h4 {
|
font-size: 18px;
|
}
|
</style>
|
