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.
336 lines
10 KiB
336 lines
10 KiB
<template>
|
|
<BaseContainer>
|
|
<view class="course-box">
|
|
<NavBar :title="specialCate" />
|
|
<template v-if="specialData.length > 0">
|
|
<view v-for="(item, index) in specialData" :key="index" class="special-content">
|
|
<view class="special-content-title">
|
|
{{ item.title }}
|
|
</view>
|
|
<line-style-course v-if="item.type === 1" :specialList="item.list" @detail="handleSpecialClick"></line-style-course>
|
|
<square-style-course v-if="item.type === 2" :specialList="item.list" @detail="handleSpecialClick"></square-style-course>
|
|
<offline-style-course v-if="item.type === 3" :specialList="item.list" @detail="handleSpecialClick"></offline-style-course>
|
|
<view v-if="item.total > item.list.length" class="showMore flex" @click="loadMore(item.title)">加载更多<text>></text> </view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</BaseContainer>
|
|
</template>
|
|
|
|
<script>
|
|
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: '四六级考试',
|
|
specialData: [
|
|
{
|
|
title: '我的课程',
|
|
type: 1,
|
|
total: 6,
|
|
list: [
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "49.00",
|
|
"label": [
|
|
"满分数学"
|
|
],
|
|
"id": 92,
|
|
"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
|
|
"abstract": "重视这件事，满分数学赢中考",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 4,
|
|
"money": "0.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 0,
|
|
"count": 19,
|
|
"progress": '第三节课程第三节课程第三节课程第三节课程'
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "0.01",
|
|
"label": [
|
|
"阅读方法"
|
|
],
|
|
"id": 132,
|
|
"title": "高中语文词汇成语古诗阅读",
|
|
"abstract": "高中语文词汇词根",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 1,
|
|
"money": "0.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 0,
|
|
"count": 6,
|
|
"progress": '第三节课程第三节课程第三节课程第三节课程'
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "2.00",
|
|
"label": [
|
|
"女神七宝茶"
|
|
],
|
|
"id": 129,
|
|
"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
|
|
"abstract": "托福雅思助你完成出国梦",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 3,
|
|
"money": "28880.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 1,
|
|
"count": 3,
|
|
"progress": '第三节课程第三节课程第三节课程第三节课程'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '热门课程',
|
|
type: 2,
|
|
total: 10,
|
|
list: [
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "49.00",
|
|
"label": [
|
|
"满分数学"
|
|
],
|
|
"id": 92,
|
|
"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
|
|
"abstract": "重视这件事，满分数学赢中考",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 4,
|
|
"money": "0.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 0,
|
|
"count": 19
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "0.01",
|
|
"label": [
|
|
"阅读方法"
|
|
],
|
|
"id": 132,
|
|
"title": "高中语文词汇成语古诗阅读",
|
|
"abstract": "高中语文词汇词根",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 1,
|
|
"money": "0.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 0,
|
|
"count": 6
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "2.00",
|
|
"label": [
|
|
"女神七宝茶"
|
|
],
|
|
"id": 129,
|
|
"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
|
|
"abstract": "托福雅思助你完成出国梦",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 3,
|
|
"money": "28880.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 1,
|
|
"count": 3
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: '线下课堂',
|
|
type: 3,
|
|
total: 3,
|
|
list: [
|
|
{
|
|
"is_pink": 0,
|
|
"label": [
|
|
"满分数学"
|
|
],
|
|
"id": 92,
|
|
"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"enrollTime": '6月21日-6月22日',
|
|
"advertTime": '6月21日-6月22日',
|
|
"advertAddress": '江苏省南京市新世纪广场',
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "0.01",
|
|
"label": [
|
|
"阅读方法"
|
|
],
|
|
"id": 132,
|
|
"title": "高中语文词汇成语古诗阅读",
|
|
"abstract": "高中语文词汇词根",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 1,
|
|
"money": "0.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 0,
|
|
"count": 6,
|
|
"enrollTime": '6月21日-6月22日',
|
|
"advertTime": '6月21日-6月22日',
|
|
"advertAddress": '江苏省南京市新世纪广场',
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "2.00",
|
|
"label": [
|
|
"女神七宝茶"
|
|
],
|
|
"id": 129,
|
|
"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
|
|
"abstract": "托福雅思助你完成出国梦",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 3,
|
|
"money": "28880.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 1,
|
|
"count": 3,
|
|
"enrollTime": '6月21日-6月22日',
|
|
"advertTime": '6月21日-6月22日',
|
|
"advertAddress": '江苏省南京市新世纪广场',
|
|
}
|
|
]
|
|
},
|
|
],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.specialCate = options.name;
|
|
},
|
|
methods: {
|
|
loadMore(title) {
|
|
this.specialData.forEach(v => {
|
|
if (v.title === title) {
|
|
const arr = [
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "49.00",
|
|
"label": [
|
|
"满分数学"
|
|
],
|
|
"id": 93,
|
|
"title": "用编程语言探索科学奥秘，数据科学与机器学习详细攻略",
|
|
"abstract": "重视这件事，满分数学赢中考",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/4a002202102051439139927.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 4,
|
|
"money": "0.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 0,
|
|
"count": 19,
|
|
"progress": '第三节课程第三节课程第三节课程第三节课程'
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "0.01",
|
|
"label": [
|
|
"阅读方法"
|
|
],
|
|
"id": 133,
|
|
"title": "高中语文词汇成语古诗阅读",
|
|
"abstract": "高中语文词汇词根",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/ed3ba202103301511237923.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 1,
|
|
"money": "0.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 0,
|
|
"count": 6,
|
|
"progress": '第三节课程第三节课程第三节课程第三节课程'
|
|
},
|
|
{
|
|
"is_pink": 0,
|
|
"pink_money": "2.00",
|
|
"label": [
|
|
"女神七宝茶"
|
|
],
|
|
"id": 120,
|
|
"title": "轻松掌握多国语言，托福雅思助你完成出国留学梦",
|
|
"abstract": "托福雅思助你完成出国梦",
|
|
"image": "http://cremb-zsff.oss-cn-beijing.aliyuncs.com/b3f4c202102051439113750.jpg?x-oss-process=image/resize,m_lfit,h_254,w_690",
|
|
"type": 3,
|
|
"money": "28880.00",
|
|
"is_light": 0,
|
|
"light_type": 0,
|
|
"pay_type": 1,
|
|
"count": 3,
|
|
"progress": '第三节课程第三节课程第三节课程第三节课程'
|
|
}
|
|
];
|
|
v.list = [...v.list, ...arr];
|
|
}
|
|
})
|
|
},
|
|
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);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.course-box {
|
|
padding-bottom: 40rpx;
|
|
background: #f4f4f4;
|
|
}
|
|
.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(90deg);
|
|
margin-left: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
</style> |