src/api/index.ts

@@ -1238,3 +1238,12 @@ export async function getarticle() {
         res2.data
     ]
 }
+
+export async function share() {
+    const res = await get("share")
+    if(res.code == 0){
+        return res.data
+    }else{
+        message.error(res.msg);
+    } 
+}

src/components/VideoPlay.vue

@@ -1,7 +1,37 @@
 <template>
     <div class="video">
         <div class="title">{{title}}</div>
+        <div class="title fenxiang"> <img src="@/static/images/fenxiang.png" alt=""> 立即分享</div>
         <video style="width:100%; height:100%;" :id="'a' + url" ></video>
+        <div class="modal-container">
+                <!-- @cancel="hideNoticeModal" -->
+
+            <a-modal
+                centered
+                :footer="null"
+                dialogClass="modal-dialog"
+                :visible="true"
+                title="请选择分享途径"
+                :getContainer="modalNode"
+                width="4rem"
+            >
+                <template v-slot:closeIcon>
+                    <img src="@/static/images/delete.png" class="close" />
+                </template>
+                <div class="notice-container report">
+                     <div @click="fx(1)">
+                        <img src="@/static/images/weibo.png" alt="" srcset="">
+                        新浪微博
+                    </div>
+                    <div @click="fx(2)">
+                        <img src="@/static/images/facebook.png" alt="" srcset="">
+                        Facebook
+                    </div>
+                   
+                </div>
+               
+            </a-modal>
+        </div>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -25,10 +55,80 @@
         color: #fff;
         z-index: 999;
     }
+    .fenxiang{
+        left: unset;
+        right: 51px;
+        display: flex;
+        align-items: center;
+        >img{
+            width: 11px;
+            height: 11px;
+            margin-right: 11px;
+        }
+    }
 }
+.modal-container {
+    ::v-deep(.ant-modal-header){
+        padding: 0;
+    }
+    ::v-deep(.ant-modal-title){
+        font-size: 12px;
+        margin-top: -0.09rem;
+        padding-bottom: 20px;
+    }
+    ::v-deep(.ant-modal-close){
+        top: 8px;
+    }
+    ::v-deep(.ant-modal-body){
+        padding: 0;
+    }
+        ::v-deep(.modal-dialog) {
+            border-radius: 36px;
+            overflow: hidden;
+            .close {
+                width: 14px;
+                height: 14px;
+            }
+            .ant-modal-content {
+                box-sizing: border-box;
+                padding: 35px 30px;
+                // width: 569px;
+                background: #ffffff;
+                box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
+                border-radius: 26px;
+                overflow: hidden;
+                .notice-container {
+                  display: flex;
+                  align-items: center;
+                  padding-top: 30px;
+                  >div{
+                      width: auto;
+                      display: flex;
+                      align-items: center;
+                      font-size: 12px;
+                      >img{
+                          width: 35px;
+                          margin-right: 5px;
+                      }
+                  }
+                  >div:first-child{
+                      margin-right: 80px;
+
+                  }
+                }
+                .report {
+                    .sub-title {
+                        margin-bottom: 50px;
+                    }
+                }
+            }
+        }
+    }
 </style>
 <script lang="ts">
+import { share } from '@/api';
 import router from '@/router';
+import { useI18n } from '@/utils/i18n';
 import { defineComponent, onMounted, onUpdated } from 'vue';
 import { onBeforeRouteLeave, useRouter } from 'vue-router';
 
@@ -44,6 +144,7 @@ export default defineComponent({
     setup(props, ctx){
         console.log(1)
         let play: any;
+        const lan = useI18n()
         onUpdated(()=>{
             console.log(props.url)
             play = window.TCPlayer('a' + props.url, { 
@@ -56,6 +157,31 @@ export default defineComponent({
             play.dispose()
                 next()
         })
+        function fx(index: number){
+            console.log(index)
+            share().then((res: any)=>{
+                console.log(res)
+                
+                if(index == 1){
+                    const url = `https://service.weibo.com/share/share.php?url=${res.shareUrl}&appkey=2754574056&language=zh_cn&pic=${res.shareImg}&searchPic=true&title=${res.shareTitle}`
+                    window.open(url, "_blank")
+
+                }else {
+                   window.FB.ui({
+                    method: 'share',
+                    href: res.shareUrl,
+                    }, function(response: any){
+                        console.log(response)
+                    });
+                }
+            })
+        }
+        return{
+            lan,
+            modalNode: () =>
+                document.getElementsByClassName("modal-container")[0],
+            fx
+        }
       
     }
 })