提交 1eec4f05 authored 作者: lihuihui's avatar lihuihui
......@@ -8,13 +8,13 @@
:line-height="2"
:swipeable="true"
>
<van-tab title="课程学习">
<van-tab title="按章节学习">
<template v-if="detail.chapters && detail.chapters.length">
<course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
</template>
<van-empty description="暂无内容" v-else />
</van-tab>
<van-tab title="知识点速学">
<van-tab title="按考点学习">
<div class="tab-content">
<course-tag :courseId="courseId"></course-tag>
</div>
......@@ -30,8 +30,10 @@ import * as api from '@/api/course.js'
export default {
name: 'CourseLearnItem',
components: { CourseChapter, CourseTag },
metaInfo: {
title: '课程内容'
metaInfo() {
return {
title: this.detail.course_name || ''
}
},
data() {
return {
......
<template>
<div class="course-tag-message" :class="classes">
<div class="course-tag-message">
<div class="course-tag-message-hd">
<div class="course-tag-message__title">{{data.name}}</div>
<div class="course-tag-message__more" @click="viewMore" v-if="hasMore">
更多
<van-icon name="arrow" />
</div>
<div class="course-tag-message-bd" v-if="data.tag && data.tag.length">
</div>
<div class="course-tag-message-bd" v-if="dataList && dataList.length">
<ul class="message-tag-list" ref="content">
<template v-for="item in data.tag">
<template v-for="item in dataList">
<li class="course-tag-item" :key="item.id" @click="onClick(item)">
<p>{{item.title}}</p>
</li>
</template>
</ul>
</div>
<div class="more" @click="viewMore" v-if="hasMore">
<template v-if="!showMore">
<span>更多</span>
<van-icon name="arrow-down"></van-icon>
</template>
<template v-else>
<span>收起</span>
<van-icon name="arrow-up"></van-icon>
</template>
</div>
</div>
</template>
......@@ -35,22 +29,19 @@ export default {
},
data() {
return {
showMore: false,
maxHeight: 102,
contentHeight: 0
maxCount: 8
}
},
computed: {
hasMore() {
return this.contentHeight > this.maxHeight
},
classes() {
return {
'has-more': this.hasMore && !this.showMore
}
return this.data.tag ? this.data.tag.length > this.maxCount : false
},
isWeapp() {
return this.$store.state.isWeapp
},
// 最多现实8条
dataList() {
return this.data.tag ? this.data.tag.slice(0, this.maxCount) : []
}
},
methods: {
......@@ -68,9 +59,6 @@ export default {
this.$emit('change', data)
}
},
toggleMore() {
this.showMore = !this.showMore
},
viewMore() {
const path = `/course/learn/${this.courseId}/tag/${this.data.id}?is_test=${this.isTest ? '1' : '0'}`
if (this.isWeapp) {
......@@ -82,9 +70,6 @@ export default {
this.$router.push({ path })
}
}
},
mounted() {
this.contentHeight = this.$refs.content ? this.$refs.content.offsetHeight : 0
}
}
</script>
......@@ -96,18 +81,25 @@ export default {
border-radius: 6px;
}
.course-tag-message-hd {
display: flex;
}
.course-tag-message__title {
flex: 1;
font-size: 15px;
font-weight: bold;
color: #222;
}
.has-more .course-tag-message-bd {
margin-top: 10px;
height: 102px;
overflow: hidden;
.course-tag-message__more {
margin-left: 20px;
font-size: 13px;
color: #f47885;
}
.message-tag-list {
margin-top: 20px;
}
.course-tag-item {
display: inline-block;
max-width: 100%;
// height: 24px;
margin: 0 10px 10px 0;
padding: 0 15px;
background: #f47885;
......@@ -117,9 +109,6 @@ export default {
font-size: 13px;
color: #fff;
line-height: 24px;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
}
}
.more {
......
......@@ -29,7 +29,7 @@ export default {
name: 'CourseTagItem',
metaInfo() {
return {
title: '知识点速学'
title: this.detail.title || ''
}
},
data() {
......
......@@ -22,7 +22,7 @@ export default {
name: 'CourseTagList',
metaInfo() {
return {
title: this.isTest ? '知识点小测' : '知识点速学'
title: this.detail.course_name || ''
}
},
data() {
......@@ -39,9 +39,7 @@ export default {
return this.$route.params.chapterId
},
chapter() {
const found = this.detail.chapters.find(
item => item.id === this.chapterId
)
const found = this.detail.chapters.find(item => item.id === this.chapterId)
return found || {}
},
tagList() {
......
......@@ -17,7 +17,7 @@
</div>
<div class="tools">
<ul>
<li @click="toExamPage">知识点考试</li>
<li @click="toExamPage">相关考试</li>
<li @click="toCourseVideo" v-if="data.has_video">相关视频</li>
</ul>
</div>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论