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

<template>
	<view class="task-detail">
		<!-- 任务头部信息 -->
		<view class="task-header">
			<view class="header-content">
				<view class="header-top-row">
					<view class="task-title">{{ getStatusText() }}</view>
					<view class="task-type">{{taskInfo.taskName || ''}}</view>
					<view class="task-reward">酬劳 <text> ¥{{taskInfo.taskMoney}}</text> </view>
				</view>
				<view class="task-deadline">请于
                    <text style="color: #FF5722;">{{taskInfo.taskEndTime ? formatDate(taskInfo.taskEndTime) : ''}}</text>
                    之前上传任务，超时将自动取消</view>
			</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="taskInfo.taskIcon || 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png'">
				</image>
				<view class="instruction-title">{{taskInfo.taskName || '任务说明'}}</view>
			</view> -->

			<view class="instruction-content">
				<!-- <view class="instruction-main">
					<text>{{taskInfo.theme || '暂无任务说明'}}</text>
				</view> -->

				<!-- 审核未通过时显示驳回原因 -->
				<!-- <view class="requirement-section" v-if="taskInfo.examineState === 2">
					<view class="requirement-title">驳回原因</view>
					<view class="other-requirements">
						<view class="requirement-item">
							<view class="requirement-tag">!</view>
							<view class="requirement-text">{{taskInfo.examineText || '未提供驳回原因'}}</view>
						</view>
					</view>
				</view> -->

				<!-- 任务图片 -->
				<view class="task-images" v-if="taskInfo.image">
					<image :src="taskInfo.image" mode="widthFix" style="width: 100%;"></image>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="footer-buttons">
			<u-button shape="circle" plain @click="cancelTask">取消</u-button>
			
			<u-button shape="circle" color="#ffaa48" v-if="taskInfo.status == 0"
				@click="acceptTaskHandler">接受任务</u-button>
				
			<u-button shape="circle" color="#ffaa48" v-else-if="taskInfo.taskState == 1 || taskInfo.examineState == 2"
				@click="uploadTask">{{taskInfo.examineState === 2 ? '重新上传' : '立即上传'}}</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getTaskDetail
	} from "@/api/order/task.js"
	import {
		getTaskList,
		acceptTask
	} from "@/api/order/task.js"
	export default {
		data() {
			return {
				taskInfo: {
					id: 0,
					title: '',
					theme: '',
					taskEndTime: '',
					taskName: '',
					taskMoney: 0,
					taskState: 0,
					examineState: 0,
					examineText: '',
					image: '',
					taskIcon: ''
				},
				stepsList: [{
						title: '接受任务'
					},
					{
						title: '上传任务'
					},
					{
						title: '平台审核'
					},
					{
						title: '酬劳到账'
					}
				],
				currentStep: 0,
				id : 0,
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
				this.loadTaskDetail(options.id);
			}
		},
		methods: {
			acceptTaskHandler(task) {
				// 接受任务
				uni.showModal({
					title: '接受任务',
					content: `确定接受任务: ${task.title}？`,
					success: res => {
						if (res.confirm) {
							acceptTask({id : task.id}).then(res => {
								if (res && res.code === 200) {
									uni.showToast({
										title: '任务接受成功',
										icon: 'success'
									});
									// 刷新任务
									this.loadTaskDetail(this.id);
								}
							});
						}
					}
				});
			},
			loadTaskDetail(taskId) {
				getTaskDetail(taskId).then(res => {
					if (res && res.code === 200) {
						this.taskInfo = res.data;
						// 根据任务状态设置当前步骤
						this.updateCurrentStep();
					}
				});
			},
			updateCurrentStep() {
				// 根据任务状态和审核状态设置当前步骤
				if (this.taskInfo.status === 0) {
					this.currentStep = 0; // 待接受
				} else if (this.taskInfo.taskState === 0) {
					this.currentStep = 1; // 已接受，待上传
				} else if (this.taskInfo.taskState === 1) {
					if (this.taskInfo.examineState === 0) {
						this.currentStep = 2; // 已提交，待审核
					} else if (this.taskInfo.examineState === 1) {
						this.currentStep = 3; // 已审核通过
					} else if (this.taskInfo.examineState === 2) {
						this.currentStep = 1; // 审核未通过，重新上传
					}
				}
			},
			formatDate(dateStr) {
				if (!dateStr) return '';
				let date = new Date(dateStr);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0');
				let day = date.getDate().toString().padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			cancelTask() {
				uni.showModal({
					title: '取消任务',
					content: '确定要取消此任务吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateBack();
						}
					}
				});
			},
			uploadTask() {
				uni.navigateTo({
					url: `/pages_order/task/taskUpload?id=${this.taskInfo.id}&status=${this.taskInfo.examineState === 2 ? 'REJECTED' : 'ACCEPTED'}`
				});
			},
			getStatusText() {
				if (this.taskInfo.status === 0) {
					return '待接受';
				} else if (this.taskInfo.taskState === 0) {
					return '待上传';
				} else if (this.taskInfo.taskState === 1) {
					if (this.taskInfo.examineState === 0) {
						return '待审核';
					} else if (this.taskInfo.examineState === 1) {
						return '审核通过';
					} else if (this.taskInfo.examineState === 2) {
						return '审核未通过';
					}
				}
				return '';
			}
		}
	}
</script>

<style lang="scss">
	.task-detail {
		background-color: #f5f5f7;
		min-height: 100vh;
		padding-bottom: 120rpx;

		.task-header {
			background-color: #FFFFFF;
			padding: 30rpx;
            margin: 20rpx;
            border-radius: 20rpx;
            background: linear-gradient(to bottom, #FFE4BB66, #fff, #fff, #fff);

			.header-content {
				.header-top-row {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.task-title {
						font-size: 30rpx;
						flex-shrink: 0;
						font-weight: 900;
					}

					.task-type {
						color: #C68C5B;
						font-size: 26rpx;
						background-color: #FFE4BB;
						padding: 10rpx 30rpx;
						border-radius: 30rpx;
						text-align: center;
						margin: 0 10rpx;
						width: fit-content;
					}

					.task-reward {
						font-size: 26rpx;
						color: #333;
						flex-shrink: 0;
						margin-left: auto;

						text {
							color: #FF5722;
							font-weight: bold;
							margin-left: 10rpx;
							font-size: 30rpx;
						}
					}
				}

				.task-deadline {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.task-progress {
			background-color: #FFFFFF;
            margin: 20rpx;
            border-radius: 20rpx;
			padding: 30rpx;

			.progress-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 30rpx;
			}
		}

		.task-instruction {
			background-color: #FFFFFF;
			margin: 20rpx;
            border-radius: 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>