You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.3 KiB
104 lines
2.3 KiB
9 months ago
|
<template>
|
||
|
|
<BaseContainer class="offline-course-list flex">
|
||
|
|
<NavBar title="线下课堂" />
|
||
|
|
<view class="list-box">
|
||
|
|
<offline-style-course :specialList="specialList" @detail="handleSpecialClick"></offline-style-course>
|
||
|
|
<view v-if="specialList.length && !loading" class="finished">{{ loadTitle }}</view>
|
||
|
|
<view v-if="finished && !specialList.length" class="empty">
|
||
|
|
<image mode="aspectFill" :src="getImgPath('/wap/first/zsff/images/empty.png')" alt="暂无课程" />
|
||
|
|
<view>暂无课程</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</BaseContainer>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import OfflineStyleCourse from '@/components/Course/offlineStyleCourse.vue';
|
||
|
|
import {
|
||
|
|
getSpecialList,
|
||
|
|
} from "@/api/special";
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
OfflineStyleCourse,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
specialList: [],
|
||
|
|
page: 1,
|
||
|
|
limit: 10,
|
||
|
|
loading: false,
|
||
|
|
finished: false,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
// this.getSpecialList();
|
||
|
|
},
|
||
|
|
onLoad(options) {
|
||
|
|
this.grade_id = options.gradeId || '';
|
||
|
|
this.subject_id = options.subjectId || '';
|
||
|
|
this.special_type = options.specialType || '';
|
||
|
|
// this.getSpecialList();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async getSpecialList() {
|
||
|
|
if (this.loading || this.finished) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
this.loadTitle = "";
|
||
|
|
this.loading = true;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const { data } = await getSpecialList({
|
||
|
|
grade_id: this.grade_id,
|
||
|
|
subject_id: this.subject_id,
|
||
|
|
special_type: this.special_type,
|
||
|
|
page: this.page++,
|
||
|
|
limit: this.limit,
|
||
|
|
});
|
||
|
|
|
||
|
|
this.specialList = this.specialList.concat(data);
|
||
|
|
console.log(this.specialList);
|
||
|
|
this.finished = data.length < this.limit;
|
||
|
|
this.loadTitle = this.finished ? "已全部加载完" : "上拉加载更多";
|
||
|
|
} catch (err) {
|
||
|
|
console.log(err);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.loading = false;
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.offline-course-list {
|
||
|
|
flex-direction: column;
|
||
|
|
.list-box {
|
||
|
|
flex: 1;
|
||
|
|
width: 690rpx;
|
||
|
|
margin: 20rpx auto 0;
|
||
|
|
|
||
|
|
.finished,
|
||
|
|
.loading {
|
||
|
|
font-size: 28rpx;
|
||
|
|
line-height: 100rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #bbb;
|
||
|
|
}
|
||
|
|
.empty {
|
||
|
|
margin-top: 100rpx;
|
||
|
|
font-size: 28rpx;
|
||
|
|
text-align: center;
|
||
|
|
color: #bbb;
|
||
|
|
}
|
||
|
|
|
||
|
|
.empty image {
|
||
|
|
display: block;
|
||
|
|
width: 414rpx;
|
||
|
|
height: 305rpx;
|
||
|
|
margin: 0 auto;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|