rtliveDoctor/pages_task/taskDetail.vue

<template>
	<view class="container">
      <!-- <image class="bg" src="https://ysrw-1395926010.cos.ap-chengdu.myqcloud.com/images/bg_qestion.png" mode="widthFix"></image> -->
		<view class="bg"></view>
		<view class="fixed-top-box" :style="{background: bgColor }">
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="back-box" @click="goBack">
				<image src="@/static/image/icon_back_w.png" mode=""></image>
				<text class="title">任务详情</text>
				<text></text>
			</view>
		</view>
		<scroll-view class="content" scroll-y>
			<!-- 任务卡片 -->
			<view class="task-card">
				<view class="card-header">
					<view class="card-title">{{ taskData.taskName || '-'}}</view>
					<view class="status-tag" :class="'tag'+taskData.finishAuditStatus">
						{{ taskData.finishAuditStatus==0?'待审核':taskData.finishAuditStatus==1?'已通过':taskData.finishAuditStatus==2?'已驳回':'未完成'}}
					</view>
				</view>
				
				<view class="card-tags">
					<view class="x-f">
					<view class="tag-item video-tag">
						<image v-if="taskData.taskType==4" class="w28 h28 mr10" src="@/static/image/icon_article.png" mode=""></image>
						<image v-else class="w28 h28 mr10" src="@/static/image/icon_longvideo.png" mode=""></image>
						<text>{{ taskData.taskType==4?'文章':taskData.taskType==5?'短视频':'长视频'}}</text>
					</view>
					<view class="tag-item category">学术</view>
					</view>
					<view class="tag-item points-tag">{{ taskData.taskIntegral || 0}}积分</view>
					<view class="tag-item">{{ taskData.taskUnit || 0 }}个</view>
				</view>
				
				<view class="card-dates">
					<view class="date-item">开始时间：{{ taskData.planStartTime || '-' }}</view>
					<view class="date-item">结束时间：{{ taskData.planEndTime || '-'}}</view>
				</view>
				<view class="card-rejection" v-if="taskData.finishAuditStatus == 2">
					<image class="w28 h28 mr8" src="@/static/image/icon_reject.png" mode=""></image>
					<text>驳回原因: {{ taskData.finishAuditRemark }}</text>
				</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">{{ taskData.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.deliveryNo||'-' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">观看人数:</text>
						<text class="info-value">{{ projectData.viewCount||0 }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">有效观看:</text>
						<text class="info-value">{{ projectData.validViews||0 }}</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.content || '-' }}</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.remark || '-' }}</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">{{ taskData.doctorName || '-' }}</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.doctorName || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">客户ID:</text>
						<text class="info-value">{{ clientData.doctorId || '-'}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">归属医院:</text>
						<text class="info-value">{{ clientData.institution || '-'}}</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="submit-box" v-if="taskData.finishAuditStatus == 3||taskData.finishAuditStatus == 2">
			<view class="submit-btn"  @click="goComplete">去完成</view>
		</view>
	</view>
</template>

<script>
import { getTaskDetail } from '@/api/airClassroom'
export default {
	data() {
		return {
			top:0,
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			taskId: '',
			taskData: {
			},
			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()
		}
	},
	onPageScroll(e) {
		//console.log(e)
		this.top = e.scrollTop;
	},
	computed: {
		// 计算属性的 getter
		bgColor: function() {
			var top = this.top / 30;
			return 'rgba(56, 139, 255,' + top + ')';
		},
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		goComplete() {
			uni.navigateTo({
				url: `/pages_task/completeTask?id=${this.taskId}&taskType=${this.taskData.taskType}`
			})
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getTaskDetail(this.taskId)
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.taskData = { ...this.taskData, ...res.data }
					this.projectData = { ...this.projectData, ...res.data.taskDelivery }
					this.applicantData = { ...this.applicantData, ...res.data.applicant }
					this.clientData = { ...this.clientData, ...res.data.doctorVO }
				}
			} 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;
}
.bg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 532rpx;
	background: linear-gradient( 180deg, rgba(56,139,255,0.79) 0%, rgba(56,139,255,0) 100%);
}
.fixed-top-box{
			width: 100%;
			// background: linear-gradient(135deg, #66b2ef 0%, #0bb3f2 100%);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24upx;
				image{
					width: 48rpx;
					height: 48rpx;
				}
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #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 {
	margin-top:168rpx;
	flex: 1;
	padding: 24rpx;
	box-sizing: border-box;
	padding-bottom: 120rpx;
}

.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;
			&.tag0 {
				// 待审核
				background: #FFF3E0;
				color: #FF9800;
			}
			
			&.tag1 {
				// 已通过
				background: #E8F5E9;
				color: #4CAF50;
			}
			
			&.tag2 {
				// 已驳回
				background: #FFF4F5;
				color: #CF3546;
			}
			&.tag3 {
				// 未完成
				background: #EBF5FF;
				color: #388BFF;
			}
		}
		
	}
	
	.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: #999999;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #F5F5F5;
			&.category{
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			    border: 2rpx solid #F3D191;
				background: #FFFAF4;
				color:#5D410F
			}
			&.video-tag {
				background: linear-gradient( 90deg, #FFE9C7 0%, #F3D091 100%);
				border-radius:8rpx 0rpx 0rpx 8rpx;
				border: 2rpx solid #F3D191;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #5D410F;
				display: flex;
				align-items: center;
				.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;
		}
	}
	.card-rejection {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx;
		background: #FFEBEE;
		border-radius: 8rpx;
		margin-bottom: 16rpx;
		font-size: 26rpx;
		color: #F44336;
		
		.rejection-icon {
			font-size: 28rpx;
		}
	}
}

.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%;
				}
			}
		}
	}
}

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