Skip to content

T
transport-show-h5
提交 6186856e authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

增加知识点模块

上级 f4ce7d99
隐藏空白字符变更
内嵌 并排
正在显示 包含 329 行增加 和 29 行删除
package-lock.json
浏览文件 @ 6186856e
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
浏览文件 @ 6186856e
......@@ -70,14 +70,14 @@
"promise.prototype.finally": "^3.1.2",
"regenerator": "^0.14.4",
"swiper": "^5.4.5",
"vant": "^2.8.7",
"vant": "^2.9.0",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"vue-i18n": "^8.16.0",
"vue-loader": "^15.9.1",
"vue-meta-info": "^0.1.7",
"vue-router": "^3.1.6",
"vue-router": "^3.3.4",
"vue-template-compiler": "^2.6.11",
"vuex": "^3.4.0"
"vuex": "^3.5.1"
}
}
src/pages/course/learn/item.vue
浏览文件 @ 6186856e
......@@ -13,7 +13,10 @@
<course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
</van-tab>
<van-tab title="知识点速学" name="1">
<course-tag :courseId="courseId" style="margin-left:-0.4rem;margin-right:-0.4rem;"></course-tag>
<course-tag
:courseId="courseId"
style="margin-left:-0.4rem;margin-right:-0.4rem;min-height:100vh;background:#eee;"
></course-tag>
</van-tab>
</van-tabs>
</div>
......
src/pages/course/tag/courseTagMessage.vue
浏览文件 @ 6186856e
......@@ -4,15 +4,15 @@
<div class="course-tag-message__title">{{data.name}}</div>
</div>
<div class="course-tag-message-bd">
<template v-if="data.children && data.children.length">
<template v-if="data.tag && data.tag.length">
<ul class="message-tag-list" ref="content">
<template v-for="item in data.children">
<li class="course-tag-item" :key="item.id" @click="$emit('search', item)">{{item.name}}</li>
<template v-for="item in data.tag">
<li class="course-tag-item" :key="item.id" @click="onClick(item)">{{item.title}}</li>
</template>
</ul>
</template>
</div>
<div class="more" @click="toggleMore" v-if="hasMore">
<div class="more" @click="viewMore" v-if="hasMore">
<template v-if="!showMore">
<span>更多</span>
<van-icon name="arrow-down"></van-icon>
......@@ -29,6 +29,8 @@
export default {
name: 'CourseTagMessage',
props: {
courseId: { type: String },
isTest: { type: Boolean, default: false },
data: { type: Object }
},
data() {
......@@ -49,12 +51,32 @@ export default {
}
},
methods: {
onClick(data) {
if (this.isTest) {
const query = {
type: 2,
tag_id: data.id,
papersUrl: 'zy/v2/examination/course-papers'
}
this.$router.push({ path: '/exam/answer', query })
return
}
this.$emit('change', data)
},
toggleMore() {
this.showMore = !this.showMore
},
viewMore() {
this.$router.push({
name: 'courseTag',
params: { courseId: this.courseId, chapterId: this.data.id }
})
}
},
mounted() {
this.contentHeight = this.$refs.content.offsetHeight
this.contentHeight = this.$refs.content
? this.$refs.content.offsetHeight
: 0
}
}
</script>
......
src/pages/course/tag/index.vue
浏览文件 @ 6186856e
......@@ -2,7 +2,14 @@
<div class="course-tag">
<div class="messages" ref="messages">
<template v-for="item in messageList">
<message-card :data="item" :key="item.id" @search="onSearchTag" @change="onChangeTag"></message-card>
<message-card
:courseId="courseId"
:isTest="isTest"
:data="item"
:key="item.id"
@search="onSearchTag"
@change="onChangeTag"
></message-card>
</template>
</div>
<div class="send">
......@@ -30,23 +37,32 @@
import MessageCard from './messageCard.vue'
import * as api from '@/api/course.js'
export default {
props: { courseId: { type: String, required: true } },
props: {
courseId: { type: String, required: true },
isTest: { type: Boolean, default: false }
},
components: { MessageCard },
data() {
return {
detail: { chapters: [] },
messageList: [], // {id:'', type: 1, payload: {}}
searchValue: ''
}
},
watch: {
messageList(list) {
this.scrollBottom()
if (list.length > this.detail.chapters.length) {
this.scrollBottom()
}
this.$emit('message', list)
}
},
methods: {
// 获取知识点列表
getCourseTagList() {
api.getCourseTagList(this.courseId).then(response => {
this.$emit('ready', response)
this.detail = response
this.messageList = response.chapters.map((item, index) => {
return {
id: this.genId(index),
......@@ -141,10 +157,10 @@ export default {
left: 0;
right: 0;
bottom: 0;
height: 50px;
background: rgba(247, 247, 247, 1);
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
z-index: 999;
padding-bottom: env(safe-area-inset-bottom);
}
::v-deep .van-search__content {
background-color: #fff;
......
src/pages/course/tag/item.vue
浏览文件 @ 6186856e
<template></template>
<template>
<div class="course-tag-wrapper">
<div class="course-tag-hd">
<h1 class="tag-title">{{detail.title}}</h1>
</div>
<div class="course-tag-bd">
<div class="course-tag-main">
<div class="tag-content" v-html="html"></div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/course.js'
export default {
name: 'CourseTagItem'
name: 'CourseTagItem',
data() {
return {
detail: {}
}
},
computed: {
tagId() {
return this.$route.params.id
},
html() {
return this.detail.contents
? this.detail.contents.replace(/\n/g, '<br/>')
: ''
}
},
methods: {
// 获取知识点详情
getCourseTag() {
api.getCourseTag(this.tagId).then(response => {
this.detail = response
})
}
},
beforeMount() {
this.getCourseTag()
}
}
</script>
<style lang="scss" scoped>
.course-tag-wrapper {
min-height: 100vh;
background-color: #eee;
box-sizing: border-box;
}
.course-tag-hd {
padding: 0.4rem;
background-color: #fff;
}
.course-tag-bd {
padding: 0.4rem;
}
.course-tag-main {
padding: 0.2rem;
background-color: #fff;
border-radius: 0.12rem;
}
.tag-title {
font-size: 0.3rem;
font-weight: bold;
color: #222;
line-height: 0.48rem;
}
.tag-content {
padding: 20px 0;
font-size: 13px;
line-height: 24px;
}
</style>
src/pages/course/tag/list.vue 0 → 100644
浏览文件 @ 6186856e
<template>
<div class="course-tag-wrapper">
<div class="course-tag-hd">
<h1 class="course-title">{{detail.course_name}}</h1>
</div>
<div class="course-tag-bd">
<div class="course-tag-main">
<h1 class="tag-title">{{chapter.name}}</h1>
<ul class="tag-list">
<li class="tag-item" v-for="item in tagList" :key="item.id" @click="onClick(item)">
<span>{{item.title}}</span>
<van-icon name="arrow" />
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/course.js'
export default {
name: 'CourseTagList',
data() {
return {
detail: { chapters: [] }
}
},
computed: {
courseId() {
return this.$route.params.courseId
},
chapterId() {
return this.$route.params.chapterId
},
chapter() {
const found = this.detail.chapters.find(
item => item.id === this.chapterId
)
return found || {}
},
tagList() {
return this.chapter.tag || []
}
},
methods: {
// 获取知识点列表
getCourseTagList() {
api.getCourseTagList(this.courseId).then(response => {
this.detail = response
})
},
onClick({ id }) {
this.$router.push({ name: 'courseTagItem', params: { id } })
}
},
beforeMount() {
this.getCourseTagList()
}
}
</script>
<style lang="scss" scoped>
.course-tag-wrapper {
min-height: 100vh;
background-color: #eee;
box-sizing: border-box;
}
.course-tag-hd {
padding: 0.4rem;
background-color: #fff;
}
.course-tag-bd {
padding: 0.4rem;
}
.course-tag-main {
padding: 0.2rem;
background-color: #fff;
border-radius: 0.12rem;
}
.course-title {
font-size: 0.3rem;
color: #222;
}
.tag-title {
font-size: 0.3rem;
font-weight: bold;
color: #222;
line-height: 0.48rem;
}
.tag-item {
position: relative;
padding: 0.4rem 0.4rem 0.4rem 0;
font-size: 0.3rem;
color: #222;
line-height: 1.4;
border-bottom: 1px solid #eee;
&:last-child {
border-bottom: 0;
}
::v-deep .van-icon {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
}
</style>
src/pages/course/tag/messageCard.vue
浏览文件 @ 6186856e
......@@ -3,9 +3,26 @@
<div class="message-card-content">
<slot :data="data.payload">
<div class="message-card-text" v-if="data.type === 0">{{data.payload.text}}</div>
<course-tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 1"></course-tag-message>
<search-tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 2"></search-tag-message>
<tag-message :data="data.payload" v-on="$listeners" v-if="data.type === 3"></tag-message>
<course-tag-message
:courseId="courseId"
:isTest="isTest"
:data="data.payload"
v-on="$listeners"
v-if="data.type === 1"
></course-tag-message>
<search-tag-message
:courseId="courseId"
:isTest="isTest"
:data="data.payload"
v-on="$listeners"
v-if="data.type === 2"
></search-tag-message>
<tag-message
:courseId="courseId"
:data="data.payload"
v-on="$listeners"
v-if="data.type === 3"
></tag-message>
</slot>
</div>
</div>
......@@ -18,6 +35,8 @@ import TagMessage from './tagMessage.vue'
export default {
name: 'MessageCard',
props: {
courseId: { type: String },
isTest: { type: Boolean, default: false },
data: { type: Object }
},
components: { CourseTagMessage, SearchTagMessage, TagMessage },
......@@ -38,7 +57,7 @@ export default {
<style lang="scss" scoped>
.message-card {
clear: both;
margin: 20px;
margin-bottom: 20px;
}
.message-card-text {
display: inline-block;
......
src/pages/course/tag/searchTagMessage.vue
浏览文件 @ 6186856e
......@@ -3,7 +3,7 @@
<p class="tips">交小通猜你想查：</p>
<ul class="search-tag-list">
<template v-for="(item,index) in dataList">
<li class="search-tag-item" :key="item.id" @click="$emit('change', item)">
<li class="search-tag-item" :key="item.id" @click="onClick(item)">
<span class="num">{{index+1}}:</span>
<span class="text">{{item.title}}</span>
</li>
......@@ -26,6 +26,8 @@
export default {
name: 'SearchTagMessage',
props: {
courseId: { type: String },
isTest: { type: Boolean, default: false },
data: {
type: Array,
default() {
......@@ -38,7 +40,7 @@ export default {
},
computed: {
hasMore() {
return this.data.length > 5
return this.data.length > this.maxCount
},
dataList() {
if (this.hasMore && !this.showMore) {
......@@ -48,6 +50,18 @@ export default {
}
},
methods: {
onClick(data) {
if (this.isTest) {
const query = {
type: 2,
tag_id: data.id,
papersUrl: 'zy/v2/examination/course-papers'
}
this.$router.push({ path: '/exam/answer', query })
return
}
this.$emit('change', data)
},
toggleMore() {
this.showMore = !this.showMore
}
......
src/pages/course/tag/tagMessage.vue
浏览文件 @ 6186856e
......@@ -3,7 +3,7 @@
<div class="tag-message-bd">
<div class="tag-message-content" ref="content" v-html="html"></div>
</div>
<div class="more" @click="toggleMore" v-if="hasMore">
<div class="more" @click="viewMore" v-if="hasMore">
<template v-if="!showMore">
<span>更多</span>
<van-icon name="arrow-down"></van-icon>
......@@ -39,12 +39,17 @@ export default {
}
},
html() {
return this.data.contents.replace(/\n/g, '<br/>')
return this.data.contents
? this.data.contents.replace(/\n/g, '<br/>')
: ''
}
},
methods: {
toggleMore() {
this.showMore = !this.showMore
},
viewMore() {
this.$router.push({ name: 'courseTagItem', params: { id: this.data.id } })
}
},
mounted() {
......
src/pages/courseExam/courseNode.vue
浏览文件 @ 6186856e
<template>
<div>
{{$route.query.id}}
<div class="course-tag-wrapper">
<div class="course-tag-hd">
<h1 class="course-title">{{detail.course_name}}</h1>
</div>
<div class="course-tag-bd">
<course-tag :courseId="courseId" :isTest="true" @ready="onReady"></course-tag>
</div>
</div>
</template>
<script>
import CourseTag from '@/pages/course/tag/index.vue'
export default {
components: { CourseTag },
data() {
return {
detail: {}
}
},
computed: {
courseId() {
return this.$route.query.id
}
},
methods: {
onReady(response) {
this.detail = response
}
}
}
</script>
<style lang="scss" scoped>
.course-tag-wrapper {
min-height: 100vh;
background-color: #eee;
box-sizing: border-box;
}
.course-tag-hd {
padding: 0.4rem;
background-color: #fff;
}
.course-tag-bd {
padding: 0.4rem;
}
.course-title {
font-size: 0.3rem;
color: #222;
}
</style>
src/pages/search/tagList.vue
浏览文件 @ 6186856e
<template>
<div class="main-list">
<ul v-if="list.length">
<li v-for="item in list" :key="item.id" @click="onClick">{{item.title}}</li>
<li v-for="item in list" :key="item.id" @click="onClick(item)">{{item.title}}</li>
</ul>
<template v-else>
<slot name="empty">
......@@ -47,9 +47,8 @@ export default {
refresh() {
this.getList()
},
onClick() {
window.alert('开发中')
// this.$router.push({ name: 'courseLearnItem', params: { id } })
onClick(data) {
this.$router.push({ name: 'courseTagItem', params: { id: data.id } })
}
},
beforeMount() {
......
src/router/routes.js
浏览文件 @ 6186856e
......@@ -70,6 +70,18 @@ export default [
name: 'courseLearnItem',
component: () => import('../pages/course/learn/item.vue')
},
// 课程知识点
{
path: '/course/learn/:courseId/tag/:chapterId',
name: 'courseTag',
component: () => import('../pages/course/tag/list.vue')
},
// 课程知识点详情
{
path: '/course/tag/:id',
name: 'courseTagItem',
component: () => import('../pages/course/tag/item.vue')
},
// 登录
{
path: '/login',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论