108 lines
2.4 KiB
Vue
108 lines
2.4 KiB
Vue
<template>
|
|
<scroll-view
|
|
ref="scrollRef"
|
|
scroll-y="true"
|
|
class="scroll-Y"
|
|
:refresher-enabled="false"
|
|
:show-scrollbar="false"
|
|
@scrolltolower="scrolltolower"
|
|
>
|
|
<!-- 主体 -->
|
|
<view class="content">
|
|
<itemVue :item="item" v-for="item 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>
|
|
</view>
|
|
</scroll-view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive} from 'vue';
|
|
import { queryTraExamPapersPage } from '@/api/testingHall.js';
|
|
import itemVue from './content-item.vue';
|
|
const status = ref('loadmore'); // loadmore - 加载前，loading - 加载中，nomore - 没有数据
|
|
const limit = 20;
|
|
const total = ref(-1);
|
|
const page = ref(0);
|
|
const data_list = reactive([]);
|
|
const scrollRef = ref(null);
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
});
|
|
|
|
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(() => {
|
|
let params = {
|
|
papersName: searchText,
|
|
page: page.value,
|
|
limit: limit
|
|
};
|
|
if (props.index === 1) {
|
|
params.examStat = 'Y';
|
|
} else if (props.index === 2) {
|
|
params.examStat = 'N';
|
|
}
|
|
queryTraExamPapersPage(params)
|
|
.then((res) => {
|
|
total.value = res.total;
|
|
data_list.push(...res.body);
|
|
})
|
|
.catch((res) => {})
|
|
.finally(() => {
|
|
if (data_list.length >= total.value) {
|
|
status.value = 'nomore';
|
|
} else {
|
|
status.value = 'loadmore';
|
|
}
|
|
console.log(status.value);
|
|
});
|
|
}, 200);
|
|
};
|
|
const scrolltolower = () => {
|
|
getData();
|
|
};
|
|
const search = (value) => {
|
|
console.log('searchvalue', value);
|
|
total.value = -1;
|
|
getData('first', value);
|
|
};
|
|
defineExpose({
|
|
getData,
|
|
search
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.scroll-Y {
|
|
height: calc(100vh - var(--status-bar-height) - 70rpx - 78rpx - 40rpx - 88rpx);
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: #f1f5fa;
|
|
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
position: relative;
|
|
padding-top: 22rpx;
|
|
padding: 0 22rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
</style>
|