From 168895b5ac1442fe814128be11d331d88c681848 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9A=E5=95=A6C=E6=A2=A6?= <15709267061@163.com>
Date: Fri, 28 Mar 2025 09:37:10 +0800
Subject: [PATCH] update

---
 package.json                   |   1 +
 pnpm-lock.yaml                 |   8 ++++
 src/components/TaskCard.vue    |   6 ++-
 src/components/XAlert.vue      |  25 +++++++++++
 src/components/XCountdown.vue  |  50 ++++++++++++++++++++++
 src/components/XDateRange.vue  |  17 ++++++++
 src/components/XDateTime.vue   |  36 ++++++++++++++++
 src/components/XFilter.vue     |  38 +++++++++++++++++
 src/components/XFilterItem.vue |  29 +++++++++++++
 src/components/XNav.vue        |   2 +-
 src/components/XRadio.vue      |  36 ++++++++++++++++
 src/components/XRadioGroup.vue |  17 ++++++++
 src/pages/myTask/index.vue     |  74 +++++++++++++++++++++++++++++++--
 src/scss/global.scss           |  14 +++++++
 src/static/icons/time.png      | Bin 0 -> 870 bytes
 15 files changed, 347 insertions(+), 6 deletions(-)
 create mode 100644 src/components/XAlert.vue
 create mode 100644 src/components/XCountdown.vue
 create mode 100644 src/components/XDateRange.vue
 create mode 100644 src/components/XDateTime.vue
 create mode 100644 src/components/XFilter.vue
 create mode 100644 src/components/XFilterItem.vue
 create mode 100644 src/components/XRadio.vue
 create mode 100644 src/components/XRadioGroup.vue
 create mode 100644 src/static/icons/time.png

diff --git a/package.json b/package.json
index 710335a..8102134 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
         "@tailwindcss/vite": "^4.0.15",
         "@uni-helper/vite-plugin-uni-tailwind": "^0.15.2",
         "crypto-js": "^4.2.0",
+        "dayjs": "^1.11.13",
         "deep-pick-omit": "^1.2.1",
         "destr": "^2.0.3",
         "pinia": "^2.2.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bfbc09a..72141af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,9 @@ importers:
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       deep-pick-omit:
         specifier: ^1.2.1
         version: 1.2.1
@@ -2167,6 +2170,9 @@ packages:
     resolution: {integrity: sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==}
     engines: {node: '>=10'}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -6985,6 +6991,8 @@ snapshots:
       whatwg-mimetype: 2.3.0
       whatwg-url: 8.7.0
 
+  dayjs@1.11.13: {}
+
   debug@2.6.9:
     dependencies:
       ms: 2.0.0
diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index 018ff8d..0a1535d 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -1,6 +1,7 @@
 <script setup>
 import dy from "../static/images/抖音.png";
 import qrw from "../static/icons/qrw.png";
+import XCountdown from "./XCountdown.vue";
 </script>
 
 <template>
@@ -9,9 +10,12 @@ import qrw from "../static/icons/qrw.png";
             <view style="font-size: 28rpx">
                 任务编号：DF1212
             </view>
-            <view style="font-size: 24rpx">
+            <view v-if="false" style="font-size: 24rpx">
                 <Text class="text-[#165DFF]">08-13-09:54</Text>后可开始回填
             </view>
+            <x-countdown v-else>
+                <view style="font-size: 24rpx;font-weight: 400;" class="text-[rgb(78,89,105)]">审核倒计时:</view>
+            </x-countdown>
         </view>
 
         <view class="!flex gap-[26rpx] !pt-[20rpx]">
