1.优化章节列表UI

2.优化评价UI

app/Http/Home/Views/chapter/catalog.volt

@@ -10,18 +10,17 @@
     {% 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' %}
+            {% set active = chapter.id == lesson.id ? 'active' : 'normal' %}
-            <li class="sidebar-lesson layui-elip">
+            {% set priv = lesson.me.owned == 1 ? 'allow' : 'deny' %}
-                {% if lesson.me.owned == 1 %}
+            <li class="sidebar-lesson layui-elip {{ priv }} {{ active }}" data-url="{{ url }}">
-                    <a class="{{ active }}" href="{{ url }}" title="{{ lesson.title }}">{{ model_icon(lesson.model) }} {{ lesson.title }}</a>
+                <span class="model">{{ model_icon(lesson.model) }}</span>
-                {% else %}
+                <span class="title" title="{{ lesson.title }}">{{ lesson.title }}</span>
-                    <span class="deny" title="{{ lesson.title }}">{{ model_icon(lesson.model) }} {{ lesson.title }}</span>
+                {% if lesson.me.owned == 0 %}
-                    <i class="iconfont icon-lock"></i>
+                    <span class="lock"><i class="iconfont icon-lock"></i></span>
                 {% endif %}
             </li>
         {% endfor %}

app/Http/Home/Views/course/show_catalog.volt

@@ -100,7 +100,7 @@
     {% elseif lesson.attrs.start_time > time() %}
         <span class="flag flag-pending">倒计时</span>
     {% elseif lesson.attrs.end_time < time() %}
-        <span class="flag flag-finished">已结束</span>
+        <span class="flag flag-ended">已结束</span>
     {% endif %}
 {%- endmacro %}
 
@@ -110,7 +110,7 @@
     {% elseif lesson.attrs.start_time > time() %}
         <span class="flag flag-pending">未开始</span>
     {% elseif lesson.attrs.end_time < time() %}
-        <span class="flag flag-finished">已结束</span>
+        <span class="flag flag-ended">已结束</span>
     {% endif %}
 {%- endmacro %}
 

app/Http/Home/Views/course/show_meta.volt

@@ -105,20 +105,20 @@
             {{ offline_meta_info(course) }}
         {% endif %}
     </div>
-    <div class="rating">
+    <div class="ratings">
         <p class="item">
             <span class="name">内容实用</span>
-            <span class="star">{{ star_info(course.ratings.rating1) }}</span>
+            <span class="star" id="rating1" data-value="{{ course.ratings.rating1 }}"></span>
             <span class="score">{{ "%0.1f"|format(course.ratings.rating1) }} 分</span>
         </p>
         <p class="item">
             <span class="name">简洁易懂</span>
-            <span class="star">{{ star_info(course.ratings.rating2) }}</span>
+            <span class="star" id="rating2" data-value="{{ course.ratings.rating2 }}"></span>
             <span class="score">{{ "%0.1f"|format(course.ratings.rating2) }} 分</span>
         </p>
         <p class="item">
             <span class="name">逻辑清晰</span>
-            <span class="star">{{ star_info(course.ratings.rating3) }}</span>
+            <span class="star" id="rating3" data-value="{{ course.ratings.rating3 }}"></span>
             <span class="score">{{ "%0.1f"|format(course.ratings.rating3) }} 分</span>
         </p>
     </div>

public/static/home/css/common.css

@@ -958,11 +958,7 @@
     padding-top: 5px;
 }
 
-.course-meta .rating {
+.course-meta .info .meta {
-    padding-top: 20px;
-}
-
-.course-meta p {
     line-height: 35px;
 }
 
@@ -977,6 +973,10 @@
     right: 15px;
 }
 
+.course-meta .info .item {
+    line-height: 35px;
+}
+
 .course-meta .info .key {
     margin-right: 5px;
 }
@@ -990,23 +990,32 @@
     color: red;
 }
 
-.course-meta .info .origin-price {
-    text-decoration: line-through;
-}
-
 .course-meta .info .free {
     color: green;
 }
 
