update

src/pages/home/index.vue

@@ -6,15 +6,16 @@ import nav3 from '../../static/icons/icon-邀请好友.png';
 import nav4 from '../../static/icons/icon-添加客服.png';
 import nav5 from '../../static/icons/icon-重要消息.png';
 import XDropdownList from "../../components/XDropdownList.vue";
-import XDropdownItem from "../../components/XDropdownItem.vue";
 import TaskItem from "../../components/TaskItem.vue";
 import useTableQuery from "../../hooks/useTableQuery.js";
 import Api from "../../api/index.js";
-import {reactive, ref} from "vue";
+import {reactive, ref, onMounted} from "vue";
 import {toPage} from "../../utils/uils.js";
 import AddCustomerServiceModal from "../../components/AddCustomerServiceModal.vue";
+import OpenTypeFun from "../../components/OpenTypeFun.js";
 
 const showAddCustomer = ref(false);
+const advList = reactive([]);
 const nav = [
     {
         title: '新手教学',
@@ -46,7 +47,30 @@ const nav = [
     },
 ];
 
+const taskType = reactive([]);
+const platformType = reactive([]);
+const sortType = reactive([
+    {id: 0, name: '默认排序'},
+    {id: 1, name: '价格最高'},
+    {id: 2, name: '极速打款'},
+    {id: 3, name: '素材安全'},
+    {id: 4, name: '简单上手'},
+    {id: 5, name: '最新发布'},
+]);
+
+Api.system.getTaskType().then(({data}) => {
+    taskType.length = 0;
+    taskType.push(...data);
+});
+Api.system.getPlatform().then(({data}) => {
+    platformType.length = 0;
+    platformType.push(...data);
+});
+
 const po = reactive({
+    type: 0,
+    pid: 0,
+    order: 0,
 });
 const vo = reactive({
     page: '',
@@ -55,14 +79,21 @@ const vo = reactive({
 });
 
 const {loading, pagination, initFetchData} = useTableQuery({
-    api: Api.system.getData,
+    api: Api.system.getTask,
     parameter: po,
     callback: (data) => {
-        vo.page = data.page;
-        vo.total = data.total;
-        vo.rows =[...vo.rows, ... data.rows];
+        Object.assign(vo, data);
     }
 });
+
+onMounted(() => {
+    Api.system.getAdvList({
+        position: 1,
+    }).then(({data}) => {
+        advList.length = 0;
+        advList.push(...data);
+    });
+})
 </script>
 
 <template>
@@ -73,7 +104,7 @@ const {loading, pagination, initFetchData} = useTableQuery({
 
     <scroll-view
         @refresherpulling="initFetchData()"
-        @scrolltolower="pagination.current++"
+        @scrolltolower="pagination.page++"
         class="h-[calc(100vh-200rpx)]"
         scroll-y>
         <view class="relative overflow-hidden bg-b-r !pb-[34rpx]">
@@ -83,8 +114,8 @@ const {loading, pagination, initFetchData} = useTableQuery({
 
             <view class="box-border !p-[20rpx]">
                 <swiper class="!h-[240rpx] !w-full overflow-hidden rounded-[8rpx]">
-                    <swiper-item class="!w-full !h-full" v-for="i in [1,2,3,4,5]">
-                        <image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
+                    <swiper-item class="!w-full !h-full" v-for="i in advList">
+                        <image @click="OpenTypeFun(i)" class="!w-full !h-full" mode="aspectFill" :src="i.file"></image>
                     </swiper-item>
                 </swiper>
             </view>
@@ -109,49 +140,25 @@ const {loading, pagination, initFetchData} = useTableQuery({
         </view>
 
         <view class="!grid !grid-cols-3 !px-[20rpx] gap-[20rpx]">
-            <x-dropdown-list>
-                <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
-                    全部任务
-                </view>
-                <template #menu>
-                    <x-dropdown-item>全部任务</x-dropdown-item>
-                    <x-dropdown-item>宣发任务</x-dropdown-item>
-                    <x-dropdown-item>评论任务</x-dropdown-item>
-                    <x-dropdown-item>点赞任务</x-dropdown-item>
-                    <x-dropdown-item>助力任务</x-dropdown-item>
-                    <x-dropdown-item>其他任务</x-dropdown-item>
-                </template>
+            <x-dropdown-list
+                @change="initFetchData"
+                v-model:model-value="po.type"
+                :option="taskType">
             </x-dropdown-list>
-            <x-dropdown-list>
-                <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
-                    全部平台
-                </view>
-                <template #menu>
-                    <x-dropdown-item>全部平台</x-dropdown-item>
-                    <x-dropdown-item>抖音</x-dropdown-item>
-                    <x-dropdown-item>快手</x-dropdown-item>
-                    <x-dropdown-item>小红书</x-dropdown-item>
-                    <x-dropdown-item>今日头条</x-dropdown-item>
-                    <x-dropdown-item>其他</x-dropdown-item>
-                </template>
+            <x-dropdown-list
+                @change="initFetchData"
+                v-model:model-value="po.pid"
+                :option="platformType">
             </x-dropdown-list>
-            <x-dropdown-list>
-                <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
-                    默认排序
-                </view>
-                <template #menu>
-                    <x-dropdown-item>默认排序</x-dropdown-item>
-                    <x-dropdown-item>价格最高</x-dropdown-item>
-                    <x-dropdown-item>极速打款</x-dropdown-item>
-                    <x-dropdown-item>素材安全</x-dropdown-item>
-                    <x-dropdown-item>简单上手</x-dropdown-item>
-                    <x-dropdown-item>最新发布</x-dropdown-item>
-                </template>
+            <x-dropdown-list
+                @change="initFetchData"
+                v-model:model-value="po.order"
+                :option="sortType">
             </x-dropdown-list>
         </view>
 
         <view class="!flex flex-col gap-[20rpx] !mt-[20rpx] !px-[20rpx]">
-            <task-item v-for="i in vo.rows"></task-item>
+            <task-item v-for="i in vo.rows" :key="i.id" :data="i"></task-item>
 
             <tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
         </view>