更新 video 播放页面

src/views/video/video.vue

@@ -187,18 +187,7 @@
       </v-row>
       <v-row>
         <v-col :cols="colsWidth">
-          <!--<CommentCard :count="videoData.commentCount" />-->
-          <div ref="comment" :style="wrapStyle" class="comment-wrap">
-            <Comment
-              v-model="data"
-              :user="currentUser"
-              :before-submit="submit"
-              :before-like="like"
-              :before-delete="deleteComment"
-              :upload-img="uploadImg"
-              :props="props"
-            />
-          </div>
+          <CommentCard v-if="videoData !== null" :video="videoData" />
         </v-col>
         <v-col>
           相关推荐:
@@ -219,17 +208,16 @@
 <script>
 import { similarVideo, videoInfo } from '@/api/media/video'
 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'
-import Comment from '@/components/comment'
-import { EXAMPLE_DATA } from './data'
 
 export default {
   name: 'Video',
   components: {
     ItemCard,
-    VideoPlayer,
-    Comment
+    CommentCard,
+    VideoPlayer
   },
   data() {
     return {
@@ -237,7 +225,7 @@ export default {
       score: 0,
       TimeUtil,
       videoId: '',
-      videoData: {},
+      videoData: null,
       windowSize: {
       },
       colsWidth: 8,
@@ -245,42 +233,18 @@ export default {
       showRepostDialog: false,
       formData: {},
       collectionDialog: false,
-      isCollected: '收藏',
-      wrapStyle: '',
-      data: [],
-      props: {
-        id: '_id',
-        content: 'content',
-        imgSrc: 'imgSrc',
-        children: 'childrenComments',
-        likes: 'likes',
-        liked: 'liked',
-        reply: 'reply',
-        createAt: 'createAt',
-        user: 'visitor'
-      },
-      currentUser: null
+      isCollected: '收藏'
     }
   },
   created() {
-    const userInfo = this.$store.state.user.userInfo
-    if (userInfo !== null) {
-      this.currentUser = {
-        name: userInfo.username,
-        avatar: userInfo.avatarUrl
-      }
-    }
     // 获取 url 上的 path 参数
     this.videoId = this.$route.params.id
     // 请求后端获取数据
     this.getVideoInfo(this.videoId)
     this.onResize()
     this.getSimilarVideos(this.videoId)
-    this.addData(1)
   },
   mounted() {
-    const header = this.$refs.header
-    this.wrapStyle = `height: calc(100vh - ${header.clientHeight + 20}px)`
   },
   methods: {
     // 控制页面大小
@@ -350,170 +314,10 @@ export default {
     submitVideoErr() {
       this.showDialog = false
       console.log('提交视频错误')
-    },
-    // 评论相关方法
-    async submit(newComment, parent, add) {
-      const res = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve({ newComment, parent })
-        }, 300)
-      })
-      add(Object.assign(res.newComment, { _id: new Date().getTime() }))
-      console.log('addComment: ', res)
-    },
-    async like(comment) {
-      const res = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve(comment)
-        }, 0)
-      })
-
-      console.log('likeComment: ', res)
-    },
-    async uploadImg({ file, callback }) {
-      const res = await new Promise((resolve, reject) => {
-        const reader = new FileReader()
-
-        reader.readAsDataURL(file)
-
-        reader.onload = () => {
-          resolve(reader.result)
-        }
-
-        reader.onerror = () => {
-          reject(reader.error)
-        }
-      })
-
-      callback(res)
-      console.log('uploadImg： ', res)
-    },
-    async deleteComment(comment, parent) {
-      const res = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve({ comment, parent })
-        }, 300)
-      })
-      console.log('deleteComment: ', res)
-    },
-    addData(times) {
-      setTimeout(() => {
-        this.data = new Array(times).fill(EXAMPLE_DATA).flat(Infinity)
-      }, 0)
     }
   }
 }
 </script>
 
-<style lang="scss">
-.category-link {
-  color: #999;
-}
-a {
-  text-decoration: none;
-}
-@mixin scroll-style(
-$thumb: rgba(255, 255, 255, 0.6),
-$track: rgba(255, 255, 255, 0)
-) {
-&::-webkit-scrollbar,
-&::-webkit-scrollbar-thumb,
-&::-webkit-scrollbar-track {
-   border: none;
-   box-shadow: none;
- }
-&::-webkit-scrollbar {
-   width: 4px;
- }
-&::-webkit-scrollbar-thumb {
-   border-radius: 2px;
-   background: $thumb;
- }
-&::-webkit-scrollbar-track {
-   background: $track;
- }
-}
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html {
-  font-size: 14px;
-}
-
-html,
-body,
-#app {
-  height: 100%;
-}
-
-@media screen and (min-width: 320px) {
-  html {
-    font-size: calc(14px + 4 * ((100vw - 320px) / (1200 - 320)));
-  }
-}
-
-@media screen and (min-width: 1200px) {
-  html {
-    font-size: 18px;
-  }
-}
-
-.change-role {
-  background: #1c2433;
-  color: #eee;
-  padding: 1rem;
-  display: flex;
-  justify-content: center;
-  align-content: center;
-.change {
-  cursor: pointer;
-  padding: 0.4rem;
-  margin-right: 2rem;
-  font-size: 0.9rem;
-  border: 1px solid #e99210;
-  border-radius: 5px;
-  user-select: none;
-&:hover {
-   opacity: 0.9;
- }
-}
-.current-role {
-  min-width: 15rem;
-  color: #e99210;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px dashed #e99210;
-  padding: 0 1rem;
-img {
-  width: 1.5rem;
-  height: 1.5rem;
-  margin-right: 0.5rem;
-  border: 1px solid #eee;
-  border-radius: 50%;
-}
-}
-}
-
-.comment-wrap {
-  overflow: auto;
-@include scroll-style(#db8f1c, #b9b9b9);
-}
-
-@media screen and (min-width: 760px) {
-  body {
-    margin: 0 10%;
-    border: 1px dashed #eee;
-  }
-}
-
-@media screen and (max-width: 500px) {
-  .change-role .current-role {
-    min-width: 5rem;
-    padding: 0 0.5rem;
-  }
-}
+<style>
 </style>