pet-front-order/pages_order/task/taskDetail.vue

<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>