|
|
|
@ -1,5 +1,5 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div v-wechat-title="'正在直播：' +play_title"></div> |
|
|
|
<div v-wechat-title="play_title + ' - ' + $route.meta.title"></div> |
|
|
|
<appHeader /> |
|
|
|
<appHeader /> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="!com_user_token"> |
|
|
|
<div v-if="!com_user_token"> |
|
|
|
@ -10,97 +10,96 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div v-else-if="!isAuth"> |
|
|
|
<div v-else-if="!isAuth"> |
|
|
|
<el-empty :image-size="200" description=" ">{{msg}}</el-empty> |
|
|
|
<el-empty :image-size="200" description=" ">{{ msg }}</el-empty> |
|
|
|
<div style="text-align: center"> |
|
|
|
<div style="text-align: center"> |
|
|
|
<router-link :to="'/live/'+liveid" class="el-btn medium ff18">马上报名</router-link> |
|
|
|
<router-link :to="'/live/' + liveid" class="el-btn medium ff18">马上报名</router-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="playbox" v-else> |
|
|
|
<div class="playbox" v-else> |
|
|
|
<iframe scrolling="no" border="0" frameborder='0' allowfullscreen='true' |
|
|
|
<!-- <iframe scrolling="no" border="0" frameborder="0" allowfullscreen="true" :src="'https://live.vhall.com/webinar/inituser/' + live.webinar_id + '?email=' + live.uid + '@vhall.com&name=' + live.liveUserName + '&k=' + live.livekey" width="100%" height="100%"> </iframe> --> |
|
|
|
:src="'https://live.vhall.com/webinar/inituser/'+live.webinar_id+'?email='+live.uid+'@vhall.com&name='+live.liveUserName+'&k='+live.livekey" |
|
|
|
<iframe id="iframe_live" border="0" frameborder="0" allowfullscreen="true" :src="'https://live.polyv.cn/watch/' + live.webinar_id + '?userid=' + live.uid + '&ts=' + live.ts + '&sign=' + live.sign" width="100%" height="100%"> </iframe> |
|
|
|
width="100%" height="100%"> |
|
|
|
|
|
|
|
</iframe> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import appHeader from "@/components/Header"; |
|
|
|
import appHeader from "@/components/Header"; |
|
|
|
import { useRoute } from 'vue-router' |
|
|
|
import { useRoute } from "vue-router"; |
|
|
|
import { livePlay } from "@/api/live"; |
|
|
|
import { livePlay } from "@/api/live"; |
|
|
|
import { toRefs, reactive, getCurrentInstance } from 'vue'; |
|
|
|
import { toRefs, reactive, getCurrentInstance } from "vue"; |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: 'live_play', |
|
|
|
name: "live_play", |
|
|
|
components: { |
|
|
|
components: { |
|
|
|
appHeader, |
|
|
|
appHeader, |
|
|
|
}, |
|
|
|
}, |
|
|
|
setup() { |
|
|
|
setup() { |
|
|
|
const { proxy } = getCurrentInstance() |
|
|
|
const { proxy } = getCurrentInstance(); |
|
|
|
const route = useRoute() |
|
|
|
const route = useRoute(); |
|
|
|
const liveid = route.params.liveid; |
|
|
|
const liveid = route.params.liveid; |
|
|
|
const state = reactive({ |
|
|
|
const state = reactive({ |
|
|
|
isAuth: 1, |
|
|
|
isAuth: 1, |
|
|
|
msg: 0, |
|
|
|
msg: 0, |
|
|
|
empty: false, |
|
|
|
empty: false, |
|
|
|
live: {}, |
|
|
|
live: {}, |
|
|
|
playcur: 0, |
|
|
|
playcur: 0, |
|
|
|
logid: 0, |
|
|
|
logid: 0, |
|
|
|
videoid: 0, |
|
|
|
videoid: 0, |
|
|
|
play_title: '', |
|
|
|
play_title: "", |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const reslivePlay = async () => { |
|
|
|
const reslivePlay = async () => { |
|
|
|
const res = await livePlay(liveid); |
|
|
|
const res = await livePlay(liveid); |
|
|
|
if(res.status==-1){ |
|
|
|
if (res.status == -1) { |
|
|
|
state.isAuth=0; |
|
|
|
state.isAuth = 0; |
|
|
|
state.msg=res.message; |
|
|
|
state.msg = res.message; |
|
|
|
} |
|
|
|
|
|
|
|
if (res.code === 200) { |
|
|
|
|
|
|
|
state.live = res.data; |
|
|
|
|
|
|
|
state.play_title = res.data.title; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (proxy.$root.com_user_token) { |
|
|
|
|
|
|
|
reslivePlay(); |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
if (res.code === 200) { |
|
|
|
|
|
|
|
state.live = res.data; |
|
|
|
return { |
|
|
|
state.play_title = res.data.title; |
|
|
|
...toRefs(state), |
|
|
|
|
|
|
|
liveid, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (proxy.$root.com_user_token) { |
|
|
|
|
|
|
|
reslivePlay(); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
// setTimeout(function() { |
|
|
|
.playbox { |
|
|
|
// let iframeDocument = document.getElementById("iframe_live").contentWindow; |
|
|
|
position: absolute; |
|
|
|
// console.log("iframeDocument=====", iframeDocument); |
|
|
|
top: 118px; |
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
background-color: #000; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// iframeDocument.body.style.backgroundColor = "blue"; |
|
|
|
|
|
|
|
// }, 500); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
...toRefs(state), |
|
|
|
|
|
|
|
liveid, |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
|
|
|
.playbox { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
|
|
|
|
top: 118px; |
|
|
|
|
|
|
|
left: 0; |
|
|
|
|
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
right: 0; |
|
|
|
|
|
|
|
background-color: #000; |
|
|
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
<style lang="scss"> |
|
|
|
<style lang="scss"> |
|
|
|
/*响应式-移动端*/ |
|
|
|
/*响应式-移动端*/ |
|
|
|
@media screen and (max-width: 800px) { |
|
|
|
@media screen and (max-width: 800px) { |
|
|
|
|
|
|
|
.header, |
|
|
|
.header, |
|
|
|
.edu-nav-box { |
|
|
|
.edu-nav-box { |
|
|
|
display: none; |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.playbox { |
|
|
|
.playbox { |
|
|
|
top: 0 !important; |
|
|
|
top: 0 !important; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
