提交

src/components/Course/courseImage.vue

@@ -83,7 +83,14 @@ export default {
       ) {
         return this.fileBaseUrl + this.course.image;
       }
-      else if (this.course.coverImg == "" || this.course.courseImage == "" || this.course.image == "") {
+      else if (
+        this.course &&
+        this.course.images &&
+        this.course.images != ""
+      ) {
+        return this.fileBaseUrl + this.course.images;
+      }
+      else if (this.course.coverImg == "" || this.course.courseImage == "" || this.course.image == "" || this.course.images == "") {
         this.isShow = true;
         return this.webBaseUrl + "/images/bgimg/course.png";
       }

src/components/Portal/interactBar.vue

@@ -14,6 +14,12 @@
         </el-tooltip>
         <span class="interact-bar-value"> {{ data.answers}}</span>
       </div>
+      <div v-if="couseViews" style="cursor: default;" :style="`min-width: ${nodeWidth};`" class="interact-bar-btn" :class="{cursor:!readonly}">
+        <el-tooltip effect="light" content="浏览量" placement="top" :visible-arrow="false" popper-class="text-tooltip">
+          <svg-icon style="margin-right: 0;font-size:14px;" icon-class="couseViews"></svg-icon>
+        </el-tooltip>
+        <span class="interact-bar-value"> {{ data.views}}</span>
+      </div>
       <div v-if="comments" class="interact-bar-btn" :style="`min-width: ${nodeWidth};`" :class="{cursor:!readonly}">
         <el-tooltip  effect="light" content="评论" placement="left" :visible-arrow="false" popper-class="text-tooltip">
           <svg-icon style="margin-right: 0;font-size: 14px;" icon-class="comment"></svg-icon>
@@ -127,6 +133,10 @@ export default {
       type:Boolean,
       default:true
     },
+    couseViews:{
+      type:Boolean,
+      default:false
+    },
     praises:{
       type:Boolean,
       default:true

src/icons/svg/couseViews.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 14 14" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><image xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAt0lEQVQokWM8ePL8/09fvjKQAvh4uBmYSNUEAiA9TCTrggKsGuWlJRhYWVhI08jOxsagq67MYG9uyCAuIkS8RkZGCM3BzsZgqqfJYKitxsDGimk7QT9Ki4sy2JsbMQjy8ZKmERfAHwIMDAxPX75muHrrHsOv339QxDE0/v8PoX/8/MVw5eZdhhdv3mE1EEPjz1+/GC7fvMvw7OUbht9/UG3BqxEEHj59QcgHFKQcUIIlFfDxcDMAAEFzMNa23PRPAAAAAElFTkSuQmCC" height="14" width="14" data-name="图层 1"/></svg>

src/views/portal/course/Index.vue

@@ -146,14 +146,19 @@
 
                       <div class="list-active">
                          <div class="list-content">
-                           <div class="list-img"><img src="/images/list-img.png" alt=""></div>
+                           <div class="list-img">
+                            <course-image :course="item"></course-image>
+                            <span v-if="item.type < 21" class="course-type">录播课</span>
+                            <span v-if="item.type==30" class="course-type">线下课</span>
+                            <span v-if="item.type==40" class="course-type">学习项目</span>
+                          </div>
                            <div class="list-text">
-                             <h6>京东方位列世界知识产权组织2021年专利申请榜产权组织2021年专利申请榜全球</h6>
+                             <h6 class="two-line-ellipsis">{{item.name}}</h6>
                              <span>2022年2月18日</span>
                            </div>
                          </div>
                          <div class="list-bottom">
-                            点赞组件
+                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
                          </div>
                       </div>
                         
@@ -165,7 +170,7 @@
             <div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
                 <p class="portal-title-one" style="padding-bottom:12px">人气榜</p>
                 <ul>
-                   <li v-for="(item, index) in ankingList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
+                   <li class="list-info" v-for="(item, index) in ankingList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
                         <span class="portal-right-text orange-one" v-if="index==0">
                           <img src="/images/list-01.png" alt="">
                         </span>
@@ -186,13 +191,26 @@
                           <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
                           <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
                         </span>
+
+                        <div class="list-active">
+                         <div class="list-content">
+                           <div class="list-img"><course-image :course="item"></course-image></div>
+                           <div class="list-text">
+                             <h6 class="two-line-ellipsis">{{item.name}}</h6>
+                             <span>2022年2月18日</span>
+                           </div>
+                         </div>
+                         <div class="list-bottom">
+                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
+                         </div>
+                      </div>
                    </li>
                 </ul>
               </div>
               <div style="margin-top:26px" class="ranking-card portal-right-box list-bg2">
                 <p class="portal-title-one" style="padding-bottom:12px">热度榜</p>
                 <ul>
-                   <li v-for="(item, index) in hotList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
+                   <li class="list-info" v-for="(item, index) in hotList" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
                         <span class="portal-right-text orange-one" v-if="index==0">
                           <img src="/images/listred01 .png" alt="">
                         </span>
@@ -213,6 +231,19 @@
                           <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
                           <span class="portal-images-title two-line-ellipsis">{{ item.courseName }}</span>
                         </span>
+
+                        <div class="list-active">
+                         <div class="list-content">
+                           <div class="list-img"><course-image :course="item"></course-image></div>
+                           <div class="list-text">
+                             <h6 class="two-line-ellipsis">{{item.courseName}}</h6>
+                             <span>2022年2月18日</span>
+                           </div>
+                         </div>
+                         <div class="list-bottom">
+                          <interactBar :type="1" :data="item" :couseViews="true" :shares="false" :views="false"></interactBar>
+                         </div>
+                      </div>
                    </li>
                 </ul>
               </div>
@@ -792,10 +823,23 @@ export default {
     .list-img{
       width: 125px;
       height: 70px;
+      position: relative;
       img{
         width: 100%;
         height: 100%;
       }
+      .course-type{
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 20;
+        line-height: 20px;
+        font-size: 12px;
+        color: #FFFFFF;
+        padding: 0px 8px;
+        background: #387DF7;
+        border-radius: 0px 12px 0px 0px;
+      }
     }
     .list-text{
       flex: 1;
@@ -813,6 +857,15 @@ export default {
       }
     }
   }
+  .list-bottom{
+    padding-top: 10px;
+    ::v-deep .interact-bar-btns{
+      justify-content: space-between !important;
+      .interact-bar-btn{
+        margin: 0 !important;
+      }
+    }
+  }
 }
 .list-info{
   position: relative;