|
|
@ -2,30 +2,41 @@ |
|
|
<view class="task-detail"> |
|
|
<view class="task-detail"> |
|
|
<!-- 任务头部信息 --> |
|
|
<!-- 任务头部信息 --> |
|
|
<view class="task-header"> |
|
|
<view class="task-header"> |
|
|
<view class="task-title">{{taskInfo.title}}</view> |
|
|
|
|
|
<view class="task-deadline">请于{{taskInfo.taskEndTime ? formatDate(taskInfo.taskEndTime) : ''}}之前上传任务，超时将自动取消</view> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 任务进度 --> |
|
|
<!-- 任务进度 --> |
|
|
<view class="task-progress"> |
|
|
<view class="task-progress"> |
|
|
<view class="progress-title">任务进度</view> |
|
|
<view class="progress-title">任务进度</view> |
|
|
<uni-steps :options="stepsList" :active="currentStep" active-icon="checkbox-filled" active-color="#ffaa48"></uni-steps> |
|
|
|
|
|
|
|
|
<uni-steps :options="stepsList" :active="currentStep" active-icon="checkbox-filled" |
|
|
|
|
|
active-color="#ffaa48"></uni-steps> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 任务说明 --> |
|
|
<!-- 任务说明 --> |
|
|
<view class="task-instruction"> |
|
|
<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-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 class="instruction-title">{{taskInfo.taskName || '任务说明'}}</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
<view class="instruction-content"> |
|
|
<view class="instruction-content"> |
|
|
<view class="instruction-main"> |
|
|
|
|
|
|
|
|
<!-- <view class="instruction-main"> |
|
|
<text>{{taskInfo.theme || '暂无任务说明'}}</text> |
|
|
<text>{{taskInfo.theme || '暂无任务说明'}}</text> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
<!-- 审核未通过时显示驳回原因 --> |
|
|
<!-- 审核未通过时显示驳回原因 --> |
|
|
<view class="requirement-section" v-if="taskInfo.examineState === 2"> |
|
|
|
|
|
|
|
|
<!-- <view class="requirement-section" v-if="taskInfo.examineState === 2"> |
|
|
<view class="requirement-title">驳回原因</view> |
|
|
<view class="requirement-title">驳回原因</view> |
|
|
<view class="other-requirements"> |
|
|
<view class="other-requirements"> |
|
|
<view class="requirement-item"> |
|
|
<view class="requirement-item"> |
|
|
@ -33,19 +44,24 @@ |
|
|
<view class="requirement-text">{{taskInfo.examineText || '未提供驳回原因'}}</view> |
|
|
<view class="requirement-text">{{taskInfo.examineText || '未提供驳回原因'}}</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</view> --> |
|
|
|
|
|
|
|
|
<!-- 任务图片 --> |
|
|
<!-- 任务图片 --> |
|
|
<view class="task-images" v-if="taskInfo.image"> |
|
|
<view class="task-images" v-if="taskInfo.image"> |
|
|
<image :src="taskInfo.image" mode="widthFix" style="width: 100%;"></image> |
|
|
<image :src="taskInfo.image" mode="widthFix" style="width: 100%;"></image> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部按钮 --> |
|
|
<!-- 底部按钮 --> |
|
|
<view class="footer-buttons"> |
|
|
<view class="footer-buttons"> |
|
|
<u-button shape="circle" plain @click="cancelTask">取消</u-button> |
|
|
<u-button shape="circle" plain @click="cancelTask">取消</u-button> |
|
|
<u-button shape="circle" color="#ffaa48" v-if="taskInfo.taskState === 0 || taskInfo.examineState === 2" @click="uploadTask">{{taskInfo.examineState === 2 ? '重新上传' : '立即上传'}}</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> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
@ -54,6 +70,10 @@ |
|
|
import { |
|
|
import { |
|
|
getTaskDetail |
|
|
getTaskDetail |
|
|
} from "@/api/order/task.js" |
|
|
} from "@/api/order/task.js" |
|
|
|
|
|
import { |
|
|
|
|
|
getTaskList, |
|
|
|
|
|
acceptTask |
|
|
|
|
|
} from "@/api/order/task.js" |
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
@ -70,8 +90,7 @@ |
|
|
image: '', |
|
|
image: '', |
|
|
taskIcon: '' |
|
|
taskIcon: '' |
|
|
}, |
|
|
}, |
|
|
stepsList: [ |
|
|
|
|
|
{ |
|
|
|
|
|
|
|
|
stepsList: [{ |
|
|
title: '接受任务' |
|
|
title: '接受任务' |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
@ -84,15 +103,38 @@ |
|
|
title: '酬劳到账' |
|
|
title: '酬劳到账' |
|
|
} |
|
|
} |
|
|
], |
|
|
], |
|
|
currentStep: 0 |
|
|
|
|
|
|
|
|
currentStep: 0, |
|
|
|
|
|
id : 0, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad(options) { |
|
|
onLoad(options) { |
|
|
if (options.id) { |
|
|
if (options.id) { |
|
|
|
|
|
this.id = options.id |
|
|
this.loadTaskDetail(options.id); |
|
|
this.loadTaskDetail(options.id); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
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) { |
|
|
loadTaskDetail(taskId) { |
|
|
getTaskDetail(taskId).then(res => { |
|
|
getTaskDetail(taskId).then(res => { |
|
|
if (res && res.code === 200) { |
|
|
if (res && res.code === 200) { |
|
|
@ -141,6 +183,22 @@ |
|
|
uni.navigateTo({ |
|
|
uni.navigateTo({ |
|
|
url: `/pages_order/task/taskUpload?id=${this.taskInfo.id}&status=${this.taskInfo.examineState === 2 ? 'REJECTED' : 'ACCEPTED'}` |
|
|
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 ''; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -151,29 +209,66 @@ |
|
|
background-color: #f5f5f7; |
|
|
background-color: #f5f5f7; |
|
|
min-height: 100vh; |
|
|
min-height: 100vh; |
|
|
padding-bottom: 120rpx; |
|
|
padding-bottom: 120rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.task-header { |
|
|
.task-header { |
|
|
background-color: #FFFFFF; |
|
|
background-color: #FFFFFF; |
|
|
padding: 30rpx; |
|
|
padding: 30rpx; |
|
|
|
|
|
|
|
|
.task-title { |
|
|
|
|
|
font-size: 36rpx; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
color: #333; |
|
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.task-deadline { |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
color: #999; |
|
|
|
|
|
|
|
|
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 { |
|
|
.task-progress { |
|
|
background-color: #FFFFFF; |
|
|
background-color: #FFFFFF; |
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
|
margin: 20rpx; |
|
|
|
|
|
border-radius: 20rpx; |
|
|
padding: 30rpx; |
|
|
padding: 30rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.progress-title { |
|
|
.progress-title { |
|
|
font-size: 30rpx; |
|
|
font-size: 30rpx; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
@ -181,58 +276,59 @@ |
|
|
margin-bottom: 30rpx; |
|
|
margin-bottom: 30rpx; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.task-instruction { |
|
|
.task-instruction { |
|
|
background-color: #FFFFFF; |
|
|
background-color: #FFFFFF; |
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
|
margin: 20rpx; |
|
|
|
|
|
border-radius: 20rpx; |
|
|
padding: 30rpx; |
|
|
padding: 30rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.instruction-header { |
|
|
.instruction-header { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
margin-bottom: 30rpx; |
|
|
margin-bottom: 30rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.instruction-icon { |
|
|
.instruction-icon { |
|
|
width: 60rpx; |
|
|
width: 60rpx; |
|
|
height: 60rpx; |
|
|
height: 60rpx; |
|
|
margin-right: 20rpx; |
|
|
margin-right: 20rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.instruction-title { |
|
|
.instruction-title { |
|
|
font-size: 32rpx; |
|
|
font-size: 32rpx; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
color: #A94F20; |
|
|
color: #A94F20; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.instruction-content { |
|
|
.instruction-content { |
|
|
.instruction-main { |
|
|
.instruction-main { |
|
|
padding: 20rpx 0; |
|
|
padding: 20rpx 0; |
|
|
border-bottom: 1px solid #EEEEEE; |
|
|
border-bottom: 1px solid #EEEEEE; |
|
|
margin-bottom: 20rpx; |
|
|
margin-bottom: 20rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
text { |
|
|
text { |
|
|
font-size: 28rpx; |
|
|
font-size: 28rpx; |
|
|
color: #666; |
|
|
color: #666; |
|
|
line-height: 1.6; |
|
|
line-height: 1.6; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.requirement-section { |
|
|
.requirement-section { |
|
|
margin-bottom: 30rpx; |
|
|
margin-bottom: 30rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.requirement-title { |
|
|
.requirement-title { |
|
|
font-size: 28rpx; |
|
|
font-size: 28rpx; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
color: #333; |
|
|
color: #333; |
|
|
margin-bottom: 20rpx; |
|
|
margin-bottom: 20rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.requirement-content { |
|
|
.requirement-content { |
|
|
padding: 20rpx; |
|
|
padding: 20rpx; |
|
|
background-color: #FFF4E5; |
|
|
background-color: #FFF4E5; |
|
|
border-radius: 10rpx; |
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
text { |
|
|
text { |
|
|
display: block; |
|
|
display: block; |
|
|
font-size: 26rpx; |
|
|
font-size: 26rpx; |
|
|
@ -240,17 +336,17 @@ |
|
|
line-height: 1.8; |
|
|
line-height: 1.8; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.title-examples { |
|
|
.title-examples { |
|
|
background-color: #FFF4E5; |
|
|
background-color: #FFF4E5; |
|
|
padding: 20rpx; |
|
|
padding: 20rpx; |
|
|
border-radius: 10rpx; |
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.example-item { |
|
|
.example-item { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
margin-bottom: 15rpx; |
|
|
margin-bottom: 15rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.example-tag { |
|
|
.example-tag { |
|
|
width: 50rpx; |
|
|
width: 50rpx; |
|
|
height: 50rpx; |
|
|
height: 50rpx; |
|
|
@ -263,24 +359,24 @@ |
|
|
font-size: 24rpx; |
|
|
font-size: 24rpx; |
|
|
margin-right: 20rpx; |
|
|
margin-right: 20rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.example-text { |
|
|
.example-text { |
|
|
font-size: 26rpx; |
|
|
font-size: 26rpx; |
|
|
color: #A94F20; |
|
|
color: #A94F20; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.other-requirements { |
|
|
.other-requirements { |
|
|
background-color: #FFF4E5; |
|
|
background-color: #FFF4E5; |
|
|
padding: 20rpx; |
|
|
padding: 20rpx; |
|
|
border-radius: 10rpx; |
|
|
border-radius: 10rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.requirement-item { |
|
|
.requirement-item { |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
margin-bottom: 15rpx; |
|
|
margin-bottom: 15rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.requirement-tag { |
|
|
.requirement-tag { |
|
|
width: 40rpx; |
|
|
width: 40rpx; |
|
|
height: 40rpx; |
|
|
height: 40rpx; |
|
|
@ -291,7 +387,7 @@ |
|
|
font-size: 24rpx; |
|
|
font-size: 24rpx; |
|
|
margin-right: 20rpx; |
|
|
margin-right: 20rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.requirement-text { |
|
|
.requirement-text { |
|
|
font-size: 26rpx; |
|
|
font-size: 26rpx; |
|
|
color: #A94F20; |
|
|
color: #A94F20; |
|
|
@ -299,11 +395,11 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.note-text { |
|
|
.note-text { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
margin-top: 20rpx; |
|
|
margin-top: 20rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
text { |
|
|
text { |
|
|
font-size: 24rpx; |
|
|
font-size: 24rpx; |
|
|
color: #FF5722; |
|
|
color: #FF5722; |
|
|
@ -311,7 +407,7 @@ |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.footer-buttons { |
|
|
.footer-buttons { |
|
|
position: fixed; |
|
|
position: fixed; |
|
|
bottom: 0; |
|
|
bottom: 0; |
|
|
@ -322,8 +418,8 @@ |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: space-around; |
|
|
justify-content: space-around; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
|
.u-button { |
|
|
.u-button { |
|
|
width: 300rpx; |
|
|
width: 300rpx; |
|
|
height: 80rpx; |
|
|
height: 80rpx; |
|
|
|
