75 lines
1.9 KiB
Vue
75 lines
1.9 KiB
Vue
<template>
|
||
<view>
|
||
<CuNavbar title="我的任务"></CuNavbar>
|
||
<uv-sticky bgColor="#fff">
|
||
<uv-tabs
|
||
:activeStyle="{ color: '#ee2c37' }"
|
||
:scrollable="false"
|
||
lineColor="#ee2c37"
|
||
:list="tabList"
|
||
></uv-tabs>
|
||
</uv-sticky>
|
||
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
|
||
<view class="px-base space-y-20rpx mt-30rpx">
|
||
<view
|
||
v-for="item in 4"
|
||
class="card-shadow bg-white rounded-19rpx p-base space-y-10rpx"
|
||
>
|
||
<view class="text-30rpx">月度清洁任务</view>
|
||
<view class="text-24rpx text-hex-999999">
|
||
任务时间：2022年03月01号 - 2022年03月31号
|
||
</view>
|
||
<view class="text-24rpx text-hex-999999">待完成</view>
|
||
</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
<script setup>
|
||
import { http } from '@/utils/request'
|
||
import CuNavbar from '@/components/cu-navbar/index'
|
||
import { computed, reactive, ref } from 'vue'
|
||
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
||
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js'
|
||
const { mescrollInit, downCallback, getMescroll } = useMescroll(
|
||
onPageScroll,
|
||
onReachBottom
|
||
)
|
||
const list = ref([])
|
||
const tabList = ref([
|
||
{
|
||
name: '任务列表',
|
||
apiUrl: '/tasks',
|
||
},
|
||
{
|
||
name: '任务审核',
|
||
apiUrl: '/workflow',
|
||
params:{
|
||
|
||
}
|
||
},
|
||
])
|
||
|
||
const upCallback = async (mescroll) => {
|
||
const { size, num } = mescroll
|
||
|
||
try {
|
||
const resData = await http.get('/tasks', {
|
||
params: {
|
||
per_page: size,
|
||
page: num,
|
||
},
|
||
})
|
||
const curPageData = resData.data || []
|
||
if (num === 1) list.value = []
|
||
list.value = list.value.concat(curPageData)
|
||
mescroll.endSuccess(curPageData.length)
|
||
} catch (error) {
|
||
console.log(error)
|
||
mescroll.endErr() // 请求失败, 结束加载
|
||
} finally {
|
||
// firstloading.value = false
|
||
}
|
||
}
|
||
</script>
|