tnbapp/src/views/home/LivePage.vue

<template>
  <el-row class="movie-list">
    <el-col :md="15">
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-row>
              <h3 v-html="video.title" />
            </el-row>
            <el-row style="color: #999;font-size: 16px;padding-top: 0px;">
              <span><i class="el-icon-video-play">{{ video.view }}</i></span>
            </el-row>
          </div>
          <div class="text item">
            <live-player :video-prop="video"/>
          </div>
        </el-card>
      </el-row>
      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <div class="video-data-row">
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-collection"
                :disabled="isCollected"
                @click="collection(video.videoId)"
              >
                <span>收藏 {{ video.favorite }}</span>
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-thumb"
                :disabled="isCollected"
                @click="collection(video.videoId)"
              >
                <span>喜欢 {{ video.thumbUp }}</span>
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-share"
                :disabled="isCollected"
                @click="collection(video.videoId)"
              >
                <span>分享 {{ video.share }}</span>
              </el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-download"
                @click="getDownloadUrl(video.videoId)"
              >
                <span>下载</span>
              </el-button>
            </div>
          </div>
          <div class="text item">
            <!--视频描述行-->
            <span class="description" v-html="video.description"/>
          </div>
        </el-card>
      </el-row>
    </el-col>
    <el-col :md="9">
      <el-row>
        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <user-avatar-card :userAvatar="user" />
        </el-row>
        <el-row v-if="showPlaylist" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-row>
                <h3>播放列表</h3>
              </el-row>
              <el-row>
                <span>自动播放 <el-switch v-model="autoPlay"/></span>
              </el-row>
            </div>
            <div class="text item">
              <el-table
                :data="similarVideos"
                style="width: 100%"
              >
                <el-table-column
                  prop="title">
                  <template slot-scope="scope">
                    <router-link target="_blank" :to="`/video/${scope.row.videoId}`">
                      <span>{{scope.row.videoId}}</span>
                    </router-link>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="coverUrl">
                  <template slot-scope="scope">
                    <span>10:00</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-row>
        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-row>
                <h3>推荐直播</h3>
              </el-row>
            </div>
            <div class="text item">
              <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
                <video-card :video="item" />
              </el-row>
            </div>
          </el-card>
        </el-row>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
import LivePlayer from 'components/LivePlayer'
import Comment from 'components/comment/Comment'
import VideoCard from 'components/card/VideoCard'
import UserAvatarCard from '@/components/card/UserAvatarCard'

export default {
  name: 'LivePage',
  components: { Comment, VideoCard, LivePlayer, UserAvatarCard },
  data() {
    return {
      video: {
        videoId: 'jk1024',
        title: '我的直播',
        description: '我的直播',
        view: 10,
        favorite: 10,
      },
      user: {
        userId: 10001,
        screenName: '浩',
        avatarUrl: '',
        following: 1024,
        follower: 1024,
      },
      videoProp: {
        info: null,
        autoPlay: false,
        playlist: []
      },
      similarVideos: [],
      isCollected: false,
      showErrorReportDialog: false,
      errorReportForm: {
        videoId: null,
        errorCode: null
      },
      showPlaylist: false,
      autoPlay: false,
    }
  },
  watch: {
    // 地址栏 url 发生变化时重新加载本页面
    $route(){
      this.$router.go()
    }
  },
  created() {
    const id = this.$route.params.id
  },
  methods: {
    // 用户点击收藏
    collection(videoId) {
    },
    getDownloadUrl(videoId) {
    },
  }
}
</script>

<style scoped>
/*处于手机屏幕时*/
@media screen and (max-width: 768px) {
  .movie-list {
    padding-top: 8px;
    padding-left: 0.5%;
    padding-right: 0.5%;
  }
}

.movie-list {
  padding-top: 15px;
  padding-left: 5%;
  padding-right: 5%;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>