<template>
	<view class="container">
		<loadlogo v-if="!loadlogo" />
		<block v-if="loadlogo">
			<far-bottom></far-bottom>
			<!-- #ifdef H5 -->
			<view class="qurl">
				<view class="f-30" style="padding: 30upx 0 ;">
					应官方要求,直播功能目前只支持小程序平台,长按识别二维码前往小程序端观看直播。
				</view>
				<view   style="box-shadow: 0upx 0upx 35upx #333333;width: 600upx;height: 600upx;">
					<image :src="live.qrimg" mode="" style="width: 600upx;height: 600upx;border-radius: 10upx;"></image>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<block v-if="!!liveList && liveList.length>0">
							<live-componets :liveList="liveList"></live-componets>
							<view style="padding-bottom: 10px; background-color: #F8F8F8;">
								<load-more :isMore="loadingMore"></load-more>
							</view>
						</block>
						<block v-else>
							<nonemores v-if="loadingMore"></nonemores>
						</block>
			<!-- #endif -->
		</block>
	</view>
</template>

<script>
	import App from "@/common/js/app.js"
	import liveComponets from "@/components/template/live.vue"
	import loadMore from '@/components/template/loadmore.vue'
	import Loadlogo from '@/components/template/loadlogo.vue'
	import nonemores from '@/components/template/nonemores';
	export default {
		data() {
			return {
				curpage: 1,
				liveList: [],
				loadingMore: false,
				loadlogo: false,
				live:{},
				count:0
			}
		},
		props: {

		},
		components: {
			liveComponets,
			loadMore,
			Loadlogo,
			nonemores
		},
		computed: {

		},
		methods: {
			gonewpage(){
				uni.navigateTo({
					url:'/pages/subPages/live/newLive'
				})
			},
			getLivelist(page = 1, isload = false) {
				let _this = this,
					requestData = {
						page
					};
				App._post_form('&p=wxapp&do=liveList', requestData, res => {
					let wxliveList = res.data.list;
					_this.live = res.data;
					if (isload) {
						if (wxliveList.length > 0) {
							_this["liveList"].push(...wxliveList);
						} else {
							_this.loadingMore = res.data.total_page;
						}
					} else {
						_this["liveList"] = wxliveList;
						_this.count = res.data.total_page;
						_this.loadingMore = false;
						_this.loadlogo = true;
					};
					_this.loadingMore = true;
					_this.loadlogo = true;
				})
			}
		},
		onLoad() {
			this.getLivelist()
		},
		onReachBottom() {
			let _this = this;
			if(_this.count == _this.curpage) return;
			_this.getLivelist(++_this.curpage, true);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}
	.qurl{
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translate(-50%);
		
	}
</style>
