Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
T
transport-show-h5
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
EzijingWeb
transport-show-h5
Commits
36d20ed9
提交
36d20ed9
authored
8月 26, 2020
作者:
王鹏飞
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
知识点修改
上级
e4609e8c
隐藏空白字符变更
内嵌
并排
正在显示
15 个修改的文件
包含
294 行增加
和
548 行删除
+294
-548
CourseChapter.vue
src/components/CourseChapter.vue
+21
-13
CourseItem.vue
src/components/CourseItem.vue
+113
-52
CourseItem2.vue
src/components/CourseItem2.vue
+0
-133
index.vue
src/pages/course/learn/index.vue
+2
-2
item.vue
src/pages/course/learn/item.vue
+1
-1
courseTagMessage.vue
src/pages/course/tag/courseTagMessage.vue
+18
-6
home.vue
src/pages/course/tag/home.vue
+1
-1
login.vue
src/pages/login/login.vue
+6
-10
api.js
src/pages/my/learn/api.js
+1
-8
buyCourseList.vue
src/pages/my/learn/components/buyCourseList.vue
+0
-90
freeCourseList.vue
src/pages/my/learn/components/freeCourseList.vue
+0
-106
index.vue
src/pages/my/learn/index.vue
+47
-112
item.vue
src/pages/my/learn/item.vue
+72
-0
routes.js
src/router/routes.js
+7
-14
index.js
src/store/index.js
+5
-0
没有找到文件。
src/
pages/course/learn/components/c
ourseChapter.vue
→
src/
components/C
ourseChapter.vue
浏览文件 @
36d20ed9
...
...
@@ -11,7 +11,7 @@
{{subItem.name}}
<
template
v-if=
"subItem.free"
>
(免费)
</
template
>
</div>
<
!-- <div class="progress">{{subItem.video_progress | progressText}}</div> --
>
<
div
class=
"progress"
v-if=
"showProgress"
>
{{ progressText(subItem.video_progress) }}
</div
>
</li>
</ul>
</van-collapse-item>
...
...
@@ -22,10 +22,8 @@
export
default
{
props
:
{
courseId
:
String
,
data
:
{
type
:
Array
,
default
:
()
=>
[]
}
data
:
{
type
:
Array
,
default
:
()
=>
[]
},
showProgress
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
...
...
@@ -35,20 +33,30 @@ export default {
computed
:
{
isWeapp
()
{
return
this
.
$store
.
state
.
isWeapp
},
isVip
()
{
return
this
.
$store
.
state
.
isVip
}
},
filter
s
:
{
method
s
:
{
progressText
(
value
)
{
value
=
parseInt
(
value
)
return
value
===
100
?
'已学完'
:
`
${
value
}
%`
}
},
methods
:
{
if
(
value
===
0
)
{
return
this
.
isVip
?
'未开始'
:
'未开通'
}
if
(
value
===
100
)
{
return
'已学完'
}
return
`已学
${
value
}
%`
},
onClick
(
data
)
{
if
(
this
.
isWeapp
)
{
wx
.
miniProgram
.
navigateTo
({
url
:
`/pages/course/item?id=
${
this
.
courseId
}
&chapter_id=
${
data
.
id
}
`
})
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/components/CourseItem.vue
浏览文件 @
36d20ed9
<
template
>
<div
class=
"course-item"
@
click=
"onClick(data)"
>
<div
class=
"course-item-pic"
v-if=
"curriculum.curriculum_picture"
>
<img
:src=
"curriculum.curriculum_picture"
/>
<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>
<div
class=
"course-item__text course-item__text__freevideo"
>
{{
data
.
free_video_num
}}
个免费视频
</div>
</div>
<div
class=
"course-item__text course-item__text__video"
>
{{
data
.
video_num
}}
节视频课
</div>
<div
class=
"course-item__text course-item__text__course"
>
含
{{
data
.
course_num
}}
节课
</div>
</div>
</div>
</div>
<div
class=
"course-item-content"
>
<h3
class=
"course-item__title"
>
{{
data
.
course_name
}}
</h3>
<div
class=
"course-item__text"
v-html=
"curriculum.curriculum_represent"
></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)"
>
<div
class=
"name"
>
{{
item
.
course_name
}}
</div>
<div
class=
"progress"
v-if=
"showProgress"
>
{{
item
.
video_progress
|
progressText
}}
</div>
</div>
</div>
</div>
</
template
>
...
...
@@ -13,28 +28,30 @@
<
script
>
export
default
{
name
:
'CourseItem'
,
props
:
{
data
:
{
type
:
Object
,
required
:
true
}
props
:
{
data
:
Object
,
showProgress
:
{
type
:
Boolean
,
default
:
false
}
},
data
()
{
return
{
isOpen
:
false
}
},
computed
:
{
curriculum
()
{
return
this
.
data
.
curriculum
},
isWeapp
()
{
return
this
.
$store
.
state
.
isWeapp
filters
:
{
progressText
(
value
)
{
value
=
parseInt
(
value
)
if
(
value
===
0
)
{
return
'未开始'
}
if
(
value
===
100
)
{
return
'已学完'
}
return
`已学
${
value
}
%`
}
},
methods
:
{
toggleChild
()
{
this
.
isOpen
=
!
this
.
isOpen
},
onClick
(
data
)
{
if
(
this
.
isWeapp
)
{
const
url
=
`/pages/web/index?src=
${
window
.
location
.
origin
}
/course/learn/
${
data
.
course_id
}
`
wx
.
miniProgram
.
navigateTo
({
url
})
}
else
{
this
.
$router
.
push
({
name
:
'courseLearnItem'
,
params
:
{
id
:
data
.
course_id
}
})
}
this
.
$emit
(
'on-click'
,
data
)
}
}
}
...
...
@@ -42,9 +59,32 @@ export default {
<
style
lang=
"scss"
scoped
>
.course-item
{
padding
:
0
.3rem
0
;
border-bottom
:
1px
solid
#ccc
;
}
.course-arrow
{
width
:
0
.6rem
;
height
:
2rem
;
}
.course-arrow__up
{
background
:
url('https://zws-imgs-pub.ezijing.com/transport/weapp/icon_arrow_up.png')
no-repeat
left
center
;
background-size
:
0
.3rem
0
.3rem
;
}
.course-arrow__down
{
background
:
url('https://zws-imgs-pub.ezijing.com/transport/weapp/icon_arrow_down.png')
no-repeat
left
center
;
background-size
:
0
.3rem
0
.3rem
;
}
.course-item-top
{
display
:
flex
;
padding
:
0
.4rem
0
;
border-bottom
:
1px
solid
#f1f1f1
;
}
.course-item-bottom
{
padding-left
:
0
.6rem
;
}
.course-item-pic
{
width
:
3
.15rem
;
height
:
2rem
;
margin-right
:
0
.15rem
;
overflow
:
hidden
;
}
.course-item-content
{
flex
:
1
;
...
...
@@ -53,40 +93,61 @@ export default {
justify-content
:
space-between
;
overflow
:
hidden
;
}
.course-item-pic
{
width
:
2
.4rem
;
height
:
1
.35rem
;
margin-right
:
10px
;
border-radius
:
6px
;
overflow
:
hidden
;
margin-right
:
0
.2rem
;
img
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
}
}
.course-item__title
{
margin
:
0
;
font-size
:
0
.3rem
;
font-weight
:
400
;
color
:
#222
;
font-size
:
0
.26rem
;
color
:
#666
;
display
:
-
webkit-box
;
-webkit-box-orient
:
vertical
;
-webkit-line-clamp
:
2
;
overflow
:
hidden
;
}
.course-item__text
{
max-height
:
0
.34rem
;
font-size
:
0
.26rem
;
color
:
#999
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
::v-deep
p
{
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
overflow
:
hidden
;
display
:
inline-block
;
height
:
0
.48rem
;
padding
:
0
0
.2rem
;
font-size
:
0
.24rem
;
line-height
:
0
.48rem
;
text-align
:
center
;
box-sizing
:
border-box
;
}
.course-item__text
+
.course-item__text
{
margin-left
:
0
.1rem
;
}
.course-item__text__course
{
color
:
#fff
;
background-color
:
#75b0ff
;
}
.course-item__text__video
{
min-width
:
1
.8rem
;
color
:
#fff
;
background-color
:
#5ad0b2
;
}
.course-item__text__freevideo
{
min-width
:
1
.8rem
;
margin-bottom
:
0
.1rem
;
color
:
#fff
;
background-color
:
#d05a5a
;
}
.course-child
{
display
:
flex
;
align-items
:
center
;
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
;
.name
{
flex
:
1
;
font-size
:
13px
;
color
:
#666
;
}
.progress
{
margin-left
:
20px
;
font-size
:
12px
;
color
:
#999
;
}
}
.course-child
:last-child
{
border-bottom
:
0
;
}
</
style
>
src/components/CourseItem2.vue
deleted
100644 → 0
浏览文件 @
e4609e8c
<
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>
<div
class=
"course-item__text course-item__text__freevideo"
>
{{
data
.
free_video_num
}}
个免费视频
</div>
</div>
<div
class=
"course-item__text course-item__text__video"
>
{{
data
.
video_num
}}
节视频课
</div>
<div
class=
"course-item__text course-item__text__course"
>
含
{{
data
.
course_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
:
0
.3rem
0
;
border-bottom
:
1px
solid
#ccc
;
}
.course-arrow
{
width
:
0
.6rem
;
height
:
2rem
;
}
.course-arrow__up
{
background
:
url('https://zws-imgs-pub.ezijing.com/transport/weapp/icon_arrow_up.png')
no-repeat
left
center
;
background-size
:
0
.3rem
0
.3rem
;
}
.course-arrow__down
{
background
:
url('https://zws-imgs-pub.ezijing.com/transport/weapp/icon_arrow_down.png')
no-repeat
left
center
;
background-size
:
0
.3rem
0
.3rem
;
}
.course-item-top
{
display
:
flex
;
}
.course-item-bottom
{
padding-left
:
0
.6rem
;
}
.course-item-pic
{
width
:
3
.15rem
;
height
:
2rem
;
margin-right
:
0
.15rem
;
overflow
:
hidden
;
}
.course-item-content
{
flex
:
1
;
display
:
flex
;
flex-direction
:
column
;
justify-content
:
space-between
;
overflow
:
hidden
;
}
.course-item__title
{
font-size
:
0
.26rem
;
color
:
#666
;
display
:
-
webkit-box
;
-webkit-box-orient
:
vertical
;
-webkit-line-clamp
:
2
;
overflow
:
hidden
;
}
.course-item__text
{
display
:
inline-block
;
height
:
0
.48rem
;
padding
:
0
0
.2rem
;
font-size
:
0
.24rem
;
line-height
:
0
.48rem
;
text-align
:
center
;
box-sizing
:
border-box
;
}
.course-item__text
+
.course-item__text
{
margin-left
:
0
.1rem
;
}
.course-item__text__course
{
color
:
#fff
;
background-color
:
#75b0ff
;
}
.course-item__text__video
{
min-width
:
1
.8rem
;
color
:
#fff
;
background-color
:
#5ad0b2
;
}
.course-item__text__freevideo
{
min-width
:
1
.8rem
;
margin-bottom
:
0
.1rem
;
color
:
#fff
;
background-color
:
#d05a5a
;
}
.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
>
src/pages/course/learn/index.vue
浏览文件 @
36d20ed9
<
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.
course_
id"
@
on-click=
"handleClick"
/>
<course-item
v-for=
"item in list"
:data=
"item"
:key=
"item.id"
@
on-click=
"handleClick"
/>
</
template
>
<van-empty
description=
"暂无内容"
v-else
/>
</div>
...
...
@@ -9,7 +9,7 @@
<
script
>
import
*
as
api
from
'./api'
import
CourseItem
from
'@/components/CourseItem
2
.vue'
import
CourseItem
from
'@/components/CourseItem.vue'
export
default
{
name
:
'Course'
,
...
...
src/pages/course/learn/item.vue
浏览文件 @
36d20ed9
...
...
@@ -24,7 +24,7 @@
</template>
<
script
>
import
CourseChapter
from
'
./components/c
ourseChapter.vue'
import
CourseChapter
from
'
@/components/C
ourseChapter.vue'
import
CourseTag
from
'../tag/index.vue'
import
*
as
api
from
'@/api/course.js'
export
default
{
...
...
src/pages/course/tag/courseTagMessage.vue
浏览文件 @
36d20ed9
...
...
@@ -3,7 +3,7 @@
<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"
>
<span>
更多
</span>
<span>
{{
moreText
}}
</span>
<van-icon
name=
"arrow"
/>
</div>
</div>
...
...
@@ -20,6 +20,7 @@
</template>
<
script
>
import
{
mapState
}
from
'vuex'
export
default
{
name
:
'CourseTagMessage'
,
props
:
{
...
...
@@ -33,15 +34,26 @@ export default {
}
},
computed
:
{
...
mapState
([
'isWeapp'
,
'isAndroid'
,
'isIos'
,
'isVip'
]),
hasMore
()
{
return
this
.
data
.
tag
?
this
.
data
.
tag
.
length
>
this
.
maxCount
:
false
},
isWeapp
()
{
return
this
.
$store
.
state
.
isWeapp
},
// 最多现实8条
// 最多显示8条
dataList
()
{
return
this
.
data
.
tag
?
this
.
data
.
tag
.
slice
(
0
,
this
.
maxCount
)
:
[]
let
list
=
this
.
data
.
tag
||
[]
if
(
!
this
.
isVip
)
{
list
=
list
.
filter
(
item
=>
item
.
free
)
}
return
list
.
slice
(
0
,
this
.
maxCount
)
},
moreText
()
{
if
(
this
.
isVip
)
{
return
'更多'
}
if
(
this
.
isIos
)
{
return
'更多请开通'
}
return
'更多请购买'
}
},
methods
:
{
...
...
src/pages/course/tag/home.vue
浏览文件 @
36d20ed9
...
...
@@ -9,7 +9,7 @@
<
script
>
import
*
as
api
from
'./api'
import
CourseItem
from
'@/components/CourseItem
2
.vue'
import
CourseItem
from
'@/components/CourseItem.vue'
export
default
{
name
:
'Course'
,
...
...
src/pages/login/login.vue
浏览文件 @
36d20ed9
...
...
@@ -99,9 +99,7 @@ export default {
.
then
(
response
=>
{
const
{
code
,
msg
:
message
}
=
response
if
(
code
===
0
)
{
this
.
bindVisitor
(()
=>
{
this
.
loginSuccess
(
response
)
})
this
.
bindVisitor
(
this
.
loginSuccess
(
response
))
}
else
if
(
code
===
1007
)
{
this
.
$dialog
({
confirmButtonText
:
'知道了'
,
...
...
@@ -138,15 +136,13 @@ export default {
this
.
$toast
(
response
.
msg
)
}
},
bindVisitor
(
callback
)
{
const
userId
=
window
.
localStorage
.
userId
// 绑定游客用户
async
bindVisitor
(
callback
)
{
const
userId
=
this
.
$store
.
state
.
guestUser
.
user_id
if
(
userId
)
{
api
.
bindVisitor
({
user_id
:
userId
}).
then
(
res
=>
{
callback
()
})
}
else
{
callback
()
await
api
.
bindVisitor
({
user_id
:
userId
})
}
callback
&&
callback
()
},
wechatLogin
()
{
const
appId
=
'wxc6044475caf2805a'
...
...
src/pages/my/learn/api.js
浏览文件 @
36d20ed9
...
...
@@ -2,16 +2,9 @@ import BaseAPI from '@/api/base_api'
const
httpRequest
=
new
BaseAPI
(
webConf
)
/**
* 获取免费课程列表
*/
export
function
getFreeCourseList
()
{
return
httpRequest
.
get
(
'/zy/v2/education/freecourse'
)
}
/**
* 获取课程列表
*/
export
function
getCourseList
()
{
return
httpRequest
.
get
(
'/zy/v2/education/
courses/list
'
)
return
httpRequest
.
get
(
'/zy/v2/education/
mokuai
'
)
}
src/pages/my/learn/components/buyCourseList.vue
deleted
100644 → 0
浏览文件 @
e4609e8c
<
template
>
<div
class=
"main-list"
v-show=
"loaded"
>
<ul
v-if=
"list.length && hasLearned"
>
<li
v-for=
"item in list"
:key=
"item.course_id"
@
click=
"onClick(item)"
>
<div
class=
"name"
>
{{
item
.
course_name
}}
</div>
<div
class=
"progress"
>
{{
item
.
video_progress
|
progressText
}}
</div>
</li>
</ul>
<van-empty
description=
"您还没有学习课程,快快开始学习吧!"
v-else
/>
</div>
</
template
>
<
script
>
import
*
as
api
from
'../api'
export
default
{
name
:
'BuyCourseList'
,
data
()
{
return
{
loaded
:
false
,
list
:
[]
}
},
computed
:
{
isWeapp
()
{
return
this
.
$store
.
state
.
isWeapp
},
// 是否学习过
hasLearned
()
{
return
!!
this
.
list
.
find
(
item
=>
item
.
video_progress
)
}
},
filters
:
{
progressText
(
value
)
{
value
=
parseInt
(
value
)
if
(
value
===
0
)
{
return
'未开始'
}
if
(
value
===
100
)
{
return
'已学完'
}
return
`已学
${
value
}
%`
}
},
methods
:
{
getList
()
{
api
.
getCourseList
()
.
then
(
response
=>
{
this
.
list
=
response
})
.
finally
(()
=>
{
this
.
loaded
=
true
})
},
onClick
(
data
)
{
if
(
this
.
isWeapp
)
{
wx
.
miniProgram
.
navigateTo
({
url
:
`/pages/web/index?src=
${
window
.
location
.
origin
}
/course/learn/
${
data
.
course_id
}
`
})
}
else
{
this
.
$router
.
push
({
name
:
'courseLearnItem'
,
params
:
{
id
:
data
.
course_id
}
})
}
}
},
beforeMount
()
{
this
.
getList
()
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.main-list
li
{
display
:
flex
;
align-items
:
center
;
padding
:
20px
0
;
border-bottom
:
1px
solid
#f1f1f1
;
&
:last-child
{
border-bottom
:
0
;
}
.name
{
flex
:
1
;
font-size
:
15px
;
color
:
#222
;
}
.progress
{
margin-left
:
20px
;
font-size
:
12px
;
color
:
#999
;
}
}
</
style
>
src/pages/my/learn/components/freeCourseList.vue
deleted
100644 → 0
浏览文件 @
e4609e8c
<
template
>
<div
class=
"main-list"
v-show=
"loaded"
>
<ul
v-if=
"list.length && hasLearned"
>
<li
v-for=
"item in list"
:key=
"item.course_id"
@
click=
"onClick(item)"
>
<div
class=
"pic"
v-if=
"item.picture"
>
<img
:src=
"item.picture"
/>
</div>
<div
class=
"name"
>
{{
item
.
course_name
}}
</div>
<div
class=
"progress"
>
{{
item
.
video_progress
|
progressText
}}
</div>
</li>
</ul>
<van-empty
description=
"您还没有学习课程,快快开始学习吧!"
v-else
/>
</div>
</
template
>
<
script
>
import
*
as
api
from
'../api'
export
default
{
name
:
'BuyCourseList'
,
data
()
{
return
{
loaded
:
false
,
list
:
[]
}
},
computed
:
{
isWeapp
()
{
return
this
.
$store
.
state
.
isWeapp
},
// 是否学习过
hasLearned
()
{
return
!!
this
.
list
.
find
(
item
=>
item
.
video_progress
)
}
},
filters
:
{
progressText
(
value
)
{
value
=
parseInt
(
value
)
if
(
value
===
0
)
{
return
'未开始'
}
if
(
value
===
100
)
{
return
'已学完'
}
return
`已学
${
value
}
%`
}
},
methods
:
{
getList
()
{
api
.
getFreeCourseList
()
.
then
(
response
=>
{
this
.
list
=
response
})
.
finally
(()
=>
{
this
.
loaded
=
true
})
},
onClick
(
data
)
{
if
(
this
.
isWeapp
)
{
wx
.
miniProgram
.
navigateTo
({
url
:
`/pages/course/free?id=
${
data
.
course_id
}
`
})
}
else
{
window
.
alert
(
'请在微信小程序中打开'
)
}
}
},
beforeMount
()
{
this
.
getList
()
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.main-list
li
{
display
:
flex
;
align-items
:
center
;
padding
:
20px
0
;
border-bottom
:
1px
solid
#f1f1f1
;
&
:last-child
{
border-bottom
:
0
;
}
.pic
{
width
:
100px
;
height
:
64px
;
margin-right
:
10px
;
border-radius
:
6px
;
overflow
:
hidden
;
img
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
}
}
.name
{
flex
:
1
;
align-self
:
flex-start
;
font-size
:
15px
;
color
:
#222
;
}
.progress
{
margin-left
:
20px
;
font-size
:
12px
;
color
:
#999
;
}
}
</
style
>
src/pages/my/learn/index.vue
浏览文件 @
36d20ed9
<
template
>
<div
class=
"main-container"
>
<div
class=
"learn-choose"
>
<van-cell
title=
"选择已学课程:"
:value=
"selectedItem.name"
is-link
@
click=
"popupVisible = true"
/>
</div>
<!-- 已学课程 -->
<template
v-if=
"selectedItem.type === 1"
>
<buy-course-list
v-if=
"isVip"
/>
<template
v-else
>
<van-empty
image=
"https://zws-imgs-pub.ezijing.com/transport/weapp/empty.png"
description=
"快去开启全部考试服务,一起加油考证吧!"
class=
"custom-empty"
/>
<div
class=
"fixed-box"
>
<div
class=
"fixed-inner"
>
<div
class=
"fixed-button"
@
click=
"toCourse"
>
学更多课程
</div>
</div>
</div>
</
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
>
<!-- 试题课程 -->
<free-course-list
v-else
/>
<van-popup
v-model=
"popupVisible"
position=
"bottom"
:safe-area-inset-bottom=
"true"
@
open=
"popupOpen"
>
<ul
class=
"popup-list"
>
<li
:class=
"item.selected ? 'is-active' : ''"
v-for=
"item in chooseList"
:key=
"item.type"
@
click=
"changeSelected(item)"
>
{{ item.name }}
</li>
</ul>
<div
class=
"popup-buttons"
>
<van-button
type=
"primary"
@
click=
"popupVisible = false"
>
取消
</van-button>
<van-button
type=
"primary"
@
click=
"primaryChangeFilterType"
>
确定
</van-button>
</div>
</van-popup>
<van-empty
description=
"您还没有学习课程,快快开始学习吧!"
v-else
/>
</div>
</template>
<
script
>
import
BuyCourseList
from
'./components/buyCourseList.vue
'
import
FreeCourseList
from
'./components/freeCourseList
.vue'
import
*
as
api
from
'./api
'
import
CourseItem
from
'@/components/CourseItem
.vue'
export
default
{
metaInfo
:
{
title
:
'已学课程'
},
components
:
{
BuyCourseList
,
FreeCourseList
},
name
:
'Course'
,
components
:
{
CourseItem
},
metaInfo
:
{
title
:
'已学课程'
},
data
()
{
return
{
popupVisible
:
false
,
chooseList
:
[
{
type
:
1
,
name
:
'课程学习'
,
selected
:
true
},
{
type
:
2
,
name
:
'试听课程'
,
selected
:
false
}
],
selectedItem
:
{
type
:
1
,
name
:
'课程学习'
}
loaded
:
false
,
list
:
[]
}
},
computed
:
{
isWeapp
()
{
return
this
.
$store
.
state
.
isWeapp
},
isVip
()
{
return
this
.
$store
.
state
.
isVip
// 是否学习过
hasLearned
()
{
for
(
const
item
of
this
.
list
)
{
const
found
=
item
.
child
.
find
(
item
=>
item
.
course_progress
)
if
(
found
)
{
return
true
}
}
return
false
}
},
methods
:
{
popupOpen
()
{
this
.
changeSelected
(
this
.
selectedItem
)
},
changeSelected
(
data
)
{
this
.
chooseList
=
this
.
chooseList
.
map
(
item
=>
{
item
.
selected
=
item
.
type
===
data
.
type
return
item
})
getCourseList
()
{
api
.
getCourseList
()
.
then
(
response
=>
{
this
.
list
=
response
})
.
finally
(()
=>
{
this
.
loaded
=
true
})
},
// 确定选择
primaryChangeFilterType
()
{
const
found
=
this
.
chooseList
.
find
(
item
=>
item
.
selected
)
this
.
selectedItem
=
found
this
.
popupVisible
=
false
},
toCourse
(
data
)
{
handleClick
(
data
)
{
if
(
this
.
isWeapp
)
{
const
url
=
`/pages/web/index?src=
${
window
.
location
.
origin
}
/
payPage
`
const
url
=
`/pages/web/index?src=
${
window
.
location
.
origin
}
/
my/learn/
${
data
.
id
}
`
wx
.
miniProgram
.
navigateTo
({
url
})
}
else
{
this
.
$router
.
push
({
name
:
'courseLearn'
})
this
.
$router
.
push
({
name
:
'myLearnItem'
,
params
:
{
id
:
data
.
id
}
})
}
}
},
beforeMount
()
{
// 检测是否是付费用户
this
.
$store
.
dispatch
(
'checkIsVip'
)
this
.
getCourseList
()
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.learn-choose
{
border-bottom
:
1px
solid
#f1f1f1
;
}
::v-deep
.van-cell
{
padding
:
20px
0
;
font-size
:
15px
;
font-weight
:
bold
;
color
:
#222
;
.van-cell__value
{
color
:
#222
;
}
.van-cell__right-icon
{
color
:
#222
;
}
}
.popup-list
{
padding
:
20px
0
;
li
{
padding
:
20px
0
;
font-size
:
15px
;
color
:
#000
;
line-height
:
1
;
text-align
:
center
;
&
.is-active
{
color
:
#c62245
;
}
}
}
.popup-buttons
{
display
:
flex
;
padding
:
10px
0
;
::v-deep
.van-button
{
flex
:
1
;
height
:
35px
;
margin
:
0
20px
;
font-size
:
15px
;
background-color
:
#c62245
;
border-radius
:
6px
;
border
:
0
;
}
<
style
lang=
"scss"
>
.course-item
:last-child
{
border-bottom
:
0
;
}
</
style
>
src/pages/my/learn/item.vue
0 → 100644
浏览文件 @
36d20ed9
<
template
>
<div
class=
"main-container"
v-if=
"loaded"
>
<course-chapter
:courseId=
"courseId"
:data=
"detail.chapters"
:show-progress=
"true"
v-if=
"detail.chapters && detail.chapters.length"
></course-chapter>
<van-empty
description=
"暂无内容"
v-else
/>
</div>
</
template
>
<
script
>
import
CourseChapter
from
'@/components/CourseChapter.vue'
import
*
as
api
from
'@/api/course.js'
export
default
{
name
:
'CourseLearnItem'
,
components
:
{
CourseChapter
},
metaInfo
()
{
return
{
title
:
this
.
detail
.
course_name
||
''
}
},
data
()
{
return
{
tabActive
:
0
,
loaded
:
false
,
detail
:
{}
}
},
computed
:
{
courseId
()
{
return
this
.
$route
.
params
.
id
}
},
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
})
}
},
beforeMount
()
{
this
.
getCourse
()
}
}
</
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
>
src/router/routes.js
浏览文件 @
36d20ed9
...
...
@@ -81,12 +81,6 @@ export default [
name
:
'courseLearnItem'
,
component
:
()
=>
import
(
'../pages/course/learn/item.vue'
)
},
// 课程学习详情
{
path
:
'/course/learn/:id/tag'
,
name
:
'courseLearnTag'
,
component
:
()
=>
import
(
'../pages/course/tag/index.vue'
)
},
// 课程知识点
{
path
:
'/course/learn/:courseId/tag/:chapterId'
,
...
...
@@ -94,12 +88,6 @@ export default [
component
:
()
=>
import
(
'../pages/course/tag/list.vue'
)
},
// 课程知识点详情
{
path
:
'/course/tag'
,
name
:
'courseTag'
,
component
:
()
=>
import
(
'../pages/course/tag/home.vue'
)
},
// 课程知识点详情
{
path
:
'/course/tag/:id'
,
name
:
'courseTagItem'
,
...
...
@@ -209,7 +197,12 @@ export default [
{
path
:
'/my/learn'
,
name
:
'MyLearn'
,
component
:
()
=>
import
(
'../pages/my/learn/index.vue'
),
meta
:
{
requiredLogin
:
true
}
component
:
()
=>
import
(
'../pages/my/learn/index.vue'
)
},
// 课程学习详情
{
path
:
'/my/learn/:id'
,
name
:
'myLearnItem'
,
component
:
()
=>
import
(
'../pages/my/learn/item.vue'
)
}
]
src/store/index.js
浏览文件 @
36d20ed9
...
...
@@ -11,6 +11,8 @@ const store = new Vuex.Store({
token
:
''
,
isVip
:
false
,
isLogin
:
false
,
isIos
:
/iOS/
.
test
(
navigator
.
userAgent
),
isAndroid
:
/Android/
.
test
(
navigator
.
userAgent
),
isWeapp
:
/miniProgram/
.
test
(
navigator
.
userAgent
),
guestUser
:
{
user_id
:
''
,
student_id
:
''
}
},
...
...
@@ -105,4 +107,7 @@ export default store
// 获取环境
store
.
dispatch
(
'getEnv'
)
// 加载本地游客用户
store
.
dispatch
(
'loadGuestUser'
)
// 检测是否付费
store
.
dispatch
(
'checkIsVip'
)
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论