diff --git a/src/components/XAlert.vue b/src/components/XAlert.vue
new file mode 100644
index 0000000..6f1ec6c
--- /dev/null
+++ b/src/components/XAlert.vue
@@ -0,0 +1,25 @@
+<script setup>
+import {ref} from "vue";
+
+const show = ref(false);
+</script>
+
+<template>
+    <view @click="show=true">
+        <slot></slot>
+    </view>
+
+    <tui-alert
+        fadeIn
+        v-bind="$attrs"
+        @cancel="show=false"
+        maskClosable
+        @click="show=false"
+        :show="show">
+        <slot name="context"></slot>
+    </tui-alert>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/XCountdown.vue b/src/components/XCountdown.vue
new file mode 100644
index 0000000..bb55327
--- /dev/null
+++ b/src/components/XCountdown.vue
@@ -0,0 +1,50 @@
+<script setup>
+import {ref} from "vue";
+import dayjs from "dayjs";
+
+const {time} = defineProps({
+    time: {
+        type: String,
+        default: '2025-03-28 10:10:00',
+    }
+});
+
+const diff = ref(dayjs(time).diff(dayjs(new Date()), 'second'));
+const hours = ref(null);
+const minutes = ref(null);
+const seconds = ref(null);
+
+const timer = setInterval(() => {
+    diff.value = dayjs(time).diff(dayjs(new Date()), 'second');
+    hours.value = Math.floor(diff.value / 3600);
+    minutes.value = Math.floor((diff.value % 3600) / 60);
+    seconds.value = diff.value % 60;
+}, 1000);
+</script>
+
+<template>
+    <view class="!flex items-center gap-[20rpx]">
+        <slot></slot>
+        <view class="!flex gap-[16rpx] items-center">
+            <view class="time-block" v-if="hours">{{ hours < 10 ? `0${hours}` : hours }}</view>
+            <view v-if="hours">:</view>
+            <view class="time-block" v-if="minutes">{{ minutes < 10 ? `0${minutes}` : minutes }}</view>
+            <view v-if="minutes">:</view>
+            <view class="time-block" v-if="seconds">{{ seconds < 10 ? `0${seconds}` : seconds }}</view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.time-block {
+    background-color: #E8F3FF;
+    border-radius: 4rpx;
+    padding: 4rpx;
+    color: rgb(22, 93, 255);
+    font-size: 24rpx;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+}
+</style>
diff --git a/src/components/XDateRange.vue b/src/components/XDateRange.vue
new file mode 100644
index 0000000..48778c9
--- /dev/null
+++ b/src/components/XDateRange.vue
@@ -0,0 +1,17 @@
+<script setup>
+import XDateTime from "./XDateTime.vue";
+
+const startTime = defineModel('startTime');
+const endTime = defineModel('endTime');
+</script>
+
+<template>
+    <view class="!flex gap-[20rpx] !w-full items-center">
+        <x-date-time v-model:model-value="startTime"></x-date-time>
+        <view class="">-</view>
+        <x-date-time v-model:model-value="endTime"></x-date-time>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/XDateTime.vue b/src/components/XDateTime.vue
new file mode 100644
index 0000000..6f3e3a5
--- /dev/null
+++ b/src/components/XDateTime.vue
@@ -0,0 +1,36 @@
+<script setup>
+import timeIcon from "../static/icons/time.png";
+
+const modalValue = defineModel();
+const {placeholder} = defineProps({
+    placeholder: {
+        type: String,
+        default: "请选择时间",
+    }
+});
+
+const success = ({detail: {value}}) => {
+    modalValue.value = value;
+}
+</script>
+
+<template>
+    <picker mode="date" class="x-date-input" @change="success">
+        <view>
+            <image class="!size-[24rpx] !absolute left-[30rpx] top-1/2 -translate-y-1/2" :src="timeIcon"></image>
+            <text v-if="!modalValue" class="text-[#666]">{{ placeholder }}</text>
+            <text v-else>{{modalValue}}</text>
+        </view>
+    </picker>
+</template>
+
+<style lang="scss" scoped>
+.x-date-input {
+    background-color: #F2F3F5;
+    padding: 14rpx 0;
+    flex-grow: 1;
+    text-align: center;
+    border-radius: 4rpx;
+    position: relative;
+}
+</style>
diff --git a/src/components/XFilter.vue b/src/components/XFilter.vue
new file mode 100644
index 0000000..aae9710
--- /dev/null
+++ b/src/components/XFilter.vue
@@ -0,0 +1,38 @@
+<script setup>
+const visible = defineModel('visible');
+const model = defineModel('model');
+const emits = defineEmits(['success']);
+
+const init = () => {
+    Object.keys(model.value).forEach(key => {
+        model.value[key] = null;
+    });
+    success();
+}
+
+const success = () => {
+    visible.value = false;
+    emits('success');
+}
+</script>
+
+<template>
+    <tui-drawer
+        mode="top"
+        maskZIndex="999"
+        zIndex="999"
+        @close="visible=false"
+        :visible="visible">
+        <view class="!pt-[100rpx] !p-[32rpx]">
+            <slot></slot>
+            <view class="!flex gap-[24rpx] !mt-[24rpx]">
+                <tui-button height="88rpx" plain @click="init">重置</tui-button>
+                <tui-button height="88rpx" @click="success">确定</tui-button>
+            </view>
+        </view>
+    </tui-drawer>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/components/XFilterItem.vue b/src/components/XFilterItem.vue
new file mode 100644
index 0000000..1727a6f
--- /dev/null
+++ b/src/components/XFilterItem.vue
@@ -0,0 +1,29 @@
+<script setup>
+const {label} = defineProps({
+    label: {
+        type: String,
+        default: "标题",
+    }
+});
+</script>
+
+<template>
+    <view class="x-filter-item">
+        <view class="label">{{ label }}</view>
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.x-filter-item {
+    margin-bottom: 36rpx;
+}
+.label {
+    color: rgb(134, 144, 156);
+    font-size: 24rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+    text-align: left;
+    margin-bottom: 24rpx;
+}
+</style>
diff --git a/src/components/XNav.vue b/src/components/XNav.vue
index e798886..0dc0f36 100644
--- a/src/components/XNav.vue
+++ b/src/components/XNav.vue
@@ -14,7 +14,7 @@ const title = ref(document.title);
 
 <template>
     <template v-if="!isWXWeb()">
