分享完成
This commit is contained in:
parent
5cafb95ee0
commit
e1c2e3170d
@ -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],
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -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, {
|
||||
fileID: props.url,
|
||||
appID: '1303872925'
|
||||
});
|
||||
if(props.url){
|
||||
console.log(props.url)
|
||||
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
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user