Browse Source

feat(订单): 添加订单取消功能并优化任务模块

- 在订单模块中新增 `orderCancel` API,用于处理订单取消请求
- 优化任务模块,包括任务列表、任务详情和任务上传功能
- 修复任务详情页面中的状态显示逻辑
- 重构任务上传页面的表单验证和文件上传功能
master
前端-胡立永 2 weeks ago
parent
commit
c28ca6567a
11 changed files with 486 additions and 456 deletions
  1. +12
    -0
      api/order/order.js
  2. +38
    -3
      api/order/task.js
  3. +13
    -21
      pages/companionPetList/companionPetInfo.vue
  4. +1
    -1
      pages/personalCenter/index.vue
  5. +7
    -3
      pages_order/components/order/CancelOrderPopup.vue
  6. +2
    -2
      pages_order/order/orderList.vue
  7. +5
    -11
      pages_order/order/orderReview.vue
  8. +77
    -0
      pages_order/task/AppletTask.java
  9. +60
    -93
      pages_order/task/taskDetail.vue
  10. +46
    -193
      pages_order/task/taskList.vue
  11. +225
    -129
      pages_order/task/taskUpload.vue

+ 12
- 0
api/order/order.js View File

@ -107,5 +107,17 @@ export const orderEvaluate = (params) => {
})
}
// 取消订单
export const orderCancel = (data) => {
return request({
url: '/applet/mall/order/orderCancel',///applet/mall/order/orderCancel
headers: {
isToken: true
},
method: "POST",
data
})
}

+ 38
- 3
api/order/task.js View File

