You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
267 lines
5.5 KiB
267 lines
5.5 KiB
<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>
|