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.
135 lines
3.5 KiB
135 lines
3.5 KiB
<template>
|
|
<BaseContainer class="course-container">
|
|
<view class="course-box">
|
|
<NavBar :title="specialCate" />
|
|
<template v-for="(item, index) in specialMenu">
|
|
<view v-if="specialData[item.key] && specialData[item.key].length > 0" :key="index" class="special-content">
|
|
<view class="special-content-title">
|
|
{{ item.menuName }}
|
|
</view>
|
|
<square-style-course v-if="item.menuName === '视频课程' || item.menuName === '热门课程'" :specialList="specialData[item.key]" @detail="handleSpecialClick"></square-style-course>
|
|
<offline-style-course v-if="item.menuName === '线下课堂'" :specialList="specialData[item.key]" @detail="handleSpecialClick"></offline-style-course>
|
|
<view v-if="item.menuName !== '线下课堂'" class="showMore flex" @click="loadMore(3)">加载更多<text class="more"></text> </view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
import { getSpecialCateData } from "@/api/special";
|
|
import LineStyleCourse from '@/components/Course/lineStyleCourse.vue';
|
|
import SquareStyleCourse from '@/components/Course/squareStyleCourse.vue';
|
|
import OfflineStyleCourse from '@/components/Course/offlineStyleCourse.vue';
|
|
|
|
export default {
|
|
components: {
|
|
LineStyleCourse,
|
|
SquareStyleCourse,
|
|
OfflineStyleCourse,
|
|
},
|
|
data() {
|
|
return {
|
|
specialCate: '',
|
|
gradeId: '',
|
|
subjectId: '',
|
|
specialMenu: [
|
|
{ menuName: '视频课程', key: 'video_list' },
|
|
{ menuName: '热门课程', key: 'hot_course' },
|
|
{ menuName: '线下课堂', key: 'offline_courses' },
|
|
],
|
|
specialData: [],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.specialCate = options.name;
|
|
this.gradeId = options.gradeId;
|
|
this.subjectId = options.subjectId;
|
|
this.getSpecialCateData();
|
|
},
|
|
methods: {
|
|
loadMore(key) {
|
|
uni.navigateTo({
|
|
url: `/pages/special/search?gradeId=${this.gradeId}&subjectId=${this.subjectId}&specialCate=${key}`
|
|
})
|
|
},
|
|
handleSpecialClick(item) {
|
|
const url = item.is_light
|
|
? '/pages/special/single_details?id=' + item.id
|
|
: '/pages/special/details?id=' + item.id;
|
|
|
|
// this.$util.checkLogin(() => {
|
|
uni.navigateTo({
|
|
url,
|
|
});
|
|
// }, this.showLoginPage);
|
|
},
|
|
async getSpecialCateData() {
|
|
try {
|
|
const { data, code, msg } = await getSpecialCateData({
|
|
grade_id: this.gradeId,
|
|
subject_id: this.subjectId,
|
|
});
|
|
|
|
this.loading = false;
|
|
if (code != 200) {
|
|
uni.showToast({
|
|
title: msg,
|
|
});
|
|
} else {
|
|
console.log(data, 646);
|
|
this.specialData = { ...data };
|
|
this.specialMenu.forEach(v => {
|
|
console.log(this.specialData, this.specialData[v.key]);
|
|
})
|
|
}
|
|
} catch (err) {
|
|
this.loading = false;
|
|
console.log(err);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.course-container {
|
|
background: #f4f4f4;
|
|
}
|
|
.course-box {
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.special-content {
|
|
padding: 40rpx 30rpx 0;
|
|
.special-content-title {
|
|
padding-left: 23rpx;
|
|
position: relative;
|
|
color: #333;
|
|
font-size: 34rpx;
|
|
line-height: 34rpx;
|
|
margin-bottom: 33rpx;
|
|
&:before {
|
|
content: '';
|
|
background: linear-gradient(0deg, #24a9e1, #0f74bb);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
width: 8rpx;
|
|
height: 26rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
.showMore {
|
|
justify-content: center;
|
|
color: #666;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
margin-top: 30rpx;
|
|
text {
|
|
transform: rotate(135deg);
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |