271 lines
8.2 KiB
Vue
271 lines
8.2 KiB
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 class="!p-[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>
|
||
|
||
<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">
|
||
10分钟
|
||
</view>
|
||
</view>
|
||
<view class="block flex-col">
|
||
<view class="block-title">第2次回填:</view>
|
||
<view class="block-info">
|
||
10分钟
|
||
</view>
|
||
</view>
|
||
<view class="block flex-col">
|
||
<view class="block-title">第3次回填:</view>
|
||
<view class="block-info">
|
||
10分钟
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #6AA1FF;
|
||
}
|
||
|
||
.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>
|