275 lines
9.4 KiB
Vue
275 lines
9.4 KiB
Vue
<script setup>
|
|
import filer from '../../static/icons/filer.png';
|
|
import XNav from "../../components/XNav.vue";
|
|
import {reactive, ref, computed} from "vue";
|
|
import TaskCard from "../../components/TaskCard.vue";
|
|
import useTableQuery from "../../hooks/useTableQuery.js";
|
|
import Api from "../../api/index.js";
|
|
import XFilter from "../../components/XFilter.vue";
|
|
import XFilterItem from "../../components/XFilterItem.vue";
|
|
import XRadioGroup from "../../components/XRadioGroup.vue";
|
|
import XRadio from "../../components/XRadio.vue";
|
|
import XDateRange from "../../components/XDateRange.vue";
|
|
import XAlert from "../../components/XAlert.vue";
|
|
import {onShow} from "@dcloudio/uni-app";
|
|
|
|
const taskType = reactive([]);
|
|
const platformType = reactive([]);
|
|
const tabs = computed(() => [
|
|
{
|
|
name: '进行中',
|
|
value: 1,
|
|
isTag: 0,
|
|
},
|
|
{
|
|
name: '审核中',
|
|
value: 2,
|
|
isTag: 0,
|
|
},
|
|
{
|
|
name: '已失效',
|
|
value: -1,
|
|
isTag: 0,
|
|
},
|
|
{
|
|
name: '已完成',
|
|
value: 3,
|
|
isTag: 0,
|
|
},
|
|
]);
|
|
const showFilter = ref(false);
|
|
const po = reactive({
|
|
status: 1,
|
|
cid: 0,
|
|
pid: 0,
|
|
is_settlement: 0,
|
|
end_time: null,
|
|
start_time: null,
|
|
});
|
|
const vo = reactive({
|
|
page: '',
|
|
rows: [],
|
|
total: 0,
|
|
});
|
|
|
|
const {loading, pagination, initFetchData} = useTableQuery({
|
|
api: Api.system.myTaskList,
|
|
immediate: false,
|
|
parameter: po,
|
|
callback: (data) => {
|
|
Object.assign(vo, data);
|
|
}
|
|
});
|
|
|
|
Api.system.getTaskType().then(({data}) => {
|
|
taskType.length = 0;
|
|
taskType.push(...data);
|
|
});
|
|
Api.system.getPlatform().then(({data}) => {
|
|
platformType.length = 0;
|
|
platformType.push(...data);
|
|
});
|
|
|
|
const changeCurrent = async (item) => {
|
|
po.status = item.value;
|
|
await initFetchData();
|
|
}
|
|
|
|
onShow(() => {
|
|
initFetchData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<!--我的任务-->
|
|
<XNav :show-back="false"></XNav>
|
|
|
|
<x-filter
|
|
v-model:model="po"
|
|
@success="initFetchData"
|
|
v-model:visible="showFilter">
|
|
<x-filter-item label="任务类型">
|
|
<x-radio-group v-model:model-value="po.cid">
|
|
<view class="!grid grid-cols-4 gap-[24rpx]">
|
|
<x-radio v-for="v in taskType" :key="v.id" :value="v.id">{{ v.name }}</x-radio>
|
|
</view>
|
|
</x-radio-group>
|
|
</x-filter-item>
|
|
<x-filter-item label="发布平台">
|
|
<x-radio-group v-model:model-value="po.pid">
|
|
<view class="!grid grid-cols-4 gap-[24rpx]">
|
|
<x-radio v-for="v in platformType" :key="v.id" :value="v.id">{{ v.name }}</x-radio>
|
|
</view>
|
|
</x-radio-group>
|
|
</x-filter-item>
|
|
<x-filter-item label="结算状态">
|
|
<x-radio-group v-model:model-value="po.is_settlement">
|
|
<view class="!grid grid-cols-4 gap-[24rpx]">
|
|
<x-radio :value="0">全部状态</x-radio>
|
|
<x-radio :value="1">未结算</x-radio>
|
|
<x-radio :value="2">已结算</x-radio>
|
|
</view>
|
|
</x-radio-group>
|
|
</x-filter-item>
|
|
<x-filter-item label="选择时间段">
|
|
<x-date-range
|
|
v-model:end-time="po.end_time"
|
|
v-model:start-time="po.start_time">
|
|
</x-date-range>
|
|
</x-filter-item>
|
|
</x-filter>
|
|
|
|
<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
|
|
@click="showFilter=true"
|
|
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">{{ vo.all }}</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">{{ vo.count.toFixed(2) }}</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">{{ vo.complete }}</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 !flex gap-[6rpx] items-center">
|
|
到账收益(元)
|
|
<x-alert btnText="知道了" btnColor="#165DFF">
|
|
<tui-icon name="explain" :size="16"></tui-icon>
|
|
<template #context>
|
|
<view style="font-size: 32rpx;font-weight: 500" class="!mb-[30rpx]">
|
|
到账收益
|
|
</view>
|
|
<view style="font-size: 28rpx;font-weight: 400" class="text-[rgb(78,89,105)]">
|
|
根据您的任务完成情况
|
|
</view>
|
|
<view style="font-size: 28rpx;font-weight: 400"
|
|
class="text-[rgb(78,89,105)] !mt-[10rpx]">
|
|
实际获得的收益
|
|
</view>
|
|
</template>
|
|
</x-alert>
|
|
</view>
|
|
<view class="block-value">{{ vo.real_coin.toFixed(2) }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="!grid grid-cols-4 gap-[20rpx] !px-[20rpx] bg-[#F2F3F5] py-[20rpx]">
|
|
<view
|
|
v-for="(item, index) in tabs"
|
|
@click="changeCurrent(item)"
|
|
:class="['rounded-full bg-[#fff] text-center !py-[8rpx] !text-[13px] duration-500', po.status===item.value ? 'current' : '', vo[`count${index+1}`] > 0 ? 'badge' : '']">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="!flex flex-col gap-[20rpx] !px-[20rpx]">
|
|
<TaskCard v-for="i in vo.rows" :key="i.id" :data="i"></TaskCard>
|
|
|
|
<tui-loadmore v-if="loading" text="加载中..."></tui-loadmore>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.current {
|
|
background-color: #165DFF;
|
|
color: #fff;
|
|
}
|
|
|
|
.badge {
|
|
@apply relative;
|
|
}
|
|
|
|
.badge::before {
|
|
content: '';
|
|
display: block;
|
|
width: 15rpx;
|
|
height: 15rpx;
|
|
background-color: red;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.block-value {
|
|
color: rgb(22, 93, 255);
|
|
font-size: 40rpx;
|
|
font-weight: 500;
|
|
line-height: 23px;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.block-title {
|
|
color: rgb(29, 33, 41);
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
line-height: 140%;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.bor-b-r {
|
|
border-bottom-left-radius: 12rpx;
|
|
border-bottom-right-radius: 12rpx;
|
|
}
|
|
|
|
.stic-title {
|
|
color: rgb(29, 33, 41);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
line-height: 140%;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.stic-date {
|
|
color: rgb(134, 144, 156);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
line-height: 140%;
|
|
letter-spacing: 0;
|
|
text-align: left;
|
|
}
|
|
</style>
|