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

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