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

<template>
	<view class="task-upload">
		<!-- 驳回原因提示 -->
		<view class="reject-tip" v-if="isRejected">
			<text>拒绝原因:{{taskInfo.rejectReason || '部分任务要求不符合'}}</text>
		</view>
		
		<!-- 任务头部信息 -->
		<view class="task-header">
			<view class="task-title">{{taskInfo.title}}</view>
			<view class="task-deadline">请于{{taskInfo.deadline}}之前上传任务，超时将自动取消</view>
		</view>
		
		<!-- 上传表单 -->
		<view class="upload-form">
			<view class="form-title">任务完成凭证</view>
			
			<!-- 笔记链接 -->
			<view class="form-item">
				<view class="item-label">笔记链接</view>
				<view class="item-content">
					<u-textarea v-model="formData.noteLink" placeholder="猫妈狗爸" maxlength="300" height="120"></u-textarea>
					<view class="word-count">{{formData.noteLink.length || 0}}/300</view>
				</view>
			</view>
			
			<!-- 笔记截图 -->
			<view class="form-item">
				<view class="item-label">笔记截图 <text class="required">*</text></view>
				<view class="item-content">
					<u-upload
						:fileList="fileList"
						@afterRead="afterRead"
						@delete="deletePic"
						:maxCount="6"
						name="1"
						:multiple="true"
						:maxSize="10 * 1024 * 1024"
					></u-upload>
					<view class="upload-tips">请上传任务完成的截图凭证，最多6张，每张不超过10MB</view>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn">
			<u-button type="primary" color="#ffaa48" text="确认上传" @click="submitTaskHandler"></u-button>
		</view>
	</view>
</template>

<script>
	import { getTaskDetail, submitTask } from "@/api/system/task.js"
	export default {
		data() {
			return {
				taskId: null,
				taskStatus: '',
				isRejected: false,
				taskInfo: {
					id: 0,
					title: '',
					deadline: '',
					rejectReason: ''
				},
				formData: {
					noteLink: '',
					images: []
				},
				fileList: []
			}
		},
		onLoad(options) {
			if (options.id) {
				this.taskId = options.id
				this.taskStatus = options.status || ''
				this.isRejected = this.taskStatus === 'REJECTED'
				this.getTaskDetail()
			} else {
				uni.showToast({
					title: '任务ID不存在',
					icon: 'none'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		},
		methods: {
			getTaskDetail() {
				// 获取任务详情
				// 实际项目中取消注释下面的代码
				/*
				getTaskDetail(this.taskId).then(res => {
					if (res && res.code === 200) {
						this.taskInfo = res.data
					}
				})
				*/
				
				// 模拟数据
				const mockData = {
					id: this.taskId,
					title: '发布小红书宣传笔记',
					deadline: '2025-03-28',
					rejectReason: this.isRejected ? '图片不清晰，请重新上传高清图片' : ''
				}
				this.taskInfo = mockData
			},
			afterRead(event) {
				// 读取文件后的处理
				const { file } = event
				this.fileList.push({
					url: file.url,
					status: 'success',
					message: '上传成功',
					name: file.name
				})
				this.formData.images.push(file.url)
			},
			deletePic(event) {
				// 删除图片
				const index = event.index
				this.fileList.splice(index, 1)
				this.formData.images.splice(index, 1)
			},
			submitTaskHandler() {
				// 提交任务
				if (this.formData.images.length === 0) {
					uni.showToast({
						title: '请上传任务完成凭证',
						icon: 'none'
					})
					return
				}
				
				// 实际项目中取消注释下面的代码
				/*
				submitTask({
					taskId: this.taskId,
					noteLink: this.formData.noteLink,
					images: this.formData.images
				}).then(res => {
					if (res && res.code === 200) {
						uni.showToast({
							title: '任务提交成功',
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1500)
					}
				})
				*/
				
				// 模拟提交
				uni.showLoading({
					title: '提交中...'
				})
				
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '任务提交成功',
						icon: 'success'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}, 1500)
			}
		}
	}
</script>

<style lang="scss">
	.task-upload {
		background-color: #f5f5f7;
		min-height: 100vh;
		padding-bottom: 120rpx;
		
		.reject-tip {
			background-color: #FFF1F0;
			padding: 20rpx 30rpx;
			
			text {
				color: #FF5722;
				font-size: 28rpx;
			}
		}
		
		.task-header {
			background-color: #FFFFFF;
			padding: 30rpx;
			
			.task-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 20rpx;
			}
			
			.task-deadline {
				font-size: 26rpx;
				color: #999;
			}
		}
		
		.upload-form {
			background-color: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx;
			
			.form-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 30rpx;
				border-left: 8rpx solid #ffaa48;
				padding-left: 20rpx;
			}
			
			.form-item {
				margin-bottom: 30rpx;
				
				.item-label {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 20rpx;
					
					.required {
						color: #f56c6c;
						margin-left: 4rpx;
					}
				}
				
				.item-content {
					position: relative;
					
					.word-count {
						position: absolute;
						bottom: 10rpx;
						right: 10rpx;
						font-size: 24rpx;
						color: #999;
					}
					
					.upload-tips {
						font-size: 24rpx;
						color: #999;
						margin-top: 20rpx;
					}
				}
			}
		}
		
		.submit-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #FFFFFF;
			padding: 20rpx 30rpx;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		}
	}
</style>