pet-front-order/pages_order/task/taskDetail.vue

<template>
	<view class="task-detail">
		<!-- 任务头部信息 -->
		<view class="task-header">
			<view class="task-title">{{taskInfo.title}}</view>
			<view class="task-deadline">请于{{taskInfo.deadline}}之前上传任务，超时将自动取消</view>
		</view>
		
		<!-- 任务进度 -->
		<view class="task-progress">
			<view class="progress-title">任务进度</view>
			<uni-steps :options="stepsList" :active="currentStep" active-icon="checkbox-filled" active-color="#ffaa48"></uni-steps>
		</view>
		
		<!-- 任务说明 -->
		<view class="task-instruction">
			<view class="instruction-header">
				<image class="instruction-icon" src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png"></image>
				<view class="instruction-title">悬赏任务说明</view>
			</view>
			
			<view class="instruction-content">
				<view class="instruction-main">
					<text>请以"{{taskInfo.description}}"为主题编辑小红书宣传笔记~</text>
				</view>
				
				<view class="requirement-section">
					<view class="requirement-title">封面和配图要求</view>
					<view class="requirement-content">
						<text>封面: 个人宠物图片</text>
						<text>配图: 个人宠物图片或小程序页面截图(共2-3张)</text>
					</view>
				</view>
				
				<view class="requirement-section">
					<view class="requirement-title">标题示例 (实际发布可以参照以下)</view>
					<view class="title-examples">
						<view class="example-item">
							<view class="example-tag">H1</view>
							<view class="example-text">春节回家猫咪/狗狗怎么办?</view>
						</view>
						<view class="example-item">
							<view class="example-tag">H2</view>
							<view class="example-text">今年过年不用担心宠物没人照顾啦~</view>
						</view>
						<view class="example-item">
							<view class="example-tag">H3</view>
							<view class="example-text">关于宠物喂养平台的真实体验；</view>
						</view>
						<view class="example-item">
							<view class="example-tag">H4</view>
							<view class="example-text">出门旅游，再也不用担心宠物啦！</view>
						</view>
					</view>
				</view>
				
				<view class="requirement-section">
					<view class="requirement-title">其他要求</view>
					<view class="other-requirements">
						<view class="requirement-item">
							<view class="requirement-tag">①</view>
							<view class="requirement-text">文案内容不少于400字；</view>
						</view>
						<view class="requirement-item">
							<view class="requirement-tag">②</view>
							<view class="requirement-text">提及关键词上门猫咪/上门狗狗/上门喂养；</view>
						</view>
						<view class="requirement-item">
							<view class="requirement-tag">③</view>
							<view class="requirement-text">提及猫狗宠物平台并适当好评；</view>
						</view>
						<view class="requirement-item">
							<view class="requirement-tag">④</view>
							<view class="requirement-text">评论区@猫狗宠物官方账号；</view>
						</view>
					</view>
				</view>
				
				<view class="note-text">
					<text>注意是评论区！请务必在正文@官方账号！</text>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮 -->
		<view class="footer-buttons">
			<u-button shape="circle" plain @click="cancelTask">取消</u-button>
			<u-button shape="circle" color="#ffaa48" @click="reuploadTask">重新上传</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getTaskDetail
	} from "@/api/system/task.js"
	export default {
		data() {
			return {
				taskInfo: {
					id: 0,
					title: '发布小红书宣传笔记',
					description: '主题: 猫狗狗食使用感受&体验',
					deadline: '2025-03-28',
					taskType: '悬赏任务',
					reward: '2',
					status: 'PENDING'
				},
				stepsList: [
					{
						title: '接受任务'
					},
					{
						title: '上传任务'
					},
					{
						title: '平台审核'
					},
					{
						title: '酬劳到账'
					}
				],
				currentStep: 0
			}
		},
		onLoad(options) {
			if (options.id) {
				this.loadTaskDetail(options.id);
			}
		},
		methods: {
			loadTaskDetail(taskId) {
				// 实际项目中取消注释下面的代码
				/*
				getTaskDetail(taskId).then(res => {
					if (res && res.code === 200) {
						this.taskInfo = res.data;
						// 根据任务状态设置当前步骤
						switch(this.taskInfo.status) {
							case 'PENDING':
								this.currentStep = 0;
								break;
							case 'ACCEPTED':
								this.currentStep = 1;
								break;
							case 'SUBMITTED':
								this.currentStep = 2;
								break;
							case 'COMPLETED':
								this.currentStep = 3;
								break;
						}
					}
				});
				*/
				
				// 模拟数据
				console.log('加载任务详情，ID:', taskId);
				// 设置当前步骤为1（已接受）
				this.currentStep = 1;
			},
			cancelTask() {
				uni.showToast({
					title: '已取消任务',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			},
			reuploadTask() {
				uni.showToast({
					title: '准备重新上传',
					icon: 'none'
				});
				// 这里可以添加上传逻辑或跳转到上传页面
			}
		}
	}
</script>

<style lang="scss">
	.task-detail {
		background-color: #f5f5f7;
		min-height: 100vh;
		padding-bottom: 120rpx;
		
		.task-header {
			background-color: #FFFFFF;
			padding: 30rpx;
			
			.task-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
			
			.task-deadline {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.task-progress {
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx;
			
			.progress-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 30rpx;
			}
		}
		
		.task-instruction {
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx;
			
			.instruction-header {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				
				.instruction-icon {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
				
				.instruction-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #A94F20;
				}
			}
			
			.instruction-content {
				.instruction-main {
					padding: 20rpx 0;
					border-bottom: 1px solid #EEEEEE;
					margin-bottom: 20rpx;
					
					text {
						font-size: 28rpx;
						color: #666;
						line-height: 1.6;
					}
				}
				
				.requirement-section {
					margin-bottom: 30rpx;
					
					.requirement-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 20rpx;
					}
					
					.requirement-content {
						padding: 20rpx;
						background-color: #FFF4E5;
						border-radius: 10rpx;
						
						text {
							display: block;
							font-size: 26rpx;
							color: #A94F20;
							line-height: 1.8;
						}
					}
					
					.title-examples {
						background-color: #FFF4E5;
						padding: 20rpx;
						border-radius: 10rpx;
						
						.example-item {
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;
							
							.example-tag {
								width: 50rpx;
								height: 50rpx;
								background-color: #ffaa48;
								color: #FFFFFF;
								border-radius: 25rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 24rpx;
								margin-right: 20rpx;
							}
							
							.example-text {
								font-size: 26rpx;
								color: #A94F20;
							}
						}
					}
					
					.other-requirements {
						background-color: #FFF4E5;
						padding: 20rpx;
						border-radius: 10rpx;
						
						.requirement-item {
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;
							
							.requirement-tag {
								width: 40rpx;
								height: 40rpx;
								color: #A94F20;
								display: flex;
								justify-content: center;
								align-items: center;
								font-size: 24rpx;
								margin-right: 20rpx;
							}
							
							.requirement-text {
								font-size: 26rpx;
								color: #A94F20;
							}
						}
					}
				}
				
				.note-text {
					text-align: center;
					margin-top: 20rpx;
					
					text {
						font-size: 24rpx;
						color: #FF5722;
					}
				}
			}
		}
		
		.footer-buttons {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
			
			.u-button {
				width: 300rpx;
				height: 80rpx;
				font-size: 28rpx;
			}
		}
	}
</style>