tnbapp/src/views/video/video.vue

<template>
  <div v-if="videoData !== null">
    <v-container>
      <v-col>
        <v-row>
          <v-col>
            <h3 v-text="videoData.title" />
          </v-col>
        </v-row>
        <v-row>
          <v-col style="color: #999;font-size: 12px;padding-top: 0px;">
            <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
            <span v-text="videoData.viewCount" /> 次观看 <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
            <span v-text="TimeUtil.renderTime(videoData.pubDate)" />
          </v-col>
        </v-row>
      </v-col>
    </v-container>
    <v-container>
      <v-row>
        <v-col>
          <VideoPlayer v-if="vidProp !== null" :video-prop="vidProp" />
        </v-col>
        <v-col>
          <v-card
            light
          >
            <v-card-title>
              <span>合集 </span>
              <v-switch
                v-model="switch1"
                :label="`自动播放`"
              />
            </v-card-title>
            <v-virtual-scroll
              :bench="benched"
              :items="videoCollection"
              height="300"
              item-height="64"
            >
              <template v-slot:default="{ item }">
                <v-list-item :key="item.videoId">
                  <v-list-item-content>
                    <v-list-item-title>
                      <p class="text-over" style="font-size: 15px; margin-bottom: 0px;color: black;">
                        <router-link :to="`/video/${item.videoId}`" style="color: black;"> {{ item.title }} </router-link>
                      </p>
                    </v-list-item-title>
                  </v-list-item-content>
                </v-list-item>
                <v-divider />
              </template>
            </v-virtual-scroll>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <v-container fill-height style="padding-top: 0px;">
      <v-row v-resize="onResize" no-gutters>
        <v-col :cols="colsWidth">
          <v-row>
            <v-col cols="2">
              <v-btn icon @click="likeVideo">
                <v-icon>mdi-thumb-up</v-icon>
                <span>点赞(10000)</span>
              </v-btn>
            </v-col>
            <v-col cols="2">
              <v-btn icon @click="collectVideoWrapper">
                <v-icon>mdi-bookmark</v-icon>
                <span>收藏(10000)</span>
              </v-btn>
            </v-col>
            <v-col cols="2">
              <v-btn icon @click="openRepostDialog">
                <v-icon>mdi-repeat</v-icon>
                <span>转发(10000)</span>
              </v-btn>
              <v-dialog
                v-model="showRepostDialog"
                persistent
                max-width="600px"
              >
                <v-card>
                  <v-card-text>
                    <span>https://bili.reghao.cn/video/lajfda</span>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer />
                    <v-btn
                      color="blue darken-1"
                      text
                      @click="showRepostDialog = false"
                    >
                      关闭
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-col>
            <v-col cols="2">
              <v-btn icon @click="openSuggestDialog">
                <v-icon>mdi-thumb-up</v-icon>
                <span>反馈</span>
              </v-btn>
              <v-dialog
                v-model="showDialog"
                persistent
                max-width="600px"
              >
                <v-card>
                  <v-card-title>
                    <span class="text-h5">问题或建议</span>
                  </v-card-title>
                  <v-card-text>
                    <v-container>
                      <v-row>
                        <v-col
                          cols="12"
                          sm="6"
                        >
                          <v-select
                            :items="['视频封面', '视频播放', '视频内容']"
                            label="问题分类"
                            required
                          />
                        </v-col>
                        <v-col
                          cols="24"
                          sm="6"
                          md="4"
                        >
                          <v-text-field
                            label="问题或建议"
                            required
                          />
                        </v-col>
                      </v-row>
                    </v-container>
                  </v-card-text>
                  <v-card-actions>
                    <v-spacer />
                    <v-btn
                      color="blue darken-1"
                      text
                      @click="showDialog = false"
                    >
                      关闭
                    </v-btn>
                    <v-btn
                      color="blue darken-1"
                      text
                      @click="submitVideoErr"
                    >
                      提交
                    </v-btn>
                  </v-card-actions>
                </v-card>
              </v-dialog>
            </v-col>
            <v-col cols="2">
              <v-btn icon @click="openEditDialog">
                <v-icon>mdi-thumb-up</v-icon>
                <span>编辑</span>
              </v-btn>
              <v-dialog
                v-model="showEditDialog"
                persistent
                max-width="600px"
              >
                <v-form
                  ref="form"
                  v-model="editVideo"
                  lazy-validation
                >
                  <v-text-field
                    v-model="videoId"
                    label="视频 ID"
                    required
                  />

                  <v-text-field
                    v-model="editVideo.pubDate"
                    label="发布日期"
                    required
                  />

                  <v-btn
                    color="success"
                    class="mr-4"
                    @click="submitEdit"
                  >
                    提交
                  </v-btn>

                  <v-btn
                    color="error"
                    class="mr-4"
                    @click="resetEdit"
                  >
                    重置
                  </v-btn>
                  <v-btn
                    color="error"
                    class="mr-4"
                    @click="showEditDialog = false"
                  >
                    取消
                  </v-btn>
                </v-form>
              </v-dialog>
            </v-col>
          </v-row>
          <!--<v-row>
            <v-col style="color: #999;font-size: 12px;padding-top: 0px;">
              &lt;!&ndash;
              TODO 视频分类待完成
              <router-link v-if="videoData.childrenCategory.fatherId !== 0" :to="`/v/${videoData.fatherCategory.id}`" class="category-link">
                <span v-text="videoData.fatherCategory.name" />
              </router-link>
              /
              <router-link :to="`/v/${videoData.childrenCategory.id}`" class="category-link">
                <span v-text="videoData.childrenCategory.name" />
              </router-link>&ndash;&gt;
              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
            </v-col>
          </v-row>-->
          <v-divider />
          <v-row>
            <v-col>
              <span v-text="videoData.description" />
            </v-col>
          </v-row>
          <v-divider />
          <v-row>
            <v-col>
              <span>{{ videoData.tags }}</span>
              <!--              <span v-for="item in videoData.tags" :key="item">
                <v-btn rounded small text color="primary" dark @click="jumpToTagPage(item)">{{ item }}</v-btn>
              </span>-->
            </v-col>
          </v-row>
          <v-divider />
          <v-row>
            <v-col cols="2" align-self="end">
              <router-link :to="`/u/${videoData.userId}`">
                <v-avatar size="48">
                  <v-img :src="videoData.avatarUrl" />
                </v-avatar>
              </router-link>
            </v-col>
            <v-col>
              <router-link :to="`/u/${videoData.userId}`">
                <span v-text="videoData.username" />
              </router-link>
              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
              <v-btn small outlined color="primary" @click="followingUser">
                <span>关注</span>
                <span v-html="'&nbsp;&nbsp;'" />
                <span v-text="videoData.followerCount" />
              </v-btn>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
      <v-row>
        <v-col :cols="colsWidth">
          <CommentCard v-if="showComment === true" :video="videoData" />
        </v-col>
        <v-col>
          <v-row>
            <span>接下来播放: </span>
            <v-switch
              v-model="switch1"
              :label="`自动播放`"
            />
          </v-row>
          <v-row no-gutters>
            <v-col
              v-for="item in videoList"
              :key="item.videoId"
            >
              <item-card :video="item" />
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>
    <v-snackbar
      v-model="showMessage"
      :top="true"
      :timeout="1000"
    >
      {{ message }}
      <template v-slot:action="{ attrs }">
        <v-btn
          color="pink"
          text
          v-bind="attrs"
          @click="showMessage = false"
        >
          关闭
        </v-btn>
      </template>
    </v-snackbar>
  </div>
