86 lines
2.3 KiB
Vue
86 lines
2.3 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>
|
|
import itemVue from './item.vue';
|
|
|
|
import { setPageCache } from '@/common/common';
|
|
import common from '@/common/common';
|
|
import { ref, reactive, onMounted, nextTick } from 'vue';
|
|
import { queryPracticeRecordPaging, queryPracticeHis, queryCrsExamRecordPaging } from '@/api/courseRecord.js';
|
|
import { studyDurationIcon, studyTimeIcon } from '@/common/imgSvg';
|
|
const status = ref('loading'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
|
const limit = 15;
|
|
const total = ref(-1);
|
|
const page = ref(0);
|
|
const data_list = reactive([]);
|
|
const props = defineProps({});
|
|
|
|
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(() => {
|
|
queryCrsExamRecordPaging({
|
|
page: page.value,
|
|
limit: limit
|
|
})
|
|
.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 getStatusClass = (isFinish) => {
|
|
// 00进行中、01已完成、02已超时
|
|
if (isFinish === '00') return 'in_progress';
|
|
if (isFinish === '01') return 'completed';
|
|
return 'expired';
|
|
};
|
|
|
|
const scrolltolower = (item) => {
|
|
getData();
|
|
};
|
|
const search = (value) => {
|
|
total.value = -1;
|
|
getData('first', value);
|
|
};
|
|
defineExpose({
|
|
getData,
|
|
search
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.scroll_div {
|
|
background-color: #f1f5fa;
|
|
}
|
|
|
|
.scroll-Y {
|
|
height: calc(100vh - var(--status-bar-height) - 88rpx - 88rpx - 30rpx);
|
|
}
|
|
</style>
|