Browse Source
refactor: 重构任务模块并优化图片预览功能
- 将任务相关页面从`pages/personalCenter`迁移至`pages_order/task`子包中，提升模块化 - 优化订单详情页的图片预览功能，支持点击图片放大查看 - 调整任务列表页的UI，增加任务状态标签和操作按钮 - 更新`pages.json`配置，支持子包预加载master
11 changed files with 1041 additions and 358 deletions
Split View
Diff Options
-
+41 -19pages.json
-
+113 -2pages/companionPetList/couponList.vue
-
+25 -4pages/personalCenter/index.vue
-
+54 -34pages/personalCenter/orderDetailImage.vue
-
+0 -298pages/personalCenter/taskList.vue
-
BINpages_order/static/Group 213084@2x.png
-
BINpages_order/static/Group@2x.png
-
+0 -0pages_order/task/taskDetail.vue
-
+540 -0pages_order/task/taskList.vue
-
+267 -0pages_order/task/taskUpload.vue
-
+1 -1utils/getUrl.js
+ 41
- 19
pages.json
View File
+ 113
- 2
pages/companionPetList/couponList.vue
View File
+ 25
- 4
pages/personalCenter/index.vue
View File
pages/personalCenter/orderDetail.vue → pages/personalCenter/orderDetailImage.vue
View File
+ 0
- 298
pages/personalCenter/taskList.vue
View File
| @ -1,298 +0,0 @@ | |||
| <template> | |||
| <view class="task-center"> | |||
| <u-subsection :list="tabList" | |||
| active-color="#ffaa48" | |||
| bg-color="#fff" | |||
| inactive-color="#aaaaaa" | |||
| font-size="16" | |||
| :current="curNow" | |||
| @change="sectionChange"></u-subsection> | |||
| <!-- <view class="container-tabs"> | |||
| <up-tabs :list="tabList" lineWidth="68rpx" :activeStyle="{ | |||
| color: '#ffaa48', | |||
| fontWeight: 'bold', | |||
| transform: 'scale(1.05)' | |||
| }" :inactiveStyle="{ | |||
| color: '#555', | |||
| transform: 'scale(1)' | |||
| }" :itemStyle="{height:'88rpx',padding:'0 52rpx'}" lineColor="#ffaa48" @click="sectionChange"></up-tabs> | |||
| </view> --> | |||
| <view v-for="(item,index) in pendingTasks" style="padding:28rpx 36rpx 0;" :key="index"> | |||
| <view class="task-card"> | |||
| <view class="task-header"> | |||
| <view class="task-image"> | |||
| <image src="" mode="heightFix"></image> | |||
| <image src="" mode="heightFix"></image> | |||
| </view> | |||
| <view class="task-type">{{item.taskType}}</view> | |||
| <view class="task-reward">酬劳 <text> ¥{{item.reward}}</text> </view> | |||
| </view> | |||
| <view class="task-content"> | |||
| <view class="task-icon"> | |||
| <image :src="item.icon" style="width: 120rpx; height: 120rpx;" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="task-info"> | |||
| <view class="task-title">{{item.title}}</view> | |||
| <view class="task-desc">{{item.description}}</view> | |||
| <view class="task-deadline">任务截止日期: {{item.deadline}}</view> | |||
| </view> | |||
| </view> | |||
| <view class="task-footer" v-if="true"> | |||
| <u-button shape="circle" plain text="查看详情" @click="viewTaskDetail(item)"></u-button> | |||
| <u-button shape="circle" color="#ffaa48" text="立即上传" @click="uploadTask(item)"></u-button> | |||
| </view> | |||
| <view class="task-footer" v-else> | |||
| <u-button shape="circle" plain text="查看详情" @click="viewTaskDetail(item)"></u-button> | |||
| <view class="task-status">已接受</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view v-if="pendingTasks.length === 0" class="empty-tip"> | |||
| <text>暂无待接受任务</text> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { | |||
| getTaskList, | |||
| acceptTask, | |||
| submitTask, | |||
| getTaskDetail | |||
| } from "@/api/system/task.js" | |||
| export default { | |||
| data() { | |||
| return { | |||
| tabList: [ | |||
| { | |||
| name: '待接受', | |||
| badge: { | |||
| value: 1, | |||
| } | |||
| }, | |||
| { | |||
| name: '已接受', | |||
| badge: { | |||
| value: 0, | |||
| } | |||
| }, | |||
| ], | |||
| curNow: 0, | |||
| pendingTasks: [{ | |||
| id: 1, | |||
| taskType: '悬赏任务', | |||
| reward: '2', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28' | |||
| }, | |||
| { | |||
| id: 2, | |||
| taskType: '悬赏任务', | |||
| reward: '2', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28' | |||
| }, | |||
| { | |||
| id: 3, | |||
| taskType: '悬赏任务', | |||
| reward: '2', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28' | |||
| } | |||
| ], | |||
| acceptedTasks: [] | |||
| } | |||
| }, | |||
| onLoad() { | |||
| // 加载任务列表数据 | |||
| this.getTaskList() | |||
| }, | |||
| methods: { | |||
| sectionChange(index) { | |||
| this.curNow = index; | |||
| }, | |||
| getTaskList() { | |||
| // 调用API获取任务列表 | |||
| // 由于后端API可能尚未实现，这里先使用模拟数据 | |||
| // 实际项目中取消注释下面的代码 | |||
| /* | |||
| getTaskList().then(res=>{ | |||
| if (res && res.code === 200) { | |||
| let rows = res.rows || [] | |||
| console.log(rows) | |||
| this.pendingTasks = rows.filter(item=>item.status=="PENDING") | |||
| this.acceptedTasks = rows.filter(item=>item.status=="ACCEPTED") | |||
| } | |||
| }) | |||
| */ | |||
| // 使用模拟数据 | |||
| console.log('加载任务列表') | |||
| }, | |||
| viewTaskDetail(task) { | |||
| // 查看任务详情，跳转到任务详情页面 | |||
| uni.navigateTo({ | |||
| url: `/pages/personalCenter/taskDetail?id=${task.id}` | |||
| }); | |||
| }, | |||
| uploadTask(task) { | |||
| // 上传任务 | |||
| uni.showToast({ | |||
| title: '上传任务: ' + task.title, | |||
| icon: 'none' | |||
| }); | |||
| // 实际项目中取消注释下面的代码 | |||
| /* | |||
| submitTask({ | |||
| taskId: task.id, | |||
| content: '任务提交内容' | |||
| }).then(res => { | |||
| if (res && res.code === 200) { | |||
| uni.showToast({ | |||
| title: '任务提交成功', | |||
| icon: 'success' | |||
| }); | |||
| // 刷新任务列表 | |||
| this.getTaskList(); | |||
| } | |||
| }); | |||
| */ | |||
| // 模拟接受任务 | |||
| const index = this.pendingTasks.findIndex(item => item.id === task.id); | |||
| if (index !== -1) { | |||
| const acceptedTask = { | |||
| ...this.pendingTasks[index] | |||
| }; | |||
| this.acceptedTasks.push(acceptedTask); | |||
| this.pendingTasks.splice(index, 1); | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .task-center { | |||
| background-color: #f5f5f7; | |||
| min-height: 100vh; | |||
| .task-card { | |||
| background-color: #FFFFFF; | |||
| border-radius: 16rpx; | |||
| margin-bottom: 30rpx; | |||
| overflow: hidden; | |||
| .task-header { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 20rpx; | |||
| background-color: #FFF4E599; | |||
| padding: 15rpx; | |||
| .task-image { | |||
| margin-right: 30rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| image { | |||
| height: 50rpx; | |||
| width: 50rpx; | |||
| } | |||
| } | |||
| .task-type { | |||
| color: #A94F20; | |||
| font-size: 26rpx; | |||
| background-color: #FFF4E5; | |||
| padding: 10rpx 30rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| .task-reward { | |||
| font-size: 26rpx; | |||
| margin-left: auto; | |||
| text { | |||
| color: #FF5722; | |||
| font-weight: bold; | |||
| margin-left: 10rpx; | |||
| font-size: 30rpx; | |||
| } | |||
| } | |||
| } | |||
| .task-content { | |||
| display: flex; | |||
| margin-bottom: 30rpx; | |||
| padding: 0 30rpx 0 30rpx; | |||
| .task-icon { | |||
| margin-right: 30rpx; | |||
| } | |||
| .task-info { | |||
| flex: 1; | |||
| .task-title { | |||
| font-size: 32rpx; | |||
| font-weight: bold; | |||
| color: #333; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .task-desc { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .task-deadline { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| } | |||
| } | |||
| } | |||
| .task-footer { | |||
| padding-bottom: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-end; | |||
| gap: 20rpx; | |||
| .u-button { | |||
| width: 250rpx; | |||
| height: 60rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .task-status { | |||
| height: 60rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 250rpx; | |||
| color: #ffaa48; | |||
| font-size: 28rpx; | |||
| } | |||
| } | |||
| } | |||
| .empty-tip { | |||
| text-align: center; | |||
| padding: 60rpx 0; | |||
| color: #999; | |||
| font-size: 28rpx; | |||
| } | |||
| } | |||
| </style> | |||
BIN
pages_order/static/Group 213084@2x.png
View File
| Before | After |
|---|---|
|
|
| Width: 59 | Height: 54 | Size: 4.6 KiB |
BIN
pages_order/static/Group@2x.png
View File
| Before | After |
|---|---|
|
|
| Width: 129 | Height: 39 | Size: 5.8 KiB |
pages/personalCenter/taskDetail.vue → pages_order/task/taskDetail.vue
View File
+ 540
- 0
pages_order/task/taskList.vue
View File
| @ -0,0 +1,540 @@ | |||
| <template> | |||
| <view class="task-center"> | |||
| <u-subsection :list="tabList" | |||
| active-color="#ffaa48" | |||
| bg-color="#fff" | |||
| inactive-color="#aaaaaa" | |||
| font-size="16" | |||
| :current="curNow" | |||
| @change="sectionChange"></u-subsection> | |||
| <!-- <view class="container-tabs"> | |||
| <up-tabs :list="tabList" lineWidth="68rpx" :activeStyle="{ | |||
| color: '#ffaa48', | |||
| fontWeight: 'bold', | |||
| transform: 'scale(1.05)' | |||
| }" :inactiveStyle="{ | |||
| color: '#555', | |||
| transform: 'scale(1)' | |||
| }" :itemStyle="{height:'88rpx',padding:'0 52rpx'}" lineColor="#ffaa48" @click="sectionChange"></up-tabs> | |||
| </view> --> | |||
| <!-- 待接受任务列表 --> | |||
| <view v-if="curNow === 0"> | |||
| <view v-for="(item,index) in pendingTasks" style="padding:28rpx 36rpx 0;" :key="index"> | |||
| <view class="task-card"> | |||
| <view class="task-header"> | |||
| <view class="task-image"> | |||
| <image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png" mode="heightFix"></image> | |||
| </view> | |||
| <view class="task-type">{{item.taskType}}</view> | |||
| <view class="task-reward">酬劳 <text> ¥{{item.reward}}</text> </view> | |||
| </view> | |||
| <view class="task-content"> | |||
| <view class="task-icon"> | |||
| <image :src="item.icon" style="width: 120rpx; height: 120rpx;" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="task-info"> | |||
| <view class="task-title">{{item.title}}</view> | |||
| <view class="task-desc">{{item.description}}</view> | |||
| <view class="task-deadline">任务截止日期: {{item.deadline}}</view> | |||
| </view> | |||
| </view> | |||
| <view class="task-footer"> | |||
| <u-button shape="circle" plain text="查看详情" @click="viewTaskDetail(item)"></u-button> | |||
| <u-button shape="circle" color="#ffaa48" text="立即接受" @click="acceptTaskHandler(item)"></u-button> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view v-if="pendingTasks.length === 0" class="empty-tip"> | |||
| <text>暂无待接受任务</text> | |||
| </view> | |||
| </view> | |||
| <!-- 已接收任务列表 --> | |||
| <view v-else> | |||
| <view v-for="(item,index) in acceptedTasks" style="padding:28rpx 36rpx 0;" :key="index"> | |||
| <view class="task-card"> | |||
| <view class="task-header"> | |||
| <view class="task-image"> | |||
| <image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png" mode="heightFix"></image> | |||
| </view> | |||
| <view class="task-type">{{item.taskType}}</view> | |||
| <view class="task-reward">酬劳 <text> ¥{{item.reward}}</text> </view> | |||
| </view> | |||
| <view class="task-content"> | |||
| <view class="task-icon"> | |||
| <image :src="item.icon" style="width: 120rpx; height: 120rpx;" mode="aspectFill"></image> | |||
| </view> | |||
| <view class="task-info"> | |||
| <view class="task-title">{{item.title}}</view> | |||
| <view class="task-desc">{{item.description}}</view> | |||
| <view class="task-deadline">任务截止日期: {{item.deadline}}</view> | |||
| <view class="task-status-tag" :class="{'status-pending': item.status === 'ACCEPTED', 'status-reviewing': item.status === 'SUBMITTED', 'status-rejected': item.status === 'REJECTED', 'status-approved': item.status === 'APPROVED'}">{{getStatusText(item.status)}}</view> | |||
| </view> | |||
| </view> | |||
| <view class="task-footer"> | |||
| <u-button shape="circle" plain text="查看详情" @click="viewTaskDetail(item)"></u-button> | |||
| <u-button v-if="item.status === 'REJECTED'" shape="circle" type="error" text="驳回原因" @click="showRejectReason(item)"></u-button> | |||
| <u-button v-if="item.status === 'ACCEPTED'" shape="circle" color="#ffaa48" text="立即上传" @click="uploadTask(item)"></u-button> | |||
| <u-button v-if="item.status === 'SUBMITTED'" shape="circle" disabled text="审核中"></u-button> | |||
| <u-button v-if="item.status === 'REJECTED'" shape="circle" color="#ffaa48" text="重新上传" @click="uploadTask(item)"></u-button> | |||
| <view v-if="item.status === 'APPROVED'" class="task-status task-status-approved">已通过</view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view v-if="acceptedTasks.length === 0" class="empty-tip"> | |||
| <text>暂无已接收任务</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { | |||
| getTaskList, | |||
| acceptTask, | |||
| submitTask, | |||
| getTaskDetail | |||
| } from "@/api/system/task.js" | |||
| export default { | |||
| data() { | |||
| return { | |||
| tabList: [ | |||
| { | |||
| name: '待接受', | |||
| badge: { | |||
| value: 1, | |||
| } | |||
| }, | |||
| { | |||
| name: '已接受', | |||
| badge: { | |||
| value: 0, | |||
| } | |||
| }, | |||
| ], | |||
| curNow: 0, | |||
| pendingTasks: [{ | |||
| id: 1, | |||
| taskType: '悬赏任务', | |||
| reward: '2', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28' | |||
| }, | |||
| { | |||
| id: 2, | |||
| taskType: '体验任务', | |||
| reward: '3', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '狗狗玩具测评', | |||
| description: '测试新款狗狗玩具并提供使用反馈', | |||
| deadline: '2025-04-05' | |||
| }, | |||
| { | |||
| id: 3, | |||
| taskType: '推广任务', | |||
| reward: '5', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '抖音短视频拍摄', | |||
| description: '拍摄宠物使用产品的有趣短视频', | |||
| deadline: '2025-04-10' | |||
| }, | |||
| { | |||
| id: 13, | |||
| taskType: '问卷调查', | |||
| reward: '1', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '宠物食品偏好调查', | |||
| description: '完成一份关于宠物食品偏好的问卷调查', | |||
| deadline: '2025-03-30' | |||
| }, | |||
| { | |||
| id: 14, | |||
| taskType: '社区任务', | |||
| reward: '4', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '宠物社区话题讨论', | |||
| description: '在指定宠物社区参与话题讨论并获得5个以上回复', | |||
| deadline: '2025-04-15' | |||
| } | |||
| ], | |||
| acceptedTasks: [ | |||
| { | |||
| id: 4, | |||
| taskType: '悬赏任务', | |||
| reward: '3', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28', | |||
| status: 'ACCEPTED' // 已接受，待上传 | |||
| }, | |||
| { | |||
| id: 5, | |||
| taskType: '悬赏任务', | |||
| reward: '3', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28', | |||
| status: 'SUBMITTED' // 已提交，审核中 | |||
| }, | |||
| { | |||
| id: 6, | |||
| taskType: '悬赏任务', | |||
| reward: '3', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28', | |||
| status: 'REJECTED', // 已驳回 | |||
| rejectReason: '图片不清晰，请重新上传高清图片' | |||
| }, | |||
| { | |||
| id: 7, | |||
| taskType: '悬赏任务', | |||
| reward: '3', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '发布小红书宣传笔记', | |||
| description: '主题: 猫狗狗食使用感受&体验', | |||
| deadline: '2025-03-28', | |||
| status: 'APPROVED' // 已通过 | |||
| }, | |||
| { | |||
| id: 8, | |||
| taskType: '体验任务', | |||
| reward: '5', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '猫咪零食体验测评', | |||
| description: '体验新品猫咪零食并提供详细测评报告', | |||
| deadline: '2025-04-15', | |||
| status: 'ACCEPTED', // 已接受，待上传 | |||
| receiveTime: '2025-03-10' | |||
| }, | |||
| { | |||
| id: 9, | |||
| taskType: '推广任务', | |||
| reward: '8', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '朋友圈分享宠物用品', | |||
| description: '在朋友圈分享指定宠物用品并获取5个以上点赞', | |||
| deadline: '2025-03-25', | |||
| status: 'SUBMITTED', // 已提交，审核中 | |||
| submitTime: '2025-03-20' | |||
| }, | |||
| { | |||
| id: 10, | |||
| taskType: '视频任务', | |||
| reward: '10', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '拍摄宠物使用产品视频', | |||
| description: '拍摄15秒宠物使用我们产品的有趣视频', | |||
| deadline: '2025-04-10', | |||
| status: 'REJECTED', // 已驳回 | |||
| rejectReason: '视频时长不足，请确保视频至少15秒且清晰可见' | |||
| }, | |||
| { | |||
| id: 11, | |||
| taskType: '问卷调查', | |||
| reward: '2', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '宠物主人消费习惯调查', | |||
| description: '完成一份关于宠物主人消费习惯的问卷调查', | |||
| deadline: '2025-03-30', | |||
| status: 'APPROVED', // 已通过 | |||
| approveTime: '2025-03-18' | |||
| }, | |||
| { | |||
| id: 12, | |||
| taskType: '社区任务', | |||
| reward: '6', | |||
| icon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png', | |||
| title: '参与线下宠物活动', | |||
| description: '参加指定城市的线下宠物主题活动并拍照记录', | |||
| deadline: '2025-05-01', | |||
| status: 'SUBMITTED', // 已提交，审核中 | |||
| submitTime: '2025-04-25' | |||
| } | |||
| ] | |||
| } | |||
| }, | |||
| onLoad() { | |||
| // 加载任务列表数据 | |||
| this.getTaskList() | |||
| // 更新标签页的徽标数量 | |||
| this.updateBadgeCount() | |||
| }, | |||
| methods: { | |||
| sectionChange(index) { | |||
| this.curNow = index; | |||
| }, | |||
| getTaskList() { | |||
| // 调用API获取任务列表 | |||
| // 由于后端API可能尚未实现，这里先使用模拟数据 | |||
| // 实际项目中取消注释下面的代码 | |||
| /* | |||
| getTaskList().then(res=>{ | |||
| if (res && res.code === 200) { | |||
| let rows = res.rows || [] | |||
| console.log(rows) | |||
| this.pendingTasks = rows.filter(item=>item.status=="PENDING") | |||
| this.acceptedTasks = rows.filter(item=>item.status!="PENDING") | |||
| this.updateBadgeCount() | |||
| } | |||
| }) | |||
| */ | |||
| // 使用模拟数据 | |||
| console.log('加载任务列表') | |||
| // 更新标签页的徽标数量 | |||
| this.updateBadgeCount() | |||
| }, | |||
| updateBadgeCount() { | |||
| // 更新标签页的徽标数量 | |||
| this.tabList[0].badge.value = this.pendingTasks.length | |||
| this.tabList[1].badge.value = this.acceptedTasks.length | |||
| }, | |||
| viewTaskDetail(task) { | |||
| // 查看任务详情，跳转到任务详情页面 | |||
| uni.navigateTo({ | |||
| url: `/pages_order/task/taskDetail?id=${task.id}` | |||
| }); | |||
| }, | |||
| acceptTaskHandler(task) { | |||
| // 接受任务 | |||
| uni.showModal({ | |||
| title: '接受任务', | |||
| content: `确定接受任务: ${task.title}？`, | |||
| success: res => { | |||
| if (res.confirm) { | |||
| // 实际项目中取消注释下面的代码 | |||
| /* | |||
| acceptTask(task.id).then(res => { | |||
| if (res && res.code === 200) { | |||
| uni.showToast({ | |||
| title: '任务接受成功', | |||
| icon: 'success' | |||
| }); | |||
| // 刷新任务列表 | |||
| this.getTaskList(); | |||
| } | |||
| }); | |||
| */ | |||
| // 模拟接受任务 | |||
| const index = this.pendingTasks.findIndex(item => item.id === task.id); | |||
| if (index !== -1) { | |||
| const acceptedTask = { | |||
| ...this.pendingTasks[index], | |||
| status: 'ACCEPTED' | |||
| }; | |||
| this.acceptedTasks.push(acceptedTask); | |||
| this.pendingTasks.splice(index, 1); | |||
| this.updateBadgeCount(); | |||
| uni.showToast({ | |||
| title: '任务接受成功', | |||
| icon: 'success' | |||
| }); | |||
| } | |||
| } | |||
| } | |||
| }); | |||
| }, | |||
| uploadTask(task) { | |||
| // 上传任务 | |||
| uni.navigateTo({ | |||
| url: `/pages_order/task/taskUpload?id=${task.id}&status=${task.status}` | |||
| }); | |||
| }, | |||
| showRejectReason(task) { | |||
| // 显示驳回原因 | |||
| if (task.rejectReason) { | |||
| uni.showModal({ | |||
| title: '驳回原因', | |||
| content: task.rejectReason, | |||
| showCancel: false | |||
| }); | |||
| } else { | |||
| uni.showToast({ | |||
| title: '暂无驳回原因', | |||
| icon: 'none' | |||
| }); | |||
| } | |||
| }, | |||
| getStatusText(status) { | |||
| // 获取状态文本 | |||
| const statusMap = { | |||
| 'ACCEPTED': '待上传', | |||
| 'SUBMITTED': '审核中', | |||
| 'REJECTED': '未通过', | |||
| 'APPROVED': '已通过' | |||
| }; | |||
| return statusMap[status] || status; | |||
| }, | |||
| getStatusClass(status) { | |||
| // 获取状态样式类 | |||
| const classMap = { | |||
| 'ACCEPTED': 'status-pending', | |||
| 'SUBMITTED': 'status-reviewing', | |||
| 'REJECTED': 'status-rejected', | |||
| 'APPROVED': 'status-approved' | |||
| }; | |||
| return classMap[status] || ''; | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss"> | |||
| .task-center { | |||
| background-color: #f5f5f7; | |||
| min-height: 100vh; | |||
| .task-card { | |||
| background-color: #FFFFFF; | |||
| border-radius: 16rpx; | |||
| margin-bottom: 30rpx; | |||
| overflow: hidden; | |||
| .task-header { | |||
| display: flex; | |||
| align-items: center; | |||
| margin-bottom: 20rpx; | |||
| background-color: #FFF4E599; | |||
| padding: 15rpx; | |||
| .task-image { | |||
| margin-right: 30rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| image { | |||
| height: 50rpx; | |||
| width: 50rpx; | |||
| } | |||
| } | |||
| .task-type { | |||
| color: #A94F20; | |||
| font-size: 26rpx; | |||
| background-color: #FFF4E5; | |||
| padding: 10rpx 30rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| .task-reward { | |||
| font-size: 26rpx; | |||
| margin-left: auto; | |||
| text { | |||
| color: #FF5722; | |||
| font-weight: bold; | |||
| margin-left: 10rpx; | |||
| font-size: 30rpx; | |||
| } | |||
| } | |||
| } | |||
| .task-content { | |||
| display: flex; | |||
| margin-bottom: 30rpx; | |||
| padding: 0 30rpx 0 30rpx; | |||
| .task-icon { | |||
| margin-right: 30rpx; | |||
| } | |||
| .task-info { | |||
| flex: 1; | |||
| position: relative; | |||
| .task-title { | |||
| font-size: 32rpx; | |||
| font-weight: bold; | |||
| color: #333; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .task-desc { | |||
| font-size: 28rpx; | |||
| color: #666; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .task-deadline { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .task-status-tag { | |||
| display: inline-block; | |||
| font-size: 24rpx; | |||
| padding: 6rpx 20rpx; | |||
| border-radius: 20rpx; | |||
| margin-top: 10rpx; | |||
| &.status-pending { | |||
| background-color: #E6F7FF; | |||
| color: #1890FF; | |||
| } | |||
| &.status-reviewing { | |||
| background-color: #FFF7E6; | |||
| color: #FA8C16; | |||
| } | |||
| &.status-rejected { | |||
| background-color: #FFF1F0; | |||
| color: #F5222D; | |||
| } | |||
| &.status-approved { | |||
| background-color: #F6FFED; | |||
| color: #52C41A; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .task-footer { | |||
| padding-bottom: 30rpx; | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: flex-end; | |||
| gap: 20rpx; | |||
| flex-wrap: wrap; | |||
| .u-button { | |||
| width: 200rpx; | |||
| height: 60rpx; | |||
| font-size: 28rpx; | |||
| } | |||
| .task-status { | |||
| height: 60rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 200rpx; | |||
| font-size: 28rpx; | |||
| &.task-status-approved { | |||
| color: #52C41A; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .empty-tip { | |||
| text-align: center; | |||
| padding: 60rpx 0; | |||
| color: #999; | |||
| font-size: 28rpx; | |||
| } | |||
| } | |||
| </style> | |||
+ 267
- 0
pages_order/task/taskUpload.vue
View File
| @ -0,0 +1,267 @@ | |||
| <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> | |||