root/xl-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
多啦C梦
2025-04-07 18:04:39 +08:00
parent 0b9f4dc555
commit e3debde7e2
21 changed files with 818 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/pages/downloadMaterials/index.vue Normal file
View File

@@ -0,0 +1,168 @@
<script setup>
import {ref} from "vue";
import XNav from "../../components/XNav.vue";
import {copy, download} from "../../utils/uils.js";
import XLink from "../../components/XLink.vue";
import XImage from "../../components/XImage.vue";
import testIcon from "../../static/images/test.png";
const mock = [
'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/iShot_2025-04-07_13.51.57.png',
];
const current = ref(0);
const tabs = ref([
{
id: 1,
name: '素材1',
},
{
id: 2,
name: '素材2',
},
{
id: 3,
name: '素材3',
},
]);
</script>
<template>
<!--下载素材-->
<x-nav></x-nav>
<tui-tabs :tabs="tabs" :currentTab="current" @change="({index})=>current=index"></tui-tabs>
<view class="block">
<view class="title">标题</view>
<view class="info">
我是标题我是标题我是标题我是标题我是标题
<view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
</view>
</view>
<view class="block">
<view class="title">
话题
<x-link class="!ml-auto" show-description>查看引导</x-link>
</view>
<view class="info">
我是标题我是标题我是标题我是标题我是标题
<view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
</view>
</view>
<view class="block">
<view class="title">正文</view>
<view class="info">
正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文
<view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
</view>
</view>
<view class="block">
<view class="title">素材（请按顺序下载&发布）</view>
<view class="info">
<view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
</view>
<view class="copy-button" @click="download(mock)">批量保存</view>
</view>
</view>
<view class="block">
<view class="title">评论1</view>
<view class="info">
正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文
<view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
</view>
<view class="!flex gap-[24rpx] justify-center">
<view class="copy-button !mx-0" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制文字</view>
<view class="copy-button !mx-0" @click="download(mock)">保存图片</view>
</view>
</view>
</view>
<view class="block">
<view class="title">评论2<x-link class="!ml-auto" show-description>查看引导</x-link></view>
<view class="info">
正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文
<view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
<x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
</view>
<view class="!flex gap-[24rpx] justify-center">
<view class="copy-button !mx-0" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制文字</view>
<view class="copy-button !mx-0" @click="download(mock)">保存图片</view>
</view>
</view>
</view>
</template>
<style scoped lang="scss">
.block {
background-color: #fff;
padding: 20rpx;
.copy-button {
padding: 7rpx 24rpx;
background: rgb(22, 93, 255);
color: #fff;
border-radius: 4rpx;
width: fit-content;
margin-top: 24rpx;
margin-left: auto;
margin-right: auto;
color: rgb(255, 255, 255);
font-size: 12px;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
font-weight: 300;
}
.info {
color: rgb(29, 33, 41);
font-size: 14px;
font-weight: 500;
line-height: 22px;
letter-spacing: 0;
text-align: left;
padding: 24rpx;
background-color: #F7F8FA;
border: 1px solid #E5E6EB;
border-radius: 8rpx;
position: relative;
}
.title {
color: rgb(78, 89, 105);
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0;
padding-bottom: 14rpx;
display: flex;
}
}
</style>

119
src/pages/taskDetails/components/CollectMaterials.vue
View File

@@ -1,11 +1,130 @@
<script setup>
import {ref, reactive} from "vue";
import XSquareCarouselImage from "../../../components/XSquareCarouselImage.vue";
import {toPage} from "../../../utils/uils.js";
const current = ref(0);
const list = reactive([
{
id: 0,
name: '素材1',
},
{
id: 1,
name: '素材2',
},
{
id: 2,
name: '素材3',
},
]);
</script>
<template>
<!--领取素材-->
<view class="!flex gap-[24rpx] !mb-[28rpx]">
<view
v-for="(item,index) in list"
@click="current=index"
:class="['tab-item', index===current?'cur':'']">
素材1
</view>
</view>
<template v-if="true">
<view class="block">
<view class="block-title">
标题:
</view>
<view class="block-info">
标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容
</view>
</view>
<view class="block">
<view class="block-title">
话题:
</view>
<view class="block-info">
#话题1 #话题2 #话题3 #话题4 #话题5
</view>
</view>
<view class="block">
<view class="block-title">
正文:
</view>
<view class="block-info">
简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内容简介内...
</view>
</view>
<view class="block">
<view class="block-title">
素材:
</view>
<view class="block-info">
<x-square-carousel-image></x-square-carousel-image>
</view>
</view>
<view class="block">
<view class="block-title">
评论区案例:
</view>
<view class="block-info">
<view>
<view>评论1：我用的也是这款，早tb可以购买噢~我用的也是这款，早tb可以购买噢~</view>
<view class="!flex gap-[20rpx] flex-wrap">
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
<image class="!w-[96rpx] !h-[96rpx] !aspect-square" mode="aspectFill" src="/static/images/test.png"></image>
</view>
</view>
</view>
</view>
<tui-button size="28" @click="toPage('/pages/downloadMaterials/index')">
<tui-icon size="20" color="#fff" name="bottom"></tui-icon>
<view class="!ml-[20rpx]">一键下载</view>
</tui-button>
</template>
</template>
<style scoped lang="scss">
.tab-item {
padding: 12rpx 32rpx;
border-radius: 9999rpx;
background-color: #F7F8FA;
font-size: 24rpx;
color: #4E5969;
transition: 500ms;
}
.cur {
background-color: #E8F3FF;
color: #165DFF;
}
.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;
}
}
</style>

1
src/pages/taskDetails/components/MyBackfill.vue
View File