@ -1,14 +1,49 @@
import upload from '@/utils/upload'
import request from '@/utils/request'
// 查询伴宠师列表
export function getTeacherList(params) {
// 查询任务列表
export function getTaskList(params) {
return request({
url: '/applet/mall/teacher/getTeacherList',
url: '/applet/mall/task/list',
headers: {
"isToken": true
},
method: 'get',
params
})
}
// 查询任务详情
export function getTaskDetail(params) {
return request({
url: '/applet/mall/task/taskDetail/' + params,
headers: {
"isToken": true
},
method: 'get',
})
}
// 接受任务
export function acceptTask(params) {
return request({
url: '/applet/mall/task/acceptTask',
headers: {
"isToken": true
},
method: 'get',
params
})
}
// 提交任务
export function submitTask(data) {
return request({
url: '/applet/mall/task/submitTask',
headers: {
"isToken": true
},
method: 'post',
data
})
}

+ 13
- 21
pages/companionPetList/companionPetInfo.vue View File

@ -108,7 +108,7 @@
<view>
<image @click="changeOrderType" style="height: 132rpx; width: 710rpx; margin: 0 20rpx 0 20rpx;"
slot='cover'
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CMDFServiceDetail.png">
src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/CMDFServiceDetail.png" />
<!-- <uni-card padding=0>
<view class="service-new-pet-content" style="padding: 10px 0 5px 0;">
<view style="display: flex;">
@ -222,28 +222,20 @@
style="margin: 10rpx 0;"
:key="index"
v-for="(address, index) in addressList">
可接单地址{{ index + 1 }}
{{ address.area }}
{{ address.address }}
{{ address.rangeNo ? address.rangeNo + '公里内' : '' }}
<view v-if="address.appletOutDate && address.appletOutDate.length">
<view class="service-record-content"
style="display: flex;justify-content: space-around;height: 100rpx;align-items: center;">
<view style="font-size: 30rpx;color: #333;">
共不接单{{ address.appletOutDate.length }}
</view>
<view style="font-size: 26rpx;color: #FFB13F;display: flex;align-items: center;"
<view style="display: flex; justify-content: space-between; align-items: center;">
<view style="flex: 1; padding-right: 10rpx;">
<text>可接单地址{{ index + 1 }}</text>
<text>{{ address.area }} {{ address.address }} {{ address.rangeNo ? address.rangeNo + '公里内' : '' }}</text>
</view>
<view v-if="address.appletOutDate && address.appletOutDate.length"
style="display: flex; justify-content: flex-end;">
<view
style="font-size: 20rpx; color: #FFB13F; display: flex; align-items: center; padding: 2rpx 8rpx; background-color: #FFF9F0; border-radius: 20rpx;"
@click="selectDate = address.appletOutDate.map(n => n.date);$refs.calendarPopup.open('bottom')">
<uni-icons type="calendar" size="40rpx" color="#FFB13F"
style="margin-top: 6rpx;"></uni-icons>
点击查看不接单日期
<uni-icons type="calendar" size="20rpx" color="#FFB13F" style="margin-right: 2rpx;"></uni-icons>
<text>不接单{{address.appletOutDate.length}}</text>
</view>
</view>
</view>
</view>


+ 1
- 1
pages/personalCenter/index.vue View File

@ -111,7 +111,7 @@
</view>
<uni-steps :options="orderStatus" active-icon="checkbox" :active="active" active-color='#ffaa48'
/>
<view class="uni-steps-btns">
<view class="uni-steps-btns" v-if="active == 2">
<u-button
type="primary"
shape="circle"


+ 7
- 3
pages_order/components/order/CancelOrderPopup.vue View File

@ -29,7 +29,7 @@
</template>
<script>
import { cancelOrder } from "@/api/system/user.js"
import { orderCancel } from "@/api/order/order.js"
export default {
props: {
@ -59,7 +59,7 @@ export default {
//
confirmCancel() {
if (!this.order || !this.order.id) {
if (!this.order || !this.order.orderId) {
uni.showToast({
title: '订单信息不完整',
icon: 'none'
@ -73,7 +73,11 @@ export default {
});
// API
cancelOrder(this.order.id, this.cancelReason).then(res => {
orderCancel({
id : this.order.orderId,
idList : [this.order.orderId],
remark : this.cancelReason,
}).then(res => {
uni.hideLoading();
if (res && res.code === 200) {


+ 2
- 2
pages_order/order/orderList.vue View File

@ -60,7 +60,7 @@
<!-- 订单操作 -->
<view class="order-actions">
<view class="action-btn details-btn" v-if="order.status == 0"
@click="$refs.cancelOrderPopup.open()">
@click="$refs.cancelOrderPopup.open(order)">
<text>取消订单</text>
</view>
<view class="action-btn details-btn" @click="viewOrderDetails(order.orderId)">
@ -210,7 +210,7 @@
},
handleCancelOrder() {
this.refresh()
},
//


+ 5
- 11
pages_order/order/orderReview.vue View File

@ -4,11 +4,11 @@
<view class="companion-info-card">
<view class="profile-header">
<view class="companion-avatar">
<image :src="companion.avatar || '/static/images/personal/pet.png'" mode="aspectFill"></image>
<image :src="companion.userImage || '/static/images/personal/pet.png'" mode="aspectFill"></image>
</view>
<view class="companion-detail">
<view class="companion-name">
<text>{{companion.name || '伴宠师'}}</text>
<text>{{companion.userName || '伴宠师'}}</text>
<image v-if="companion.gender" :src="companion.gender === '男生' ? '/static/images/details/boy.svg' : '/static/images/details/girl.svg'" class="gender-icon"></image>
<view class="companion-tag" v-if="companion.level">
<text>{{companion.level === 'junior' ? '初级伴宠师' : '高级伴宠师'}}</text>
@ -96,18 +96,12 @@
// API
const params = {
openId: getOpenIdKey(),
teacherId: this.teacherId
userId: this.teacherId
};
getTeacherDetail(params).then(res => {
if (res && res.code === 200) {
const teacherData = res.data;
this.companion = {
name: teacherData.name || '伴宠师',
avatar: teacherData.avatar || '/static/images/personal/pet.png',
level: teacherData.level || 'junior',
gender: teacherData.gender || '女生'
};
if (res) {
this.companion = res
} else {
// 使
this.companion = {


+ 77
- 0
pages_order/task/AppletTask.java View File

@ -0,0 +1,77 @@
package com.ruoyi.model.domain;
import java.math.BigDecimal;
import java.time.LocalDateTime;
import com.fasterxml.jackson.annotation.JsonFormat;
import com.ruoyi.common.annotation.Excel;
import com.ruoyi.common.core.domain.BaseAudit;
import lombok.Data;
/**
* 任务中心对象 applet_task
*
* @author daixiande
*/
@Data
public class AppletTask extends BaseAudit {
private static final long serialVersionUID = 1L;
/** 标识 */
private Long id;
/** 当前状态0待接受1以接受 */
@Excel(name = "当前状态0待接受1以接受")
private Integer status;
/** 下单用户标识 */
@Excel(name = "下单用户标识")
private Long memberId;
/** 任务类型名称 */
@Excel(name = "任务类型名称")
private String taskName;
/** 任务小图 */
@Excel(name = "任务小图")
private String taskIcon;
/** 任务报酬 */
@Excel(name = "任务报酬")
private BigDecimal taskMoney;
/** 图片 */
@Excel(name = "图片")
private String image;
/** 标题 */
@Excel(name = "标题")
private String title;
/** 主题 */
@Excel(name = "主题")
private String theme;
/** 任务截至时间 */
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@Excel(name = "任务截至时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
private LocalDateTime taskEndTime;
/** 任务进度 */
@Excel(name = "任务进度")
private Integer taskState;
/** 审核状态 */
@Excel(name = "审核状态")
private Integer examineState;
/** 审核说明 */
@Excel(name = "审核说明")
private String examineText;
/** 审核图片 */
@Excel(name = "审核图片")
private String examineImage;
/** DEL_FLAG */
private Long delFlag;
}

+ 60
- 93
pages_order/task/taskDetail.vue View File

@ -3,7 +3,7 @@
<!-- 任务头部信息 -->
<view class="task-header">
<view class="task-title">{{taskInfo.title}}</view>
<view class="task-deadline">请于{{taskInfo.deadline}}之前上传任务超时将自动取消</view>
<view class="task-deadline">请于{{taskInfo.taskEndTime ? formatDate(taskInfo.taskEndTime) : ''}}之前上传任务超时将自动取消</view>
</view>
<!-- 任务进度 -->
@ -15,69 +15,29 @@
<!-- 任务说明 -->
<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>
<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.description}}"为主题编辑小红书宣传笔记~</text>
<text>{{taskInfo.theme || '暂无任务说明'}}</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="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">文案内容不少于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 class="requirement-tag">!</view>
<view class="requirement-text">{{taskInfo.examineText || '未提供驳回原因'}}</view>
</view>
</view>
</view>
<view class="note-text">
<text>注意是评论区请务必在正文@官方账号</text>
<!-- 任务图片 -->
<view class="task-images" v-if="taskInfo.image">
<image :src="taskInfo.image" mode="widthFix" style="width: 100%;"></image>
</view>
</view>
</view>
@ -85,7 +45,7 @@
<!-- 底部按钮 -->
<view class="footer-buttons">
<u-button shape="circle" plain @click="cancelTask">取消</u-button>
<u-button shape="circle" color="#ffaa48" @click="reuploadTask">重新上传</u-button>
<u-button shape="circle" color="#ffaa48" v-if="taskInfo.taskState === 0 || taskInfo.examineState === 2" @click="uploadTask">{{taskInfo.examineState === 2 ? '重新上传' : '立即上传'}}</u-button>
</view>
</view>
</template>
@ -93,18 +53,22 @@
<script>
import {
getTaskDetail
} from "@/api/system/task.js"
} from "@/api/order/task.js"
export default {
data() {
return {
taskInfo: {
id: 0,
title: '发布小红书宣传笔记',
description: '主题: 猫狗狗食使用感受&体验',
deadline: '2025-03-28',
taskType: '悬赏任务',
reward: '2',
status: 'PENDING'
title: '',
theme: '',
taskEndTime: '',
taskName: '',
taskMoney: 0,
taskState: 0,
examineState: 0,
examineText: '',
image: '',
taskIcon: ''
},
stepsList: [
{
@ -130,50 +94,53 @@
},
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;
}
this.updateCurrentStep();
}
});
*/
//
console.log('加载任务详情,ID:', taskId);
// 1
this.currentStep = 1;
},
updateCurrentStep() {
//
if (this.taskInfo.status === 0) {
this.currentStep = 0; //
} else if (this.taskInfo.taskState === 0) {
this.currentStep = 1; //
} else if (this.taskInfo.taskState === 1) {
if (this.taskInfo.examineState === 0) {
this.currentStep = 2; //
} else if (this.taskInfo.examineState === 1) {
this.currentStep = 3; //
} else if (this.taskInfo.examineState === 2) {
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.showToast({
title: '已取消任务',
icon: 'none'
uni.showModal({
title: '取消任务',
content: '确定要取消此任务吗?',
success: (res) => {
if (res.confirm) {
uni.navigateBack();
}
}
});
setTimeout(() => {
uni.navigateBack();
}, 1500);
},
reuploadTask() {
uni.showToast({
title: '准备重新上传',
icon: 'none'
uploadTask() {
uni.navigateTo({
url: `/pages_order/task/taskUpload?id=${this.taskInfo.id}&status=${this.taskInfo.examineState === 2 ? 'REJECTED' : 'ACCEPTED'}`
});
//
}
}
}


+ 46
- 193
pages_order/task/taskList.vue View File

@ -94,10 +94,9 @@
<script>
import {
getTaskList,
acceptTask,
submitTask,
getTaskDetail
} from "@/api/system/task.js"
getTaskDetail,
acceptTask
} from "@/api/order/task.js"
export default {
data() {
return {
@ -116,181 +115,65 @@
},
],
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'
}
]
pendingTasks: [],
acceptedTasks: []
}
},
onLoad() {
onShow() {
//
this.getTaskList()
//
this.updateBadgeCount()
},
methods: {
sectionChange(index) {
this.curNow = index;
this.getTaskList()
},
getTaskList() {
// API
// API使
//
/*
getTaskList().then(res=>{
getTaskList({
status : this.curNow
}).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")
// status01
this.pendingTasks = rows.filter(item => item.status === 0).map(item => this.formatTaskItem(item))
this.acceptedTasks = rows.filter(item => item.status === 1).map(item => this.formatTaskItem(item))
this.updateBadgeCount()
}
})
*/
// 使
console.log('加载任务列表')
//
this.updateBadgeCount()
},
//
formatTaskItem(item) {
return {
id: item.id,
taskType: item.taskName || '任务',
reward: item.taskMoney || '0',
icon: item.taskIcon || 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/point.png',
title: item.title || '',
description: item.theme || '',
deadline: item.taskEndTime ? this.formatDate(item.taskEndTime) : '',
status: this.getTaskStatus(item.taskState, item.examineState),
rejectReason: item.examineText || ''
}
},
//
getTaskStatus(taskState, examineState) {
// taskState: examineState:
if (taskState === 0) return 'ACCEPTED'; //
if (taskState === 1 && examineState === 0) return 'SUBMITTED'; //
if (taskState === 1 && examineState === 1) return 'APPROVED'; //
if (taskState === 1 && examineState === 2) return 'REJECTED'; //
return 'ACCEPTED'; //
},
//
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}`;
},
updateBadgeCount() {
//
@ -310,9 +193,7 @@
content: `确定接受任务: ${task.title}`,
success: res => {
if (res.confirm) {
//
/*
acceptTask(task.id).then(res => {
acceptTask({id : task.id}).then(res => {
if (res && res.code === 200) {
uni.showToast({
title: '任务接受成功',
@ -322,24 +203,6 @@
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'
});
}
}
}
});
@ -374,16 +237,6 @@
'APPROVED': '已通过'
};
return statusMap[status] || status;
},
getStatusClass(status) {
//
const classMap = {
'ACCEPTED': 'status-pending',
'SUBMITTED': 'status-reviewing',
'REJECTED': 'status-rejected',
'APPROVED': 'status-approved'
};
return classMap[status] || '';
}
}
}


+ 225
- 129
pages_order/task/taskUpload.vue View File

@ -1,56 +1,53 @@
<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 class="task-deadline">请于{{taskInfo.taskEndTime ? formatDate(taskInfo.taskEndTime) : ''}}之前上传任务超时将自动取消</view>
</view>
<!-- 驳回原因提示(如果任务被驳回) -->
<view class="reject-box" v-if="isRejected">
<view class="reject-title">审核未通过原因</view>
<view class="reject-reason">{{taskInfo.examineText || '暂无驳回原因'}}</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 class="form-label">笔记/视频链接</view>
<view class="form-input">
<u-input v-model="formData.examineText" placeholder="请输入小红书/抖音等平台的笔记链接" />
</view>
</view>
<!-- 笔记截 -->
<!-- 片上传 -->
<view class="form-item">
<view class="item-label">笔记截图 <text class="required">*</text></view>
<view class="item-content">
<view class="form-label">证明截图</view>
<view class="form-notice">请上传任务完成的截图证明例如发布成功的截图</view>
<view class="upload-box">
<u-upload
:fileList="fileList"
@afterRead="afterRead"
@delete="deletePic"
:maxCount="6"
name="1"
:multiple="true"
:maxSize="10 * 1024 * 1024"
name="examineImage"
multiple
:maxCount="3"
></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 class="submit-btn">
<u-button type="primary" color="#ffaa48" shape="circle" @click="submitTaskHandler">提交审核</u-button>
</view>
</view>
</view>
</template>
<script>
import { getTaskDetail, submitTask } from "@/api/system/task.js"
import { getTaskDetail, submitTask } from "@/api/order/task.js"
export default {
data() {
return {
@ -60,12 +57,15 @@
taskInfo: {
id: 0,
title: '',
deadline: '',
rejectReason: ''
taskEndTime: '',
examineText: '',
taskState: 0,
examineState: 0
},
formData: {
noteLink: '',
images: []
taskId: 0,
examineImage: [],
examineText: '',
},
fileList: []
}
@ -73,6 +73,7 @@
onLoad(options) {
if (options.id) {
this.taskId = options.id
this.formData.taskId = options.id
this.taskStatus = options.status || ''
this.isRejected = this.taskStatus === 'REJECTED'
this.getTaskDetail()
@ -89,85 +90,193 @@
methods: {
getTaskDetail() {
//
//
/*
getTaskDetail(this.taskId).then(res => {
if (res && res.code === 200) {
this.taskInfo = res.data
//
if (res.data.examineText) {
this.formData.examineText = res.data.examineText;
}
//
if (res.data.examineImage) {
const imageUrls = res.data.examineImage.split(',');
imageUrls.forEach(url => {
if (url) {
this.fileList.push({
url: url,
status: 'success',
message: '已上传',
isImage: true
});
// formData
this.formData.examineImage.push(url);
}
});
}
}
})
*/
//
const mockData = {
id: this.taskId,
title: '发布小红书宣传笔记',
deadline: '2025-03-28',
rejectReason: this.isRejected ? '图片不清晰,请重新上传高清图片' : ''
}
this.taskInfo = mockData
},
uploadFilePromise(url) {
return new Promise((resolve, reject) => {
let uploadTask = uni.uploadFile({
url: 'https://store-test.catmdogd.com/test-api/h5/oss/upload',
filePath: url,
name: 'file',
formData: {
user: 'test'
},
success: (res) => {
if(res && res.data) {
try {
let resData = JSON.parse(res.data);
if(resData.url) {
resolve(resData.url);
} else {
reject("上传失败: 未获取到图片URL");
}
} catch(e) {
reject("上传失败: 解析响应数据错误");
}
} else {
reject("上传失败: 响应数据为空");
}
},
fail: (err) => {
reject("上传失败: " + (err.errMsg || JSON.stringify(err)));
}
});
//
uploadTask.onProgressUpdate((res) => {
//
const index = this.fileList.findIndex(file => file.status === 'uploading');
if(index !== -1) {
//
this.fileList[index].message = '上传中 ' + res.progress + '%';
}
});
})
},
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}`;
},
afterRead(event) {
//
const { file } = event
this.fileList.push({
url: file.url,
status: 'success',
message: '上传成功',
name: file.name
//
const fileList = Array.isArray(file) ? file : [file]
//
fileList.forEach(item => {
// UI
const fileListItem = {
...item,
status: 'uploading',
message: '上传中'
}
this.fileList.push(fileListItem)
const currentIndex = this.fileList.length - 1
// 使Promise
this.uploadFilePromise(item.url)
.then(url => {
// URL
this.fileList[currentIndex].status = 'success'
this.fileList[currentIndex].message = '上传成功'
this.fileList[currentIndex].url = url
// URL
this.formData.examineImage.push(url)
})
.catch(err => {
//
this.fileList[currentIndex].status = 'failed'
this.fileList[currentIndex].message = '上传失败'
uni.showToast({
title: '图片上传失败',
icon: 'none'
})
})
})
this.formData.images.push(file.url)
},
deletePic(event) {
//
const index = event.index
this.fileList.splice(index, 1)
this.formData.images.splice(index, 1)
this.formData.examineImage.splice(index, 1)
},
submitTaskHandler() {
//
if (this.formData.images.length === 0) {
//
if (!this.formData.examineText) {
uni.showToast({
title: '请输入笔记链接',
icon: 'none'
})
return
}
if (this.formData.examineImage.length === 0) {
uni.showToast({
title: '请上传任务完成凭证',
title: '请上传至少一张截图',
icon: 'none'
})
return
}
//
/*
//
const isUploading = this.fileList.some(file => file.status === 'uploading')
if (isUploading) {
uni.showToast({
title: '图片正在上传中,请稍候',
icon: 'none'
})
return
}
//
uni.showLoading({
title: '提交中...'
})
//
submitTask({
taskId: this.taskId,
noteLink: this.formData.noteLink,
images: this.formData.images
id: this.taskId,
taskId: this.formData.taskId,
examineText: this.formData.examineText,
examineImage: this.formData.examineImage.join(',')
}).then(res => {
uni.hideLoading()
if (res && res.code === 200) {
uni.showToast({
title: '任务提交成功',
title: '提交成功',
icon: 'success'
})
//
setTimeout(() => {
uni.navigateBack()
}, 1500)
} else {
uni.showToast({
title: res.msg || '提交失败',
icon: 'none'
})
}
})
*/
//
uni.showLoading({
title: '提交中...'
})
setTimeout(() => {
}).catch(err => {
uni.hideLoading()
uni.showToast({
title: '任务提交成功',
icon: 'success'
title: '提交失败',
icon: 'none'
})
setTimeout(() => {
uni.navigateBack()
}, 1500)
}, 1500)
console.error('提交任务失败:', err)
})
}
}
}
@ -177,91 +286,78 @@
.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-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 20rpx;
}
.task-deadline {
font-size: 26rpx;
font-size: 24rpx;
color: #999;
}
}
.upload-form {
background-color: #FFFFFF;
.reject-box {
background-color: #FFF1F0;
margin-top: 20rpx;
padding: 30rpx;
.form-title {
font-size: 30rpx;
.reject-title {
font-size: 28rpx;
font-weight: bold;
color: #333;
margin-bottom: 30rpx;
border-left: 8rpx solid #ffaa48;
padding-left: 20rpx;
color: #F5222D;
margin-bottom: 10rpx;
}
.reject-reason {
font-size: 26rpx;
color: #F5222D;
}
}
.upload-form {
background-color: #FFFFFF;
margin-top: 20rpx;
padding: 30rpx;
.form-item {
margin-bottom: 30rpx;
margin-bottom: 40rpx;
.item-label {
font-size: 28rpx;
.form-label {
font-size: 30rpx;
font-weight: bold;
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;
}
.form-notice {
font-size: 24rpx;
color: #999;
margin-bottom: 20rpx;
}
.form-input {
background-color: #F8F8F8;
border-radius: 8rpx;
padding: 10rpx;
}
.upload-box {
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);
.submit-btn {
margin-top: 60rpx;
padding: 0 40rpx;
}
}
}
</style>

Loading…
Cancel
Save