分享完成

src/components/LivePlay.vue

@@ -2,7 +2,9 @@
   <div class="video">
     <video v-if="isvideo" :id=" 'a' + time" style="width:100%;height:100%"></video>
     <img v-else :src="info.img" style="width:100%;height:100%" alt="">
+    <div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> 立即分享</div>
     <div class="liveinfo">
+
           <div class="left">
               <div>
                   <img src="@/static/images/livelesson.png" alt="" class="icon">
@@ -31,6 +33,35 @@
           </div>
           
       </div>
+         <div class="modal-container">
+                <!-- @cancel="hideNoticeModal" -->
+
+            <a-modal
+                centered
+                :footer="null"
+                dialogClass="modal-dialog"
+                v-model:visible="fxtc"
+                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>
@@ -41,10 +72,30 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
   > video {
     width: 100%;
     height: 505px;
   }
+     .title{
+        position: absolute;
+        top: 23px;
+        left: 51px;
+        font-size: 13px;
+        color: #fff;
+        z-index: 999;
+    }
+    .fenxiang{
+        left: unset;
+        right: 51px;
+        display: flex;
+        align-items: center;
+        >img{
+            width: 11px;
+            height: 11px;
+            margin-right: 11px;
+        }
+    }
   .liveinfo{
         flex-shrink: 0;
         display: flex;
@@ -52,6 +103,7 @@
         height: 58px;
         align-items: center;
         background-color: #fff;
+        position: relative;
         .left{
             display: flex;
             color: #121212;
@@ -85,10 +137,67 @@
             text-align: center;
         }
       }
+      .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 { livestart } from '@/api';
+import { livestart, share } from '@/api';
 import router from '@/router';
 import { useI18n } from '@/utils/i18n';
 import { defineComponent, onUpdated, ref, watch } from "vue";
@@ -118,7 +227,7 @@ export default defineComponent({
     const time = ref(new Date().getTime())
     let play: any;
     const isvideo = ref(true);
-    
+    const fxtc = ref(false)
     watch(()=> props.info,()=>{
       if(props.info){
         console.log(props.info)
@@ -141,13 +250,33 @@ export default defineComponent({
       }
         next()
     })
+            function fx(index: number){
+            console.log(index)
+            share().then((res: any)=>{
+                console.log(res)
+                let url = "";
+                if(index == 1){
+                    url = `https://service.weibo.com/share/share.php?url=${res.shareUrl}&appkey=2754574056&language=zh_cn&pic=${res.shareImg}&searchPic=true&title=${res.shareTitle}`
+                }else {
+                    url = `https://www.facebook.com/sharer/sharer.php?%20u=${res.shareUrl}&t=${res.shareTitle}`
+                }
+                window.open(url, "_blank")
+            })
+        }
+        function show(){
+            fxtc.value = true
+        }
     // const liveinfo = ref(props.liveinfo)
     return {
       bianji,
       kaishi,
       lan,
       time,
-      isvideo
+      isvideo,
+      fx,
+      fxtc,
+      show,
+      modalNode: () => document.getElementsByClassName("modal-container")[0],
     }
   }
 });

src/components/VideoPlay.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="video">
         <div class="title">{{title}}</div>
-        <div class="title fenxiang"> <img src="@/static/images/fenxiang.png" alt=""> 立即分享</div>
+        <div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> 立即分享</div>
         <video style="width:100%; height:100%;" :id="'a' + url" ></video>
         <div class="modal-container">
                 <!-- @cancel="hideNoticeModal" -->
@@ -10,7 +10,7 @@
                 centered
                 :footer="null"
                 dialogClass="modal-dialog"
-                :visible="true"
+                v-model:visible="fxtc"
                 title="请选择分享途径"
                 :getContainer="modalNode"
                 width="4rem"
@@ -129,7 +129,7 @@
 import { share } from '@/api';
 import router from '@/router';
 import { useI18n } from '@/utils/i18n';
-import { defineComponent, onMounted, onUpdated } from 'vue';
+import { defineComponent, onMounted, onUpdated, ref, watch } from 'vue';
 import { onBeforeRouteLeave, useRouter } from 'vue-router';
 
 export default defineComponent({
@@ -145,13 +145,37 @@ export default defineComponent({
         console.log(1)
         let play: any;
         const lan = useI18n()
-        onUpdated(()=>{
+        const fxtc = ref(false)
+        // onMounted(()=>{
+        //     console.log(props.url)
+        //     play = window.TCPlayer('a' + props.url, { 
+        //         fileID: props.url,
+        //         appID: '1303872925' 
+        //     });
+        // })
+        onMounted(()=>{
             console.log(props.url)
-            play = window.TCPlayer('a' + props.url, { 
+            if(props.url){
-                fileID: props.url,
+                console.log(props.url)
-                appID: '1303872925' 
+                play = window.TCPlayer('a' + props.url, { 
-            });
+                    fileID: props.url,
+                    appID: '1303872925' 
+                });
+            }else{
+                watch(()=> props.url,()=>{
+                    console.log(props.url)
+                    setTimeout(()=>{
+                        play = window.TCPlayer('a' + props.url, { 
+                            fileID: props.url,
+                            appID: '1303872925' 
+                        });
+                    }, 500)
+                    
+                })
+            }
+            
         })
+        
         onBeforeRouteLeave((to, from, next) => {
             console.log(121)
             play.dispose()
@@ -170,11 +194,16 @@ export default defineComponent({
                 window.open(url, "_blank")
             })
         }
+        function show(){
+            fxtc.value = true
+        }
         return{
             lan,
             modalNode: () =>
                 document.getElementsByClassName("modal-container")[0],
-            fx
+            fx,
+            fxtc,
+            show
         }
       
     }

src/views/regime/Livedetail.vue

@@ -35,8 +35,9 @@ import liveplay from "@/components/LivePlay.vue";
 import LiveCount from "@/components/LiveCount.vue";
 import VideoReview from "@/components/VideoReview.vue";
 import { useRoute } from "vue-router";
-import { getliveinfo } from "@/api";
+import { getliveinfo, share } from "@/api";
 import router from '@/router';
+import { useI18n } from "@/utils/i18n";
 export default defineComponent({
   components: {
     LiveCount,