提交 775c2325 authored 作者: 王鹏飞's avatar 王鹏飞

chore:课程知识点相关修改

上级 74d520c4
<template>
<div class="course-item custom-class" :style="isOpen ? 'padding-bottom:0;' : ''">
<div class="course-item-top" @click="toggleChild">
<div class="course-arrow" :class="isOpen ? 'course-arrow__up' : 'course-arrow__down'"></div>
<img class="course-item-pic" :src="data.photo" v-if="data.photo" />
<div class="course-item-content">
<div class="course-item__title">{{ data.title }}</div>
<div class="course-item__tools">
<div class="course-item__text course-item__text__course">{{ data.course_num }}节课</div>
<div class="course-item__text course-item__text__video">{{ data.video_num }}节视频课</div>
</div>
</div>
</div>
<div class="course-item-bottom" v-show="isOpen">
<div
class="course-child"
v-for="item in data.child"
:key="item.id"
@click="onClick(item)"
>{{ item.course_name }}</div>
</div>
</div>
</template>
<script>
export default {
name: 'CourseItem',
props: { data: Object },
data() {
return {
isOpen: false
}
},
methods: {
toggleChild() {
this.isOpen = !this.isOpen
},
onClick(data) {
this.$emit('on-click', data)
}
}
}
</script>
<style lang="scss" scoped>
.course-item {
padding: 15px 0;
border-bottom: 1px solid #ccc;
}
.course-arrow {
width: 30px;
height: 100px;
}
.course-arrow__up {
background: url('https://zws-imgs-pub.ezijing.com/transport/weapp/icon_arrow_up.png') no-repeat left center;
background-size: 15px 15px;
}
.course-arrow__down {
background: url('https://zws-imgs-pub.ezijing.com/transport/weapp/icon_arrow_down.png') no-repeat left center;
background-size: 15px 15px;
}
.course-item-top {
display: flex;
}
.course-item-bottom {
padding-left: 30px;
}
.course-item-pic {
width: 108px;
height: 100px;
margin-right: 10px;
overflow: hidden;
}
.course-item-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.course-item__title {
font-size: 13px;
color: #666;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.course-item__text {
display: inline-block;
height: 24px;
margin-left: 10px;
padding: 0 10px;
font-size: 10px;
line-height: 24px;
}
.course-item__text:first-child {
margin-left: 0;
}
.course-item__text__course {
color: #88bbff;
background-color: #edf5ff;
}
.course-item__text__video {
color: #54d0b0;
background-color: #edfaf7;
}
.course-child {
font-size: 13px;
color: #666;
padding: 15px 15px 15px 0;
border-bottom: 1px solid #eee;
background: url('https://zws-imgs-pub.ezijing.com/transport/weapp/icon_arrow.png') no-repeat right center;
background-size: 5px 10px;
}
.course-child:last-child {
border-bottom: 0;
}
</style>
import BaseAPI from '@/api/base_api'
const httpRequest = new BaseAPI(webConf)
/**
* 获取课程列表
*/
export function getCourseList() {
return httpRequest.get('/zy/v2/education/mokuai')
}
<template>
<div class="main-container" v-show="loaded">
<template v-if="list.length">
<course-item v-for="item in list" :data="item" :key="item.course_id" />
<course-item v-for="item in list" :data="item" :key="item.course_id" @on-click="handleClick" />
</template>
<van-empty description="暂无内容" v-else />
</div>
</template>
<script>
import * as api from '@/api/course.js'
import CourseItem from '@/components/CourseItem.vue'
import * as api from './api'
import CourseItem from '@/components/CourseItem2.vue'
export default {
name: 'Course',
......@@ -23,6 +23,11 @@ export default {
list: []
}
},
computed: {
isWeapp() {
return this.$store.state.isWeapp
}
},
methods: {
getCourseList() {
api
......@@ -33,6 +38,17 @@ export default {
.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 }
})
}
}
},
beforeMount() {
......
<template>
<div class="main-container" v-if="loaded">
<div class="course-title">{{detail.course_name}}</div>
<van-tabs
class="main-tabs"
v-model="tabActive"
color="#2b7ce9"
:line-height="2"
:swipeable="true"
>
<van-tab title="课程学习">
<template v-if="detail.chapters && detail.chapters.length">
<course-chapter :courseId="courseId" :data="detail.chapters"></course-chapter>
</van-tab>
<van-tab title="知识点速学">
<div class="tab-content">
<course-tag :courseId="courseId"></course-tag>
</div>
</van-tab>
</van-tabs>
</template>
<van-empty description="暂无内容" v-else />
</div>
</template>
<script>
import CourseChapter from './courseChapter.vue'
import CourseTag from '../tag/index.vue'
import CourseChapter from './components/courseChapter.vue'
import * as api from '@/api/course.js'
export default {
name: 'CourseLearnItem',
components: { CourseChapter, CourseTag },
components: { CourseChapter },
metaInfo: {
title: '课程内容'
},
data() {
return {
tabActive: 0,
loaded: false,
detail: {}
}
......@@ -50,10 +35,7 @@ export default {
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'
child => child.type === 2 && child.resource_id && child.resource_id !== '6684350363920760832'
)
return item.children.length
})
......@@ -66,19 +48,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.course-title {
font-size: 15px;
font-weight: 600;
color: #222;
padding: 20px 0 10px;
}
.tab-content {
margin-left: -0.4rem;
margin-right: -0.4rem;
min-height: 100vh;
background: #eee;
padding: 0.4rem;
}
</style>
import BaseAPI from '@/api/base_api'
const httpRequest = new BaseAPI(webConf)
/**
* 获取课程列表
*/
export function getCourseList() {
return httpRequest.get('/zy/v2/education/mokuai')
}
<template>
<div class="main-container" v-show="loaded">
<template v-if="list.length">
<course-item v-for="item in list" :data="item" :key="item.course_id" @on-click="handleClick" />
</template>
<van-empty description="暂无内容" v-else />
</div>
</template>
<script>
import * as api from './api'
import CourseItem from '@/components/CourseItem2.vue'
export default {
name: 'Course',
components: { CourseItem },
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}/tag`
wx.miniProgram.navigateTo({ url })
} else {
this.$router.push({ name: 'courseLearnTag', params: { id: data.id } })
}
}
},
beforeMount() {
this.getCourseList()
}
}
</script>
<style lang="scss">
.course-item:last-child {
border-bottom: 0;
}
</style>
......@@ -40,7 +40,13 @@ import MessageCard from './messageCard.vue'
import * as api from '@/api/course.js'
export default {
props: {
courseId: { type: String, required: true },
courseId: {
type: String,
default() {
console.log(this)
return this.$route.params.id
}
},
isTest: { type: Boolean, default: false }
},
components: { MessageCard },
......@@ -101,9 +107,7 @@ export default {
this.searchTag(data.name)
},
searchTag(keywords) {
api
.getSearchTagList({ keywords, course_id: this.courseId })
.then(response => {
api.getSearchTagList({ keywords, course_id: this.courseId }).then(response => {
if (response.length) {
this.messageList.push({
id: this.genId(),
......@@ -157,10 +161,7 @@ export default {
window.scrollTo(0, 0)
},
handleScroll() {
const scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.showBacktop = scrollTop >= 10
}
},
......
import BaseAPI from '@/api/base_api'
const httpRequest = new BaseAPI(webConf)
// 登录
export function login(data) {
return httpRequest.post('/passport/rest/login', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
// 绑定微信
export function bindWechat(data) {
return httpRequest.post('/passport/rest/wechat/bind-unionid', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
// 重置密码
export function resetPassword(data) {
return httpRequest.post('/usercenter/user/update-pwd', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
// 发送重置验证码
export function sendResetPasswordCode(data) {
return httpRequest.post('/usercenter/user/send-code', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
// 登出
export function logout() {
return httpRequest.get('/passport/rest/logout')
}
// 获取用户信息
export function getUser() {
return httpRequest.get('/zy/user/getinfo')
}
// 绑定游客
export function bindVisitor(data) {
return httpRequest.post('/zy/user/bind-account', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
......@@ -26,7 +26,7 @@
</template>
<script>
import * as api from '@/api/account'
import * as api from '../api'
import CountdownButton from '@/components/CountdownButton.vue'
export default {
......
......@@ -30,9 +30,9 @@
<script>
import Cookies from 'js-cookie'
import * as api from '@/api/account'
import AccountLogin from './accountLogin.vue'
import CodeLogin from './codeLogin.vue'
import * as api from './api'
import AccountLogin from './components/accountLogin.vue'
import CodeLogin from './components/codeLogin.vue'
export default {
components: { AccountLogin, CodeLogin },
......
......@@ -67,7 +67,7 @@
</template>
<script>
import * as api from '@/api/account'
import * as api from './api'
import CountdownButton from '@/components/CountdownButton.vue'
export default {
......@@ -180,11 +180,7 @@ export default {
background-color: transparent;
}
.password-button {
background: linear-gradient(
180deg,
rgba(255, 155, 150, 1) 0%,
rgba(206, 62, 58, 1) 100%
);
background: linear-gradient(180deg, rgba(255, 155, 150, 1) 0%, rgba(206, 62, 58, 1) 100%);
color: #fff;
border: 0;
}
......
import BaseAPI from '@/api/base_api'
const httpRequest = new BaseAPI(webConf)
/**
* 获取搜索记录
*/
export function getSearchTips() {
return httpRequest.get('/zy/v2/education/search/tips')
}
/**
* 知识点搜索
*/
export function getSearchTagList(data) {
return httpRequest.post('/zy/v2/education/search/tag', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
/**
* 视频课程搜索
*/
export function getSearchCourseVideoList(data) {
return httpRequest.post('/zy/v2/education/search/chapter1', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
/**
* 课程搜索
*/
export function getSearchCourseList(data) {
return httpRequest.post('/zy/v2/education/search/chapter2', data, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
}
......@@ -12,7 +12,7 @@
</template>
<script>
import * as api from '@/api/course.js'
import * as api from '../api'
export default {
name: 'CourseList',
props: {
......
......@@ -12,7 +12,7 @@
</template>
<script>
import * as api from '@/api/course.js'
import * as api from '../api'
export default {
name: 'TagList',
props: {
......
......@@ -20,7 +20,7 @@
</template>
<script>
import * as api from '@/api/course.js'
import * as api from '../api'
export default {
name: 'VideoList',
props: {
......@@ -52,9 +52,7 @@ export default {
},
// 过滤空视频
dataList() {
return this.list.filter(
item => item.resource_id !== '6684350363920760832'
)
return this.list.filter(item => item.resource_id !== '6684350363920760832')
}
},
methods: {
......@@ -113,8 +111,7 @@ export default {
top: 0;
right: 0;
bottom: 0;
background: rgba(1, 1, 1, 0.2) url(../../assets/images/icon_play.png)
no-repeat center center;
background: rgba(1, 1, 1, 0.2) url(../../../assets/images/icon_play.png) no-repeat center center;
background-size: 0.56rem 0.7rem;
z-index: 10;
}
......
......@@ -49,11 +49,11 @@
<script>
// components
import SearchBar from '@/components/SearchBar.vue'
import TagList from './tagList.vue'
import VideoList from './videoList.vue'
import CourseList from './courseList.vue'
import TagList from './components/tagList.vue'
import VideoList from './components/videoList.vue'
import CourseList from './components/courseList.vue'
// api
import * as api from '@/api/course.js'
import * as api from './api'
export default {
name: 'SearchIndex',
......
......@@ -83,6 +83,13 @@ export default [
component: () => import('../pages/course/learn/item.vue'),
meta: { requiredLogin: true }
},
// 课程学习详情
{
path: '/course/learn/:id/tag',
name: 'courseLearnTag',
component: () => import('../pages/course/tag/index.vue'),
meta: { requiredLogin: true }
},
// 课程知识点
{
path: '/course/learn/:courseId/tag/:chapterId',
......@@ -91,6 +98,13 @@ export default [
meta: { requiredLogin: true }
},
// 课程知识点详情
{
path: '/course/tag',
name: 'courseTag',
component: () => import('../pages/course/tag/home.vue'),
meta: { requiredLogin: true }
},
// 课程知识点详情
{
path: '/course/tag/:id',
name: 'courseTagItem',
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论