mirror of
https://gitee.com/koogua/course-tencent-cloud.git
synced 2025-07-16 21:26:13 +08:00
1.优化课程目录UI
2.优化收藏UI 3.修正收费课程试听问题
This commit is contained in:
xiaochong0302
parent
9fcea65989
commit
e5869e1e8f
@ -1,35 +1,45 @@
|
||||
{%- macro model_icon(model) %}
|
||||
{% if model == 1 %}
|
||||
<i class="iconfont icon-video"></i>
|
||||
{% elseif model == 2 %}
|
||||
<i class="iconfont icon-live"></i>
|
||||
{% elseif model == 3 %}
|
||||
<i class="iconfont icon-article"></i>
|
||||
{% elseif model == 4 %}
|
||||
<i class="layui-icon layui-icon-user"></i>
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
|
||||
{%- macro show_lesson_list(parent,chapter) %}
|
||||
<ul class="sidebar-lesson-list">
|
||||
{% for lesson in parent.children %}
|
||||
{% set url = url({'for':'home.chapter.show','id':lesson.id}) %}
|
||||
{% set active = (chapter.id == lesson.id) ? 'active' : 'normal' %}
|
||||
<li class="lesson-title layui-elip">
|
||||
<li class="sidebar-lesson layui-elip">
|
||||
{% if lesson.me.owned == 1 %}
|
||||
<a class="{{ active }}" href="{{ url }}" title="{{ lesson.title }}">{{ lesson.title }}</a>
|
||||
<a class="{{ active }}" href="{{ url }}" title="{{ lesson.title }}">{{ model_icon(lesson.model) }} {{ lesson.title }}</a>
|
||||
{% else %}
|
||||
<span class="deny" title="{{ lesson.title }}">{{ lesson.title }}</span>
|
||||
<span class="deny" title="{{ lesson.title }}">{{ model_icon(lesson.model) }} {{ lesson.title }}</span>
|
||||
<i class="iconfont icon-lock"></i>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endmacro %}
|
||||
|
||||
<div class="layui-card sidebar-card sidebar-chapter">
|
||||
<div class="layui-card sidebar-card sidebar-catalog">
|
||||
<div class="layui-card-header">课程目录</div>
|
||||
<div class="layui-card-body">
|
||||
{% if catalog|length > 1 %}
|
||||
<div class="sidebar-chapter-list">
|
||||
{% for item in catalog %}
|
||||
<div class="chapter-title layui-elip">{{ item.title }}</div>
|
||||
<div class="sidebar-lesson-list">
|
||||
{{ show_lesson_list(item,chapter) }}
|
||||
</div>
|
||||
<div class="sidebar-chapter layui-elip">{{ item.title }}</div>
|
||||
{{ show_lesson_list(item,chapter) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="sidebar-lesson-list">
|
||||
{{ show_lesson_list(catalog[0],chapter) }}
|
||||
</div>
|
||||
{{ show_lesson_list(catalog[0],chapter) }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,11 +35,7 @@
|
||||
<div class="layui-card-body">
|
||||
<div class="chat-msg-list" id="chat-msg-list" data-url="{{ live_chats_url }}"></div>
|
||||
<form class="layui-form chat-msg-form" method="post" action="{{ send_msg_url }}">
|
||||
{% if auth_user.id > 0 %}
|
||||
<input class="layui-input" type="text" name="content" maxlength="50" placeholder="快来一起互动吧" lay-verType="tips" lay-verify="required">
|
||||
{% else %}
|
||||
<input class="layui-input" type="text" placeholder="登录后才可以发言哦" readonly="readonly">
|
||||
{% endif %}
|
||||
<input class="layui-input" type="text" name="content" maxlength="50" placeholder="快来一起互动吧" lay-vertype="tips" lay-verify="required">
|
||||
<button class="layui-hide" type="submit" lay-submit="true" lay-filter="chat">发送</button>
|
||||
</form>
|
||||
</div>
|
||||
@ -80,4 +76,4 @@
|
||||
{{ js_include('home/js/course.share.js') }}
|
||||
{{ js_include('home/js/copy.js') }}
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@ -1,103 +1,116 @@
|
||||
{%- macro show_lesson_list(chapter) %}
|
||||
<ul class="lesson-list">
|
||||
{% for lesson in chapter.children %}
|
||||
{% set url = url({'for':'home.chapter.show','id':lesson.id}) %}
|
||||
{% set priv = lesson.me.owned ? 'allow' : 'deny' %}
|
||||
{% if lesson.model == 1 %}
|
||||
<li class="lesson-item">{{ vod_lesson_info(lesson) }}</li>
|
||||
<li class="lesson-item {{ priv }}" data-url="{{ url }}">{{ vod_lesson_info(lesson) }}</li>
|
||||
{% elseif lesson.model == 2 %}
|
||||
<li class="lesson-item">{{ live_lesson_info(lesson) }}</li>
|
||||
<li class="lesson-item {{ priv }}" data-url="{{ url }}">{{ live_lesson_info(lesson) }}</li>
|
||||
{% elseif lesson.model == 3 %}
|
||||
<li class="lesson-item">{{ read_lesson_info(lesson) }}</li>
|
||||
<li class="lesson-item {{ priv }}" data-url="{{ url }}">{{ read_lesson_info(lesson) }}</li>
|
||||
{% elseif lesson.model == 4 %}
|
||||
<li class="lesson-item">{{ offline_lesson_info(lesson) }}</li>
|
||||
<li class="lesson-item deny" data-url="{{ url }}">{{ offline_lesson_info(lesson) }}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro vod_lesson_info(lesson) %}
|
||||
{% set url = lesson.me.owned ? url({'for':'home.chapter.show','id':lesson.id}) : '' %}
|
||||
{% set priv = lesson.me.owned ? 'allow' : 'deny' %}
|
||||
<a class="{{ priv }} view-lesson" href="javascript:" data-url="{{ url }}">
|
||||
<i class="layui-icon layui-icon-play"></i>
|
||||
<div class="left">
|
||||
<span class="model"><i class="iconfont icon-video"></i></span>
|
||||
<span class="title">{{ lesson.title }}</span>
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="iconfont icon-trial"></span>
|
||||
{% endif %}
|
||||
{% if lesson.me.duration > 0 %}
|
||||
<span class="study-time" title="学习时长：{{ lesson.me.duration|duration }}"><i class="layui-icon layui-icon-time"></i></span>
|
||||
{% endif %}
|
||||
{% if priv == 'deny' %}
|
||||
<span class="iconfont icon-lock"></span>
|
||||
{% if lesson.me.owned == 0 %}
|
||||
<span class="lock"><i class="iconfont icon-lock"></i></span>
|
||||
{% endif %}
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="flag flag-free">试听</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="duration">{{ lesson.attrs.duration|duration }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro live_lesson_info(lesson) %}
|
||||
{% set url = lesson.me.owned ? url({'for':'home.chapter.show','id':lesson.id}) : '' %}
|
||||
{% set priv = lesson.me.owned ? 'allow' : 'deny' %}
|
||||
<a class="{{ priv }} view-lesson" href="javascript:" data-url="{{ url }}">
|
||||
<i class="layui-icon layui-icon-video"></i>
|
||||
<div class="left">
|
||||
<span class="model"><i class="iconfont icon-live"></i></span>
|
||||
<span class="title">{{ lesson.title }}</span>
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="iconfont icon-trial"></span>
|
||||
{% endif %}
|
||||
{% if lesson.me.duration > 0 %}
|
||||
<span class="study-time" title="学习时长：{{ lesson.me.duration|duration }}"><i class="layui-icon layui-icon-time"></i></span>
|
||||
{% endif %}
|
||||
{% if priv == 'deny' %}
|
||||
<span class="iconfont icon-lock"></span>
|
||||
{% if lesson.me.owned == 0 %}
|
||||
<span class="lock"><i class="iconfont icon-lock"></i></span>
|
||||
{% endif %}
|
||||
<span class="live" title="{{ date('Y-m-d H:i',lesson.attrs.start_time) }}">{{ live_status_info(lesson) }}</span>
|
||||
</a>
|
||||
{% if lesson.attrs.playback.ready == 1 %}
|
||||
<span class="flag flag-playback">回放</span>
|
||||
{% endif %}
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="flag flag-free">试听</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="live-status">{{ live_status_info(lesson) }}</span>
|
||||
<span class="live-time">{{ date('Y-m-d H:i',lesson.attrs.start_time) }}</span>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro read_lesson_info(lesson) %}
|
||||
{% set url = lesson.me.owned ? url({'for':'home.chapter.show','id':lesson.id}) : '' %}
|
||||
{% set priv = lesson.me.owned ? 'allow' : 'deny' %}
|
||||
<a class="{{ priv }} view-lesson" href="javascript:" data-url="{{ url }}">
|
||||
<i class="layui-icon layui-icon-read"></i>
|
||||
<div class="left">
|
||||
<span class="model"><i class="iconfont icon-article"></i></span>
|
||||
<span class="title">{{ lesson.title }}</span>
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="iconfont icon-trial"></span>
|
||||
{% endif %}
|
||||
{% if lesson.me.duration > 0 %}
|
||||
<span class="study-time" title="学习时长：{{ lesson.me.duration|duration }}"><i class="layui-icon layui-icon-time"></i></span>
|
||||
{% endif %}
|
||||
{% if priv == 'deny' %}
|
||||
<span class="iconfont icon-lock"></span>
|
||||
{% if lesson.me.owned == 0 %}
|
||||
<span class="lock"><i class="iconfont icon-lock"></i></span>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="flag flag-free">试读</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="size"></span>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro offline_lesson_info(lesson) %}
|
||||
<a class="deny view-lesson" href="javascript:">
|
||||
<i class="layui-icon layui-icon-user"></i>
|
||||
<div class="left">
|
||||
<span class="model"><i class="layui-icon layui-icon-user"></i></span>
|
||||
<span class="title">{{ lesson.title }}</span>
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="layui-badge free-badge">试听</span>
|
||||
{% if lesson.me.owned == 0 %}
|
||||
<span class="lock"><i class="iconfont icon-lock"></i></span>
|
||||
{% endif %}
|
||||
<span class="live" title="{{ date('Y-m-d H:i',lesson.attrs.start_time) }}">{{ offline_status_info(lesson) }}</span>
|
||||
</a>
|
||||
{% if lesson.free == 1 %}
|
||||
<span class="flag flag-free">试听</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="right">
|
||||
<span class="live-status">{{ offline_status_info(lesson) }}</span>
|
||||
<span class="live-time">{{ date('Y-m-d H:i',lesson.attrs.start_time) }}</span>
|
||||
</div>
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro live_status_info(lesson) %}
|
||||
{% if lesson.attrs.stream.status == 'active' %}
|
||||
<span class="active">{{ date('m月d日 H:i',lesson.attrs.start_time) }} 直播中</span>
|
||||
<span class="flag flag-active">直播中</span>
|
||||
{% elseif lesson.attrs.start_time > time() %}
|
||||
<span class="pending">{{ date('m月d日 H:i',lesson.attrs.start_time) }} 倒计时</span>
|
||||
<span class="flag flag-pending">倒计时</span>
|
||||
{% elseif lesson.attrs.end_time < time() %}
|
||||
<span class="finished">{{ date('m月d日 H:i',lesson.attrs.start_time) }} 已结束</span>
|
||||
<span class="flag flag-finished">已结束</span>
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
{%- macro offline_status_info(lesson) %}
|
||||
{% if lesson.attrs.start_time < time() and lesson.attrs.end_time > time() %}
|
||||
<span class="active">{{ date('m月d日 H:i',lesson.attrs.start_time) }} 授课中</span>
|
||||
<span class="flag flag-active">授课中</span>
|
||||
{% elseif lesson.attrs.start_time > time() %}
|
||||
<span class="pending">{{ date('m月d日 H:i',lesson.attrs.start_time) }} 未开始</span>
|
||||
<span class="flag flag-pending">未开始</span>
|
||||
{% elseif lesson.attrs.end_time < time() %}
|
||||
<span class="finished">{{ date('m月d日 H:i',lesson.attrs.start_time) }} 已结束</span>
|
||||
<span class="flag flag-finished">已结束</span>
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
|
||||
@ -119,4 +132,4 @@
|
||||
{% else %}
|
||||
{{ show_lesson_list(chapters[0]) }}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
@ -26,8 +26,8 @@
|
||||
{% endif %}
|
||||
<div class="item" id="toolbar-favorite">
|
||||
<div class="icon" title="{{ favorite_title }}" data-url="{{ favorite_url }}">
|
||||
<i class="layui-icon layui-icon-star icon-star {{ favorite_class }}"></i>
|
||||
<i class="layui-icon icon-star {{ favorite_class }}"></i>
|
||||
</div>
|
||||
<div class="text" data-count="{{ course.favorite_count }}">{{ course.favorite_count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -39,10 +39,10 @@ class ChapterList extends LogicService
|
||||
|
||||
if (count($chapters) == 0) return [];
|
||||
|
||||
if ($user->id > 0 && $this->courseUser) {
|
||||
if ($user->id > 0) {
|
||||
$chapters = $this->handleLoginUserChapters($chapters, $course, $user);
|
||||
} else {
|
||||
$chapters = $this->handleGuestUserChapters($chapters);
|
||||
$chapters = $this->handleGuestUserChapters($chapters, $course);
|
||||
}
|
||||
|
||||
return $chapters;
|
||||
@ -50,7 +50,11 @@ class ChapterList extends LogicService
|
||||
|
||||
protected function handleLoginUserChapters(array $chapters, CourseModel $course, UserModel $user)
|
||||
{
|
||||
$mappings = $this->getLearningMappings($course->id, $user->id, $this->courseUser->plan_id);
|
||||
$mappings = [];
|
||||
|
||||
if ($this->courseUser) {
|
||||
$mappings = $this->getLearningMappings($course->id, $user->id, $this->courseUser->plan_id);
|
||||
}
|
||||
|
||||
foreach ($chapters as &$chapter) {
|
||||
foreach ($chapter['children'] as &$lesson) {
|
||||
@ -61,23 +65,30 @@ class ChapterList extends LogicService
|
||||
'owned' => $owned ? 1 : 0,
|
||||
'logged' => 1,
|
||||
];
|
||||
// 如果课程是免费的，但又设置了课时试听，清除试听标识
|
||||
if ($course->market_price == 0 && $lesson['free'] == 1) {
|
||||
$lesson['free'] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return $chapters;
|
||||
}
|
||||
|
||||
protected function handleGuestUserChapters(array $chapters)
|
||||
protected function handleGuestUserChapters(array $chapters, CourseModel $course)
|
||||
{
|
||||
foreach ($chapters as &$chapter) {
|
||||
foreach ($chapter['children'] as &$lesson) {
|
||||
$owned = ($this->ownedCourse || $lesson['free'] == 1) && $lesson['published'] == 1;
|
||||
$lesson['me'] = [
|
||||
'progress' => 0,
|
||||
'duration' => 0,
|
||||
'logged' => 0,
|
||||
'owned' => $owned ? 1 : 0,
|
||||
'owned' => 0,
|
||||
];
|
||||
// 如果课程是免费的，但又设置了课时试听，清除试听标识
|
||||
if ($course->market_price == 0 && $lesson['free'] == 1) {
|
||||
$lesson['free'] = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -100,7 +100,7 @@ class CourseInfo extends LogicService
|
||||
|
||||
if ($this->courseUser) {
|
||||
$me['reviewed'] = $this->courseUser->reviewed ? 1 : 0;
|
||||
$me['progress'] = $this->courseUser->progress ? 1 : 0;
|
||||
$me['progress'] = $this->courseUser->progress;
|
||||
$me['plan_id'] = $this->courseUser->plan_id;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1039,50 +1039,73 @@
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.lesson-item {
|
||||
position: relative;
|
||||
padding: 0 10px;
|
||||
line-height: 35px;
|
||||
.lesson-list .allow {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.lesson-item a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lesson-item .deny {
|
||||
.lesson-list .deny {
|
||||
cursor: default;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.lesson-item .title {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.lesson-item .icon-trial {
|
||||
color: red;
|
||||
font-size: 24px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.lesson-item .duration, .lesson-item .live {
|
||||
top: 0;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.lesson-item .live .active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.lesson-item .study-time {
|
||||
color: green;
|
||||
.lesson-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.lesson-item:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.lesson-item .title {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.lesson-item .model {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.lesson-item .lock {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.lesson-item .study-time {
|
||||
margin-right: 5px;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.lesson-item .flag {
|
||||
padding: 2px 3px;
|
||||
margin-right: 5px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.lesson-item .flag-free {
|
||||
border: 1px solid red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.lesson-item .flag-playback {
|
||||
border: 1px solid orange;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.lesson-item .flag-pending {
|
||||
border: 1px solid green;
|
||||
color: green;
|
||||
}
|
||||
|
||||
.lesson-item .flag-active {
|
||||
border: 1px solid red;
|
||||
color: red;
|
||||
}
|
||||
|
||||
.lesson-item .flag-finished {
|
||||
border: 1px solid gray;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.package-item {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
@ -1173,15 +1196,13 @@
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.review-card,
|
||||
.consult-card,
|
||||
.answer-card {
|
||||
.review-card .info,
|
||||
.consult-card .info {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.review-card .rating,
|
||||
.consult-card .more,
|
||||
.answer-card .accepted {
|
||||
.consult-card .more {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -1205,11 +1226,6 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.review-card .more {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-card .layui-card-header {
|
||||
text-align: center;
|
||||
}
|
||||
@ -1305,25 +1321,30 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-chapter-list .chapter-title {
|
||||
.sidebar-chapter {
|
||||
padding-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar-lesson-list {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.sidebar-lesson-list .lesson-title {
|
||||
.sidebar-lesson {
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.lesson-title .active {
|
||||
.sidebar-lesson:hover {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.sidebar-lesson a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar-lesson .active {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.lesson-title .deny {
|
||||
.sidebar-lesson .deny {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
|
||||
@ -62,7 +62,7 @@ layui.use(['jquery', 'layer', 'helper'], function () {
|
||||
/**
|
||||
* 浏览章节
|
||||
*/
|
||||
$('body').on('click', '.view-lesson', function () {
|
||||
$('body').on('click', '.lesson-item', function () {
|
||||
if ($(this).hasClass('deny')) {
|
||||
return false;
|
||||
}
|
||||
@ -140,4 +140,4 @@ layui.use(['jquery', 'layer', 'helper'], function () {
|
||||
helper.ajaxLoadHtml($sdRelated.data('url'), $sdRelated.attr('id'));
|
||||
}
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user