@@ -4,6 +4,7 @@
<template>
<!--我的回填-->
</template>
<style scoped lang="scss">

133
src/pages/taskDetails/components/ReviewCommunication.vue
View File

@@ -1,11 +1,142 @@
<script setup>
import ysq from "../../../static/icons/ysq.png";
import avatar from "../../../static/images/Avatar.png";
import XNoticeBar from "../../../components/XNoticeBar.vue";
import XButton from "../../../components/XButton.vue";
import rback from "../../../static/icons/rout-back.png";
</script>
<template>
<!--审核沟通-->
<view class="context">
<x-notice-bar status="success"></x-notice-bar>
<view class="chat-box">
<view class="!flex gap-[12rpx]">
<image class="!size-[80rpx]" mode="aspectFill" :src="avatar"></image>
<view class="flex-grow">
<view class="time">07月21日 13:42</view>
<view class="px-[24rpx] py-[16rpx] bg-[#fff] rounded-[8rpx]">
123
</view>
<view :class="['status', 'read']">
未读
</view>
</view>
</view>
<view
class="bg-[#fff] !w-[460rpx] p-[24rpx] rounded-[8rpx] !mx-auto !mt-[24rpx] !flex flex-col gap-[16rpx]">
<view class="prompt">
<image class="!w-[26rpx]" :src="ysq" mode="widthFix"></image>
提示：点击下方按钮，快速回复
</view>
<view class="prompt-button">
我已重新回填
</view>
<view class="prompt-button">
拒绝修改并放弃任务
<view class="!mt-[16rpx] text-[#86909C] test-22r">
商家将根据约定扣钱或不结算
</view>
</view>
<view class="prompt-button">
发起申诉
</view>
</view>
</view>
<view class="p-[24rpx] !pt-0 !flex gap-[22rpx]">
<x-button class="!w-[220rpx]">
发起申述
</x-button>
<x-button class="flex-grow !flex gap-[16rpx]">
<image :src="rback" class="!w-[22rpx]" mode="widthFix"></image>
发起申述
</x-button>
</view>
</view>
</template>
<style scoped lang="scss">
.prompt-button {
color: var(--primary-color);
font-size: 28rpx;
font-weight: 400;
letter-spacing: 0;
text-align: left;
background-color: #E8F3FF;
padding: 15rpx 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 4rpx;
}
.prompt {
padding: 18rpx 30rpx;
background-color: #F2F3F5;
color: rgb(134, 144, 156);
font-size: 22rpx;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
text-align: center;
display: flex;
align-items: center;
gap: 18rpx;
}
.status {
margin-top: 8rpx;
color: rgb(29, 33, 41);
font-size: 20rpx;
font-weight: 400;
line-height: 140%;
letter-spacing: 0;
display: flex;
align-items: center;
gap: 8rpx;
&::before {
content: '';
border-radius: 50%;
display: block;
width: 24rpx;
height: 24rpx;
}
}
.read {
&::before {
background-color: var(--primary-color);
}
}
.unread {
&::before {
background-color: var(--warning-color);
}
}
.context {
background-color: #F2F3F5;
width: 100%;
}
.time {
color: rgb(134, 144, 156);
font-size: 20rpx;
font-weight: 400;
line-height: 16px;
letter-spacing: 0;
margin-bottom: 8rpx;
}
.chat-box {
box-sizing: border-box;
padding: 24rpx;
}
</style>

6
src/pages/taskDetails/components/TaskDetails.vue
View File

@@ -28,9 +28,9 @@ import XImage from "../../../components/XImage.vue";
<view class="block">
<view class="block-title">素材案例:</view>
<view class="block-info !grid grid-cols-3 gap-[20rpx]">
<x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
<x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
<x-image class="!size-[160rpx]" :src="fmt" mode="aspectFill" :draggable="false"></x-image>
<x-image class="!size-[160rpx]" :src="fmt" :list="[fmt,fmt,fmt]" :cur="0" mode="aspectFill" :draggable="false"></x-image>
<x-image class="!size-[160rpx]" :src="fmt" :list="[fmt,fmt,fmt]" :cur="1" mode="aspectFill" :draggable="false"></x-image>
<x-image class="!size-[160rpx]" :src="fmt" :list="[fmt,fmt,fmt]" :cur="2" mode="aspectFill" :draggable="false"></x-image>
</view>
</view>
<view class="block">

211
src/pages/taskDetails/index.vue
View File

@@ -93,7 +93,7 @@ onMounted(() => {
@change="({index})=>currentTabs=index">
</tui-tabs>
<view class="!p-[24rpx]">
<view :style="{padding: currentTabs===3?'0':'24rpx'}">
<Suspense>
<template #default>
<div class="h-full flex flex-col items-start">
@@ -108,66 +108,171 @@ onMounted(() => {
</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">
抖音
<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>
<view class="block items-center">
<view class="block-title">发布方式:</view>
<view class="block-info">
三连发/每次相同
<view class="block items-center">
<view class="block-title">发布平台:</view>
<view class="block-info">
抖音
</view>
</view>
</view>
<view class="block items-center">
<view class="block-title">每次间隔时长:</view>
<view class="block-info">
10分钟
<view class="block items-center">
<view class="block-title">发布方式:</view>
<view class="block-info">
三连发/每次相同
</view>
</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 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>
<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 class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden !p-[24rpx]">
<view class="w-full">
<view class="title">
回填要求
</view>
</view>
<view class="block flex-col">
<view class="block-title">第2次回填:</view>
<view class="block-info">
10分钟
<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>
<view class="block flex-col">
<view class="block-title">第3次回填:</view>
<view class="block-info">
10分钟
<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>
<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>
@@ -176,6 +281,16 @@ 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;