From 505af229fc2da207d10da4465842d30c46863e68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9A=E5=95=A6C=E6=A2=A6?= <15709267061@163.com>
Date: Thu, 27 Mar 2025 16:35:46 +0800
Subject: [PATCH] update

---
 src/components/TaskCard.vue      |  38 ++++++---
 src/components/XDropdownList.vue |   6 +-
 src/pages/myTask/index.vue       | 137 ++++++++++++++++++-------------
 3 files changed, 112 insertions(+), 69 deletions(-)

diff --git a/src/components/TaskCard.vue b/src/components/TaskCard.vue
index bb71301..018ff8d 100644
--- a/src/components/TaskCard.vue
+++ b/src/components/TaskCard.vue
@@ -4,8 +4,17 @@ import qrw from "../static/icons/qrw.png";
 </script>
 
 <template>
-    <view class="rounded-[8rpx] bg-[#fff] !p-[24rpx]">
-        <view class="!flex gap-[26rpx]">
+    <view class="rounded-[8rpx] bg-[#fff] !p-[24rpx] overflow-hidden task-card">
+        <view class="!pb-[20rpx] !flex justify-between" style="border-bottom: 1px solid #E5E6EB">
+            <view style="font-size: 28rpx">
+                任务编号：DF1212
+            </view>
+            <view style="font-size: 24rpx">
+                <Text class="text-[#165DFF]">08-13-09:54</Text>后可开始回填
+            </view>
+        </view>
+
+        <view class="!flex gap-[26rpx] !pt-[20rpx]">
             <image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill" :src="dy"></image>
             <view class="!h-[88rpx] !flex flex-col justify-between">
                 <view class="title">美白祛斑洗面奶</view>
@@ -14,34 +23,37 @@ import qrw from "../static/icons/qrw.png";
                     <view class="tag">三连发</view>
                 </view>
             </view>
-            <view class="!h-[88rpx] !ml-auto">
+            <view class="!h-[88rpx] !ml-auto !flex items-center gap-[6rpx]">
+                <view class="price-info">待确认</view>
                 <view class="price">
                     <text class="unit">¥</text>
                     8.56
                 </view>
-                <view class="price-info">剩余3个名额</view>
             </view>
         </view>
 
         <view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
-            截止时间：08月23日 14:00
-            <view class="absolute top-1/2 -translate-y-1/2 right-0">
-                <image class="!w-[168rpx]" :src="qrw" mode="widthFix"></image>
+            <view class="!flex gap-[8rpx] justify-between">
+                <view>领取账号:</view>
+                <view>酷酷猛吃</view>
+            </view>
+            <view class="!flex gap-[8rpx] justify-between">
+                <view>领取时间:</view>
+                <view>2024-08-06 14:10</view>
             </view>
         </view>
     </view>
 </template>
 
 <style lang="scss" scoped>
-.qrw {
-
+.task-card {
+    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
 }
 
 .info {
-    color: rgb(78, 89, 105);
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 140%;
+    color: #000;
+    font-size: 24rpx;
+    font-weight: 300;
     letter-spacing: 0;
     text-align: left;
 }
diff --git a/src/components/XDropdownList.vue b/src/components/XDropdownList.vue
index 1d9c427..ae27606 100644
--- a/src/components/XDropdownList.vue
+++ b/src/components/XDropdownList.vue
@@ -20,7 +20,7 @@ const show = ref(false);
         </view>
 
         <transition name="fade">
-            <view v-if="show" class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx]">
+            <view v-if="show" class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx] x-dropdown-card">
                 <slot name="menu"></slot>
             </view>
         </transition>
@@ -35,6 +35,10 @@ const show = ref(false);
 </template>
 
 <style lang="scss" scoped>
+.x-dropdown-card {
+    box-shadow: 0px 2px 20px 5px rgba(0, 0, 0, 0.2);
+}
+
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 300ms;
diff --git a/src/pages/myTask/index.vue b/src/pages/myTask/index.vue
index 49121a2..b508de7 100644
--- a/src/pages/myTask/index.vue
+++ b/src/pages/myTask/index.vue
@@ -1,8 +1,10 @@
 <script setup>
 import filer from '../../static/icons/filer.png';
 import XNav from "../../components/XNav.vue";
-import {ref} from "vue";
+import {reactive, ref} from "vue";
 import TaskCard from "../../components/TaskCard.vue";
