admin/liche
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6a9316dd644d70e46bc6a0d3fd2468ce6a013182
liche/home/views/h5/market/sylive/tstic/index.php
T
xiaoyu 6a9316dd64 0507
2025-05-07 12:39:07 +08:00

360 lines
18 KiB
PHP
Raw Blame History

<body class="bg-fff">
<div id="app" ref="app">
<div class="container bg-size-fullwidth bg-no-repeat bg-pos-top pb130" :style="'background-image:url('+info.theme+')'">
<div class="h-290"></div>
<div id="main" class="bg-fff mb30 ml30 mr30 inner30 box-shadow-lightGray ulib-r20" style="min-height:72vh;">
<div v-if="tabFixed">
<div class="height-60"></div>
<div class="fixed top-0 left-0 right-0 z-index-10 bg-fff pl30 pr30 pt20 pb20">
<div class="relative height-60 ml50 mr50 fn-flex text-center">
<div class="fn-flex-item" v-for="(item,index) in info.tab"><a :class="'relative inline-block tab-menu '+ [tabid == item.id?'font-36 active':'font-32']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
<div :class="'glider glider-'+tabIndex"></div>
</div>
</div>
</div>
<div v-else class="relative height-60 ml50 mr50 fn-flex text-center">
<div class="fn-flex-item" v-for="(item,index) in info.tab"><a :class="'relative inline-block tab-menu '+ [tabid == item.id?'font-36 active':'font-32']" @click="changeTab(item.id,index)" href="javascript:">{{item.title}}</a></div>
<div :class="'glider glider-'+tabIndex"></div>
</div>
<!--预热阶段-->
<div v-if="tabid==1">
<div class="mt30 overflowhidden ulib-r20">
<div class="bg-fff5ec fn-flex text-center">
<a class="fn-flex-item pt40 pb40" v-for="item in begin.cell1" :href="item.url">
<div class="font-32 color-fe9538">{{item.num}}</div>
<div class="mt10 font-22 color-666">
{{item.title}}<i v-if="item.url" class="iconfont icon-gengduo"></i>
</div>
</a>
</div>
</div>
<div class="mt30 bg-f9 inner40 overflowhidden ulib-r20" v-if="begin.browse.list.length>0">
<div class="pb20 fn-clear">
<b class="fn-fl font-40 text-italic" v-html="begin.browse.title"></b>
</div>
<div class="font-32 color-666" v-for="(item,index) in begin.browse.list">
<div class="pt20 pb20 fn-clear">
<div class="fn-fl wp70 text-nowrap">
<img class="imgsize-42X42 text-middle" v-if="index<3" :src="'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking-'+(index+1)+'.png'" alt="#" />
<span class="inline-block w-50 text-center text-middle" v-else>{{index+1}}</span>
<span class="text-middle">{{item.name}}</span>
<span class="inline-block pl10 pr10 line-height-15 text-middle bg-fe9538 font-22 color-fff ulib-r750" v-if="item.tip">{{item.tip}}</span>
</div>
<div class="fn-fr">{{item.num}}</div>
</div>
</div>
</div>
<div class="mt30 bg-f9 inner40 overflowhidden ulib-r20" v-if="begin.book.list.length>0">
<div class="pb20 fn-clear">
<b class="fn-fl font-40 text-italic" v-html="begin.book.title"></b>
</div>
<div class="font-32 color-666" v-for="(item,index) in begin.book.list">
<div class="pt20 pb20 fn-clear">
<div class="fn-fl wp70 text-nowrap">
<img class="imgsize-42X42 text-middle" v-if="index<3" :src="'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking-'+(index+1)+'.png'" alt="#" />
<span class="inline-block w-50 text-center text-middle" v-else>{{index+1}}</span>
<span class="text-middle">{{item.name}}</span>
<span class="inline-block pl10 pr10 line-height-15 text-middle bg-fe9538 font-22 color-fff ulib-r750" v-if="item.tip">{{item.tip}}</span>
</div>
<div class="fn-fr">{{item.num}}</div>
</div>
</div>
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
</div>
</div>
<!-- end 预热阶段-->
<!--直播阶段-->
<div v-if="tabid==2">
<div class="mt30 overflowhidden ulib-r20">
<div class="bg-fff5ec fn-flex text-center">
<a class="fn-flex-item pt40 pb40" v-for="item in live.cell1" :href="item.url">
<div class="font-32 color-fe9538">{{item.num}}</div>
<div class="mt10 font-22 color-666">
{{item.title}}<i v-if="item.url" class="iconfont icon-gengduo"></i>
</div>
</a>
</div>
</div>
<div class="mt30 bg-f9 inner40 overflowhidden ulib-r20">
<div class="pb20 fn-clear">
<b class="fn-fl font-40 text-italic" v-html="live.view.title"></b>
</div>
<div class="font-32 color-666" v-for="(item,index) in live.view.list" v-if="live.view.list.length>0">
<div class="pt20 pb20 fn-clear">
<div class="fn-fl wp70 text-nowrap">
<img class="imgsize-42X42 text-middle" v-if="index<3" :src="'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking-'+(index+1)+'.png'" alt="#" />
<span class="inline-block w-50 text-center text-middle" v-else>{{index+1}}</span>
<span class="text-middle">{{item.name}}</span>
<span class="inline-block pl10 pr10 line-height-15 text-middle bg-fe9538 font-22 color-fff ulib-r750" v-if="item.tip">{{item.tip}}</span>
</div>
<div class="fn-fr">{{item.num}}</div>
</div>
</div>
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
</div>
<div class="mt30 bg-f9 inner40 overflowhidden ulib-r20">
<div class="pb20 fn-clear">
<b class="fn-fl font-40 text-italic" v-html="live.order.title"></b>
</div>
<div class="font-32 color-666" v-for="(item,index) in live.order.list" v-if="live.order.list.length>0">
<div class="pt20 pb20 fn-clear">
<div class="fn-fl wp70 text-nowrap">
<img class="imgsize-42X42 text-middle" v-if="index<3" :src="'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking-'+(index+1)+'.png'" alt="#" />
<span class="inline-block w-50 text-center text-middle" v-else>{{index+1}}</span>
<span class="text-middle">{{item.name}}</span>
<span class="inline-block pl10 pr10 line-height-15 text-middle bg-fe9538 font-22 color-fff ulib-r750" v-if="item.tip">{{item.tip}}</span>
</div>
<div class="fn-fr">{{item.num}}</div>
</div>
</div>
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
</div>
<div class="mt30 bg-f9 inner40 overflowhidden ulib-r20" v-if="live.view_num">
<div class="pb20 fn-clear">
<b class="fn-fl font-40 text-italic" v-html="live.view_num.title"></b>
</div>
<div class="font-32 color-666" v-for="(item,index) in live.view_num.list" v-if="live.view_num.list.length>0">
<div class="pt20 pb20 fn-clear">
<div class="fn-fl wp70 text-nowrap">
<img class="imgsize-42X42 text-middle" v-if="index<3" :src="'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking-'+(index+1)+'.png'" alt="#" />
<span class="inline-block w-50 text-center text-middle" v-else>{{index+1}}</span>
<span class="text-middle">{{item.name}}</span>
<span class="inline-block pl10 pr10 line-height-15 text-middle bg-fe9538 font-22 color-fff ulib-r750" v-if="item.tip">{{item.tip}}</span>
</div>
<div class="fn-fr">{{item.num}}</div>
</div>
</div>
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
</div>
<div class="mt30 bg-f9 inner40 overflowhidden ulib-r20" v-if="live.view_time">
<div class="pb20 fn-clear">
<b class="fn-fl font-40 text-italic" v-html="live.view_time.title"></b>
</div>
<div class="font-32 color-666" v-for="(item,index) in live.view_time.list" v-if="live.view_time.list.length>0">
<div class="pt20 pb20 fn-clear">
<div class="fn-fl wp70 text-nowrap">
<img class="imgsize-42X42 text-middle" v-if="index<3" :src="'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-ranking-'+(index+1)+'.png'" alt="#" />
<span class="inline-block w-50 text-center text-middle" v-else>{{index+1}}</span>
<span class="text-middle">{{item.name}}</span>
<span class="inline-block pl10 pr10 line-height-15 text-middle bg-fe9538 font-22 color-fff ulib-r750" v-if="item.tip">{{item.tip}}</span>
</div>
<div class="fn-fr">{{item.num}}</div>
</div>
</div>
<div class="pt100 pb100 text-center font-32 color-666" v-else>暂时无数据</div>
</div>
</div>
<!-- end 直播阶段-->
<!--实时动态-->
<div class="mt30 bg-f9 inner40 overflowhidden ulib-r20">
<div class="pb20 fn-clear">
<b class="fn-fl font-40 text-italic" v-html="dynamic.title"></b>
</div>
<div class="font-28" v-for="(item,index) in dynamic.list">
<div class="pt20 pb20 fn-clear">
<div class="fn-fl wp60 text-nowrap">
<span class="text-middle">{{item.nickname}}</span>
<span class="text-middle color-666">{{item.action}}</span>
</div>
<div class="fn-fr">{{item.time}}</div>
</div>
</div>
<mugen-scroll :handler="fetchData" :should-handle="!loading" scroll-container="app">
<div class="pt100 pb100 text-center color-ccc" v-if="isNoData"></i><span class="text-middle font-22">暂无数据</span></div>
<div class="pt20 pb20 text-center color-ccc" v-else-if="loading"><i class="iconfont icon-jiazai text-middle"></i><span class="text-middle font-22">请稍等...</span></div>
<div class="pt20 pb20 text-center font-22 color-ccc" v-else-if="isDataEnd && dynamic.list.length>10">我们是有底线的</div>
</mugen-scroll>
</div>
<!-- end 实时动态-->
</div>
<div class="fixed left-0 bottom-0 right-0 inner30 bg-fff" ><a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r10" :href="info.url">进入活动</a></div>
</div>
<?$this->load->view('h5/market/sylive/nav');?>
</div>
<script>
let hostUrl = ''
var app = new Vue({
el: '#app',
data: {
tabFixed:false,
tabIndex:0,
tabid:'<?=$info['tab']?>',//1预热阶段 /2直播阶段
info:{
theme:'',
tab:[],
},
loading: false,
begin:{
cell1:<?=json_encode($info['begin'])?>,
browse:{
title:'',
list:[],
},
book:{
title:'',
list:[],
}
},
live:{
cell1:<?=json_encode($info['live'])?>,
view:{
title:'',
list:[],
},
order:{
title:'',
list:[],
},
view_num:{
title:'',
list:[],
},
view_time:{
title:'',
list:[],
}
},
isDataEnd: false,
isNoData: false,
page: 1, //页数
size: 10, //每页取多少个数据
dynamic:{
title:'',
list:[],
},
},
created(){
},
computed: {
},
mounted() {
window.addEventListener('scroll', this.handleScroll, true)
this.getInfo()
if(this.tabid == 2){
this.tabIndex = 1
}
},
beforeDestroy() {
},
//离开页面时
destroyed () {
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
//判断导航是否需要吸顶
handleScroll () {
let scrollTop = document.querySelector('#app').scrollTop
let mainoffsetTop = document.querySelector('#main').offsetTop
if (scrollTop > mainoffsetTop) {
this.tabFixed = true
} else {
this.tabFixed = false
}
},
//获取基础信息
getInfo(){
this.info = {
theme:'<?=$info['banner']?>',
tab:[
{
id:'1',
title:'预热阶段',
},
{
id:'2',
title:'直播阶段',
},
],
url:'/h5/market/sylive/act?skey=<?=$skey?>',
}
},
//tab切换
changeTab(id,index){
if(id != this.tabid&&!this.loading){
if(this.tabFixed){
let mainoffsetTop = document.querySelector('#main').offsetTop
$('html,body').animate({scrollTop: mainoffsetTop+5},500);
}
this.tabid = id
this.tabIndex = index
this.loading = false
this.isDataEnd = false
this.isNoData = false
this.page= 1
this.dynamic = {title:'', list:[]}
if(this.tabid == 1){
this.getBegin()
}else if(this.tabid == 2){
this.getLive()
}
}
},
//预热阶段数据
getBegin(){
let that=this;
if (!that.loading) {
that.getDynamicList()
that.loading = false;
}
},
//直播阶段数据
getLive(){
let that=this;
if (!that.loading) {
that.getDynamicList()
that.loading = false;
}
},
//拉取数据
fetchData: function() {
this.getDynamicList()
},
//获取实时动态
getDynamicList(){
let that=this;
if (!that.isNoData && !that.isDataEnd && !that.loading) {
that.loading = true;
//请求接口
$.get('/h5/market/sylive/tstic/event',{'skey':'<?=$skey?>','page':that.page,'type':that.tabid},function (res){
that.loading = false;
that.page = that.page + 1;
that.dynamic.title = '实时<span class="color-00a2ff">动态</span>';
that.dynamic.list = that.dynamic.list.concat(res.data.lists);
if(that.tabid==1){ //预热
that.begin.browse = res.data.browse
that.begin.book = res.data.book
}else{ // 直播
that.live.view = res.data.view
that.live.order = res.data.order
that.live.view_num = res.data.view_num
that.live.view_time = res.data.view_time
}
if (res.data.total == 0) {
that.isNoData = true;
} else if (that.dynamic.list.length == res.data.total) {
that.isDataEnd = true;
}
},'json');
}
},
},
})
</script>
<?=$this->load->view('h5/market/sylive/share_script')?>
</body>
Reference in New Issue View Git Blame Copy Permalink