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.
367 lines
8.5 KiB
367 lines
8.5 KiB
<template>
|
|
<view class="task-detail">
|
|
<!-- 任务头部信息 -->
|
|
<view class="task-header">
|
|
<view class="task-title">{{taskInfo.title}}</view>
|
|
<view class="task-deadline">请于{{taskInfo.deadline}}之前上传任务，超时将自动取消</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="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png"></image>
|
|
<view class="instruction-title">悬赏任务说明</view>
|
|
</view>
|
|
|
|
<view class="instruction-content">
|
|
<view class="instruction-main">
|
|
<text>请以"{{taskInfo.description}}"为主题编辑小红书宣传笔记~</text>
|
|
</view>
|
|
|
|
<view class="requirement-section">
|
|
<view class="requirement-title">封面和配图要求</view>
|
|
<view class="requirement-content">
|
|
<text>封面: 个人宠物图片</text>
|
|
<text>配图: 个人宠物图片或小程序页面截图(共2-3张)</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="requirement-section">
|
|
<view class="requirement-title">标题示例 (实际发布可以参照以下)</view>
|
|
<view class="title-examples">
|
|
<view class="example-item">
|
|
<view class="example-tag">H1</view>
|
|
<view class="example-text">春节回家猫咪/狗狗怎么办?</view>
|
|
</view>
|
|
<view class="example-item">
|
|
<view class="example-tag">H2</view>
|
|
<view class="example-text">今年过年不用担心宠物没人照顾啦~</view>
|
|
</view>
|
|
<view class="example-item">
|
|
<view class="example-tag">H3</view>
|
|
<view class="example-text">关于宠物喂养平台的真实体验；</view>
|
|
</view>
|
|
<view class="example-item">
|
|
<view class="example-tag">H4</view>
|
|
<view class="example-text">出门旅游，再也不用担心宠物啦！</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="requirement-section">
|
|
<view class="requirement-title">其他要求</view>
|
|
<view class="other-requirements">
|
|
<view class="requirement-item">
|
|
<view class="requirement-tag">①</view>
|
|
<view class="requirement-text">文案内容不少于400字；</view>
|
|
</view>
|
|
<view class="requirement-item">
|
|
<view class="requirement-tag">②</view>
|
|
<view class="requirement-text">提及关键词上门猫咪/上门狗狗/上门喂养；</view>
|
|
</view>
|
|
<view class="requirement-item">
|
|
<view class="requirement-tag">③</view>
|
|
<view class="requirement-text">提及猫狗宠物平台并适当好评；</view>
|
|
</view>
|
|
<view class="requirement-item">
|
|
<view class="requirement-tag">④</view>
|
|
<view class="requirement-text">评论区@猫狗宠物官方账号；</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="note-text">
|
|
<text>注意是评论区！请务必在正文@官方账号！</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 底部按钮 -->
|
|
<view class="footer-buttons">
|
|
<u-button shape="circle" plain @click="cancelTask">取消</u-button>
|
|
<u-button shape="circle" color="#ffaa48" @click="reuploadTask">重新上传</u-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getTaskDetail
|
|
} from "@/api/system/task.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
taskInfo: {
|
|
id: 0,
|
|
title: '发布小红书宣传笔记',
|
|
description: '主题: 猫狗狗食使用感受&体验',
|
|
deadline: '2025-03-28',
|
|
taskType: '悬赏任务',
|
|
reward: '2',
|
|
status: 'PENDING'
|
|
},
|
|
stepsList: [
|
|
{
|
|
title: '接受任务'
|
|
},
|
|
{
|
|
title: '上传任务'
|
|
},
|
|
{
|
|
title: '平台审核'
|
|
},
|
|
{
|
|
title: '酬劳到账'
|
|
}
|
|
],
|
|
currentStep: 0
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
if (options.id) {
|
|
this.loadTaskDetail(options.id);
|
|
}
|
|
},
|
|
methods: {
|
|
loadTaskDetail(taskId) {
|
|
// 实际项目中取消注释下面的代码
|
|
/*
|
|
getTaskDetail(taskId).then(res => {
|
|
if (res && res.code === 200) {
|
|
this.taskInfo = res.data;
|
|
// 根据任务状态设置当前步骤
|
|
switch(this.taskInfo.status) {
|
|
case 'PENDING':
|
|
this.currentStep = 0;
|
|
break;
|
|
case 'ACCEPTED':
|
|
this.currentStep = 1;
|
|
break;
|
|
case 'SUBMITTED':
|
|
this.currentStep = 2;
|
|
break;
|
|
case 'COMPLETED':
|
|
this.currentStep = 3;
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
*/
|
|
|
|
// 模拟数据
|
|
console.log('加载任务详情，ID:', taskId);
|
|
// 设置当前步骤为1（已接受）
|
|
this.currentStep = 1;
|
|
},
|
|
cancelTask() {
|
|
uni.showToast({
|
|
title: '已取消任务',
|
|
icon: 'none'
|
|
});
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
},
|
|
reuploadTask() {
|
|
uni.showToast({
|
|
title: '准备重新上传',
|
|
icon: 'none'
|
|
});
|
|
// 这里可以添加上传逻辑或跳转到上传页面
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.task-detail {
|
|
background-color: #f5f5f7;
|
|
min-height: 100vh;
|
|
padding-bottom: 120rpx;
|
|
|
|
.task-header {
|
|
background-color: #FFFFFF;
|
|
padding: 30rpx;
|
|
|
|
.task-title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.task-deadline {
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.task-progress {
|
|
background-color: #FFFFFF;
|
|
margin-top: 20rpx;
|
|
padding: 30rpx;
|
|
|
|
.progress-title {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 30rpx;
|
|
}
|
|
}
|
|
|
|
.task-instruction {
|
|
background-color: #FFFFFF;
|
|
margin-top: 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>
|