xl-mobile/src/pages/taskDetails/index.vue

<script setup>
import goodsIcon from '../../static/icons/goodsIcon.png';
import XNav from "../../components/XNav.vue";
import {ref, onMounted, defineAsyncComponent} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
import XLink from "../../components/XLink.vue";
import XNoticeBar from "../../components/XNoticeBar.vue";
import XImage from "../../components/XImage.vue";
import fmt from "../../static/images/fmt.png";

const details = ref(null);
const mainDetailsRef = ref();
const currentTabs = ref(0);
const tabs = [
    {
        name: "任务详情",
        component: defineAsyncComponent(() => import('./components/TaskDetails.vue')),
    },
    {
        name: "领取素材",
        component: defineAsyncComponent(() => import('./components/CollectMaterials.vue')),
    },
    {
        name: "我的回填",
        component: defineAsyncComponent(() => import('./components/MyBackfill.vue')),
    },
    {
        name: "审核沟通",
        component: defineAsyncComponent(() => import('./components/ReviewCommunication.vue')),
    },
];

onLoad((options) => {
    const {id} = options;
});

onMounted(() => {
})
</script>

<template>
    <!--任务详情-->
    <XNav></XNav>
    <x-notice-bar></x-notice-bar>

    <view class="!p-[20rpx] !flex flex-col gap-[20rpx] box-border">
        <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">
                        洗面奶洗面奶
                        <view :class="['goods-state']">进行中</view>
                    </view>
                    <view class="goods-bh">
                        任务编号：DF1515
                        <x-link>复制</x-link>
                    </view>
                </view>
            </view>

            <view class="bg-[#F7F8FA] px-[28rpx] py-[16rpx] rounded-[8rpx] !flex justify-around"
                  style="font-size: 24rpx">
                <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>

            <view class="!grid grid-cols-3 gap-[20rpx]">
                <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
                    <view class="goods-st">今日头条</view>
                    <view class="goods-st-info">发布平台</view>
                </view>
                <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
                    <view class="goods-st">今日头条</view>
                    <view class="goods-st-info">发布平台</view>
                </view>
                <view class="bg-[#E8F3FF] px-[26rpx] py-[20rpx] rounded-[8rpx]">
                    <view class="goods-st">今日头条</view>
                    <view class="goods-st-info">发布平台</view>
                </view>
            </view>
        </view>

        <view ref="mainDetailsRef" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden">
            <tui-tabs
                v-if="mainDetailsRef?.$el?.clientWidth"
                :tabs="tabs"
                :currentTab="currentTabs"
                :width="mainDetailsRef?.$el?.clientWidth"
                @change="({index})=>currentTabs=index">
            </tui-tabs>

            <view :style="{padding: currentTabs===3?'0':'24rpx'}">
                <Suspense>
                    <template #default>
                        <div class="h-full flex flex-col items-start">
                            <component :is="tabs[currentTabs].component"></component>
                        </div>
                    </template>

                    <template #fallback>
                        加载中...
                    </template>
                </Suspense>
            </view>
        </view>

        <template v-if="currentTabs === 0">
            <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">
                            抖音
                        </view>
                    </view>
                    <view class="block items-center">
                        <view class="block-title">发布方式:</view>
                        <view class="block-info">
                            三连发/每次相同
                        </view>
                    </view>
                    <view class="block items-center">
                        <view class="block-title">每次间隔时长:</view>
                        <view class="block-info">
                            10分钟
                        </view>
                    </view>
                    <view class="block">
                        <view class="block-title">特殊要求:</view>
                        <view class="block-info gap-[20rpx]">
                            <view>请使用抖音扫码下图，收藏音乐，发布时使用</view>
                            <view class="!grid grid-cols-3 !mt-[12rpx]">
                                <x-image class="!size-[96rpx]" :src="fmt" mode="aspectFill"
                                         :draggable="false"></x-image>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                <view class="w-full">
                    <view class="title">
                        回填要求
                    </view>
                    <view class="block flex-col">
                        <view class="block-title">第1次回填:</view>
                        <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">
                                0813-09:54 至 0813-17:14之间
                            </view>
                            <view
                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
                                3个作品评论区截图
                            </view>
                        </view>
                    </view>
                    <view class="block flex-col">
                        <view class="block-title">第2次回填:</view>
                        <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">
                                0813-09:54 至 0813-17:14之间
                            </view>
                            <view
                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
                                3个作品链接
                            </view>
                        </view>
                    </view>
                    <view class="block flex-col">
                        <view class="block-title">第3次回填:</view>
                        <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">
                                0814-10:00 至 0814-11:30之间
                            </view>
                            <view
                                class="bg-[#F7F8FA] py-[12rpx] px-[20rpx] border-1 border-[rgb(229,230,235)] flex-grow">
                                每一个作品的播放量截图
                            </view>
                        </view>
                    </view>
                </view>
            </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">
                            3天
                        </view>
                    </view>
                    <view class="block-extend">
                        *若未到保留时间，提前删除。有对应惩罚
                    </view>
                    <view class="block items-center">
                        <view class="block-title !w-[300rpx]">每次回填将在该时间内审核:</view>
                        <view class="block-info">
                            4小时内
                        </view>
                    </view>
                    <view class="block-extend">
                        *若您的回填，未在上述时间内审核，可在沟通中，发起申诉
                    </view>
                </view>
            </view>

            <view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                <view class="w-full">
                    <view class="title">
                        扣款说明
                    </view>
                    <view class="block !flex !gap-0">
                        <view class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)]">1.
                        </view>
                        <view
                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] flex-grow">
                            未按约定评论
                        </view>
                        <view
                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] !w-[210rpx]">
                            扣除20%收益
                        </view>
                    </view>
                    <view class="block !flex !gap-0">
                        <view class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)]">2.
                        </view>
                        <view
                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] flex-grow">
                            当天发布其他广告
                        </view>
                        <view
                            class="test-24r px-[20rpx] py-[12rpx] bg-[#F7F8FA] border-1 border-[rgb(229,230,235)] !w-[210rpx]">
                            扣除100%收益
                        </view>
                    </view>
                    <view class="block-extend">
                        *请认真阅读该说明，商家将按照提前约定的事由扣款
                    </view>
                </view>
            </view>

            <view class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
                <view class="w-full">
                    <view class="title">
                        其他说明
                    </view>
                    <view class="block">
                        <view class="test-24r">
                            未到约定期限，达人提前删除视频处罚扣除1点达人信用分
                        </view>
                    </view>
                    <view class="py-[7rpx] px-[32rpx] rounded-full text-[var(--primary-color)] bg-[#E8F3FF] w-fit">
                        查看信用分管理方法
                    </view>
                </view>
            </view>

            <view class="bg-[#94BFFF] rounded-[8rpx] py-[26rpx] text-[#fff] !flex justify-center items-center">
                已接受
            </view>
        </template>
    </view>
</template>

<style lang="scss" scoped>
page {
    background-color: #6AA1FF;
}

.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;
}

.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;
}

.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;
}

.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;
}
</style>