update VideoPage.vue

src/views/home/VideoPage.vue

@@ -1,199 +1,201 @@
 <template>
-  <el-row v-if="!permissionDenied" class="movie-list">
-    <el-col v-if="video !== null" :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>
-              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <span><i class="el-icon-s-comment">{{ video.comment }}</i></span>
-              <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
-              <span><i class="el-icon-watch">{{ video.pubDate }}</i></span>
-            </el-row>
-          </div>
-          <div class="text item">
-            <video-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>
-              <el-button
-                v-if="video.cache != null"
-                type="danger"
-                size="mini"
-                icon="el-icon-download"
-                @click="cacheBiliVideo(video.videoId)"
-              >
-                <span>{{ video.cache.msg }}</span>
-              </el-button>
-              <el-button
-                type="danger"
-                size="mini"
-                icon="el-icon-help"
-                @click="displayErrorReportDialog"
-              >
-                <span>报错</span>
-              </el-button>
+  <el-row v-if="!permissionDenied">
+    <el-row v-if="video !== null" 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>
+                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+                <span><i class="el-icon-s-comment">{{ video.comment }}</i></span>
+                <span v-html="'&nbsp;&nbsp;&nbsp;&nbsp;'" />
+                <span><i class="el-icon-watch">{{ video.pubDate }}</i></span>
+              </el-row>
             </div>
-          </div>
-          <div class="text item">
-            <!--视频描述行-->
-            <span class="description" v-html="video.description" />
-            <el-divider />
-            <!--视频标签行-->
-            <div class="v-tag">
-              <el-tag
-                v-for="(tag,index) in video.tags"
-                :key="index"
-                class="tag"
-                size="medium"
-                effect="plain"
-              >
-                <router-link target="_blank" :to="`/video/tag/` + tag">
-                  {{ tag }}
-                </router-link>
-              </el-tag>
+            <div class="text item">
+              <video-player :video-prop="video" />
             </div>
-          </div>
-        </el-card>
-      </el-row>
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          </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>
+                <el-button
+                  v-if="video.cache != null"
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-download"
+                  @click="cacheBiliVideo(video.videoId)"
+                >
+                  <span>{{ video.cache.msg }}</span>
+                </el-button>
+                <el-button
+                  type="danger"
+                  size="mini"
+                  icon="el-icon-help"
+                  @click="displayErrorReportDialog"
+                >
+                  <span>报错</span>
+                </el-button>
+              </div>
+            </div>
+            <div class="text item">
+              <!--视频描述行-->
+              <span class="description" v-html="video.description" />
+              <el-divider />
+              <!--视频标签行-->
+              <div class="v-tag">
+                <el-tag
+                  v-for="(tag,index) in video.tags"
+                  :key="index"
+                  class="tag"
+                  size="medium"
+                  effect="plain"
+                >
+                  <router-link target="_blank" :to="`/video/tag/` + tag">
+                    {{ tag }}
+                  </router-link>
+                </el-tag>
+              </div>
+            </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">
+              <div ref="comment" :style="wrapStyle" class="comment-wrap">
+                <comment
+                  v-model="videoComments"
+                  :user="currentUser"
+                  :props="props"
+                  :before-submit="submit"
+                  :before-like="like"
+                  :before-delete="deleteComment"
+                  :upload-img="uploadImg"
+                />
+              </div>
+            </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 v-if="user !== null" :user-avatar="user" />
+          </el-row>
+        </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>
+              <el-row>
+                <span>自动播放 <el-switch v-model="autoPlay" /></span>
+              </el-row>
+            </div>
+          </el-card>
+        </el-row>
+        <el-row v-for="(item,index) in similarVideos" :key="index" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+          <side-video-card :video="item" />
+        </el-row>
+      </el-col>
+
+      <!-- 视频访问码对话框 -->
+      <el-dialog
+        append-to-body
+        :visible.sync="showAccessCodeDialog"
+        width="30%"
+        center
+      >
         <el-card class="box-card">
           <div slot="header" class="clearfix">
-            <el-row>
-              <h3>视频评论</h3>
-            </el-row>
+            <span>输入视频访问码</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="submitAccessCodeWrapper">提交</el-button>
           </div>
           <div class="text item">
-            <div ref="comment" :style="wrapStyle" class="comment-wrap">
-              <comment
-                v-model="videoComments"
-                :user="currentUser"
-                :props="props"
-                :before-submit="submit"
-                :before-like="like"
-                :before-delete="deleteComment"
-                :upload-img="uploadImg"
-              />
-            </div>
+            <el-form ref="form" :model="accessCodeForm" label-width="80px">
+              <el-form-item label="访问码">
+                <el-input v-model="accessCodeForm.accessCode" style="width: 70%; padding-right: 2px" />
+              </el-form-item>
+            </el-form>
           </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 v-if="user !== null" :user-avatar="user" />
-        </el-row>
-      </el-row>
-      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      </el-dialog>
+
+      <!-- 视频报错对话框 -->
+      <el-dialog
+        append-to-body
+        :visible.sync="showErrorReportDialog"
+        width="30%"
+        center
+      >
         <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>
+            <span>视频报错</span>
+            <el-button style="float: right; padding: 3px 0" type="text" @click="submitErrorReport">提交错误</el-button>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="errorReportForm" label-width="80px">
+              <el-form-item label="错误类型">
+                <el-select v-model="errorReportForm.errorCode" placeholder="选择视频错误类型">
+                  <el-option label="视频无封面" value="1" />
+                  <el-option label="视频无声音" value="2" />
+                  <el-option label="视频无画面" value="3" />
+                  <el-option label="视频无资源" value="4" />
+                  <el-option label="视频待删除" value="5" />
+                </el-select>
+              </el-form-item>
+            </el-form>
           </div>
         </el-card>
-      </el-row>
-      <el-row v-for="(item,index) in similarVideos" :key="index" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
-        <side-video-card :video="item" />
-      </el-row>
-    </el-col>
-
-    <!-- 视频访问码对话框 -->
-    <el-dialog
-      append-to-body
-      :visible.sync="showAccessCodeDialog"
-      width="30%"
-      center
-    >
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>输入视频访问码</span>
-          <el-button style="float: right; padding: 3px 0" type="text" @click="submitAccessCodeWrapper">提交</el-button>
-        </div>
-        <div class="text item">
-          <el-form ref="form" :model="accessCodeForm" label-width="80px">
-            <el-form-item label="访问码">
-              <el-input v-model="accessCodeForm.accessCode" style="width: 70%; padding-right: 2px" />
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-card>
-    </el-dialog>
-
-    <!-- 视频报错对话框 -->
-    <el-dialog
-      append-to-body
-      :visible.sync="showErrorReportDialog"
-      width="30%"
-      center
-    >
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>视频报错</span>
-          <el-button style="float: right; padding: 3px 0" type="text" @click="submitErrorReport">提交错误</el-button>
-        </div>
-        <div class="text item">
-          <el-form ref="form" :model="errorReportForm" label-width="80px">
-            <el-form-item label="错误类型">
-              <el-select v-model="errorReportForm.errorCode" placeholder="选择视频错误类型">
-                <el-option label="视频无封面" value="1" />
-                <el-option label="视频无声音" value="2" />
-                <el-option label="视频无画面" value="3" />
-                <el-option label="视频无资源" value="4" />
-                <el-option label="视频待删除" value="5" />
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-card>
-    </el-dialog>
+      </el-dialog>
+    </el-row>
   </el-row>
   <el-row v-else>
     <permission-denied-card :text-object="textObject" />