root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ce0587d2b6cab8ae62ec7bb2fbde82f7d744c33e
xl-mobile/src/pages/taskDetails/index.vue

473 lines
18 KiB
Vue
Raw Normal View History

update
2025-03-25 16:35:39 +08:00
<script setup>
update
2025-03-28 15:34:00 +08:00
import goodsIcon from '../../static/icons/goodsIcon.png';
import XNav from "../../components/XNav.vue";
update
2025-05-06 11:36:14 +08:00
import {defineAsyncComponent, getCurrentInstance, nextTick, onMounted, reactive, ref} from 'vue';
update
2025-03-28 15:34:00 +08:00
import {onLoad} from "@dcloudio/uni-app";
import XLink from "../../components/XLink.vue";
import XNoticeBar from "../../components/XNoticeBar.vue";
update
2025-03-28 17:14:19 +08:00
import XImage from "../../components/XImage.vue";
update
2025-05-12 19:45:27 +08:00
import Api from "../../api/index.js";
import dayjs from "dayjs";
import XPrompt from "../../components/XPrompt.vue";
import {numberToCharacter} from "../../utils/uils.js";
update
2025-05-06 11:36:14 +08:00
// #ifdef APP-PLUS
// #endif
// #ifndef APP-PLUS
const TaskDetails = defineAsyncComponent(() => import('./components/TaskDetails.vue'));
const CollectMaterials = defineAsyncComponent(() => import('./components/CollectMaterials.vue'));
const MyBackfill = defineAsyncComponent(() => import('./components/MyBackfill.vue'));
const ReviewCommunication = defineAsyncComponent(() => import('./components/ReviewCommunication.vue'));
// #endif
update
2025-03-25 16:35:39 +08:00
update
2025-03-28 15:34:00 +08:00
const details = ref(null);
update
2025-05-06 11:36:14 +08:00
const mainDetailWidth = ref(0);
update
2025-03-28 15:34:00 +08:00
const currentTabs = ref(0);
update
2025-05-06 11:36:14 +08:00
const tabs = reactive([
update
2025-03-28 15:34:00 +08:00
{
name: "任务详情",
update
2025-05-06 11:36:14 +08:00
component: TaskDetails,
update
2025-03-28 15:34:00 +08:00
},
{
name: "领取素材",
update
2025-05-06 11:36:14 +08:00
component: CollectMaterials,
update
2025-03-28 15:34:00 +08:00
},
{
name: "我的回填",
update
2025-05-06 11:36:14 +08:00
component: MyBackfill,
update
2025-03-28 15:34:00 +08:00
},
{
name: "审核沟通",
update
2025-05-06 11:36:14 +08:00
component: ReviewCommunication,
update
2025-03-28 15:34:00 +08:00
},
update
2025-05-06 11:36:14 +08:00
]);
update
2025-03-28 15:34:00 +08:00
update
2025-05-12 19:45:27 +08:00
const getData = async (id) => {
const {data} = await Api.system.getTaskinfo(id || details.value.id);
details.value = data;
}
update
2025-03-28 15:34:00 +08:00
onLoad((options) => {
const {id} = options;
update
2025-05-12 19:45:27 +08:00
getData(id);
update
2025-03-28 15:34:00 +08:00
});
onMounted(() => {
update
2025-05-06 11:36:14 +08:00
nextTick(() => {
const instancs = getCurrentInstance();
uni.createSelectorQuery()
.in(instancs)
.select("#mainDetailBox")
.boundingClientRect()
.exec((result) => {
mainDetailWidth.value = result[0].width;
})
});
update
2025-03-28 15:34:00 +08:00
})
update
2025-03-25 16:35:39 +08:00
</script>
<template>
update
2025-03-28 15:34:00 +08:00
<!--任务详情-->
<XNav></XNav>
<x-notice-bar></x-notice-bar>
update
2025-05-12 19:45:27 +08:00
<view class="!p-[20rpx] !flex flex-col gap-[20rpx] box-border" v-if="details">
update
2025-03-28 15:34:00 +08:00
<view class="rounded-[16rpx] !p-[24rpx] bg-[#fff] !flex flex-col gap-[20rpx]">
<view class="!flex gap-[30rpx]">
<image class="!size-[84rpx]" :src="goodsIcon"></image>
<view class="flex-grow">
<view class="goods-title !w-full !flex items-center justify-between">
update
2025-05-12 19:45:27 +08:00
{{ details.goods_name }}
<view :class="['goods-state']" v-if="details.is_use !== 0">{{ details.status_text }}</view>
</view>
<view v-if="details.is_use === 0" class="goods-bh">
{{ dayjs(details.end_time).format('YYYY-MM-DD HH:mm') }} 前可领取
update
2025-03-28 15:34:00 +08:00
</view>
update
2025-05-12 19:45:27 +08:00
<view v-else class="goods-bh">
update
2025-03-28 15:34:00 +08:00
任务编号：DF1515
<x-link>复制</x-link>
</view>
</view>
</view>
update
2025-05-12 19:45:27 +08:00
<view
v-if="details.is_use !== 0"
class="bg-[#F7F8FA] px-[28rpx] py-[16rpx] rounded-[8rpx] !flex justify-around"
style="font-size: 24rpx">
update
2025-03-28 15:34:00 +08:00
<view>发布账号</view>
<view class="bg-[#E5E6EB] w-[5rpx] h-auto"></view>
<view>昵称: 我是大冤种</view>
<view class="bg-[#E5E6EB] w-[5rpx] h-auto"></view>
<view>账号: 56378899</view>
</view>
update
2025-05-12 19:45:27 +08:00
<view class="!grid grid-cols-4 gap-[20rpx]">
update
2025-03-28 15:34:00 +08:00
<view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
update
2025-05-12 19:45:27 +08:00
<view class="goods-st">{{ details.platform }}</view>
update
2025-03-28 15:34:00 +08:00
<view class="goods-st-info">发布平台</view>
</view>
<view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
update
2025-05-12 19:45:27 +08:00
<view class="goods-st">¥ {{ details.real_price.toFixed(2) }}</view>
<view class="goods-st-info">任务报酬</view>
update
2025-03-28 15:34:00 +08:00
</view>
<view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
update
2025-05-12 19:45:27 +08:00
<view class="goods-st">{{ details.material_name }}</view>
<view class="goods-st-info">素材类型</view>
</view>
<view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
<view class="goods-st">{{ details.children_num }}</view>
<view class="goods-st-info">剩余名额</view>
</view>
</view>
<view class="!flex flex-col gap-[10px]">
<view class="!flex px-[10px] py-[12px] bg-[#F2F3F5] gap-[8px] items-center">
<view class="text-[#4E5969] test-24r !flex items-center gap-[5px]">
安全评分:
<x-prompt
info="由该任务或类似任务的历史禁言率、素材是否绿色决定。分值越高，说明完成任务对账号影响最小"
title="分值说明">
</x-prompt>
</view>
<view class="!flex items-center gap-[5px]">
<view class="text-[#165DFF]">{{ details.security_level }}分</view>
<view class="test-24r">{{ details.security_text }}</view>
</view>
</view>
<view class="!flex px-[10px] py-[12px] bg-[#F2F3F5] gap-[8px] items-center">
<view class="text-[#4E5969] test-24r !flex items-center gap-[5px]">
耗时评分:
<x-prompt
info="由该任务完整完成所需要的时间和操作步骤决定。分值越高，说明完成任务越简单"
title="分值说明">
</x-prompt>
</view>
<view class="!flex items-center gap-[5px]">
<view class="text-[#165DFF]">{{ details.time_level }}分</view>
<view class="test-24r">{{ details.time_text }}</view>
</view>
update
2025-03-28 15:34:00 +08:00
</view>
</view>
</view>
update
2025-05-06 11:36:14 +08:00
<view id="mainDetailBox" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden">
update
2025-03-28 15:34:00 +08:00
<tui-tabs
update
2025-05-12 19:45:27 +08:00
v-if="mainDetailWidth && details.is_use !== 0"
update
2025-03-28 15:34:00 +08:00
:tabs="tabs"
:currentTab="currentTabs"
update
2025-05-06 11:36:14 +08:00
:width="mainDetailWidth"
update
2025-03-28 15:34:00 +08:00
@change="({index})=>currentTabs=index">
</tui-tabs>
update
2025-04-07 18:04:39 +08:00
<view :style="{padding: currentTabs===3?'0':'24rpx'}">
update
2025-03-28 15:34:00 +08:00
<Suspense>
<template #default>
<div class="h-full flex flex-col items-start">
update
2025-05-12 19:45:27 +08:00
<component :is="tabs[currentTabs].component" :data="details"></component>
update
2025-03-28 15:34:00 +08:00
</div>
</template>
<template #fallback>
加载中...
</template>
</Suspense>
</view>
</view>
update
2025-03-28 17:14:19 +08:00
update
2025-04-07 18:04:39 +08:00
<template v-if="currentTabs === 0">
<view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
<view class="w-full">
<view class="title">
发布要求
update
2025-03-28 17:14:19 +08:00
</view>
update
2025-04-07 18:04:39 +08:00
<view class="block items-center">
<view class="block-title">发布平台:</view>
<view class="block-info">
update
2025-05-12 19:45:27 +08:00
{{ details.platform }}
update
2025-04-07 18:04:39 +08:00
</view>
update
2025-03-28 17:14:19 +08:00
</view>
update
2025-04-07 18:04:39 +08:00
<view class="block items-center">
<view class="block-title">发布方式:</view>
<view class="block-info">
update
2025-05-12 19:45:27 +08:00
{{
numberToCharacter(details.fb_num - 1)
}}连发/{{ details.is_identical === 0 ? '每次不同' : '每次相同' }}
<x-prompt title="发布方式说明">
<template #info>
<view>
领取素材后，按照要求，连续发布
<text class="text-[#FF7D00]">{{ details.fb_num }}遍</text>
，每遍素材
<text class="text-[#FF7D00]">
{{ details.is_identical === 0 ? '不同' : '相同' }}
</text>
</view>
</template>
</x-prompt>
update
2025-04-07 18:04:39 +08:00
</view>
update
2025-03-28 17:14:19 +08:00
</view>
update
2025-04-07 18:04:39 +08:00
<view class="block items-center">
<view class="block-title">每次间隔时长:</view>
<view class="block-info">
update
2025-05-12 19:45:27 +08:00
{{ details.duration }}分钟
update
2025-04-07 18:04:39 +08:00
</view>
</view>
<view class="block">
<view class="block-title">特殊要求:</view>
<view class="block-info gap-[20rpx]">
update
2025-05-12 19:45:27 +08:00
<view>{{ details.special_text }}</view>
update
2025-04-07 18:04:39 +08:00
<view class="!grid grid-cols-3 !mt-[12rpx]">
update
2025-05-12 19:45:27 +08:00
<x-image
v-for="(v, index) in details.special_images_arr"
:key="index"
class="!size-[96rpx]"
:src="v"
mode="aspectFill"
:draggable="false">
</x-image>
update
2025-04-07 18:04:39 +08:00
</view>
update
2025-03-28 17:14:19 +08:00
</view>
</view>
</view>
</view>
update
2025-04-07 18:04:39 +08:00
<view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
<view class="w-full">
<view class="title">
回填要求
</view>
update
2025-05-12 19:45:27 +08:00
<view
v-for="(v,index) in details.task_content"
:key="v.id"
class="block flex-col">
<view class="block-title">第{{ index + 1 }}次回填:</view>
update
2025-04-07 18:04:39 +08:00
<view class="block-info !flex w-full">
<view
class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] w-[60%] whitespace-nowrap">
update
2025-05-12 19:45:27 +08:00
{{ dayjs(v.start_time).format('MMDD-HH:mm') }} 至
{{ dayjs(v.end_time).format('MMDD-HH:mm') }}之间
update
2025-04-07 18:04:39 +08:00
</view>
<view
class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
update
2025-05-12 19:45:27 +08:00
{{ v.content }}
update
2025-04-07 18:04:39 +08:00
</view>
</view>
</view>
update
2025-03-28 17:14:19 +08:00
</view>
update
2025-04-07 18:04:39 +08:00
</view>
<view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
<view class="w-full">
<view class="title">
时间要求
</view>
<view class="block items-center">
<view class="block-title">作品保留时间:</view>
<view class="block-info">
update
2025-05-12 19:45:27 +08:00
{{ details.retention_time }} {{ details.retention_type === 1 ? '分钟' : '小时' }}
<x-prompt title="保留时间说明">
<template #info>
<view>
该任务结算后，要保留
<text class="text-[#FF7D00]">{{ details.retention_time }}
{{ details.retention_type === 1 ? '分钟' : '小时' }}
</text>
。
<view>到期请自行删除，避免违规。若提前删除，将影响后续收益</view>
</view>
</template>
</x-prompt>
update
2025-04-07 18:04:39 +08:00
</view>
</view>
<view class="block-extend">
*若未到保留时间，提前删除。有对应惩罚
</view>
<view class="block items-center">
<view class="block-title !w-[300rpx]">每次回填将在该时间内审核:</view>
<view class="block-info">
update
2025-05-12 19:45:27 +08:00
{{ details.check_time }} {{ details.check_type === 1 ? '分钟' : '小时' }}内
<x-prompt
title="审核时间说明"
:info="`回填后，我们将于${details.check_time}${details.check_type === 1 ? '分钟' : '小时'}内完成审核，超时自动通过`">
</x-prompt>
update
2025-04-07 18:04:39 +08:00
</view>
</view>
<view class="block-extend">
*若您的回填，未在上述时间内审核，可在沟通中，发起申诉
update
2025-03-28 17:14:19 +08:00
</view>
</view>
update
2025-04-07 18:04:39 +08:00
</view>
<view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
<view class="w-full">
<view class="title">
扣款说明
</view>
update
2025-05-12 19:45:27 +08:00
<view
v-for="(v, index) in details.settlement"
:key="v.id"
class="block !flex !gap-0">
<view class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)]">
{{ index + 1 }}.
update
2025-04-07 18:04:39 +08:00
</view>
<view
class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] flex-grow">
update
2025-05-12 19:45:27 +08:00
{{ v.intro }}
update
2025-04-07 18:04:39 +08:00
</view>
<view
update
2025-05-12 19:45:27 +08:00
class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] whitespace-nowrap">
扣除{{ v.ratio }}%收益
update
2025-04-07 18:04:39 +08:00
</view>
</view>
<view class="block-extend">
*请认真阅读该说明，商家将按照提前约定的事由扣款
update
2025-03-28 17:14:19 +08:00
</view>
</view>
update
2025-04-07 18:04:39 +08:00
</view>
<view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
<view class="w-full">
<view class="title">
其他说明
</view>
update
2025-05-12 19:45:27 +08:00
<view class="block !flex-col">
<view class="test-24r" v-for="(v, index) in details.settlement_arr" :key="index">
{{ v.intro }}
update
2025-04-07 18:04:39 +08:00
</view>
</view>
update
2025-05-12 19:45:27 +08:00
<x-prompt title="信用分说明"
info="扣除信用分，将影响您后续接任务以及提现。请按约定完成任务。请在接受任务前认真阅读各要求，有能力完成再接受。">
<template #button>
<view
class="py-[7rpx] px-[32rpx] rounded-full text-[var(--primary-color)] bg-[#E8F3FF] w-fit">
查看信用分管理方法
</view>
</template>
</x-prompt>
update
2025-03-28 17:14:19 +08:00
</view>
</view>
update
2025-04-07 18:04:39 +08:00
update
2025-05-12 19:45:27 +08:00
<view
v-if="details.is_use === 0"
class="bg-[var(--primary-color)] rounded-[8rpx] py-[26rpx] text-[#fff] !flex justify-center items-center">
接受任务
</view>
<view
v-else
class="bg-[#94BFFF] rounded-[8rpx] py-[26rpx] text-[#fff] !flex justify-center items-center">
update
2025-04-07 18:04:39 +08:00
已接受
</view>
</template>
update
2025-03-28 15:34:00 +08:00
</view>
update
2025-03-25 16:35:39 +08:00
</template>
update
2025-03-28 15:34:00 +08:00
<style lang="scss" scoped>
page {
background-color: #6AA1FF;
}
update
2025-03-28 17:14:19 +08:00
update
2025-04-07 18:04:39 +08:00
.block-extend {
color: rgb(255, 125, 0);
font-size: 20rpx;
font-weight: 400;
letter-spacing: 0;
text-align: left;
margin-top: -8rpx;
margin-bottom: 24rpx;
}
update
2025-03-28 17:14:19 +08:00
.block {
display: flex;
gap: 20rpx;
margin-bottom: 20rpx;
.block-title {
flex-shrink: 0;
color: rgb(134, 144, 156);
font-size: 24rpx;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
width: 160rpx;
}
.block-info {
color: rgb(78, 89, 105);
font-size: 24rpx;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
}
}
.title {
color: rgb(29, 33, 41);
font-size: 28rpx;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
margin-bottom: 32rpx;
}
update
2025-03-28 15:34:00 +08:00
.main-details {
:deep(.tui-tabs-view) {
width: 100% !important;
}
}
.goods-title {
color: rgb(29, 33, 41);
font-size: 32rpx;
font-weight: 500;
line-height: 140%;
letter-spacing: 0;
text-align: left;
margin-bottom: 8rpx;
}
.goods-bh {
color: rgb(134, 144, 156);
font-size: 12px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: left;
display: flex;
gap: 24rpx;
}
.goods-state {
background-color: #E8FFEA;
color: rgb(0, 180, 42);
font-size: 12px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: center;
padding: 4rpx 8rpx;
}
.goods-st {
color: rgb(29, 33, 41);
font-size: 26rpx;
font-weight: 700;
line-height: 140%;
letter-spacing: 0;
text-align: left;
}
update
2025-03-25 16:35:39 +08:00
update
2025-03-28 15:34:00 +08:00
.goods-st-info {
color: rgb(78, 89, 105);
font-size: 22rpx;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
text-align: left;
margin-top: 12rpx;
}
update
2025-03-25 16:35:39 +08:00
</style>
Reference in New Issue Copy Permalink