飞天班第25节：企业项目构建-NUXT渲染前端

<template>
  <div>
    <!-- 公共头 -->
    
    <!-- 内容区域 -->
    <nuxt/>
    
    <!-- 公共底部 -->
  </div>
</template>

<!-- 导航栏 -->
<ul class="nav">
  <!-- router-link = a连接  to href -->
  <!--约定 默认会解析page下的页面 /  pages/index.vue 自动映射的-->
  <router-link to="/" tag="li" active-class="current" exact>
    <a>首页</a>
  </router-link>
  <!-- 默认会解析page下的页面 /  pages/course/index.vue -->
  <router-link to="/course" tag="li" active-class="current">
    <a>课程</a>
  </router-link>
  <router-link to="/teacher" tag="li" active-class="current">
    <a>名师</a>
  </router-link>
  <router-link to="/article" tag="li" active-class="current">
    <a>文章</a>
  </router-link>
  <router-link to="/qa" tag="li" active-class="current">
    <a>问答</a>
  </router-link>
</ul>

<template>
  <div>
    <!-- 轮播图 -->
    <!-- 课程信息 -->
    <!-- 讲师信息 -->
  </div>
</template>

<div v-swiper:mySwiper="swiperOption">
      <div class="swiper-wrapper">
        <!-- 图片信息 -->
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img src="~/assets/photo/banner/1525939573202.jpg" alt="首页banner">
          </a>
        </div>
        <div class="swiper-slide" style="background: #040B1B;">
          <a target="_blank" href="/">
            <img src="~/assets/photo/banner/1.jpg" alt="首页banner">
          </a>
        </div>
      </div>
      <div slot="pagination" class="swiper-pagination swiper-pagination-white "/>
 ...