+import useTableQuery from "../../hooks/useTableQuery.js";
+import Api from "../../api/index.js";
 
 const tabs = [
     {
@@ -23,74 +25,99 @@ const tabs = [
     },
 ];
 const current = ref(0);
+
+const po = reactive({});
+const vo = reactive({
+    page: '',
+    rows: [],
+    total: 0,
+});
+
+const {loading, pagination, initFetchData} = useTableQuery({
+    api: Api.system.getData,
+    parameter: po,
+    callback: (data) => {
+        vo.page = data.page;
+        vo.total = data.total;
+        vo.rows = [...vo.rows, ...data.rows];
+    }
+});
 </script>
 
 <template>
     <!--我的任务-->
     <XNav :show-back="false"></XNav>
 
-    <view class="relative">
-        <view class="!w-full !h-[414rpx] bg-[var(--primary-color)] bor-b-r !absolute">
-        </view>
+    <scroll-view
+        @refresherpulling="initFetchData()"
+        @scrolltolower="pagination.current++"
+        class="h-[calc(100vh-200rpx)]"
+        scroll-y>
+        <view class="relative">
+            <view class="!w-full !h-[414rpx] bg-[var(--primary-color)] bor-b-r !absolute">
+            </view>
 
-        <view class="!grid grid-cols-4 bg-[#4080FF] py-[20rpx] text-[13px] text-[#fff] relative z-10">
-            <view class="!w-full text-center !flex justify-center items-center">全部任务</view>
-            <view class="!w-full text-center !flex justify-center items-center">全部平台</view>
-            <view class="!w-full text-center !flex justify-center items-center">全部状态</view>
-            <view class="!w-full text-center !flex justify-center items-center">
+            <view class="!grid grid-cols-4 bg-[#4080FF] py-[20rpx] text-[13px] text-[#fff] relative z-10">
+                <view class="!w-full text-center !flex justify-center items-center">全部任务</view>
+                <view class="!w-full text-center !flex justify-center items-center">全部平台</view>
+                <view class="!w-full text-center !flex justify-center items-center">全部状态</view>
+                <view class="!w-full text-center !flex justify-center items-center">
+                    <view
+                        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>
+                        筛选
+                    </view>
+                </view>
+            </view>
+
+            <view class="!p-[20rpx] !pb-0 relative z-10">
+                <view class="rounded-[12rpx] !p-[20rpx] bg-[#fff]">
+                    <view class="!flex items-center justify-between">
+                        <view class="stic-title">| 数据概览</view>
+                        <view class="stic-date">2024.08.07-2024.09.07</view>
+                    </view>
+
+                    <view class="!mt-[20rpx] !grid grid-cols-2 grid-rows-2 gap-[20rpx]">
+                        <view
+                            class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
+                            <view class="block-title">接受任务数</view>
+                            <view class="block-value">10</view>
+                        </view>
+                        <view
+                            class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
+                            <view class="block-title">预估收益(元)</view>
+                            <view class="block-value">45.00</view>
+                        </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-value">4</view>
+                        </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-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="!flex items-center justify-center gap-[10rpx] !py-[10rpx] !px-[30rpx] bg-[#0E42D2] rounded-[8rpx]">
-                    <image class="!w-[22rpx] !h-[22rpx]" :src="filer"></image>
-                    筛选
+                    v-for="item in tabs"
+                    @click="current=item.value"
+                    :class="['rounded-full bg-[#fff] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
+                    {{ item.name }}
                 </view>
             </view>
-        </view>
 
-        <view class="!p-[20rpx] relative z-10">
-            <view class="rounded-[12rpx] !p-[20rpx] bg-[#fff]">
-                <view class="!flex items-center justify-between">
-                    <view class="stic-title">| 数据概览</view>
-                    <view class="stic-date">2024.08.07-2024.09.07</view>
-                </view>
+            <view class="!flex flex-col gap-[20rpx] !px-[20rpx]">
+                <TaskCard v-for="i in vo.rows"></TaskCard>
 
-                <view class="!mt-[20rpx] !grid grid-cols-2 grid-rows-2 gap-[20rpx]">
-                    <view
-                        class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
-                        <view class="block-title">接受任务数</view>
-                        <view class="block-value">10</view>
-                    </view>
-                    <view
-                        class="!w-full !h-[146rpx] bg-[#E8F3FF] !py-[24rpx] !px-[32rpx] box-border !flex flex-col justify-between rounded-[12rpx]">
-                        <view class="block-title">预估收益(元)</view>
-                        <view class="block-value">45.00</view>
-                    </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-value">4</view>
-                    </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-value">5.60</view>
-                    </view>
-                </view>
+                <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
             </view>
         </view>
-
-        <view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx]">
-            <view
-                v-for="item in tabs"
-                @click="current=item.value"
-                :class="['rounded-full bg-[#fff] text-center !py-[8rpx] !text-[13px] duration-500', current===item.value ? 'current' : '']">
-                {{ item.name }}
-            </view>
-        </view>
-
-        <view class="!flex flex-col gap-[20rpx] !px-[20rpx] !mt-[20rpx]">
-            <TaskCard v-for="i in 100"></TaskCard>
-        </view>
-    </view>
+    </scroll-view>
 </template>
 
 <style lang="scss" scoped>