xl-mobile/src/pages/home/index.vue

<script setup>
import XNav from "../../components/XNav.vue";
import nav1 from '../../static/icons/icon-新手教学.png';
import nav2 from '../../static/icons/icon-收益榜单.png';
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 TaskItem from "../../components/TaskItem.vue";
import useTableQuery from "../../hooks/useTableQuery.js";
import Api from "../../api/index.js";
import {reactive, ref, onMounted} from "vue";
import {toPage} from "../../utils/uils.js";
import AddCustomerServiceModal from "../../components/AddCustomerServiceModal.vue";
import OpenTypeFun from "../../components/OpenTypeFun.js";
import XNoticeBar from "../../components/XNoticeBar.vue";

const showAddCustomer = ref(false);
const textContent = ref(null);
const advList = reactive([]);
const nav = [
    {
        title: '新手教学',
        icon: nav1,
        path: '/pages/beginnerTutorial/index',
    },
    {
        title: '收益榜单',
        icon: nav2,
        path: '/pages/comingSoon/index',
    },
    {
        title: '邀请好友',
        icon: nav3,
        path: '/pages/InviteFriends/index',
    },
    {
        title: '添加客服',
        icon: nav4,
        path: null,
        onClick: () => {
            showAddCustomer.value = true;
        }
    },
    {
        title: '重要消息',
        icon: nav5,
        path: '/pages/messageCenter/index',
    },
];

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: '',
    rows: [],
    total: 0,
});

const {loading, pagination, initFetchData} = useTableQuery({
    api: Api.system.getTask,
    parameter: po,
    callback: (data) => {
        Object.assign(vo, data);
    }
});

onMounted(() => {
    Api.system.getAdvList({
        position: 1,
    }).then(({data}) => {
        advList.length = 0;
        advList.push(...data);
    });
    Api.system.getBarrageList().then(({data}) => {
        textContent.value = '';
        data.forEach((v, index) => {
            textContent.value += `${index + 1}.${v}&nbsp;&nbsp;&nbsp;&nbsp;`;
        });
    });
})
</script>

<template>
    <!--首页-->
    <XNav :show-back="false"></XNav>
    <x-notice-bar :text="textContent" v-if="textContent"></x-notice-bar>

    <add-customer-service-modal v-model:show="showAddCustomer"></add-customer-service-modal>

    <scroll-view
        @refresherpulling="initFetchData()"
        @scrolltolower="() => {
            pagination.page++;
        }"
        class="h-[calc(100vh-200rpx)]"
        scroll-y>
        <view class="relative overflow-hidden bg-b-r !pb-[34rpx]">
            <image class="!w-full !absolute top-1/2 -translate-y-1/2" src="/static/icons/home-bg.png"
                   mode="widthFix"></image>
            <view class="!w-full !h-full !absolute !top-0 !left-0 bg-w"></view>

            <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 advList">
                        <image @click="OpenTypeFun(i)" class="!w-full !h-full" mode="aspectFill" :src="i.file"></image>
                    </swiper-item>
                </swiper>
            </view>

            <view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx] relative z-10">
                <view
                    v-for="item in nav"
                    :key="item.title"
                    @click="item.path ? toPage(item.path) : item.onClick()"
                    class="!flex flex-col items-center gap-[6rpx]">
                    <view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
                        <image class="!size-full" :src="item.icon"></image>
                    </view>

                    <view class="nav-desc">{{ item.title }}</view>
                </view>
            </view>
        </view>

        <view class="title">
            任务列表
        </view>

        <view class="!grid !grid-cols-3 !px-[20rpx] gap-[20rpx]">
            <x-dropdown-list
                @change="initFetchData"
                v-model:model-value="po.type"
                :option="taskType">
            </x-dropdown-list>
            <x-dropdown-list
                @change="initFetchData"
                v-model:model-value="po.pid"
                :option="platformType">
            </x-dropdown-list>
            <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" :key="i.id" :data="i"></task-item>

            <tui-loadmore v-if="loading" text="加载中..." :index="2"></tui-loadmore>
        </view>
    </scroll-view>
</template>

<style lang="scss" scoped>
.bg-b-r {
    border-bottom-right-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
}

.bg-w {
    overflow: hidden;
    background: linear-gradient(180.00deg, rgb(0, 0, 0, 0), rgb(255, 255, 255) 90%);
}

.nav-desc {
    font-size: 20rpx;
}

.title {
    color: rgb(29, 33, 41);
    font-size: 16px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 0;
    text-align: left;
    margin: 28rpx 0;
    padding: 0 20rpx;
}
</style>