proginn-frontend/pages/frontend/learn/detail/_id.vue

<template>
    <ErrorPage404 v-if="!isExist"></ErrorPage404>
    <div v-else :class="mobile ? 'mobileMain' : 'mobileWeb'" :style="{marginTop: mainMarginTop}">
        <div class="learn-detail-wrapper" v-if="!mobile">
          <!--面包屑-->
          <el-breadcrumb class="learn-breadcrumb">
            <el-breadcrumb-item ><a href="/">首页</a></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/learn">全部课程</a></el-breadcrumb-item>
            <el-breadcrumb-item>课程详情</el-breadcrumb-item>
          </el-breadcrumb>
          <!--视频播放-->
          <div class="learn-video">
            <!--已购买-->
            <div class="purchased">
              <a :href="`${'/lv/'+sale_id}`" :style="`${'background-size:cover;background-position:center;background-image:url('+learnDetail.info.img+')'}`" class="video">
                <img class="play" @click="cnzz('客栈学院','课程详情+播放按钮PLAY','')" src="@/assets/img/learn/video@2x.png" alt="play">
              </a>
              <div class="intro">
                <div class="title">
                  <p class="text">{{ learnDetail.info.title }}</p>
                  <div class="collect-share">
                    <span class="common" @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 class="txt" :style="{color: collectObj.resultCode==1 ? '#308EFF' : ''}">{{collectObj.resultCode==1 ? '已收藏' : '收藏'}}</span>
                    </span>
                    <!-- <span class="common">
                      <img class="icon" src="@/assets/img/learn/share@2x.png" alt="share"/>
                      <span class="txt">分享</span>
                    </span> -->
                  </div>
                </div>
                <div class="lectruer">
                  {{ learnDetail.info.buy_num }}人学过<span class="line">|</span><span>讲师：</span><span  class="txt"><a :href="`/wo/${learnDetail.info.uid}`">{{ learnDetail.teacher.name }}</a></span>
                </div>
                <div class="price">
                  <span v-if="learnDetail.info.price==0" class="new">免费</span>
                  <span v-if="learnDetail.info.price>0" class="new first-letter">￥{{ learnDetail.info.price.toFixed(2) }}</span>
                  <span v-if="learnDetail.info.price>0 && learnDetail.info.yprice>0" class="old">原价￥{{ learnDetail.info.yprice.toFixed(2) }}</span>
                </div>
                <div class="btns">
                  <div v-if="!learnDetail.info.is_buy">
                    <el-button type="primary" class="go-buy" v-if="learnDetail.info.price==0"  @click="goBtn">
                      免费购买
                    </el-button>
                    <el-button type="primary"  class="go-buy" v-else @click="goBtn">立即购买</el-button>
                  </div>

                  <div v-if="learnDetail.info.is_buy">
                    <el-button type="primary"  class="go-buy" @click="goBtn">继续学习</el-button>
                  </div>

                  <div class="brief">
                    <span>{{ learnDetail.info.zj_num }}章{{ learnDetail.info.video_num }}节</span>
                    <span>{{ learnDetail.info.total_time }}分钟</span>
                    <span>{{ learnDetail.info.view_num }}阅读</span>
                    <span>{{ learnDetail.info.point==1 ? '更新' : '完结' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="learn-content">
            <div class="con-left">
              <!--tab-->
              <div class="learn-tabs">
                <div class="tabs-item" :class="tabActive==0 ? 'active' :''" @click="tabActive=0">介绍</div>
                <div class="tabs-item" :class="tabActive==1 ? 'active' :''" @click="tabActive=1">目录</div>
                <div class="tabs-item" :class="tabActive==2 ? 'active' :''" @click="tabActive=2" v-if="learnDetail.info.is_buy">公告栏</div>
              </div>
              <!--介绍-->
              <div class="introduction" v-show="tabActive==0">
                <p v-html="learnDetail.content.content"></p>
              </div>
              <!--目录-->
              <div class="catalog" v-show="tabActive==1">
                <template v-if="learnDetail.video && learnDetail.video.length>0">
                  <div class="catalog-item" v-for="(catalogItem, index) in learnDetail.video" :key="index">
                    <span class="title">第{{ index+1 }}章 {{ catalogItem.video_name }}</span>
                    <div>
                      <template v-if="catalogItem.list && catalogItem.list.length>0">
                        <a class="li" v-for="(item, i) in  catalogItem.list" :key="i" :href="`${'/lv/'+sale_id}`">
                          <div>
                            <span class="is-charge" :class="item.checked==1 ? 'free' : 'charge'">{{ item.checked==1 ? '免费' : '收费' }}</span>
                            <span class="txt">课时{{ i+1 }}：{{ item.video_name }}</span>
                          </div>
                          <div>
                            <span class="is-publish publish">已发布</span>
                            <span class="timer">
                              <img src="@/assets/img/learn/play@2x.png" alt=""/>
                              {{ item.m<10 ? '0'+item.m : item.m }}:{{ item.s<10 ? '0'+item.s : item.s }}
                            </span>
                          </div>
                        </a>
                      </template>
                      <div v-else class="learn-detail-empty">
                        <img src="@/assets/img/common/empty@2x.png" alt="empty">
                        <span>暂无课程</span>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="learn-detail-empty" v-else>
                  <img src="@/assets/img/common/empty@2x.png" alt="empty">
                  <span>暂无目录</span>
                </div>
              </div>
              <!--公告-->
              <div class="introduction" v-show="tabActive==2">
                <div class="learn-detail-empty" v-if="!learnDetail.content.notice_msg">
                  <img src="@/assets/img/common/empty@2x.png" alt="empty">
                  <span>暂无公告栏</span>
                </div>
                <p v-else v-html="learnDetail.content.notice_msg"></p>
              </div>
              <!--常见问题-->
              <div class="questions">
                  <h4 class="header-txt">常见问题</h4>
                  <el-collapse v-model="collapseName">
                    <el-collapse-item title="Q1: 本课程的价格是一次性的吗？" name="1">
                      <div>A: 课程标价就是整个课程的价格，购买后观看本课程内所有章节视频不另外收费。</div>
                    </el-collapse-item>
                    <el-collapse-item title="Q2: 购买本课程提供所用软件吗？" name="2">
                      <div>A: 客栈学院只提供课程教学，不提供软件销售和下载，请同学们自行安装好正版软件进行学习。</div>
                    </el-collapse-item>
                    <el-collapse-item title="Q3: 本课程有观看有效期吗？" name="3">
                      <div>A: 课程不限有效期，购买成功即可随时观看。</div>
                    </el-collapse-item>
                    <el-collapse-item title="Q4: 本课程视频可以下载吗？" name="4">
                      <div>A: 由于视频涉及版权问题，课程视频不支持下载。</div>
                    </el-collapse-item>
                    <el-collapse-item title="Q5: 本课程买了之后有售后服务吗？" name="5">
                      <div>A: 购买完课程之后可以加售后答疑微信，课程学习过程中会有资料发送、答疑解惑等售后服务内容。</div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
            </div>
            <div class="con-right">
              <!--讲师-->
              <div class="r-lectruer">
                <div class="lectruer-img">
                  <span class="l-img">
                    <img :src="defaultImg" v-real-img="learnDetail.teacher.img" :alt="learnDetail.teacher.name">
                    <span>讲师</span>
                  </span>
                  <span class="name">{{ learnDetail.teacher.name }}</span>
                  <span class="job">{{ learnDetail.teacher.op }}</span>
                </div>
                <p class="lectruer-info" v-html="learnDetail.teacher.content"></p>
              </div>
              <!--课程咨询-->
              <div v-if="learnDetail.info.is_buy" class="class-consult">
                <h4 class="header-txt" style="font-size:14px;">课程咨询</h4>
                <div class="consult">
                  <div class="show-ewm">
                    <el-button><img src=@/assets/img/learn/consult@2x.png alt="加我咨询"/>加我咨询</el-button>
                    <div class="ewm">
                      <img class="img" src=@/assets/img/learn/ewm.jpg/>
                      <span class="text">微信扫一扫</span>
                    </div>
                  </div>
                  <p  class="info">可在此在线咨询关于课程的内容、价格、售前、售后服务等相关信息</p>
                </div>
              </div>
              <!--课程学习-->
              <!-- <div class="course-learn">
                <h4 class="header-txt" style="font-size:14px;">127人学习了该课程</h4>
                <ul>
                  <li>
                    <img src='@/assets/img/learn/video@2x.png' alt="海伦"/>
                    <span>海伦</span>
                  </li>
                  <li>
                    <img src='@/assets/img/learn/video@2x.png' alt="海伦"/>
                    <span>海伦</span>
                  </li>
                  <li>
                    <img src='@/assets/img/learn/video@2x.png' alt="海伦"/>
                    <span>海伦</span>
                  </li>
                  <li>
                    <img src='@/assets/img/learn/video@2x.png' alt="海伦"/>
                    <span>海伦</span>
                  </li>
                </ul>
              </div> -->
            </div>
          </div>

        </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" @click="goUserPage">
                <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" v-for="(catalogItem, index) in learnDetail.video" :key="index">
                  <template v-if="catalogItem.list && catalogItem.list.length>0">
                    <div class="item" v-for="item 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="questions">
              <span class="common-title">常见问题</span>
              <van-collapse v-model="questionName">
                <van-collapse-item title="Q1: 本课程的价格是一次性的吗？" name="1">
                  A: 课程标价就是整个课程的价格，购买后观看本课程内所有章节视频不另外收费。
                </van-collapse-item>
                <van-collapse-item title="Q2: 购买本课程提供所用软件吗？" name="2">
                  A: 客栈学院只提供课程教学，不提供软件销售和下载，请同学们自行安装好正版软件进行学习。
                </van-collapse-item>
                <van-collapse-item title="Q3: 本课程有观看有效期吗？" name="3">
                  A: 课程不限有效期，购买成功即可随时观看。
                </van-collapse-item>
                <van-collapse-item title="Q4: 本课程视频可以下载吗？" name="4">
                  A: 由于视频涉及版权问题，课程视频不支持下载。
                </van-collapse-item>
                <van-collapse-item title="Q5: 本课程买了之后有售后服务吗？" name="5">
                  A: 购买完课程之后可以加售后答疑微信，课程学习过程中会有资料发送、答疑解惑等售后服务内容。
                </van-collapse-item>
              </van-collapse>
            </div>
            <div class="pay-content">
              <div v-if="!learnDetail.info.is_buy" class="btn-buy">
                <div class="service" @click="btnService">
                  <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>

<script>
import { mapState } from "vuex"
import DealSeoDetail from "@/components/learn/dealSeoDetail"
import qs from "qs"
import ErrorPage404 from "@/components/error_page/404.vue"

export default {
    name: 'SeoLearnDetail',
    data () {
        return {
            baseUrl: '',
            isWeixinApp: true,
            collapseName: 1,
            tabActive: 0,
            defaultImg: require('@/assets/img/common/empty@2x.png'),
            activeNames: [0],
            questionName: [],
            isInitPlayer: false, // 是否已初始化播放器
            player: null // 播放器对象
        }
    },
    components: {
        ErrorPage404
    },
    head() {
        const {
            title = "",
            keyword = "",
            description = "",
            h1 = "",
            canonical = "",
            metaLocation
        } = this.head || {}
        let obj = {
            title: title,
            meta: [{
                name: "keywords",
                content: keyword
            }, {
                name: "description",
                content: description
            }, {
                name: "h1",
                content: h1
            }, {
                name: "viewport",
                content: "width=device-width, initial-scale=1.0, viewport-fit=cover"
            }],
            // 引入三方资源
            link: [
                {rel: "canonical", href: canonical},
                {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" }
            ]
        }
        if (metaLocation) {
            obj.meta.push({name: "location", content: metaLocation})
        }
        return obj
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader () {
            return !this.deviceType.app && !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
        },
        mainMarginTop () {
            if (this.mobile && this.showWxHeader) {
                return '0 !important'
            } else if (this.mobile) {
                return '0px !important'
            } else {
                return '20px !important'
            }
        },
    },
    async asyncData ({...params}) {
        let dealDataObj = new DealSeoDetail(params)
        let result = await dealDataObj.dealData()

        return {
            ...result
        }
    },
    mounted () {
      console.log('打印异步数据看看========>',this)
      this.baseUrl = this.$store.state.domainConfig.siteUrl
      this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
    },
    methods: {
      goUserPage(){
        window.location.href = `/wo/${this.learnDetail.info.uid}`
      },
      /**
       * 初始化播放器
       */
      _initPlayer (item_id, playAuth) {
        // console.log("dddd:",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"
        let reg = /^\/l\/\d+$/g
        let saleId = ''
        if(reg.test(path)){
          saleId = path.split('/l/')[1]
        }
        let params = {
          type: '100',
          item_id: saleId || '999'
        }
        if(this.collectObj.resultCode==1){
          this.$axios.$post('/uapi/collection/del', params).then(res => {
            let { data, status, info } = res
            if(status === 1){
              this.collectObj.resultCode = 0
              if(!this.mobile){
                this.$message.success('取消收藏');
              }else{
                this._toast('收藏成功')
              }
            }
          })
        }else{
          this.cnzz("客栈学院","课程详情+收藏","");
          this.$axios.$post('/uapi/collection/add', params).then(res => {
            let { data, status, info } = res
            if(status === 1){
              this.collectObj.resultCode = 1
              if(!this.mobile){
                this.$message.success('收藏成功');
              }else{
                this._toast('收藏成功')
              }
            }
          })
        }
      },
      /**
       * 点击购买：
       * 跳转共用支付界面
       */
      goBtn () {
        // 立即购买
        if(!this.learnDetail.info.is_buy){
          const query = {
            product_type: 505,
            product_id: this.sale_id,
            next: location.href + '?act=pay'
          }
          if (!this.userinfo || !this.userinfo.nickname) {
            this.cnzz("客栈学院","课程详情+立即购买","");
            // 未登录时 => 去登录
            if (this.deviceType.ios || this.deviceType.android) {
              window.location.href = "proginn://login?backToPage=true";
            } else {
              window.location.href = this.baseUrl + "/?loginbox=show&next=" + encodeURIComponent(location.href)
            }
          } else {
            // 已登录，跳转支付
            if (this.deviceType.ios || this.deviceType.android) {
              window.location.href = "proginn://pay?" + qs.stringify(query)
            } else {
              window.location.href = this.baseUrl + "/pay?" + qs.stringify(query)
            }
          }
        // 继续学习
        }else {
          this.cnzz("客栈学院","课程详情+继续学习","");
          this.handleClickPlayIcon();
        }
      },
      /**
       * 切换正在播放的视频
       */
      _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/auth_video', params).then(res => {
          if (Number(res.status) === 1) {
              if (!res.data.paly_data.is_buy) {//是否需要购买is_buy=true需要购买
                // 已购买，成功获取播放凭证
                const playAuth = (res.data.paly_data && res.data.paly_data.PlayAuth) || '';
                const videoId=res.data.paly_data.VideoId;
                if (self.isInitPlayer) {
                    // 已初始化播放器，切换播放视频
                    self._replayVideo(videoId, playAuth)
                } else {
                    // 未初始化播放器，初始化
                    self._initPlayer(videoId, playAuth)
                }
              } else {
                this.$message.info('请先购买课程')
              }
          }
        })
      },
      /**
       * 点击封面图的播放按钮：
       * 1. 判断用户是否已支付，若已支付则获取第一集视频，若未支付尝试播放试看视频
       * 2. 若不存在试看视频，则做提示
       */
      handleClickPlayIcon(){
        // 不管购买与否，都播放第一个
        if (!this.userinfo || !this.userinfo.nickname) {
          // 未登录时 => 去登录
          if (this.deviceType.ios || this.deviceType.android) {
            window.location.href = "proginn://login?backToPage=true";
          }
        }else{
          this._getVideoPlayAuth(this.learnDetail.video[0].list[0].id || '')
        }
      },
      /**
       * 点击目录的每一集：
       * 尝试获取该集的播放凭证
       */
      handleClickLearnItem (id) {
        this._getVideoPlayAuth(id)
      },
      btnService(){
        window.location.href = 'proginn://chat/weixin'
      }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/learn/detail/_id.scss";
</style>
<style lang="scss">
.el-collapse {
  margin: 0 16px;
}
.el-collapse-item__header {
  background: #f4f5f9;
  padding-left: 16px;
  margin-bottom: 12px;
}
.el-collapse-item__content {
  padding-bottom: 12px;
}
.learn-detail-empty {
  display: flex;
  flex-direction: column;
  height: 180px !important;
  padding-bottom: 20px;
  align-items: center;
  justify-content: center;
  img {
    width: 150px;
    height: 150px;
  }
  span {
    color: #999;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Medium;
  }
}
.wx-header-custom-detail {
    position: relative !important;
}
</style>