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 16:35:46 +08:00
parent 15b26ab2d9
commit 505af229fc
3 changed files with 112 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/pages/myTask/index.vue
View File

@@ -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>