-        <view class="!flex justify-center items-center w-full h-[100rpx] bg-[#f9f9f9] fixed left-0 top-0 z-[998]">
+        <view class="!flex justify-center items-center w-full h-[100rpx] bg-[#f9f9f9] fixed left-0 top-0 z-[1000]">
             <image
                 v-if="showBack"
                 @click="backPage()"
diff --git a/src/components/XRadio.vue b/src/components/XRadio.vue
new file mode 100644
index 0000000..10275fa
--- /dev/null
+++ b/src/components/XRadio.vue
@@ -0,0 +1,36 @@
+<script setup>
+import {inject} from "vue";
+
+const modelValue = inject('modelValue');
+const {value} = defineProps({
+    value: {
+        type: [String, Number],
+        default: 0
+    }
+});
+</script>
+
+<template>
+    <view @click="modelValue=value" :class="['x-radio', modelValue===value ? 'x-radio-cur' : '']">
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.x-radio {
+    padding: 12rpx 0;
+    text-align: center;
+    background-color: #F7F8FA;
+    border-radius: 4rpx;
+    color: rgb(78, 89, 105);
+    font-size: 24rpx;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0;
+    transition: 500ms;
+}
+.x-radio-cur {
+    background-color: #E8F3FF;
+    color: #165DFF;
+}
+</style>
diff --git a/src/components/XRadioGroup.vue b/src/components/XRadioGroup.vue
new file mode 100644
index 0000000..d2226a8
--- /dev/null
+++ b/src/components/XRadioGroup.vue
@@ -0,0 +1,17 @@
+<script setup>
+import {provide} from "vue";
+
+const modalValue = defineModel();
+
+provide('modelValue', modalValue);
+</script>
+
+<template>
+    <view>
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/pages/myTask/index.vue b/src/pages/myTask/index.vue
index b508de7..1f3402a 100644
--- a/src/pages/myTask/index.vue
+++ b/src/pages/myTask/index.vue
@@ -5,6 +5,12 @@ import {reactive, ref} from "vue";
 import TaskCard from "../../components/TaskCard.vue";
 import useTableQuery from "../../hooks/useTableQuery.js";
 import Api from "../../api/index.js";
