更新 VideoPage.vue 中的分享功能

src/api/video.js

@@ -21,7 +21,7 @@ const videoApi = {
   videoErrorReportApi: '/api/content/video/report',
   videoDownloadApi: '/api/content/video/download',
   cacheBiliApi: '/api/content/video/cache/bili',
-  shortUrlApi: '/api/content/share',
+  shortUrlApi: '/api/content/video/share',
 
   videoRecommendApi: '/api/content/video/recommend',
   similarVideoApi: '/api/content/video/similar',
@@ -147,8 +147,8 @@ export function cacheBiliVideo(bvId) {
 }
 
 // 获取分享视频的短链接
-export function getShortUrl(bvId) {
-  return get(videoApi.shortUrlApi + '?videoId=' + bvId)
+export function getShortUrl(videoId) {
+  return post(videoApi.shortUrlApi + '/' + videoId)
 }
 
 // ********************************************************************************************************************

src/components/card/VideoCard.vue

@@ -162,6 +162,10 @@ export default {
   }
 }
 
+.imgs {
+  position: relative;
+}
+
 .coverImg {
   width: 100%;
   height: 175px;
@@ -187,9 +191,6 @@ export default {
   !*鼠标放上之后元素变成1.06倍大小*!
   transform: scale(1.06);
 }*/
-.imgs {
-  position: relative;
-}
 .play-icon {
   position: absolute;
   /*top: -15px;*/

src/views/home/VideoPage.vue

@@ -64,7 +64,7 @@
                   icon="el-icon-share"
                   :disabled="isCollected"
                   class="tag"
-                  @click="getShareUrl(video.videoId)"
+                  @click="displayShareVideoDialog"
                 >
                   <span>分享 {{ video.share }}</span>
                 </el-button>
@@ -100,7 +100,7 @@
             <div class="text item">
               <!--视频描述行-->
               <span>
-                <p v-html="video.description" style="white-space:pre-wrap" />
+                <p style="white-space:pre-wrap" v-html="video.description" />
               </span>
               <el-divider />
               <!--视频标签行-->
@@ -220,7 +220,6 @@
           </div>
         </el-card>
       </el-dialog>
-
       <!-- 视频报错对话框 -->
       <el-dialog
         append-to-body
@@ -247,6 +246,32 @@
           </div>
         </el-card>
       </el-dialog>
+      <!-- 视频分享对话框 -->
+      <el-dialog
+        append-to-body
+        :visible.sync="showShareVideoDialog"
+        center
+      >
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px">
+          <el-col :md="12">
+            <el-row>
+              <div class="imgs">
+                <el-image
+                  lazy
+                  fit="cover"
+                  class="coverImg"
+                  :src="this.video.coverUrl"
+                />
+              </div>
+            </el-row>
+            <el-row>
+              <el-button style="float: right; padding: 3px 0" type="text" @click="submitShareVideo">获取视频分享链接</el-button>
+            </el-row>
+          </el-col>
+          <el-col :md="12" />
+        </el-row>
+        <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px" />
+      </el-dialog>
     </el-row>
   </el-row>
   <el-row v-else>
@@ -339,7 +364,8 @@ export default {
       albumForm: {
         albumName: null
       },
-      multipleSelection: []
+      multipleSelection: [],
+      showShareVideoDialog: false
     }
   },
   watch: {
@@ -525,14 +551,6 @@ export default {
         }
       })
     },
-    getShareUrl(videoId) {
-      getShortUrl(videoId).then(resp => {
-        if (resp.code === 0) {
-          console.log(resp.data)
-          this.video.share += 1
-        }
-      })
-    },
     getDownloadUrl(videoId) {
       // let filename
       downloadVideo(videoId).then(resp => {
@@ -672,6 +690,44 @@ export default {
         })
       })
     },
+    displayShareVideoDialog() {
+      this.showShareVideoDialog = true
+    },
+    submitShareVideo() {
+      this.showShareVideoDialog = false
+      getShortUrl(this.video.videoId).then(resp => {
+        if (resp.code === 0) {
+          const content = window.location.origin + resp.data
+          if (window.clipboardData) {
+            window.clipboardData.setData('text', content)
+          } else {
+            (function() {
+              document.oncopy = function(e) {
+                e.clipboardData.setData('text', content)
+                e.preventDefault()
+                document.oncopy = null
+              }
+            })(content)
+            document.execCommand('Copy')
+          }
+          this.$message.info('已成功复制到剪贴板')
+        } else {
+          this.$notify({
+            title: '提示',
+            message: resp.msg,
+            type: 'warning',
+            duration: 3000
+          })
+        }
+      }).catch(error => {
+        this.$notify({
+          title: '提示',
+          message: error.message,
+          type: 'warning',
+          duration: 3000
+        })
+      })
+    },
     // ****************************************************************************************************************
     // 评论
     async submit(newComment, parent, add) {
@@ -812,4 +868,14 @@ export default {
   margin-left: 3px;
   margin-right: 3px;
 }
+
+.imgs {
+  position: relative;
+}
+
+.coverImg {
+  width: 100%;
+  height: 175px;
+  display: block;
+}
 </style>