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-03-27 15:38:21 +08:00
parent 3c85d9e0e7
commit 15b26ab2d9
31 changed files with 1003 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/pages/home/index.vue
View File

@@ -5,56 +5,182 @@ 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 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 {toPage} from "../../utils/uils.js";
import AddCustomerServiceModal from "../../components/AddCustomerServiceModal.vue";
const showAddCustomer = ref(false);
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 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="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>
</swiper>
</view>
<add-customer-service-modal v-model:show="showAddCustomer"></add-customer-service-modal>
<view class="mt-[44rpx] !flex !gap-[50rpx] !mx-[36rpx]">
<view v-for="item in nav" :key="item.title" class="!flex flex-col items-center gap-[6rpx]">
<view class="!size-[96rpx] rounded-[20rpx] overflow-hidden">
<image class="!size-full" :src="item.icon"></image>
<scroll-view
@refresherpulling="initFetchData()"
@scrolltolower="pagination.current++"
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 [1,2,3,4,5]">
<image class="!w-full !h-full" mode="widthFix" src="../../static/images/banner占位.png"></image>
</swiper-item>
</swiper>
</view>
<view class="nav-desc">{{item.title}}</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>
<view class="title">
任务列表
</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>
<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>
<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>
</view>
<view class="!flex flex-col gap-[20rpx] !mt-[20rpx] !px-[20rpx]">
<task-item v-for="i in vo.rows"></task-item>
<tui-loadmore v-if="loading" text="加载中..."></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>