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.
422 lines
13 KiB
422 lines
13 KiB
<template>
|
|
<view class="task-detail">
|
|
<!-- 任务头部信息 -->
|
|
<view class="task-header">
|
|
<view class="header-content">
|
|
<view class="header-top-row">
|
|
<view class="task-status-tag"
|
|
:class="{ 'status-pending': taskInfo.status === 0, 'status-reviewing': taskInfo.status === 1, 'status-rejected': taskInfo.status === 3, 'status-approved': taskInfo.status === 2 }">
|
|
<text v-if="taskInfo.status === 0">待上传</text>
|
|
<text v-else-if="taskInfo.status === 1">待审核</text>
|
|
<text v-else-if="taskInfo.status === 2">审核通过</text>
|
|
<text v-else-if="taskInfo.status === 3">已驳回</text>
|
|
</view>
|
|
<view class="task-type">悬赏任务</view>
|
|
<view class="task-reward" v-if="taskInfo.type == 0">酬劳 <text>{{ taskInfo.taskCouponTitle }}</text>
|
|
</view>
|
|
<view class="task-reward" v-if="taskInfo.type == 1">酬劳 <text> ¥{{ taskInfo.taskMoney }}</text></view>
|
|
</view>
|
|
<view class="task-deadline">请于
|
|
<text style="color: #FF5722;">{{ taskInfo.endTime ? formatDate(taskInfo.endTime) : '' }}</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.rejectTxt || '未提供驳回原因'}}</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<!-- 任务图片 -->
|
|
<view class="task-images" v-if="taskInfo.image">
|
|
<image :src="taskInfo.image" mode="widthFix" style="width: 100%;border-radius: 20rpx;"></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="uploadTask">立即上传</u-button>
|
|
|
|
<u-button shape="circle" disabled v-else-if="taskInfo.status == 1" text="审核中"></u-button>
|
|
|
|
<u-button shape="circle" color="#ffaa48" v-else-if="taskInfo.status == 3"
|
|
@click="uploadTask">重新上传</u-button>
|
|
|
|
<u-button v-if="taskInfo.status === 3" shape="circle" type="error" text="驳回原因"
|
|
@click="showRejectReason"></u-button>
|
|
|
|
<view v-if="taskInfo.status == 2" class="task-status task-status-approved">已通过</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getTaskDetail,
|
|
getTaskDetailUser,
|
|
} from "@/api/order/task.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
taskInfo: {
|
|
id: 0,
|
|
title: '',
|
|
theme: '',
|
|
endTime: '',
|
|
type: 0,
|
|
taskCouponTitle: '',
|
|
taskMoney: 0,
|
|
status: 0,
|
|
rejectTxt: '',
|
|
taskIcon: ''
|
|
},
|
|
stepsList: [{
|
|
title: '接受任务'
|
|
},
|
|
{
|
|
title: '上传任务'
|
|
},
|
|
{
|
|
title: '平台审核'
|
|
},
|
|
{
|
|
title: '酬劳到账'
|
|
}
|
|
],
|
|
currentStep: 0,
|
|
id: 0,
|
|
status: 0,
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.status) {
|
|
this.status = options.status || 0
|
|
}
|
|
if (options.id) {
|
|
this.id = options.id
|
|
this.loadTaskDetail(options.id);
|
|
}
|
|
},
|
|
methods: {
|
|
showRejectReason() {
|
|
uni.showModal({
|
|
title: '驳回原因',
|
|
content: this.taskInfo.rejectTxt || '未提供驳回原因',
|
|
showCancel: false
|
|
});
|
|
},
|
|
loadTaskDetail(taskId) {
|
|
if (this.status == 0) {
|
|
getTaskDetail(taskId).then(res => {
|
|
if (res && res.code === 200) {
|
|
this.taskInfo = res.data;
|
|
// 根据任务状态设置当前步骤
|
|
this.updateCurrentStep();
|
|
}
|
|
});
|
|
}else{
|
|
getTaskDetailUser(taskId).then(res => {
|
|
if (res && res.code === 200) {
|
|
this.taskInfo = res.data;
|
|
// 根据任务状态设置当前步骤
|
|
this.updateCurrentStep();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
updateCurrentStep() {
|
|
// 根据任务状态设置当前步骤
|
|
if (this.taskInfo.status === 0) {
|
|
this.currentStep = 1; // 待上传
|
|
} else if (this.taskInfo.status === 1) {
|
|
this.currentStep = 2; // 待审核
|
|
} else if (this.taskInfo.status === 2) {
|
|
this.currentStep = 3; // 审核通过
|
|
} else if (this.taskInfo.status === 3) {
|
|
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.status}`
|
|
});
|
|
},
|
|
|
|
}
|
|
}
|
|
</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>
|