rtliveCompany/pages_task/taskDetail.vue

<template>
	<view class="container">
		<scroll-view class="content" scroll-y>
			<!-- 任务卡片 -->
			<view class="task-card">
				<view class="card-header">
					<view class="card-title">{{ taskData.title }}</view>
					<view class="status-tag" :class="taskData.status">
						{{ taskData.statusText }}
					</view>
				</view>
				
				<view class="card-tags">
					<view class="tag-item video-tag">
						<text class="tag-icon">▶</text>
						<text>{{ taskData.videoType }}</text>
					</view>
					<view class="tag-item">{{ taskData.category }}</view>
					<view class="tag-item points-tag">{{ taskData.points }}积分</view>
					<view class="tag-item">{{ taskData.count }}个</view>
				</view>
				
				<view class="card-dates">
					<view class="date-item">开始时间: {{ taskData.startTime }}</view>
					<view class="date-item">结束时间: {{ taskData.endTime }}</view>
				</view>
			</view>
			
			<!-- 项目信息 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">项目信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">项目名称:</text>
						<text class="info-value">{{ projectData.projectName }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">任务ID:</text>
						<text class="info-value">{{ projectData.taskId }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">交付物ID:</text>
						<text class="info-value">{{ projectData.deliverableId }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">观看人数:</text>
						<text class="info-value">{{ projectData.viewers }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">有效观看:</text>
						<text class="info-value">{{ projectData.validViews }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">标题:</text>
						<text class="info-value">{{ projectData.title }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">项目信息:</text>
						<text class="info-value">{{ projectData.projectInfo || '-' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">封面图:</text>
						<view class="cover-image">
							<image v-if="projectData.coverImage" :src="projectData.coverImage" mode="aspectFill"></image>
							<text v-else>-</text>
						</view>
					</view>
					<view class="info-item">
						<text class="info-label">情况说明:</text>
						<text class="info-value">{{ projectData.description || '-' }}</text>
					</view>
				</view>
			</view>
			
			<!-- 申请人员信息 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">申请人员信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">申请人姓名:</text>
						<text class="info-value">{{ applicantData.name }}</text>
					</view>
				</view>
			</view>
			
			<!-- 客户信息 -->
			<view class="info-section">
				<view class="section-header">
					<view class="section-indicator"></view>
					<text class="section-title">客户信息</text>
				</view>
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">客户名称:</text>
						<text class="info-value">{{ clientData.name }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">客户ID:</text>
						<text class="info-value">{{ clientData.clientId }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">归属医院:</text>
						<text class="info-value">{{ clientData.hospital }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">归属科室:</text>
						<text class="info-value">{{ clientData.department }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部按钮 -->
		<view class="bottom-btn" v-if="taskData.status === 'pending'" @click="goComplete">
			去完成
		</view>
	</view>
</template>

<script>
import { getTaskDetail } from '@/api-js/airClassroom'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			taskId: '',
			taskData: {
				title: '王小明医生学术视频任务',
				videoType: '长视频',
				category: '学术',
				points: '10',
				count: '1',
				startTime: '2025-9-20 13:55',
				endTime: '2025-9-20 13:55',
				status: 'pending',
				statusText: '待完成'
			},
			projectData: {
				projectName: '王小明医学术视频任务',
				taskId: 'CRW234443000221',
				deliverableId: 'JF123456',
				viewers: '688',
				validViews: '680',
				title: '康复医学概论',
				projectInfo: '-',
				coverImage: '',
				description: '-'
			},
			applicantData: {
				name: '张菲菲'
			},
			clientData: {
				name: '王小明',
				clientId: 'C00000001231445',
				hospital: '江南大学附属医院',
				department: '消化内科'
			}
		}
	},
	onLoad(options) {
		if (options.id) {
			this.taskId = options.id
			this.loadData()
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		goComplete() {
			uni.navigateTo({
				url: `/pages_task/completeTask?id=${this.taskId}`
			})
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getTaskDetail({ id: this.taskId })
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.taskData = { ...this.taskData, ...res.data.task }
					this.projectData = { ...this.projectData, ...res.data.project }
					this.applicantData = { ...this.applicantData, ...res.data.applicant }
					this.clientData = { ...this.clientData, ...res.data.client }
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

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

.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.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;
}

.task-card {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	
	.card-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-bottom: 16rpx;
		
		.card-title {
			flex: 1;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.status-tag {
			padding: 8rpx 16rpx;
			border-radius: 20rpx;
			font-size: 24rpx;
			
			&.pending {
				background: #E3F2FD;
				color: #2196F3;
			}
		}
	}
	
	.card-tags {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12rpx;
		margin-bottom: 16rpx;
		
		.tag-item {
			padding: 8rpx 16rpx;
			background: #f5f5f5;
			border-radius: 8rpx;
			font-size: 24rpx;
			color: #666;
			
			&.video-tag {
				background: #FFF3E0;
				color: #FF9800;
				
				.tag-icon {
					margin-right: 4rpx;
				}
			}
			
			&.points-tag {
				border: 1rpx solid #388BFF;
				color: #388BFF;
				background: transparent;
			}
		}
	}
	
	.card-dates {
		.date-item {
			font-size: 26rpx;
			color: #999;
			margin-bottom: 8rpx;
		}
	}
}

.info-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	
	.section-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		
		.section-indicator {
			width: 6rpx;
			height: 32rpx;
			background: #388BFF;
			border-radius: 3rpx;
			margin-right: 16rpx;
		}
		
		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.info-list {
		.info-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 24rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.info-label {
				width: 160rpx;
				font-size: 28rpx;
				color: #666;
				flex-shrink: 0;
			}
			
			.info-value {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
			
			.cover-image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 8rpx;
				overflow: hidden;
				
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}

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