<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 class="showMore flex" @click="loadMore(item.key)">加载更多<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) { if (key === 'offline_courses') { uni.navigateTo({ url: `/pages/activity/activity_list?gradeId=${this.gradeId}&subjectId=${this.subjectId}` }); } else { uni.navigateTo({ url: `/pages/special/search?gradeId=${this.gradeId}&subjectId=${this.subjectId}&specialCate=0` }) } }, 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>