+import XFilter from "../../components/XFilter.vue";
+import XFilterItem from "../../components/XFilterItem.vue";
+import XRadioGroup from "../../components/XRadioGroup.vue";
+import XRadio from "../../components/XRadio.vue";
+import XDateRange from "../../components/XDateRange.vue";
+import XAlert from "../../components/XAlert.vue";
 
 const tabs = [
     {
@@ -25,8 +31,14 @@ const tabs = [
     },
 ];
 const current = ref(0);
-
-const po = reactive({});
+const showFilter = ref(false);
+const sumPo = reactive({
+    type: 0,
+    startTime: null,
+    endTime: null,
+});
+const po = reactive({
+});
 const vo = reactive({
     page: '',
     rows: [],
@@ -48,6 +60,49 @@ const {loading, pagination, initFetchData} = useTableQuery({
     <!--我的任务-->
     <XNav :show-back="false"></XNav>
 
+    <x-filter
+        v-model:model="sumPo"
+        v-model:visible="showFilter">
+        <x-filter-item label="任务类型">
+            <x-radio-group v-model:model-value="sumPo.type">
+                <view class="!grid grid-cols-4 gap-[24rpx]">
+                    <x-radio :value="0">全部任务</x-radio>
+                    <x-radio :value="1">宣发</x-radio>
+                    <x-radio :value="2">评论</x-radio>
+                    <x-radio :value="3">续期</x-radio>
+                </view>
+            </x-radio-group>
+        </x-filter-item>
+        <x-filter-item label="发布平台">
+            <x-radio-group v-model:model-value="sumPo.type">
+                <view class="!grid grid-cols-4 gap-[24rpx]">
+                    <x-radio :value="0">全部平台</x-radio>
+                    <x-radio :value="1">抖音</x-radio>
+                    <x-radio :value="2">快手</x-radio>
+                    <x-radio :value="3">视频号</x-radio>
+                    <x-radio :value="4">小红书</x-radio>
+                    <x-radio :value="5">今日头条</x-radio>
+                    <x-radio :value="6">咸鱼</x-radio>
+                </view>
+            </x-radio-group>
+        </x-filter-item>
+        <x-filter-item label="结算状态">
+            <x-radio-group v-model:model-value="sumPo.type">
+                <view class="!grid grid-cols-4 gap-[24rpx]">
+                    <x-radio :value="0">全部状态</x-radio>
+                    <x-radio :value="1">未结算</x-radio>
+                    <x-radio :value="2">已结算</x-radio>
+                </view>
+            </x-radio-group>
+        </x-filter-item>
+        <x-filter-item label="选择时间段">
+            <x-date-range
+                v-model:end-time="sumPo.endTime"
+                v-model:start-time="sumPo.startTime">
+            </x-date-range>
+        </x-filter-item>
+    </x-filter>
+
     <scroll-view
         @refresherpulling="initFetchData()"
         @scrolltolower="pagination.current++"
@@ -63,6 +118,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
                 <view class="!w-full text-center !flex justify-center items-center">全部状态</view>
                 <view class="!w-full text-center !flex justify-center items-center">
                     <view
+                        @click="showFilter=true"
                         class="!flex items-center justify-center gap-[10rpx] !py-[10rpx] !px-[30rpx] bg-[#0E42D2] rounded-[8rpx]">
                         <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
                         筛选
@@ -95,14 +151,24 @@ const {loading, pagination, initFetchData} = useTableQuery({
                         </view>
                         <view
                             class="!w-full !h-[146rpx] !bg-[#E8FFEA] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
-                            <view class="block-title">到账收益(元)</view>
+                            <view class="block-title !flex gap-[6rpx] items-center">
+                                到账收益(元)
+                                <x-alert btnText="知道了" btnColor="#165DFF">
+                                    <tui-icon name="explain" :size="16" ></tui-icon>
+                                    <template #context>
+                                        <view style="font-size: 32rpx;font-weight: 500" class="!mb-[30rpx]">到账收益</view>
+                                        <view style="font-size: 28rpx;font-weight: 400" class="text-[rgb(78,89,105)]">根据您的任务完成情况</view>
+                                        <view style="font-size: 28rpx;font-weight: 400" class="text-[rgb(78,89,105)] !mt-[10rpx]">实际获得的收益</view>
+                                    </template>
+                                </x-alert>
+                            </view>
                             <view class="block-value">5.60</view>
                         </view>
                     </view>
                 </view>
             </view>
 
-            <view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx] sticky top-0 bg-[#F2F3F5] z-10 py-[20rpx]">
+            <view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx] bg-[#F2F3F5] py-[20rpx]">
                 <view
                     v-for="item in tabs"
                     @click="current=item.value"
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 87e80ba..1b79ef9 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -1,3 +1,5 @@
+$primary-color: #2D5CF6;
+
 .test {
     border: 1px solid red;
     @apply box-border;
@@ -6,3 +8,15 @@
 .tui-btn {
     border-radius: 12rpx !important;
 }
+
+.tui-primary-outline {
+    background-color: lighten($primary-color, 40%) !important;
+}
+
+.tui-alert-box {
+    border-radius: 16rpx !important;
+    overflow: hidden;
+    .tui-alert-content {
+        padding: 40rpx 32rpx !important;
+    }
+}
diff --git a/src/static/icons/time.png b/src/static/icons/time.png
new file mode 100644
index 0000000000000000000000000000000000000000..1560d32ca575e2650234bf2a43eead22e06585cf
GIT binary patch
literal 870
zcmV-s1DX7ZP)<h;3K|Lk000e1NJLTq001ul001ut1^@s6b0?Fm00004b3#c}2nYxW
zd<bNS0009WNkl<ZXo1~YF?QlG5d9<eAlvLqwdpo(!~w#iB&oIpE&*I3p-V?7dF%n=
z)Jc~VNtcVnvqcaw^2nBC8QA?54_VTm@yuv6V?qM-2SW`2A4C)L9|79@W*`FqB6<LT
z_2PP(Vqc1#*dGkFAzLKs3kEVGdQf?ut(NmFhC?uULpp}An+45c-i9~%R!EoFgbCqA
zzCRf1oajD;hq3d`COTxUuMoB5dspKrm?u@wFpzbaX8=%VzrCyRl$p<K1@aJ}l6)=k
zNLx*{zLR{_!ba1vQ6gloDgip7iz(*rdO4rHzC680axLNQ`7t{=JtN4bq)$%I=<WG2
zvj<9=cM(smZ3$I@K{0pjz02e;M=VWV-`xa-)m$mPGe5vLE-pv+l0(}9d@Bxav|d_F
zF?W4820qgSV%~0E44XdaFwb%#ZU4VH(YI@<ol(ioiCQ%k39IEilN3gPHhC0KAm6(h
zPfM#b424awTFx`+jTMtW1#GfHLF<PiZeR|+B8u8q0AM@U=TlUgxNoeM^GxDlw66ew
zna}M94y|>ADjo_bCr+W!p>5cFjOi%JQO%9#SRmOxV28>Lj>TlE@If?DlD!`rT<46a
z`F{m!AI?gEzPKC(-NbB2PTPv+C5KNTfQ?qjuNT)->2OIcfRbKEiiOvU>#1ad1ZXjj
zs)1zQtvc+VyPK})L(G#H0c?omi)m+5v?Tx$Jt)`dl@d(_a6KbxzL+zoLK7vq5=SK^
z{cV)=q}!2V?s`_ncK8^+PKQn5P&SGJNYwye9_Ab&z+H0i-JnfK)eOT+0e<(zL%?;f
zHVWOEP2GKQ-*6SbiaxR>@6vuwbiZ!_Tm=C;<=AmpS2)|Z`M64cc4R7*@Ivc_DN)&d
z5o$=KD)H;f)4Qu;%S69j72BpTN+aNVY0y#p5=-2%CFdCQ2Sfei=dW83mB<08tlIsb
zoe}R1@YPeT6QtN|ZoMaE;3I&ICfz{az!20#ju9dRq1~6L_I+w0Vp~RyzCFm5(q27P
w0miJF^tqzR+b~I#xj0B)eE?slc#6aBFNY)kud)}MLI3~&07*qoM6N<$g0GE<>Hq)$

literal 0
HcmV?d00001