90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<template>
|
|
<view class="scroll_div">
|
|
<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower" :show-scrollbar="false">
|
|
<itemVue :item="item" v-for="(item, index) in data_list"></itemVue>
|
|
<list-no-data v-if="total == 0 && status == 'nomore'"></list-no-data>
|
|
<uv-load-more v-if="total != 0" :status="status" loadmore-text="轻轻上拉加载" :height="30"></uv-load-more>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
|
const limit = 20;
|
|
const total = ref(-1);
|
|
const page = ref(0);
|
|
const data_list = reactive([]);
|
|
import common from '@/common/common';
|
|
import { ref, reactive, onMounted, nextTick } from 'vue';
|
|
import itemVue from './content-item.vue';
|
|
import { queryAllTraTaskInfoByUserId } from '@/api/learningTasks.js';
|
|
const props = defineProps({
|
|
state: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
});
|
|
|
|
const getData = (from = '', searchText = '') => {
|
|
if (from == 'first') {
|
|
if (total.value !== -1) {
|
|
return;
|
|
}
|
|
status.value = 'loading';
|
|
total.value = -1;
|
|
page.value = 1;
|
|
data_list.length = 0;
|
|
} else {
|
|
if (status.value !== 'loadmore' && status.value !== '') return;
|
|
status.value = 'loading';
|
|
page.value++;
|
|
}
|
|
setTimeout(() => {
|
|
queryAllTraTaskInfoByUserId({
|
|
state: props.state,
|
|
page: page.value,
|
|
limit: limit,
|
|
taskName: searchText
|
|
})
|
|
.then((res) => {
|
|
total.value = res.total;
|
|
data_list.push(...res.body);
|
|
})
|
|
.finally(() => {
|
|
if (data_list.length >= total.value) {
|
|
status.value = 'nomore';
|
|
} else {
|
|
status.value = 'loadmore';
|
|
}
|
|
});
|
|
}, 200);
|
|
};
|
|
|
|
const scrolltolower = (item) => {
|
|
getData();
|
|
};
|
|
const search = (value) => {
|
|
total.value = -1;
|
|
console.log('value', value);
|
|
getData('first', value);
|
|
};
|
|
defineExpose({
|
|
getData,
|
|
search
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.scroll_div {
|
|
background-color: #f1f5fa;
|
|
padding: 22rpx;
|
|
}
|
|
|
|
.scroll-Y {
|
|
height: calc(100vh - var(--status-bar-height) - 88rpx - 80rpx - 88rpx - 20rpx - 30rpx);
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
padding: 0 12rpx 0 22rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|