-.course-meta .rating span {
+.course-meta .ratings {
+    padding-top: 5px;
+}
+
+.course-meta .ratings .item {
+    line-height: 40px;
+}
+
+.course-meta .ratings .name {
     margin-right: 5px;
 }
 
-.course-meta .rating .layui-icon {
+.course-meta .ratings .layui-rate {
-    color: orange;
+    padding: 0;
+    margin-top: -8px;
 }
 
-.course-meta .rating .score {
+.course-meta .ratings .layui-icon {
+    font-size: 16px;
+}
+
+.course-meta .ratings .score {
     color: #666;
 }
 
@@ -1101,7 +1110,7 @@
     color: red;
 }
 
-.lesson-item .flag-finished {
+.lesson-item .flag-ended {
     border: 1px solid gray;
     color: gray;
 }
@@ -1321,9 +1330,23 @@
     overflow-y: auto;
 }
 
+.sidebar-lesson-list .active {
+    color: red;
+}
+
+.sidebar-lesson-list .allow {
+    cursor: pointer;
+}
+
+.sidebar-lesson-list .deny {
+    cursor: default;
+    color: gray;
+}
+
 .sidebar-chapter {
     padding-top: 10px;
     margin-bottom: 10px;
+    font-weight: 600;
     color: #333;
 }
 
@@ -1336,18 +1359,6 @@
     background-color: #f2f2f2;
 }
 
-.sidebar-lesson a {
-    display: block;
-}
-
-.sidebar-lesson .active {
-    color: red;
-}
-
-.sidebar-lesson .deny {
-    color: gray;
-}
-
 .share .layui-icon {
     margin-right: 5px;
     cursor: pointer;

public/static/home/js/chapter.show.js

@@ -3,12 +3,6 @@ layui.use(['jquery', 'helper'], function () {
     var $ = layui.jquery;
     var helper = layui.helper;
 
-    var $commentList = $('#comment-list');
-
-    if ($commentList.length > 0) {
-        helper.ajaxLoadHtml($commentList.data('url'), $commentList.attr('id'));
-    }
-
     $('.icon-praise').on('click', function () {
         var $this = $(this);
         var $parent = $this.parent();
@@ -34,8 +28,24 @@ layui.use(['jquery', 'helper'], function () {
         });
     });
 
+    $('.sidebar-lesson').on('click', function () {
+        if ($(this).hasClass('deny')) {
+            return false;
+        }
+        var url = $(this).data('url');
+        helper.checkLogin(function () {
+            window.location.href = url;
+        });
+    });
+
     $('.icon-reply').on('click', function () {
         $('html').scrollTop($('#comment-anchor').offset().top);
     });
 
+    var $commentList = $('#comment-list');
+
+    if ($commentList.length > 0) {
+        helper.ajaxLoadHtml($commentList.data('url'), $commentList.attr('id'));
+    }
+
 });

public/static/home/js/course.show.js

@@ -1,9 +1,31 @@
-layui.use(['jquery', 'layer', 'helper'], function () {
+layui.use(['jquery', 'layer', 'rate', 'helper'], function () {
 
     var $ = layui.jquery;
     var layer = layui.layer;
+    var rate = layui.rate;
     var helper = layui.helper;
 
+    rate.render({
+        elem: '#rating1',
+        value: $('#rating1').data('value'),
+        readonly: true,
+        half: true,
+    });
+
+    rate.render({
+        elem: '#rating2',
+        value: $('#rating2').data('value'),
+        readonly: true,
+        half: true,
+    });
+
+    rate.render({
+        elem: '#rating3',
+        value: $('#rating3').data('value'),
+        readonly: true,
+        half: true,
+    });
+
     /**
      * 收藏
      */
@@ -50,9 +72,12 @@ layui.use(['jquery', 'layer', 'helper'], function () {
     });
 
     /**
-     * 购买（课程|套餐)
+     * 浏览章节
      */
-    $('body').on('click', '.btn-buy', function () {
+    $('.lesson-item').on('click', function () {
+        if ($(this).hasClass('deny')) {
+            return false;
+        }
         var url = $(this).data('url');
         helper.checkLogin(function () {
             window.location.href = url;
@@ -60,12 +85,9 @@ layui.use(['jquery', 'layer', 'helper'], function () {
     });
 
     /**
-     * 浏览章节
+     * 购买（课程|套餐)
      */
-    $('body').on('click', '.lesson-item', function () {
+    $('body').on('click', '.btn-buy', function () {
-        if ($(this).hasClass('deny')) {
-            return false;
-        }
         var url = $(this).data('url');
         helper.checkLogin(function () {
             window.location.href = url;