xiaoyu
215 lines
10 KiB
PHP
215 lines
10 KiB
PHP
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/md5.min.js"></script>
|
|
<script type="text/javascript" src="//player.polyv.net/livesdk/polyv-live.min.js"></script>
|
|
<body class="bg-fff">
|
|
<div id="app" ref="app">
|
|
<div class="container relative bg-no-repeat bg-size-fullwidth bg-pos-top" :style="'background-image:url('+info.bg+')'">
|
|
<div class="absolute top-0 right-0 mt15 mr10 ulib-r750 fn-flex overflowhidden line-height-20 space-nowrap">
|
|
<a class="fn-flex-item bg-000-op50 pl20 pr20 font-22 color-fff" v-if="info.shareurl" :href="info.shareurl">
|
|
<i class="iconfont icon-fenxiang text-middle"></i><span class="text-middle ml10">分享</span></a>
|
|
<a class="fn-flex-item bg-000-op50 ml1 pl20 pr20 font-22 color-fff" v-if="info.statisticsurl" :href="info.statisticsurl">
|
|
<i class="iconfont icon-shuju text-middle"></i><span class="text-middle ml10">数据</span></a>
|
|
</div>
|
|
<div class="height-1200"></div>
|
|
<div class="fixed left-0 bottom-0 right-0 inner30 bg-fff z-index-4" >
|
|
<template v-if="info.live_status<2">
|
|
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r10" v-if="info.live_status==1" @click="goLive" href="javascript:;">进入直播间</a>
|
|
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r10" v-else href="javascript:;" @click="showCode">点击这里预约直播</a>
|
|
</template>
|
|
<template v-else>
|
|
<a class="block bg-999 pt20 pb20 text-center font-36 color-fff ulib-r10" href="javascript:;">活动已结束</a>
|
|
</template>
|
|
</div>
|
|
<a class="bottom-opt pt15 bg-1a1a1a ulib-r750 text-center color-fff" :href="info.my_url">
|
|
<i class="iconfont icon-wode text-middle font-36"></i>
|
|
<div class="font-22">我的</div>
|
|
</a>
|
|
<!--直播字幕-->
|
|
<div>
|
|
<div class="notice-shadow"></div>
|
|
<div class="notice bg-000-op10 pl20 pr20 line-height-17 font-28 ulib-r750 z-index-1" :style="'animation-delay:'+item.delay+'s;'" v-for="(item,index) in notice1">
|
|
<span class="color-333">{{item.name}}</span>
|
|
<span class="ml10 color-333">{{item.tip}}</span>
|
|
</div>
|
|
<div class="notice bg-000-op10 pl20 pr20 line-height-17 font-28 ulib-r750 z-index-1" :style="'animation-delay:'+item.delay+'s;'" v-for="(item,index) in notice2">
|
|
<span class="color-333">{{item.name}}</span>
|
|
<span class="ml10 color-333">{{item.tip}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="msg fn-hide" :style="msgisShowCode?'display:block':'display:none'" v-if="msgisShowCode">
|
|
<div class="msgBg" @click="closeCode"></div>
|
|
<div class="msgMain">
|
|
<div class="content">
|
|
<div class="word text-center">
|
|
<div class="mt20 font-22 line-height-15 color-666">
|
|
<div class="mt10">
|
|
看直播，好礼享不停！
|
|
</div>
|
|
<div class="mt10">添加【东风EV官方企微号】</div>
|
|
<div class="mt10">
|
|
了解更多惊喜内幕！
|
|
</div>
|
|
</div>
|
|
<div class="mt20 pt10 text-center">
|
|
<img class='inline-block imgsize-360X360' src='https://qs.liche.cn/web/images/project/H5-ShiYu/wx-code.png' />
|
|
</div>
|
|
<div class="pt10 pb20 pl20 pr20 font-24 color-fe9538 line-height-15">
|
|
<img class="imgsize-24X24 text-middle" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-finger2.png" alt="#" />
|
|
<span class="text-middle">长按识别二维码添加</span>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="opt pl40 pr40">
|
|
<a class="block bg-1a1a1a pt25 pb25 text-center font-32 color-fff ulib-r750" @click="closeCode" href="javascript:" >知道了</a>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
let hostUrl = ''
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
info:'',
|
|
bundleIntervalEvent: '',//倒计时
|
|
page:1,
|
|
notice1:[],
|
|
notice2:[],
|
|
code:'',
|
|
msgisShowCode: false,
|
|
},
|
|
created(){
|
|
|
|
},
|
|
computed: {
|
|
//用计算属性显示结果
|
|
showTime() {
|
|
//剩余秒数<=0
|
|
if (this.info.e_time <= 0) {
|
|
return "";
|
|
}
|
|
// 剩余秒数>0
|
|
else {
|
|
let day = Math.floor(this.info.e_time / 86400);
|
|
let hour = Math.floor((this.info.e_time % 86400) / 3600);
|
|
let min = Math.floor(((this.info.e_time % 86400) % 3600) / 60);
|
|
let sec = Math.floor(((this.info.e_time % 86400) % 3600) % 60);
|
|
if(day>0){
|
|
return ("<span class='inline-block absolute top-0 left-0 bottom-0 bg-333 pl30 pr30'>距开播还有</span><em class='text-middle pl5 pr5'>"+day+ "</em><em class='text-middle'>天</em><em class='text-middle pl5 pr5'>"+(hour < 10 ? "0" : "") + hour + "</em><em class='text-middle'>时</em><em class='text-middle pl5 pr5'>" + (min < 10 ? "0" : "") + min + "</em><em class='text-middle'>分</em><em class='text-middle pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}else if(hour>0){
|
|
return ("<span class='inline-block absolute top-0 left-0 bottom-0 bg-333 pl30 pr30'>距开播还有</span><em class='text-middle color-ff7200 pl5 pr5'>"+(hour < 10 ? "0" : "") + hour + "</em><em class='text-middle'>时</em><em class='text-middle color-ff7200 pl5 pr5'>" + (min < 10 ? "0" : "") + min + "</em><em class='text-middle'>分</em><em class='text-middle color-ff7200 pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}else if(min>0){
|
|
return ("<span class='inline-block absolute top-0 left-0 bottom-0 bg-333 pl30 pr30'>距开播还有</span><em class='text-middle color-ff7200 pl5 pr5'>" + (min < 10 ? "0" : "") + min + "</em><em class='text-middle'>分</em><em class='text-middle color-ff7200 pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}else if(sec>0){
|
|
return ("<span class='inline-block absolute top-0 left-0 bottom-0 bg-333 pl30 pr30'>距开播还有</span><em class='text-middle color-ff7200 pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
//倒计时
|
|
this.bundleIntervalEvent = setInterval(this.intervalEvent, 1000);
|
|
|
|
this.getInfo()
|
|
if(this.info.alert_code){
|
|
// this.msgisShowCode = true
|
|
mDialog.msg({content: '预约成功'});
|
|
}
|
|
this.getNotice()
|
|
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.bundleIntervalEvent);
|
|
},
|
|
methods: {
|
|
showCode: function() {
|
|
let that = this;
|
|
if (that.info.subscribemsg == '已订阅直播') {
|
|
// if(that.info.show_code){
|
|
// this.msgisShowCode = true
|
|
// }else{
|
|
mDialog.msg({content: that.info.subscribemsg});
|
|
// }
|
|
}else{
|
|
window.location.href = that.info.subscribemsg;
|
|
}
|
|
},
|
|
closeCode: function() {
|
|
this.msgisShowCode = false
|
|
},
|
|
|
|
//直播倒计时
|
|
intervalEvent() {
|
|
if (this.info.e_time > 0) {
|
|
this.info.e_time--;
|
|
} else {
|
|
clearInterval(this.bundleIntervalEvent);
|
|
}
|
|
},
|
|
|
|
//获取基础信息
|
|
getInfo(){
|
|
this.info = <?=json_encode($info,JSON_UNESCAPED_UNICODE)?>;
|
|
},
|
|
|
|
//获取底部订阅提示
|
|
getNotice(){
|
|
let that = this
|
|
if(that.info.live_status==2){
|
|
return '';
|
|
}
|
|
$.get('/h5/market/sylive/act/subscribemsg_lists',{'a_id':that.info.a_id,'live_status':that.info.live_status},function (result){
|
|
that.notice = result.data.lists
|
|
that.page = that.page + 1
|
|
|
|
alldelay = 0
|
|
that.notice.forEach(item => {
|
|
item.delay = alldelay + Math.floor(Math.random() * (3))/10 + 1
|
|
alldelay = item.delay
|
|
})
|
|
|
|
if(that.page%2 ==0){
|
|
that.notice2 = that.notice
|
|
setTimeout(function () {
|
|
that.notice1= []
|
|
}, 6000);
|
|
}else{
|
|
that.notice1 = that.notice
|
|
setTimeout(function () {
|
|
that.notice2= []
|
|
}, 6000);
|
|
}
|
|
setTimeout(function () {
|
|
that.getNotice()
|
|
}, (alldelay<20?20:alldelay)*1000);
|
|
},'json')
|
|
// let notice = [
|
|
// {
|
|
// name:'刘*',
|
|
// tip:'刚刚订阅了直播提醒',
|
|
// },
|
|
// ]
|
|
|
|
},
|
|
|
|
//进入直播间
|
|
goLive(){
|
|
$.get('/h5/market/sylive/act/golive',{'a_id':this.info.a_id},function (result){
|
|
window.location.href = "<?=$info['live_url']?>"
|
|
})
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<?=$this->load->view('h5/market/sylive/share_script')?>
|
|
</body>
|