tnbapp/src/views/home/VideoPage.vue

<template>
  <div class="player">
    <el-row style="padding-top: 12px" :gutter="20">
      <el-col :md="15">
        <el-row>
          <h3 v-text="video.title" />
        </el-row>
        <el-row style="color: #999;font-size: 16px;padding-top: 0px;">
          <span><i class="el-icon-video-play">{{ video.viewCount }}</i></span>
          <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
          <span><i class="el-icon-s-comment">{{ video.commentCount }}</i></span>
          <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
          <span><i class="el-icon-watch">{{ video.pubDate }}</i></span>
        </el-row>
      </el-col>
      <el-col :md="9">
        <el-row>
          <el-col :md="3">
            <router-link target="_blank" :to="`/user/` + video.userId">
              <el-avatar>
                <el-image :src="video.avatarUrl" />
              </el-avatar>
            </router-link>
          </el-col>
          <el-col :md="6">
            <router-link target="_blank" :to="`/user/` + video.userId"><span>{{ video.username }}</span></router-link>
            <router-link target="_blank" :to="`/message/` + video.userId"><span class="el-icon-message">发消息</span></router-link>
            <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
            <el-button small outlined color="primary">
              <span>已关注</span>
              <!--              <span v-if="!isFollowed">关注</span>-->
              <span v-html="'&nbsp;&nbsp;'" />
              <span>2000</span>
            </el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="padding-top: 12px" :gutter="20"><!--gutter为栅格的间隔-->
      <!--播放列-->
      <el-col :md="15">
        <!--视频播放框-->
        <video-player :video-prop="video" />
        <div class="el-icon-collection">
          {{ "已收藏" + video.collectCount + "次" }}
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-star-off"
            :disabled="isCollection"
            @click="collection(video.videoId)"
          >
            {{ isCollection ? "您已收藏" : "点击收藏" }}
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-download"
            :disabled="isCollection"
            @click="collection(video.videoId)"
          >
            <span>下载</span>
          </el-button>
        </div>
        <span class="description">{{ video.description }}</span>
        <!--视频标签-->
        <div class="v-tag">
          <el-tag
            v-for="(tag,index) in video.tagList"
            :key="index"
            class="tag"
            size="medium"
            effect="plain"
          >
            <router-link target="_blank" :to="`/video/tag/` + tag">
              {{ tag }}
            </router-link>
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="mini"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
          />
          <el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 添加标签</el-button>
        </div>
        <!--评论-->
        <comment :vid="video.videoId" />
      </el-col>
      <!--推荐列-->
      <el-col :md="9">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>弹幕列表</span><i class="el-icon-more" />
            <span style="float: right; padding: 3px 0" type="text"><i class="el-icon-arrow-down" /></span>
            <el-table
              :data="tableData"
              size="medium"
              class="text"
              style="width: 100%"
              height="300"
            >
              <el-table-column
                prop="date"
                label="时间"
                width="60"
              />
              <el-table-column
                prop="name"
                label="弹幕内容"
              />
              <el-table-column
                prop="address"
                label="发送时间"
                width="120"
              />
            </el-table>
          </div>
          <div class="bottom clearfix">
            <el-button type="text" class="button">查看弹幕历史</el-button>
          </div>
        </el-card>
        <div class="about">
          <div>相关推荐</div>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            circle
            @click="updateVideos"
          >换一换</el-button>
        </div>
        <el-row v-for="(item,index) in similarVideos" :key="index" class="item">
          <video-card :video="video" />
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { similarVideo, videoInfo, getVideoComment } from '@/api/video'
import VideoPlayer from 'components/VideoPlayer'
import Comment from 'components/comment/Comment'
import VideoCard from 'components/card/VideoCard'

