移动端-客栈学院详情

assets/css/learn/detail/_id.scss

@@ -527,154 +527,448 @@
     padding-bottom: calc(56px + 8px + env(safe-area-inset-bottom));
     display: flex;
     flex-direction: column;
-    .image-list {
+    .video-container {
+      width: 100%;
+      height: 4.2rem;
+      border: 1px solid green;
+      position: relative;
+      background: rgba(0,0,0,.5);
+      .player {
         width: 100%;
-        height: calc(100vw * 9 / 16);
-        .image-swiper {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
+        height: 4.2rem;
+      }
+      .video-cover {
+        background-size: cover;
+        background-position: center;
+        height: 4.2rem;
+        .play {
+          width: 1.04rem;
+          height: 1.04rem;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
         }
-        .swiper-wrapper {
-            width: 100%;
-            height: 100%;
-            .swiper-slide {
-                width: 100%;
-                height: 100%;
-                img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: scale-down;
-                }
-            }
+      }
+    }
+    .tabs {
+      height: 44px;
+      background: #fff;
+      border-bottom: 1px solid #f4f4f4;
+      display: flex;
+      span {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex: 1;
+        position: relative;
+        font-size: 0.3rem;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        text-align: right;
+        color: #888;
+        text-align: center;
+      }
+      span.active {
+        color: #222;
+        font-weight: 600;
+      }
+      span.active:after {
+        content: '';
+        width: 0.3rem;
+        height: 0.06rem;
+        background: #308eff;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        -webkit-transform: translate(-50%, 0);
+        transform: translate(-50%, 0);
+      }
+    }
+    .intro,
+    .directory,
+    .board {
+      margin-bottom: 0.24rem;
+    }
+    .intro-info {
+      margin-top: 0.24rem;
+      background: #fff;
+      padding: 0 0.24rem;
+      .title {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.24rem 0;
+        align-items: center;
+        .text {
+          font-size: 0.32rem;
+          font-family: PingFangSC, PingFangSC-Semibold;
+          font-weight: 600;
+          color: #222;
         }
-        .swiper-pagination {
-            position: absolute;
-            bottom: 10px;
-            left: auto !important;
+        .icon {
+          width: 0.44rem;
+          height: 0.44rem;
+          display: inline-block;
+        }
+      }
+      .info {
+        font-size: 0.24rem;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        color: #666;
+        line-height: 0.4rem;
+      }
+      .msg {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0.24rem 0;
+        .now-price {
+          font-size: 0.3rem;
+          font-family: PingFangSC, PingFangSC-Semibold;
+          font-weight: 600;
+          color: #f60;
+        }
+        .old-price {
+          font-size: 0.24rem;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          text-decoration:  line-through;
+          color: #999;
+          margin-left: 0.08rem;
+        }
+        .look {
+          font-size: 0.24rem;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          color: #666;
+          margin-right: 0.32rem;
+        }
+        .right {
+          display: flex;
+          align-items: center;
+          .img {
+            width: 0.4rem;
+            height: 0.4rem;
+            border: 0.04rem solid #fff;
+            border-radius: 50%;
+            background: #f4f4f4;
+            margin-left: -0.2rem;
+            background: #f4f4f4;
+            color: #bbb;
+            display: inline-block;
+          }
+          .text {
+            vertical-align:top;
+            font-size: 0.24rem;
+            font-family: PingFangSC, PingFangSC-Regular;
+            line-height: 0.16rem;
+            text-align: center;
+          }
         }
+      }
     }
-    .learn-info {
-        width: 100%;
-        height: 105px;
-        padding: 15px 10px;
-        background: #ffffff;
-        border-radius: 10px 10px 0px 0px;
-        .learn-title {
-            width: 100%;
-            height: 25px;
-            line-height: 25px;
-            font-size: 18px;
-            font-family: PingFangSC, PingFangSC-Semibold;
-            font-weight: 600;
-            color: #222222;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+    .lecturer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: #fff;
+      margin: 0.24rem;
+      padding: 0 0.24rem;
+      height: 1.76rem;
+      border-radius: 0.08rem;
+      .picture {
+        position: relative;
+        width: 0.92rem;
+        height: 0.92rem;
+        margin-top: -0.24rem;
+        img {
+          width: 0.92rem;
+          height: 0.92rem;
+          border-radius: 50%;
         }
-        .userinfo-wrapper {
-            margin-top: 15px;
-            width: 100%;
-            height: 34px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            .left-info {
-                display: flex;
-                align-items: center;
-                .avatar {
-                    width: 34px;
-                    height: 34px;
-                    border-radius: 50%;
-                    overflow: hidden;
-                }
-                .nickname {
-                    margin-left: 9px;
-                    height: 20px;
-                    line-height: 20px;
-                    font-size: 14px;
-                    font-family: PingFangSC, PingFangSC-Medium;
-                    font-weight: 500;
-                    color: #222222;
-                }
-            }
+        span {
+          width: 0.84rem;
+          height: 0.4rem;
+          display: block;
+          line-height: 0.4rem;
+          text-align: center;
+          background: #308eff;
+          color: #fff;
+          border-radius: 0.2rem;
+          font-size: 0.24rem;
+          font-family: PingFangSC, PingFangSC-Semibold;
+          position: absolute;
+          left: 0.06rem;
+          bottom: -0.28rem;
+        }
+      }
+      .info {
+        flex: 1;
+        margin-left: 0.24rem;
+        margin-right: 0.2rem;
+        .name {
+          font-size: 0.3rem;
+          font-family: PingFangSC, PingFangSC-Semibold;
+          font-weight: 600;
+          color: #222;
         }
+        p {
+          font-size: 0.24rem;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          color: #666;
+          line-height: 0.36rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3; //行数
+          -webkit-box-orient: vertical;
+        }
+      }
+      .go {
+        width: 0.28rem;
+        height: 0.28rem;
+      }
     }
-    .learn-content {
-        margin-top: 10px;
-        width: 100%;
-        background: #ffffff;
-        .ql-editor {
-            padding: 20px 12px 30px;
+    .directory {
+      margin-top: 0.24rem;
+      .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.24rem;
+        .title {
+          display: flex;
+          flex-direction: column;
+        }
+        .text {
+          font-size: 0.3rem;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          color: #333;
+        }
+        .timer {
+          font-size: 0.22rem;
+          font-family: PingFangSC, PingFangSC-Regular;
+          font-weight: 400;
+          color: #999;
+        }
+        .is-free {
+          width: 44px;
+          height: 24px;
+          border-radius: 0.06rem;
+          font-size: 0.22rem;
+          font-family: PingFangSC, PingFangSC-Medium;
+          font-weight: 500;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .free {
+          border: 1px solid #27bb6f;
+          color: #27bb6f;
+        }
+        .charge {
+          width: 46px;
+          height: 26px;
+          background: rgba(48,142,255,0.11);
+          color: #308EFF;
         }
+      }
     }
-    .pay-wrapper {
-        position: fixed;
-        bottom: 0;
-        left: 0;
+    .board {
+      margin-top: 0.24rem;
+    }
+    .course-intro {
+      background: #fff;
+      margin-top: 0.24rem;
+      margin: 0.24rem;
+      border-radius: 0.16rem;
+      .img-info {
+        padding: 0.24rem;
+        font-size: 0.28rem;
+        font-family: PingFangSC, PingFangSC-Regular;
+        font-weight: 400;
+        color: #222;
+        line-height: 0.48rem;
+      }
+    }
+    .common-title {
+      font-size: 0.32rem;
+      font-family: PingFangSC, PingFangSC-Semibold;
+      font-weight: 600;
+      color: #222;
+      padding: 0.24rem;
+      display: block;
+      position: relative;
+    }
+    .common-title:before {
+      content: '';
+      width: 0.04rem;
+      height: 0.28rem;
+      background: #308EFF;
+      position: absolute;
+      left: 0;
+      top: 0.28rem;
+    }
+    .pay-content {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1.4rem;
+      box-shadow: 0px -0.5px 0px 0px #e6e6e6 inset;
+      background: #fff;
+      display: flex;
+      .btn-study {
+        display: flex;
+        align-self: center;
+        padding: 0 0.4rem;
+        width: 100vw;
+        .btn {
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 0.84rem;
+          background: #308eff;
+          border-radius: 0.16rem;
+          font-size: 0.3rem;
+          font-family: PingFangSC, PingFangSC-Medium;
+          font-weight: 500;
+          color: #fff;
+        }
+      }
+      .btn-buy {
         width: 100%;
-        height: calc(56px + constant(safe-area-inset-bottom));
-        height: calc(56px + env(safe-area-inset-bottom));
-        padding: 0 10px;
-        background: #ffffff;
         display: flex;
         justify-content: space-between;
-        .price-info {
-            flex-shrink: 0;
-            margin-top: 10px;
-            display: flex;
-            flex-direction: column;
-            .price-text {
-                height: 18px;
-                line-height: 18px;
-                font-size: 19px;
-                font-family: PingFangSC, PingFangSC-Semibold;
-                font-weight: 600;
-                color: #ff6600;
-            }
-            span {
-                height: 18px;
-                line-height: 18px;
-                font-size: 12px;
-                font-family: PingFangSC, PingFangSC-Regular;
-                font-weight: 400;
-                color: #999999;
-            }
+        align-items: center;
+        padding: 0 0.24rem;
+        .service {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          img {
+            width: 0.5rem;
+            height: 0.46rem;
+          }
+          span {
+            font-size: 0.23rem;
+            font-family: PingFangSC, PingFangSC-Regular;
+            font-weight: 400;
+            color: #666;
+          }
         }
-        .pay-btn {
-            flex-shrink: 0;
-            margin-top: 6px;
-            width: 122px;
-            height: 44px;
+        .price {
+          display: flex;
+          align-items: center;
+          .new-price {
+            font-size: 0.38rem;
+            font-family: PingFangSC, PingFangSC-Semibold;
+            font-weight: 600;
+            color: #f60;
+            margin-right: 0.24rem;
+          }
+          .btn {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 2.4rem;
+            height: 0.84rem;
             background: #308eff;
-            border-radius: 6px;
-            font-size: 15px;
+            border-radius: 0.16rem;
+            font-size: 0.3rem;
             font-family: PingFangSC, PingFangSC-Medium;
             font-weight: 500;
-            color: #ffffff;
-        }
-        .chat-content {
-            flex: 1;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            .chat-btn {
-                display: flex;
-                align-items: center;
-                .chat-icon {
-                    width: 24px;
-                    height: 24px;
-                    margin-right: 4px;
-                }
-                .chat-word {
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: rgba(23, 34, 47, 1);
-                    margin-right: 12px;
-                }
-            }
+            color: #fff;
+          }
         }
+      }
     }
+    // .image-list {
+    //     width: 100%;
+    //     height: calc(100vw * 9 / 16);
+    //     .image-swiper {
+    //         position: relative;
+    //         width: 100%;
+    //         height: 100%;
+    //         display: flex;
+    //         justify-content: center;
+    //     }
+    //     .swiper-wrapper {
+    //         width: 100%;
+    //         height: 100%;
+    //         .swiper-slide {
+    //             width: 100%;
+    //             height: 100%;
+    //             img {
+    //                 width: 100%;
+    //                 height: 100%;
+    //                 object-fit: scale-down;
+    //             }
+    //         }
+    //     }
+    //     .swiper-pagination {
+    //         position: absolute;
+    //         bottom: 10px;
+    //         left: auto !important;
+    //     }
+    // }
+    // .learn-info {
+    //     width: 100%;
+    //     height: 105px;
+    //     padding: 15px 10px;
+    //     background: #ffffff;
+    //     border-radius: 10px 10px 0px 0px;
+    //     .learn-title {
+    //         width: 100%;
+    //         height: 25px;
+    //         line-height: 25px;
+    //         font-size: 18px;
+    //         font-family: PingFangSC, PingFangSC-Semibold;
+    //         font-weight: 600;
+    //         color: #222222;
+    //         overflow: hidden;
+    //         text-overflow: ellipsis;
+    //         white-space: nowrap;
+    //     }
+    //     .userinfo-wrapper {
+    //         margin-top: 15px;
+    //         width: 100%;
+    //         height: 34px;
+    //         display: flex;
+    //         align-items: center;
+    //         justify-content: space-between;
+    //         .left-info {
+    //             display: flex;
+    //             align-items: center;
+    //             .avatar {
+    //                 width: 34px;
+    //                 height: 34px;
+    //                 border-radius: 50%;
+    //                 overflow: hidden;
+    //             }
+    //             .nickname {
+    //                 margin-left: 9px;
+    //                 height: 20px;
+    //                 line-height: 20px;
+    //                 font-size: 14px;
+    //                 font-family: PingFangSC, PingFangSC-Medium;
+    //                 font-weight: 500;
+    //                 color: #222222;
+    //             }
+    //         }
+    //     }
+    // }
+    // .learn-content {
+    //     margin-top: 10px;
+    //     width: 100%;
+    //     background: #ffffff;
+    //     .ql-editor {
+    //         padding: 20px 12px 30px;
+    //     }
+    // }
 }

pages/frontend/learn/detail/_id.vue

@@ -189,7 +189,110 @@
 
         </div>
         <div class="learn-detail-wrapper-mobile" v-else>
-            移动端详情
+            <!-- 视频播放 -->
+            <div class="video-container">
+              <div class="video-cover" :style="`${'background-image:url('+learnDetail.info.img+')'}`" v-show="!isInitPlayer">
+                <img class="play" @click="handleClickPlayIcon" src="@/assets/img/learn/video@2x.png" alt="play">
+              </div>
+              <div id="player" class="" v-show="isInitPlayer"></div>
+            </div>
+            <div class="tabs">
+              <span :class="tabActive==0 ? 'active' :''" @click="tabActive=0">介绍</span>
+              <span :class="tabActive==1 ? 'active' :''" @click="tabActive=1">目录</span>
+              <span :class="tabActive==2 ? 'active' :''" @click="tabActive=2" v-if="learnDetail.info.is_buy">公告</span>
+            </div>
+            <!-- 介绍 -->
+            <div class="intro" v-show="tabActive==0">
+              <div class="intro-info">
+                <div class="title">
+                  <span class="text">{{learnDetail.info.title}}</span>
+                  <span class="collect" @click="collectFun">
+                    <img class="icon" v-if="collectObj.resultCode==1" src="@/assets/img/learn/collect1@2x.png" alt="collect"/>
+                    <img class="icon" v-else src="@/assets/img/learn/collect2@2x.png" alt="collect"/>
+                  </span>
+                </div>
+                <p class="info">{{learnDetail.info.desc}}</p>
+                <div class="msg">
+                  <div class="left">
+                    <span v-if="learnDetail.info.price==0" class="now-price">免费</span>
+                    <span v-if="learnDetail.info.price>0" class="now-price">￥{{ learnDetail.info.price.toFixed(2) }}</span>
+                    <span v-if="learnDetail.info.price>0 && learnDetail.info.yprice>0" class="old-price">￥{{ learnDetail.info.yprice.toFixed(2) }}</span>
+                  </div>
+                  <div class="right">
+                    <span class="look">{{learnDetail.info.buy_num}}人在看</span>
+                    <div>
+                      <img class="img" :src="defaultImg" v-real-img="item.img" alt="" v-for="(item,index) in learnDetail.info.userimg" :key="index">
+                      <span class="img text" v-if="learnDetail.info.userimg.length==4">...</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="lecturer">
+                <div class="picture">
+                  <img :src="defaultImg" v-real-img="learnDetail.teacher.img" :alt="learnDetail.teacher.name">
+                  <span>讲师</span>
+                </div>
+                <div class="info">
+                  <span class="name">{{ learnDetail.teacher.name }}</span>
+                  <p v-html="learnDetail.teacher.content"></p>
+                </div>
+                <img class="go" src="@/assets/img/learn/right@2x.png" />
+              </div>
+              <div class="course-intro">
+                <span class="common-title">课程介绍</span>
+                <div class="img-info">
+                  <p v-html="learnDetail.content.content"></p>
+                  <!-- <img src="@/assets/img/credit/12.png" alt="">
+                  <p>学点课堂专注数字技能培训及职场就业课程开发，讲师来自于行业一线，
+                    拥有7年以上的工作和教学经验，通过专业的课程教学与学点课堂专注数字技能培训及职场就业课程开发，讲师来自于行业一线，
+                    拥有7年以上的工作和教学经验，通过专业的课程教学与</p> -->
+                </div>
+              </div>
+            </div>
+            <!-- 目录 -->
+            <div class="directory" v-show="tabActive==1">
+              <van-collapse v-model="activeNames" v-if="learnDetail.video && learnDetail.video.length>0">
+                <van-collapse-item :title="`第${index+1}章: ${catalogItem.video_name}`" :name="index+1" v-for="(catalogItem, index) in learnDetail.video" :key="index">
+                  <template v-if="catalogItem.list && catalogItem.list.length>0">
+                    <div class="item" v-for="(item, i) in  catalogItem.list" :key="item.id" @click="handleClickLearnItem(item.id)">
+                      <div class="title">
+                        <span class="text">{{ item.video_name }}</span>
+                        <span class="timer">{{ item.m<10 ? '0'+item.m : item.m }}:{{ item.s<10 ? '0'+item.s : item.s }}</span>
+                      </div>
+                      <span class="is-free" :class="item.checked==1 ? 'free' : 'charge'">{{ item.checked==1 ? '免费' : '收费' }}</span>
+                    </div>
+                  </template>
+                  <div v-else style="text-align:center;">
+                    <span>暂无课程</span>
+                  </div>
+                </van-collapse-item>
+              </van-collapse>
+            </div>
+
+            <!-- 公告 -->
+            <div class="board" v-show="tabActive==2">
+              <div class="course-intro">
+                <span class="common-title">公告</span>
+                <div class="img-info" v-html="learnDetail.content.notice_msg"></div>
+              </div>
+            </div>
+            <div class="pay-content">
+              <div v-if="!learnDetail.info.is_buy" class="btn-buy">
+                <div class="service">
+                  <img src="@/assets/img/learn/service@2x.png" alt="">
+                  <span>咨询客服</span>
+                </div>
+                <div class="price">
+                  <span class="new-price" v-if="learnDetail.info.price==0">免费</span>
+                  <span class="new-price" v-if="learnDetail.info.price!=0">￥{{learnDetail.info.price.toFixed(2)}}</span>
+                  <span class="btn" v-if="learnDetail.info.price==0" @click="goBtn">免费购买</span>
+                  <span class="btn" v-if="learnDetail.info.price!=0" @click="goBtn">立即购买</span>
+                </div>
+              </div>
+              <div v-if="learnDetail.info.is_buy" class="btn-study">
+                <span class="btn" @click="goBtn">继续学习</span>
+              </div>
+            </div>
         </div>
     </div>
 </template>
@@ -208,7 +311,10 @@ export default {
             isWeixinApp: true,
             collapseName: 1,
             tabActive: 0,
-            defaultImg: require('@/assets/img/common/empty@2x.png')
+            defaultImg: require('@/assets/img/common/empty@2x.png'),
+            activeNames: ['1'],
+            isInitPlayer: false, // 是否已初始化播放器
+            player: null // 播放器对象
         }
     },
     components: {
@@ -241,10 +347,10 @@ export default {
             // 引入三方资源
             link: [
                 {rel: "canonical", href: canonical},
-                // {rel: "stylesheet", href: "https://g.alicdn.com/de/prismplayer/2.9.13/skins/default/aliplayer-min.css"}
+                {rel: "stylesheet", href: "https://g.alicdn.com/de/prismplayer/2.9.13/skins/default/aliplayer-min.css"}
             ],
             script: [
-                // { src: "https://g.alicdn.com/de/prismplayer/2.9.13/aliplayer-min.js" }
+                { src: "https://g.alicdn.com/de/prismplayer/2.9.13/aliplayer-min.js" }
             ]
         }
         if (metaLocation) {
@@ -281,6 +387,30 @@ export default {
       this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
     },
     methods: {
+      /**
+       * 初始化播放器
+       */
+      _initPlayer (item_id, playAuth) {
+        const player = new Aliplayer({
+          id: "player",
+          width: "100%",
+          height: "100%",
+          useH5Prism: true,
+          autoplay: true,
+          // 播放方式二：推荐点播用户使用
+          vid : item_id,
+          playauth : playAuth,
+          cover: "",
+          encryptType: 1, //当播放私有加密流时需要设置。
+          // skinLayout: [
+          //     { "name": "bigPlayButton", "align": "cc", "x": 30, "y": 80 }
+          // ]
+        }, function (player) {
+          console.log("The player is created.")
+        });
+        this.player = player
+        this.isInitPlayer = true
+      },
       // 是否收藏
       collectFun(){
         let path = location.pathname // "/l/68"
@@ -298,7 +428,11 @@ export default {
             let { data, status, info } = res
             if(status === 1){
               this.collectObj.resultCode = 0
-              this.$message.success('取消收藏');
+              if(!this.mobile){
+                this.$message.success('取消收藏');
+              }else{
+                this._toast('收藏成功')
+              }
             }
           })
         }else{
@@ -307,7 +441,11 @@ export default {
             let { data, status, info } = res
             if(status === 1){
               this.collectObj.resultCode = 1
-              this.$message.success('收藏成功');
+              if(!this.mobile){
+                this.$message.success('收藏成功');
+              }else{
+                this._toast('收藏成功')
+              }
             }
           })
         }
@@ -345,6 +483,71 @@ export default {
           this.cnzz("客栈学院","课程详情+继续学习","");
           window.location.href = '/lv/'+ this.sale_id
         }
+      },
+      /**
+       * 切换正在播放的视频
+       */
+      _replayVideo (item_id, playAuth) {
+          this.player.replayByVidAndPlayAuth(item_id, playAuth)
+      },
+       /**
+       * 获取视频播放凭证
+       * @param {Number} item_id - 视频 id
+       */
+      _getVideoPlayAuth (item_id) {
+        let params = {
+          sale_id: this.sale_id,
+          id: item_id
+        }
+        const self = this
+        this.$axios.$post('/api/sale/authVideo', params).then(res => {
+          console.log('打印看啊看啊=====》',res)
+          if (Number(res.status) === 1) {
+              if (Number(res.data.valid) === 1) {
+                // 已购买，成功获取播放凭证
+                const playAuth = (res.data.paly_data && res.data.paly_data.PlayAuth) || ''
+                if (self.isInitPlayer) {
+                    // 已初始化播放器，切换播放视频
+                    self._replayVideo(item_id, playAuth)
+                } else {
+                    // 未初始化播放器，初始化
+                    self._initPlayer(item_id, playAuth)
+                }
+              } else {
+                // 未购买
+                if(!this.mobile){
+                  this.$message.info('请先购买课程')
+                }else{
+                  this._toast('请先购买课程')
+                }
+              }
+          }
+        })
+      },
+      /**
+       * 点击封面图的播放按钮：
+       * 1. 判断用户是否已支付，若已支付则获取第一集视频，若未支付尝试播放试看视频
+       * 2. 若不存在试看视频，则做提示
+       */
+      handleClickPlayIcon(){
+        if (this.learnDetail.info.is_buy) {
+            // 已购买，尝试播放第一集
+            this._getVideoPlayAuth(this.learnDetail.video[0].list[0].id || '')
+        } else {
+            // 未购买，没有试看视频，做提示
+            if(!this.mobile){
+              this.$message.info('请先购买课程')
+            }else{
+              this._toast('请先购买课程')
+            }
+        }
+      },
+      /**
+       * 点击目录的每一集：
+       * 尝试获取该集的播放凭证
+       */
+      handleClickLearnItem (id) {
+        this._getVideoPlayAuth(id)
       }
     }
 }