</template>

<script>
import { similarVideo, videoInfo, getDisplayedVideoList } from '@/api/media/video'
import { collectVideo } from '@/api/media/collection'
import ItemCard from '@/components/card/item-card.vue'
import CommentCard from '@/components/card/comment-card.vue'
import VideoPlayer from '@/components/player/player.vue'
import TimeUtil from '@/utils/time-util.vue'

export default {
  name: 'Video',
  components: {
    ItemCard,
    CommentCard,
    VideoPlayer
  },
  data() {
    return {
      videoList: [],
      videoCollection: [],
      score: 0,
      TimeUtil,
      videoId: '',
      videoData: null,
      windowSize: {
      },
      colsWidth: 8,
      showDialog: false,
      showRepostDialog: false,
      formData: {},
      collectionDialog: false,
      isCollected: '收藏',
      showEditDialog: false,
      editVideo: {
        videoId: null,
        pubDate: null
      },
      showComment: true,
      vidProp: null,
      benched: 0,
      switch1: true,
      showMessage: false,
      message: ''
    }
  },
  computed: {
    items() {
      return Array.from({ length: this.length }, (k, v) => v + 1)
    },
    length() {
      return 10
    }
  },
  created() {
    // 获取 url 上的 path 参数
    this.videoId = this.$route.params.id
    // 请求后端获取数据
    this.getVideoInfo(this.videoId)
    this.onResize()
    this.getSimilarVideos(this.videoId)
    this.getDisplayedVideoListWrapper()
  },
  mounted() {
  },
  methods: {
    // 控制页面大小
    onResize() {
      this.windowSize = { x: window.innerWidth, y: window.innerHeight }
      if (this.windowSize.x < 900) {
        this.colsWidth = 12
      } else {
        this.colsWidth = 8
      }
    },
    // 获取视频的详细信息
    getVideoInfo(videoId) {
      videoInfo(videoId)
        .then(res => {
          if (res.code === 0) {
            const vidData = res.data
            this.videoData = vidData
            document.title = vidData.title

            const vidProp = {}
            vidProp.videoId = vidData.videoId
            vidProp.coverUrl = vidData.coverUrl
            vidProp.scope = vidData.scope
            this.vidProp = vidProp
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    // 获取和当前视频类似的其他视频
    getSimilarVideos(videoId) {
      similarVideo(videoId)
        .then(res => {
          if (res.code === 0) {
            this.videoList = res.data
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    getDisplayedVideoListWrapper() {
      getDisplayedVideoList()
        .then(res => {
          if (res.code === 0) {
            this.videoCollection = res.data
          } else {
            console.error(res.msg)
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    followingUser() {
      console.log('关注 UP 主')
    },
    likeVideo() {
      console.log('点赞 ' + this.videoId)
    },
    collectVideoWrapper() {
      const obj = {}
      obj.videoId = this.videoId
      collectVideo(obj)
        .then(res => {
          if (res.code === 0) {
            this.showMessage = true
            this.message = '已收藏'
          } else {
            this.showMessage = true
            this.message = res.msg
          }
        })
        .catch(error => {
          console.error(error.message)
        })
    },
    jumpToTagPage(value) {
      console.log('跳转到标签页: ' + value)
      this.$router.push({
        path: '/tag/result',
        query: {
          tag: value,
          page: 1
        }
      })
    },
    openRepostDialog() {
      this.showRepostDialog = true
      console.log('获取一个 short url')
    },
    openSuggestDialog() {
      this.showDialog = true
    },
    openEditDialog() {
      this.showEditDialog = true
    },
    submitVideoErr() {
      this.showDialog = false
      console.log('提交视频错误')
    },
    submitEdit() {
      console.log('提交编辑信息')
    },
    resetEdit() {
      console.log('重置编辑信息')
    }
  }
}
</script>

<style>
</style>