export default {
  name: 'VideoPage',
  components: { Comment, VideoCard, VideoPlayer },
  data() {
    return {
      video: null,
      similarVideos: [],
      // 标签的样式数组
      types: ['', 'success', 'info', 'danger', 'warning'],
      // 标签
      tags: [],
      // 相关推荐videos
      videos: [],
      showVideo: true,
      isCollection: false, // 用户收藏状态
      collectionNum: 0, // 收藏次数

      inputVisible: false,
      inputValue: '',
      tableData: [{
        date: '00:09',
        name: '王小虎1',
        address: '05-02 22:10'
      }
      ]
    }
  },
  watch: {
    // 当video改变时修改标签组
    /* video(newVal) {
      // 将关键字以逗号分隔为数组保存到标签组
      this.tags = newVal.keyword.split('，')
    }*/
  },
  created() {
    const videoId = this.$route.params.id
    console.log('Video ID -> ' + videoId)
    this.getVideoInfo(videoId)
    this.getSimilarVideos(videoId)

    // 将关键字以逗号分隔为数组保存到标签组
    // this.tags = this.video.tags.split('，')
    // 相关推荐列表
    // this.updateVideos()
    // 获取当前登录对象
    const user = this.$user
    if (user) {
      this.isCollection = true
      /* isCollection(user.uid, this.video.vid).then(res => {
        if (res) {
          this.isCollection = true
        }
      })*/
    }

    // 获取当前视频收藏次数
    /* getCollectionNum(this.video.vid).then(res => {
      this.collectionNum = res
    })*/
    getVideoComment(videoId).then(res => {
      console.log(res)
    })
  },
  methods: {
    // 获取视频的详细信息
    getVideoInfo(videoId) {
      videoInfo(videoId)
        .then(res => {
          if (res.code === 0) {
            this.video = res.data
            document.title = res.data.title
            this.userId = res.data.userId
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    // 获取和当前视频类似的其他视频
    getSimilarVideos(videoId) {
      similarVideo(videoId)
        .then(res => {
          if (res.code === 0) {
            this.similarVideos = res.data
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    // 添加标签相关方法
    showInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (this.tags.indexOf(inputValue) !== -1) {
        this.$message.info('该标签已存在！')
      } else {
        this.tags.push(inputValue)
        // addTag(this.tags.join('，'), this.video.vid).then(res => console.log(res)) // 添加标签
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    // 换一换
    updateVideos() {
    },
    // 跳转到播放页面，携带video数据
    toPlayer(item) {
      this.showVideo = false
      // 异步更新dom,重新渲染pvideo
      this.$nextTick(() => {
        this.showVideo = true
      })

      // 回到顶部
      scrollTo(0, 0)

      this.video = item
      // 添加播放次数
      // addVisited(item.vid)

      // 根据此视频判断当前用户是否收藏
      const user = this.$user
      if (user) {
        /* isCollection(user.uid, item.vid).then(res => {
          if (res) {
            this.isCollection = true
          } else {
            this.isCollection = false
          }
        })*/
      }

      // 获取当前视频收藏次数
      /* getCollectionNum(this.video.vid).then(res => {
        this.collectionNum = res
      })*/

      // 添加播放历史记录
      if (user) {
        /* addHistory(user.uid, this.video.vid).then(res => {
          // console.log(res);
        })*/
      }
    },
    /*	// 用户点击收藏
			collection() {
				// 获取user
				let user = this.$user
				if (!user) {
					this.$toast.show("用户未登录",2000)
				}
			}, */
    // 用户点击收藏
    collection(vid) {
      // 1.判断用户是否登录
      // 1.1 通过cookie获取用户
      const user = this.$user
      if (user) {
        // 用户已登录
        // console.log(user);
        // 添加收藏
        /* userCollection(user.uid, vid).then((res) => {
          // console.log(res);
          if (res === 1) {
            this.collectionNum++
            this.isCollection = true
            // 收藏成功
            this.$notify.success({
              title: '收藏成功',
              duration: 2000
            })
          }
        })*/
      } else {
        // 用户未登录，给出提示
        this.$notify({
          title: '提示',
          message: '要登陆后才可以收藏哦！',
          type: 'warning',
          duration: 3000
        })
      }
    }

  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}

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

.box-card {
  width: 480px;
}
	.player {
		padding-top: 20px;
		padding-left: 6%;
		padding-right: 6%;
	}

	.about {
		font-size: 18px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}
	.content {
		padding-bottom: 20px;
	}

	.item {
		cursor: pointer;
		margin-bottom: 10px;
		border-bottom: 1px solid rgba(34, 36, 38, .15);
		box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
	}
	.item:hover {
		background-color: rgb(236, 245, 255);
		color: rgb(102, 177, 255);
	}

	.img-col {
		padding-right: 10px;
	}
	.coverImg {
		margin-top: 10px;
		margin-bottom: 8px;
		width: 100%;
		/*height: 120px;*/
		border-radius: 3px;
	}

	.detail {
		margin-top: 8%;
	}

	.vname {
		font-weight: 600;
		font-size: 15px;

		height: 40px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2; /*行数*/
		-webkit-box-orient: vertical;
	}

	.visited {
		font-size: 13px;
		padding-top: 6px;
	}

	.video-name {
		font-size: 20px;
		padding-top: 20px;
		display: block;
	}

	.description {
		display: block;
		padding-top: 10px;
		font-size: 13px;
		color: rgb(127, 102, 102);
	}

	.v-tag {
		padding-top: 10px;
	}
	.tag{
		margin-right: 3px;
	}

	.el-icon-collection {
		padding-top: 10px;
		font-size: 13px;
		padding-right: 10px;
	}

	.bread {
		font-size: 15px;
	}

	/*处于手机屏幕时*/
	@media screen and (max-width: 768px){
		.player {
			padding-left: 1%;
			padding-right: 1%;
		}

		.vname {
			font-size: 13px;
		}

		.visited {
			font-size: 11px;
		}
	}

	.button-new-tag {
		height: 28px;
		line-height: 28px;
		color: #66b1ff;
		padding-top: 0;
		padding-bottom: 0;
	}
	.input-new-tag {
		width: 90px;
		vertical-align: bottom;
	}

</style>