Skip to content

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

课程优化

上级 007226bd
隐藏空白字符变更
内嵌 并排
正在显示 包含 227 行增加 和 194 行删除
src/api/course.js
浏览文件 @ 34571fa3
......@@ -8,6 +8,12 @@ const httpRequest = new BaseAPI(webConf)
export function getFreeCourseList() {
return httpRequest.get('/zy/v2/education/freecourse')
}
/**
* 获取课程列表
*/
export function getCourseModule() {
return httpRequest.get('/zy/v2/education/mokuai')
}
/**
* 获取课程列表
......
src/components/CourseChapter.vue
浏览文件 @ 34571fa3
......@@ -6,7 +6,7 @@
<van-icon name="arrow-down" />
</template>
<ul>
<li v-for="subItem in item.children" :key="subItem.id" @click="onClick(subItem)">
<li v-for="subItem in item.children" :key="subItem.id" @click="$emit('on-click', subItem)">
<div class="name">
{{subItem.name}}
<template v-if="subItem.free">（免费）</template>
......@@ -21,8 +21,8 @@
<script>
export default {
props: {
courseId: String,
data: { type: Array, default: () => [] },
courseId: { type: String },
data: { type: Array, required: true, default: () => [] },
showProgress: { type: Boolean, default: false }
},
data() {
......@@ -31,9 +31,6 @@ export default {
}
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
},
isVip() {
return this.$store.state.isVip
}
......@@ -48,18 +45,6 @@ export default {
return '已学完'
}
return `已学${value}%`
},
onClick(data) {
if (this.isWeapp) {
let url = `/pages/course/item?id=${this.courseId}&chapter_id=${data.id}`
// 未开通
if (!data.free && !this.isVip) {
url = `/pages/web/index?src=${window.location.origin}/pay`
}
wx.miniProgram.navigateTo({ url })
} else {
window.alert('请在微信小程序中打开')
}
}
}
}
......
src/pages/course/tag/home.vue → src/components/CourseList.vue
浏览文件 @ 34571fa3
<template>
<div class="main-container" v-show="loaded" style="margin:0 0.15rem;">
<div class="list" v-show="loaded">
<template v-if="list.length">
<course-item v-for="item in list" :data="item" :key="item.course_id" @on-click="handleClick" />
<course-list-item
v-for="item in list"
:data="item"
:key="item.id"
v-bind="$attrs"
v-on="$listeners"
/>
</template>
<template v-else>
<slot name="empty">
<van-empty description="暂无内容" />
</slot>
</template>
<van-empty description="暂无内容" v-else />
</div>
</template>
<script>
import * as api from './api'
import CourseItem from '@/components/CourseItem.vue'
import * as api from '@/api/course.js'
import CourseListItem from './CourseListItem.vue'
export default {
name: 'Course',
components: { CourseItem },
metaInfo: {
title: '考点突击'
},
name: 'CourseList',
components: { CourseListItem },
data() {
return {
loaded: false,
list: []
}
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
getCourseList() {
api
.getCourseList()
.getCourseModule()
.then(response => {
this.list = response
})
.finally(() => {
this.loaded = true
})
},
handleClick(data) {
if (this.isWeapp) {
const url = `/pages/web/index?src=${window.location.origin}/course/learn/${data.id}/tag`
wx.miniProgram.navigateTo({ url })
} else {
this.$router.push({ name: 'courseLearnTag', params: { id: data.id } })
}
}
},
beforeMount() {
......@@ -53,9 +47,3 @@ export default {
}
}
</script>
<style lang="scss">
.course-item:last-child {
border-bottom: 0;
}
</style>
src/components/CourseItem.vue → src/components/CourseListItem.vue
浏览文件 @ 34571fa3
......@@ -27,8 +27,11 @@
<script>
export default {
name: 'CourseItem',
props: { data: Object, showProgress: { type: Boolean, default: false } },
name: 'CourseListItem',
props: {
data: { type: Object, required: true },
showProgress: { type: Boolean, default: false }
},
data() {
return {
isOpen: false
......
src/pages/course/learn/api.js deleted 100644 → 0
浏览文件 @ 007226bd
import BaseAPI from '@/api/base_api'
const httpRequest = new BaseAPI(webConf)
/**
* 获取课程列表
*/
export function getCourseList() {
return httpRequest.get('/zy/v2/education/mokuai')
}
src/pages/course/learn/index.vue
浏览文件 @ 34571fa3
<template>
<div class="main-container" v-show="loaded" style="margin:0 0.15rem">
<template v-if="list.length">
<course-item v-for="item in list" :data="item" :key="item.id" @on-click="handleClick" />
</template>
<van-empty description="暂无内容" v-else />
<div class="main-container" style="margin:0 0.15rem">
<course-list @on-click="handleClick" />
</div>
</template>
<script>
import * as api from './api'
import CourseItem from '@/components/CourseItem.vue'
import CourseList from '@/components/CourseList.vue'
export default {
name: 'Course',
components: { CourseItem },
name: 'CourseLearn',
components: { CourseList },
metaInfo: {
title: '考证课程'
},
data() {
return {
loaded: false,
list: []
}
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
getCourseList() {
api
.getCourseList()
.then(response => {
this.list = response
})
.finally(() => {
this.loaded = true
})
},
handleClick(data) {
if (this.isWeapp) {
const url = `/pages/web/index?src=${window.location.origin}/course/learn/${data.id}`
wx.miniProgram.navigateTo({ url })
} else {
this.$router.push({
name: 'courseLearnItem',
params: { id: data.id }
})
this.$router.push({ name: 'courseLearnItem', params: { id: data.id } })
}
}
},
beforeMount() {
this.getCourseList()
}
}
</script>
<style lang="scss">
.course-item:last-child {
border-bottom: 0;
}
</style>
src/pages/course/learn/item.vue
浏览文件 @ 34571fa3
......@@ -12,7 +12,7 @@
>
<van-tab title="按章节学习">
<template v-if="detail.chapters && detail.chapters.length">
<course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
<course-chapter :courseId="courseId" :data="detail.chapters" @on-click="handleClick"></course-chapter>
</template>
<van-empty description="暂无内容" v-else />
</van-tab>
......@@ -47,6 +47,9 @@ export default {
computed: {
courseId() {
return this.$route.params.id
},
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
......@@ -63,6 +66,18 @@ export default {
})
this.detail = response
})
},
handleClick(data) {
if (this.isWeapp) {
let url = `/pages/course/item?id=${this.courseId}&chapter_id=${data.id}`
// 未开通
if (!data.free && !this.isVip) {
url = `/pages/web/index?src=${window.location.origin}/pay`
}
wx.miniProgram.navigateTo({ url })
} else {
window.alert('请在微信小程序中打开')
}
}
},
beforeMount() {
......
src/pages/course/player/index.vue 0 → 100644
浏览文件 @ 34571fa3
<template>
<div class="main-container" style="margin:0 0.15rem">
<course-list @on-click="handleClick" />
</div>
</template>
<script>
import CourseList from '@/components/CourseList.vue'
export default {
name: 'CoursePlayer',
components: { CourseList },
metaInfo: {
title: '考证课程'
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
handleClick(data) {
if (this.isWeapp) {
const url = `/pages/web/index?src=${window.location.origin}/course/player/${data.id}`
wx.miniProgram.navigateTo({ url })
} else {
this.$router.push({ name: 'coursePlayerItem', params: { id: data.id } })
}
}
}
}
</script>
src/pages/course/player/item.vue 0 → 100644
浏览文件 @ 34571fa3
<template>
<div class="main-container" v-if="loaded">
<template v-if="detail.chapters && detail.chapters.length">
<course-chapter :courseId="courseId" :data="detail.chapters" @on-click="handleClick"></course-chapter>
</template>
<van-empty description="暂无内容" v-else />
</div>
</template>
<script>
import CourseChapter from '@/components/CourseChapter.vue'
import * as api from '@/api/course.js'
export default {
name: 'CoursePlayerItem',
components: { CourseChapter },
metaInfo() {
return {
title: this.detail.course_name || ''
}
},
data() {
return {
loaded: false,
detail: {}
}
},
computed: {
courseId() {
return this.$route.params.id
},
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
// 课程学习
getCourse() {
this.loaded = false
api.getCourse(this.courseId).then(response => {
this.loaded = true
response.chapters = response.chapters.filter(item => {
item.children = item.children.filter(
child => child.type === 2 && child.resource_id && child.resource_id !== '6684350363920760832'
)
return item.children.length
})
this.detail = response
})
},
handleClick(data) {
if (this.isWeapp) {
let url = `/pages/player/item?id=${this.courseId}&chapter_id=${data.id}`
// 未开通
if (!data.free && !this.isVip) {
url = `/pages/web/index?src=${window.location.origin}/pay`
}
wx.miniProgram.navigateTo({ url })
} else {
window.alert('请在微信小程序中打开')
}
}
},
beforeMount() {
this.getCourse()
}
}
</script>
src/pages/course/tag/index.vue
浏览文件 @ 34571fa3
......@@ -36,7 +36,7 @@
</template>
<script>
import MessageCard from './messageCard.vue'
import MessageCard from './components/messageCard.vue'
import * as api from '@/api/course.js'
export default {
props: {
......
src/pages/course/tag/list.vue
浏览文件 @ 34571fa3
<template>
<div class="course-tag-wrapper" v-show="loaded">
<div class="course-tag-hd">
<h1 class="course-title">{{detail.course_name}}</h1>
<h1 class="course-title">{{chapter.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" />
<div class="tag-item__title">
<span>{{item.title}}</span>
</div>
<div class="tag-item__free" v-if="item.free">(免费)</div>
<div class="tag-item__arrow">
<van-icon name="arrow" />
</div>
</li>
</ul>
</div>
......@@ -121,21 +125,34 @@ export default {
line-height: 24px;
}
.tag-item {
position: relative;
padding: 20px 20px 20px 0;
font-size: 15px;
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%);
color: #999;
display: flex;
align-items: center;
padding: 15px 0;
}
.tag-item + .tag-item {
border-top: 1px solid #eee;
}
.tag-item__title {
flex: 1;
overflow: hidden;
span {
display: inline-block;
padding: 0 15px;
font-size: 13px;
color: #fff;
line-height: 24px;
background: #f47885;
border-radius: 12px;
}
}
.tag-item__free {
margin-left: 10px;
color: #999;
}
.tag-item__arrow {
margin-left: 10px;
height: 16px;
font-size: 16px;
color: #999;
}
</style>
src/pages/home/index.vue
浏览文件 @ 34571fa3
<template>
<div class="main-container">
<search-bar readonly @click.native="toSearch"></search-bar>
<app-search-bar readonly @click.native="toSearch" />
<div class="banner">
<van-swipe class="banner-swipe" :autoplay="3000">
<van-swipe-item>
......@@ -24,10 +24,10 @@
</li>
</ul>
</div>
<card title="课程试听">
<free-course-item v-for="(item, index) in courseList" :data="item" :key="index"></free-course-item>
</card>
<card title="完整课程" style="padding-bottom:1.2rem;">
<app-card title="课程试听">
<course-list-free-item v-for="(item, index) in courseList" :data="item" :key="index" />
</app-card>
<app-card title="完整课程" style="padding-bottom:1.2rem;">
<div class="course" @click="onClickNav('courseLearn')">
<div class="course-content">
<h2 class="course-content__title">道路运输安全管理培训课程</h2>
......@@ -47,18 +47,18 @@
<img src="../../assets/images/course_01.png" />
</div>
</div>
</card>
</app-card>
</div>
</template>
<script>
import SearchBar from '@/components/SearchBar.vue'
import Card from '@/components/Card.vue'
import FreeCourseItem from '@/components/FreeCourseItem.vue'
import AppSearchBar from '@/components/AppSearchBar.vue'
import AppCard from '@/components/AppCard.vue'
import CourseListFreeItem from '@/components/CourseListFreeItem.vue'
import * as api from '@/api/course.js'
export default {
name: 'Index',
components: { SearchBar, Card, FreeCourseItem },
components: { AppSearchBar, AppCard, CourseListFreeItem },
metaInfo: {
title: '道路安全考证宝典'
},
......
src/pages/my/learn/api.js deleted 100644 → 0
浏览文件 @ 007226bd
import BaseAPI from '@/api/base_api'
const httpRequest = new BaseAPI(webConf)
/**
* 获取课程列表
*/
export function getCourseList() {
return httpRequest.get('/zy/v2/education/mokuai')
}
src/pages/my/learn/index.vue
浏览文件 @ 34571fa3
<template>
<div class="main-container" v-show="loaded" style="margin:0 0.15rem">
<template v-if="list.length && hasLearned">
<course-item
v-for="item in list"
:data="item"
:key="item.id"
:show-progress="true"
@on-click="handleClick"
/>
</template>
<van-empty description="您还没有学习课程，快快开始学习吧！" v-else />
<div class="main-container" style="margin:0 0.15rem">
<course-list :show-progress="true" @on-click="handleClick">
<template #empty>
<van-empty description="您还没有学习课程，快快开始学习吧！" />
</template>
</course-list>
</div>
</template>
<script>
import * as api from './api'
import CourseItem from '@/components/CourseItem.vue'
import CourseList from '@/components/CourseList.vue'
export default {
name: 'Course',
components: { CourseItem },
name: 'MyCourse',
components: { CourseList },
metaInfo: {
title: '已学课程'
},
data() {
return {
loaded: false,
list: []
}
return {}
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
},
// 是否学习过
hasLearned() {
for (const item of this.list) {
const found = item.child.find(item => item.course_progress)
if (found) {
return true
}
}
return false
}
},
methods: {
getCourseList() {
api
.getCourseList()
.then(response => {
this.list = response
})
.finally(() => {
this.loaded = true
})
},
handleClick(data) {
if (this.isWeapp) {
const url = `/pages/web/index?src=${window.location.origin}/my/learn/${data.id}`
wx.miniProgram.navigateTo({ url })
} else {
this.$router.push({
name: 'myLearnItem',
params: { id: data.id }
})
this.$router.push({ name: 'myLearnItem', params: { id: data.id } })
}
}
},
beforeMount() {
this.getCourseList()
}
}
</script>
<style lang="scss">
.course-item:last-child {
border-bottom: 0;
}
</style>
src/pages/search/index.vue
浏览文件 @ 34571fa3
<template>
<div class="main-container">
<search-bar v-model="searchValue" @search="onSearch"></search-bar>
<app-search-bar v-model="searchValue" @search="onSearch" />
<div class="search-tips" v-if="!searchValue">
<div class="search-tips-item" v-if="historyList.length">
<h3 class="search-tips__title">搜索历史</h3>
......@@ -48,7 +48,7 @@
</template>
<script>
// components
import SearchBar from '@/components/SearchBar.vue'
import AppSearchBar from '@/components/AppSearchBar.vue'
import TagList from './components/tagList.vue'
import VideoList from './components/videoList.vue'
import CourseList from './components/courseList.vue'
......@@ -57,7 +57,7 @@ import * as api from './api'
export default {
name: 'SearchIndex',
components: { SearchBar, TagList, VideoList, CourseList },
components: { AppSearchBar, TagList, VideoList, CourseList },
metaInfo: {
title: '搜索'
},
......
src/router/routes.js
浏览文件 @ 34571fa3
......@@ -88,6 +88,18 @@ export default [
name: 'courseLearnItem',
component: () => import('../pages/course/learn/item.vue')
},
// 听课列表
{
path: '/course/player',
name: 'coursePlayer',
component: () => import('../pages/course/player/index.vue')
},
// 听课详情
{
path: '/course/player/:id',
name: 'coursePlayerItem',
component: () => import('../pages/course/player/item.vue')
},
// 课程知识点
{
path: '/course/learn/:courseId/tag/:chapterId',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论