<script>
  export default {
  data() {
    return {
      swiperOption: {
        // 配置分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 5000
        },
        loop: true
      },
</script>  

<template>
	<div>
    讲师列表
    <div v-for="item in data.items" :key = "item.id">
      <a :href="'/teacher/' + item.id"></a>
    </div>
  </div>
</template>
<script>
import teacher from 'api/teacher'
export default {
  // asyncData 渲染组件前获取数据
  asyncData({ params, error }) {
    return teacher.getPageList(1,8).then(response => {
      console.log(response.data.data)
      // 返回数据
      return { data: response.data.data }
    })
  }
}
</script>

// 讲师介绍
<template>
	<div>
    讲师介绍
    </br>
  	</br>
		</br>
  </div>
</template>
<script>
	import teacher from 'api/teacher'
  // asyncData 渲染组件前获取数据
  asyncData({ params, error }) {
    return teacher.getById(params.id).then(response => {
      // 返回数据
      return { item: response.data.data.teacher }
    })
  }
</script>

<template>
  <section class="container">
    <!-- 课程所属分类-->
    <section class="path-wrap txtOf hLh30">
      ...
    </section>
    <!-- 课程基本信息 -->
    <div>
     ...
    </div>
  	<!-- 详情 -->
    <div class="mt20 c-infor-box">
      <!-- 课程大纲章节 -->
      <article class="fl col-7">
        ...
      </article>
      <!-- 主讲讲师-->
      <aside class="fl col-3">
        <div class="i-box">
          ...
        </div>
      </aside>
    </div>
  </section>
</template>

<li v-for="video in chapter.children" :key="video.id" class="lh-menu-second ml30">
  <!-- 最终跳转到视频播放页面 -->
  <a
     :href="'/player/'+video.videoSourceId"
     :title="video.title"
     target="_blank">
    <span v-if="video.free === true" class="fr">
      <i class="free-icon vam mr10">免费试听</i>
    </span>
    <em class="lh-menu-i-2 icon16 mr5">&nbsp;</em>
  </a>
</li>

<template>
  <div class="coding-player">
    <div class="head">
      <a href="#" title="艾编程">
        <img class="logo" src="~/assets/img/logo.png" lt="艾编程">
    </a></div>
    <div class="body">
      <div class="content">
        <!-- 内容 -->
        <nuxt/>
      </div>
    </div>
  </div>
</template>
<script>
export default {}
</script>

<style>
html,body{
  height:100%;
}
</style>

<style scoped>
.head {
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.head .logo{
  height: 50px;
  margin-left: 10px;
}

.body {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
</style>

<script>
import vod from '@/api/vod'

// eslint-disable-next-line no-unused-vars
var videoAdClose = function(videoAd) {
/* 调用视频广告组件的暂停事件来暂停广告 */
  videoAd.pauseVideoAd()
  var result = confirm('确定开通会员关闭广告吗？')
  if (result) {
  /* 调用视频广告组件关闭事件来关闭广告! */
    videoAd.closeVideoAd()
  } else {
  /* 调用视频广告组件的播放事件来播放广告 */
    videoAd.playVideoAd()
  }
}
// eslint-disable-next-line no-unused-vars
var danmukuList = [
  { mode: 1, text: '哈哈', stime: 1000, size: 25, color: 0xffffff },
  { mode: 1, text: '前方高能', stime: 2000, size: 25, color: 0xffffff },
  { mode: 1, text: '灵魂歌手', stime: 30000, size: 25, color: 0xffffff },
  { mode: 1, text: '这是弹幕2', stime: 1000, size: 25, color: 0x00c1de },
  { mode: 1, text: '神测试', stime: 1000, size: 25, color: 0x00c1de },
  { mode: 1, text: '顺手一划', stime: 1000, size: 25, color: 0x00c1de },
  { mode: 1, text: '哈哈', stime: 1000, size: 25, color: 0xffffff },
  { mode: 1, text: '哈哈', stime: 1000, size: 25, color: 0xffffff },
  { mode: 1, text: '哈哈', stime: 1000, size: 25, color: 0xffffff },
  { mode: 1, text: '哈哈', stime: 1000, size: 25, color: 0xffffff }
]
export default {
  /* 关闭广告的自定义事件, 可自行修改代码从而满足不同的功能, 参数为视频广告组件本身 */
  layout: 'video', // 应用video布局
  // 1、获取播放凭证
  asyncData({ params, error }) {
    return vod.getPlayAuth(params.vid).then(response => {
      // console.log(response.data.data)
      return {
        // 数据是固定的！拿到视频信息 和 播放凭证，就可以播放视频了！
        vid: params.vid,
        playAuth: response.data.data.playAuth
      }
    })
  },
  /**
 * 页面渲染完成时：此时js脚本已加载，Aliplayer已定义，可以使用
 * 如果在created生命周期函数中使用，Aliplayer is not defined错误
 */
  mounted() {
    /* eslint-disable no-undef */
    // 2、创建播放器
    const player = new Aliplayer({
      id: 'J_prismPlayer',
      vid: this.vid, // 视频id
      playauth: this.playAuth, // 播放凭证
      encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
      width: '100%',
      height: '500px',
      'extraInfo': {
        'crossOrigin': 'anonymous'
      },
      'skinLayout': [
        { 'name': 'bigPlayButton', 'align': 'blabs', 'x': 30, 'y': 80 },
        { 'name': 'H5Loading', 'align': 'cc' },
        { 'name': 'errorDisplay', 'align': 'tlabs', 'x': 0, 'y': 0 },
        { 'name': 'infoDisplay' },
        { 'name': 'tooltip', 'align': 'blabs', 'x': 0, 'y': 56 },
        { 'name': 'thumbnail' },
        {
          'name': 'controlBar', 'align': 'blabs', 'x': 0, 'y': 0,
          'children': [
            { 'name': 'progress', 'align': 'blabs', 'x': 0, 'y': 44 },
            { 'name': 'playButton', 'align': 'tl', 'x': 15, 'y': 12 },
            { 'name': 'timeDisplay', 'align': 'tl', 'x': 10, 'y': 7 },
            { 'name': 'fullScreenButton', 'align': 'tr', 'x': 10, 'y': 12 },
            { 'name': 'subtitle', 'align': 'tr', 'x': 15, 'y': 12 },
            { 'name': 'setting', 'align': 'tr', 'x': 15, 'y': 12 },
            { 'name': 'volume', 'align': 'tr', 'x': 5, 'y': 10 },
            { 'name': 'snapshot', 'align': 'tr', 'x': 10, 'y': 12 }
          ]
        }
      ],
      components: [{
        name: 'AliplayerDanmuComponent', // 弹幕组件
        type: AliPlayerComponent.AliplayerDanmuComponent,
        args: [danmukuList]
      }]
    }, function(player) {
      console.log('播放器创建成功')
    })

    /* h5截图按钮, 截图成功回调 */
    player.on('snapshoted', function(data) {
      var pictureData = data.paramData.base64
      var downloadElement = document.createElement('a')
      downloadElement.setAttribute('href', pictureData)
      var fileName = 'Aliplayer' + Date.now() + '.png'
      downloadElement.setAttribute('download', fileName)
      downloadElement.click()
      pictureData = null
    })
  }
}
</script>