rtliveCompany/pages_task/activityDetail.vue

<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight}"></view>
		
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="@/static/image/back.png" mode="aspectFill"></image>
			</view>
			<view class="title">活动详情</view>
			<view class="header-right">
				<text class="more-icon">⋯</text>
				<text class="more-icon">○</text>
			</view>
		</view>
		
		<scroll-view class="content" scroll-y>
			<!-- 活动头部 -->
			<view class="activity-header">
				<view class="logo-section">
					<view class="logo-icon">预定</view>
					<view class="logo-text">YOUR LOGO</view>
					<view class="logo-url">www.gaoding.com</view>
				</view>
				
				<view class="activity-title">
					<view class="title-main">{{ activityData.title }}</view>
					<view class="title-en">{{ activityData.titleEn }}</view>
					<view class="title-date">{{ activityData.date }}</view>
				</view>
			</view>
			
			<!-- 活动主图 -->
			<view class="activity-banner">
				<image class="banner-image" :src="activityData.bannerImage" mode="aspectFill"></image>
				<view class="banner-text">{{ activityData.bannerText }}</view>
			</view>
		</scroll-view>
		
		<!-- 底部按钮 -->
		<view class="bottom-btn" :class="activityData.buttonClass" @click="handleAction">
			{{ activityData.buttonText }}
		</view>
	</view>
</template>

<script>
import { getActivityDetail } from '@/api-js/medicationSurvey'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			activityId: '',
			activityData: {
				title: '世界关节炎日',
				titleEn: 'WORLD ARTHRISTIS DAY',
				date: '2024年10月12日',
				bannerImage: '',
				bannerText: '早预防・早诊断・早治疗',
				status: 'notStarted', // notStarted, inProgress, ended
				buttonText: '活动未开始',
				buttonClass: 'not-started',
				completedCount: 0,
				totalCount: 3
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.activityId = options.id
			this.loadData()
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		handleAction() {
			if (this.activityData.status === 'notStarted') {
				uni.showToast({
					icon: 'none',
					title: '活动未开始'
				})
			} else if (this.activityData.status === 'ended') {
				uni.showToast({
					icon: 'none',
					title: '活动已结束'
				})
			} else {
				// 跳转到病例征集页面
				uni.navigateTo({
					url: `/pages_task/caseCollection?activityId=${this.activityId}`
				})
			}
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getActivityDetail({ id: this.activityId })
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.activityData = { ...this.activityData, ...res.data }
					this.updateButtonText()
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
			}
		},
		updateButtonText() {
			if (this.activityData.status === 'notStarted') {
				this.activityData.buttonText = '活动未开始'
				this.activityData.buttonClass = 'not-started'
			} else if (this.activityData.status === 'ended') {
				this.activityData.buttonText = '活动已结束'
				this.activityData.buttonClass = 'ended'
			} else {
				this.activityData.buttonText = `上传病例 ${this.activityData.completedCount}/${this.activityData.totalCount}`
				this.activityData.buttonClass = 'upload-case'
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(180deg, #E6F3FF 0%, #FFFFFF 100%);
	display: flex;
	flex-direction: column;
}

.status-bar {
	width: 100%;
	background: transparent;
}

.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	
	.back-btn {
		position: absolute;
		left: 24rpx;
		width: 40rpx;
		height: 40rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		position: absolute;
		right: 24rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.content {
	flex: 1;
	padding: 24rpx;
}

.activity-header {
	margin-bottom: 32rpx;
	
	.logo-section {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-bottom: 24rpx;
		
		.logo-icon {
			width: 48rpx;
			height: 48rpx;
			background: #388BFF;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #fff;
		}
		
		.logo-text {
			font-size: 28rpx;
			font-weight: bold;
			color: #388BFF;
		}
		
		.logo-url {
			font-size: 24rpx;
			color: #388BFF;
		}
	}
	
	.activity-title {
		.title-main {
			font-size: 48rpx;
			font-weight: bold;
			color: #388BFF;
			margin-bottom: 8rpx;
		}
		
		.title-en {
			font-size: 36rpx;
			font-weight: bold;
			color: #388BFF;
			margin-bottom: 8rpx;
		}
		
		.title-date {
			font-size: 28rpx;
			color: #388BFF;
		}
	}
}

.activity-banner {
	position: relative;
	width: 100%;
	height: 600rpx;
	border-radius: 16rpx;
	overflow: hidden;
	background: linear-gradient(135deg, #E6F3FF 0%, #FFFFFF 100%);
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
	
	.banner-text {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 28rpx;
		color: #fff;
		white-space: nowrap;
	}
}

.bottom-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
	z-index: 100;
	
	&.not-started {
		background: #87CEEB;
	}
	
	&.upload-case {
		background: #388BFF;
	}
	
	&.ended {
		background: #999;
	}
}
</style>