311 lines
8.8 KiB
Vue
311 lines
8.8 KiB
Vue
<template>
|
|
<div class="video">
|
|
<video v-if="isvideo" :id=" 'a' + time" style="width:100%;height:calc(100% - 0.58rem)"></video>
|
|
<img v-else :src="info.img" style="width:100%;height:calc(100% - 0.58rem)" alt="">
|
|
<div class="title fenxiang" @click="show"> <img src="@/static/images/fenxiang.png" alt=""> {{lan.$t('lijifenxiang')}}</div>
|
|
<div class="liveinfo">
|
|
|
|
<div class="left">
|
|
<div>
|
|
<img src="@/static/images/livelesson.png" alt="" class="icon">
|
|
<span>{{lan.$t('xiabanyayu')}}</span>
|
|
</div>
|
|
<div>
|
|
<img src="@/static/images/livewatch.png" alt="" class="icon">
|
|
<span>{{info.tlanguage}}</span>
|
|
</div>
|
|
<div>
|
|
<img src="@/static/images/livetimetake.png" alt="" class="icon">
|
|
<span>{{info.livetime}}min</span>
|
|
</div>
|
|
<div>
|
|
<img src="@/static/images/shoucang.png" alt="" class="icon">
|
|
<span class="score">{{info.score}}{{lan.$t('fen')}}</span>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex">
|
|
<div class="right" @click="bianji" v-if="info.livestatus == 0">
|
|
{{lan.$t('bianjixinxi')}}
|
|
</div>
|
|
<div class="right" @click="kaishi" v-if="info.livestatus == 0 && timestart">
|
|
{{lan.$t('kaishizhibo')}}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="modal-container">
|
|
<!-- @cancel="hideNoticeModal" -->
|
|
|
|
<a-modal
|
|
centered
|
|
:footer="null"
|
|
dialogClass="modal-dialog"
|
|
v-model:visible="fxtc"
|
|
:title="lan.$t('qingxuanzefenxiangtujing')"
|
|
: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="">
|
|
{{lan.$t('xinlangweibo')}}
|
|
</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>
|
|
.video {
|
|
width: 976px;
|
|
height: 563px;
|
|
border-radius: 18px;
|
|
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;
|
|
justify-content: space-between;
|
|
height: 58px;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
position: relative;
|
|
.left{
|
|
display: flex;
|
|
color: #121212;
|
|
font-size: 13px;
|
|
margin-left: 29px;
|
|
.score{
|
|
color: #D22C2E;
|
|
font-size: 13px;
|
|
}
|
|
>div{
|
|
margin-right: 57px;
|
|
}
|
|
.icon{
|
|
width: 25px;
|
|
height:24px;
|
|
margin-right: 6px;
|
|
|
|
}
|
|
}
|
|
.right{
|
|
width: 74px;
|
|
height: 29px;
|
|
border:1px solid #08AE98;
|
|
border-radius: 3px;
|
|
margin-right: 29px;
|
|
color: #08AE98;
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
line-height: 29px;
|
|
font-weight: bold;
|
|
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, share } from '@/api';
|
|
import router from '@/router';
|
|
import store from '@/store';
|
|
import { useI18n } from '@/utils/i18n';
|
|
import dayjs from 'dayjs';
|
|
import { computed, defineComponent, onUpdated, ref, watch } from "vue";
|
|
import { onBeforeRouteLeave } from 'vue-router';
|
|
|
|
export default defineComponent({
|
|
props:{
|
|
info: Object
|
|
},
|
|
setup(props) {
|
|
const lan: any = useI18n();
|
|
console.log(props.info);
|
|
function bianji(){
|
|
if(props.info != undefined){
|
|
router.push("/mine/webcast?id=" + props.info.liveid)
|
|
}
|
|
}
|
|
// todo 修改后报错
|
|
function kaishi(){
|
|
if(props.info != undefined){
|
|
const id = props.info.liveid;
|
|
livestart(id).then(()=>{
|
|
router.push("/live/liveing?id=" + id)
|
|
})
|
|
}
|
|
}
|
|
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)
|
|
|
|
if(props.info.fileid != '' || props.info.vodid != ''){
|
|
play = window.TCPlayer('a' + time.value, {
|
|
fileID: (props.info.livestatus == 0 ? props.info.fileid : props.info.vodid),
|
|
appID: '1303872925'
|
|
});
|
|
}else{
|
|
isvideo.value = false;
|
|
}
|
|
|
|
}
|
|
})
|
|
onBeforeRouteLeave((to, from, next) => {
|
|
console.log(121)
|
|
if(play){
|
|
play.dispose()
|
|
}
|
|
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.php?t=${encodeURIComponent(res.shareTitle)}&u=${res.shareUrl}`
|
|
}
|
|
window.open(url, "_blank")
|
|
})
|
|
}
|
|
function show(){
|
|
fxtc.value = true
|
|
}
|
|
// const liveinfo = ref(props.liveinfo)
|
|
const zid = computed(()=>store.state.userinfo.zoneValue)
|
|
const timestart = computed(()=>{
|
|
/* eslint-disable */
|
|
const utc = require('dayjs/plugin/utc') // dependent on utc plugin
|
|
/* eslint-disable */
|
|
const timezone = require('dayjs/plugin/timezone')
|
|
dayjs.extend(utc)
|
|
dayjs.extend(timezone)
|
|
const days: any = dayjs;
|
|
if(zid.value != ""){
|
|
const now = days().tz(zid.value).unix();
|
|
let dateline: string;
|
|
if(props.info){
|
|
dateline = props.info.dateline
|
|
const start = days(dateline).unix()
|
|
if(start - now < 15 * 60){
|
|
return true;
|
|
}else {
|
|
return false;
|
|
}
|
|
|
|
}
|
|
}
|
|
return false;
|
|
})
|
|
return {
|
|
bianji,
|
|
kaishi,
|
|
lan,
|
|
time,
|
|
isvideo,
|
|
fx,
|
|
fxtc,
|
|
show,
|
|
modalNode: () => document.getElementsByClassName("modal-container")[0],
|
|
timestart
|
|
}
|
|
}
|
|
});
|
|
</script> |