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 :to="{ path: '/learn' }">客栈学院</el-breadcrumb-item>
            <el-breadcrumb-item>课程详情</el-breadcrumb-item>
          </el-breadcrumb>

          <!--视频播放-->
          <div class="learn-video">
            <!--已购买-->
            <div class="purchased">
              <a :href="`${'/lv/'+sale_id}`" class="video">
                <img class="play" src="@/assets/img/learn/video@2x.png" alt="play">
                <img class="bg-img" :src="defaultImg" v-real-img="learnDetail.info.img" alt="">
              </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">{{ learnDetail.teacher.name }}</span>
                </div>
                <div class="price">
                  <span class="new">￥{{ learnDetail.info.price.toFixed(2) }}</span><span class="old">原价￥{{ learnDetail.info.yprice.toFixed(2) }}</span>
                </div>
                <div class="btns">
                  <div>
                    <el-button type="primary" class="go-buy" v-if="!learnDetail.info.is_buy" @click="goBtn">
                      <img class="icon" src="@/assets/img/learn/car@2x.png" alt="car"/>
                      立即购买
                    </el-button>
                    <el-button v-else @click="goBtn">继续学习</el-button>
                  </div>
                  <div class="brief">
                    <span>{{ learnDetail.info.video_num }}集</span>
                    <span>{{ learnDetail.info.total_time }}小时</span>
                    <span>{{ learnDetail.info.view_num }}万阅读</span>
                    <span>完结</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">公告</div>
              </div>
              <!--介绍-->
              <div class="introduction" v-show="tabActive==0">
                <img :src="defaultImg" v-real-img="learnDetail.content.video_img" alt="">
                <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 }}:{{ 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">{{ learnDetail.teacher.content }}</p>
              </div>
              <!--课程咨询-->
              <div 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>
                    <img class="ewm" :src="learnDetail.content.ewm"/>
                  </div>
                  <p class="info" v-html="learnDetail.content.content"></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>
    </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')
        }
    },
    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()
        console.log('打印异步数据看看',result)
        return {
            ...result
        }
    },
    mounted () {
      this.baseUrl = this.$store.state.domainConfig.siteUrl
      this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
    },
    methods: {
      // 是否收藏
      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
            }
          })
        }else{
          this.$axios.$post('/uapi/collection/add', params).then(res => {
            let { data, status, info } = res
            if(status === 1){
              this.collectObj.resultCode = 1
            }
          })
        }
      },
      /**
       * 点击购买：
       * 跳转共用支付界面
       */
      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) {
            // 未登录时 => 去登录
            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 {
          window.location.href = '/lv/'+ this.sale_id
        }
      }
    }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/learn/detail/_id.scss";
</style>
<style lang="scss">
.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>