添加视频展示

src/views/home/learn/page-learn-child.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="contentBody" v-if="learnChildList.length > 0">
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-      <van-tabs :active="active" type="line" line-height="0px" @click="childChange">
+      <van-tabs
+        :active="active"
+        type="line"
+        line-height="0px"
+        @click="childChange"
+      >
         <!-- 子目录 -->
         <van-tab
           v-for="(tabItem, tabIndex) in learnChildList"
@@ -9,7 +14,12 @@
           :title="tabItem.name"
           :title-style="titleStyle"
         >
-          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+          <van-list
+            v-model="loading"
+            :finished="finished"
+            finished-text="没有更多了"
+            @load="onLoad"
+          >
             <van-cell
               v-for="(contentItem, contentIndex) in contentList"
               :key="contentIndex"
@@ -17,19 +27,36 @@
             >
               <div slot="default" class="contentItemDiv">
                 <div class="contentItemTitleTitleRow">
-                  <div class="contentItemTitle">{{ contentItem.name }}</div>
-                  <div v-if="contentItem.isNeedStudyToday" class="contentItemstates">今日必学</div>
+                  <div
+                    v-if="contentItem.type == 'ARTICLE'"
+                    class="contentItemTitle"
+                  >
+                    {{ contentItem.name }}
+                  </div>
+                  <div
+                    v-if="contentItem.type == 'VIDEO'"
+                    class="contentItemTitle"
+                  >
+                    {{ contentItem.name }}
+                    <img :src="getContentObj(contentItem.contents).faceUrl" />
+                  </div>
+                  <div
+                    v-if="contentItem.isNeedStudyToday"
+                    class="contentItemstates"
+                  >
+                    今日必学
+                  </div>
                 </div>
                 <div class="contentItemDescription">
                   <div class="contentItemDescriptionTime">
                     {{
-                    formateDatesFun(contentItem.createdTime) ||
-                    contentItem.createdTime
+                      formateDatesFun(contentItem.createdTime) ||
+                      contentItem.createdTime
                     }}
                   </div>
                   <div class="contentItemDescriptionStudyNeedTime">
                     所需学习时间：{{
-                    getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
+                      getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
                     }}
                   </div>
                 </div>
@@ -171,6 +198,10 @@ export default {
         Toast("刷新成功");
         this.isLoading = false;
       }, 500);
+    },
+    getContentObj(content) {
+      console.log("---" + content);
+      return JSON.parse(content);
     }
   }
 };
@@ -213,6 +244,11 @@ export default {
         flex-wrap: nowrap;
         white-space: nowrap;
       }
+      img {
+        max-width: 100%;
+        width: auto;
+        height: auto;
+      }
     }
     .contentItemDescription {
       margin-top: 0.5rem;

src/views/home/learn/page-learn-content.vue

@@ -19,18 +19,34 @@
       <div class="learn-content-body-description">
         <!-- {{ contentObj.contents }} -->
         <p
+          v-if="contentObj.type == 'ARTICLE'"
           class="p-content"
           v-html="contentObj.contents"
           @click="showImg($event)"
         >
           {{ contentObj.contents }}
         </p>
+        <div>
+          <video
+            v-if="contentObj.type == 'VIDEO'"
+            :poster="getContentObj(contentObj.contents).faceUrl"
+            :src="getContentObj(contentObj.contents).videoUrl"
+            controls="controls"
+          >
+            您的浏览器不支持 video 标签。
+          </video>
+        </div>
         <div
           class="imgDolg"
           v-show="imgPreview.show"
           @click.stop="imgPreview.show = false"
         >
-          <van-icon class="el-icon-close" id="imgDolgClose" name="cross" @click.stop="imgPreview.show = false" />
+          <van-icon
+            class="el-icon-close"
+            id="imgDolgClose"
+            name="cross"
+            @click.stop="imgPreview.show = false"
+          />
           <img @click.stop="imgPreview.show = true" :src="imgPreview.img" />
         </div>
       </div>
@@ -405,6 +421,10 @@ export default {
         this.imgPreview.img = e.target.src;
         this.imgPreview.show = true;
       }
+    },
+    getContentObj(content) {
+      console.log("---" + content);
+      return JSON.parse(content);
     }
 
   }
@@ -446,8 +466,8 @@ export default {
       word-wrap: break-word;
       letter-spacing: 0.2rem;
       .imgDolg {
-        overflow-y:scroll;
-        overflow-x:scroll;
+        overflow-y: scroll;
+        overflow-x: scroll;
         width: 100vw;
         height: 100vh;
         position: fixed;
@@ -459,14 +479,19 @@ export default {
         align-items: center;
         justify-content: center;
         #imgDolgClose {
-            position: fixed;
-            top: 20px;
-            cursor: pointer;
-            right: 2%;
-            font-size: 30px;
-            color: white;
+          position: fixed;
+          top: 20px;
+          cursor: pointer;
+          right: 2%;
+          font-size: 30px;
+          color: white;
         }
       }
+      video {
+        max-width: 100%;
+        width: auto;
+        height: auto;
+      }
     }
     .learn-content-body-time-row {
       margin-top: 1rem;
@@ -600,14 +625,19 @@ export default {
 <style lang="scss">
 .p-content {
   letter-spacing: 0.05rem;
-
 }
 .p-content img {
   max-width: 100%;
   width: auto;
   height: auto;
 }
-.p-content p,h1,h2,h3,h4,h5,h6 {
+.p-content p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: SimSun;
 }
 </style>

src/views/home/learn/page-learn-recommend.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="contentBody">
     <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
-      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="onLoad"
+      >
         <template>
           <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
             <van-swipe-item v-for="(item, index) in swiperList" :key="index">
@@ -23,19 +28,33 @@
         >
           <div slot="default" class="contentItemDiv" v-if="contentItem">
             <div class="contentItemTitleTitleRow">
-              <div class="contentItemTitle">{{ contentItem.name }}</div>
-              <div v-if="contentItem.isNeedStudyToday" class="contentItemstates">今日必学</div>
+              <div
+                v-if="contentItem.type == 'ARTICLE'"
+                class="contentItemTitle"
+              >
+                {{ contentItem.name }}
+              </div>
+              <div v-if="contentItem.type == 'VIDEO'" class="contentItemTitle">
+                {{ contentItem.name }}
+                <img :src="getContentObj(contentItem.contents).faceUrl" />
+              </div>
+              <div
+                v-if="contentItem.isNeedStudyToday"
+                class="contentItemstates"
+              >
+                今日必学
+              </div>
             </div>
             <div class="contentItemDescription">
               <div class="contentItemDescriptionTime">
                 {{
-                formateDatesFun(contentItem.createdTime) ||
-                contentItem.createdTime
+                  formateDatesFun(contentItem.createdTime) ||
+                  contentItem.createdTime
                 }}
               </div>
               <div class="contentItemDescriptionStudyNeedTime">
                 所需学习时间：{{
-                getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
+                  getTimeHoursMinuteSecondsFun(contentItem.readTimeInSec)
                 }}
               </div>
             </div>
@@ -154,6 +173,10 @@ export default {
         Toast("刷新成功");
         this.isLoading = false;
       }, 500);
+    },
+    getContentObj(content) {
+      console.log("---" + content);
+      return JSON.parse(content);
     }
   }
 };
@@ -195,6 +218,11 @@ export default {
         flex-wrap: nowrap;
         white-space: nowrap;
       }
+      img {
+        max-width: 100%;
+        width: auto;
+        height: auto;
+      }
     }
     .contentItemDescription {
       margin-top: 0.5rem;