H5_module/service/live/live.vue

<template>
	<view>
		<!--pages/live/live.wxml-->
		<view class="list" v-if="pageList.length > 0">
			<block v-for="(item, index) in pageList" :key="index">
				<view class="li" @tap="intoLive" :data-id="item.roomid" :data-index="index">
					<image :src="item.share_img" mode="scaleToFill" class="zbimg"></image>
					<view class="title">{{item.name}}</view>
					<view class="dflex">
						<view class="sta dflex flex" v-if="item.live_status == 101">
							<image src="/static/pages/images/zbico.png"></image>直播中
						</view>
						<view class="sta dflex flex" v-else-if="item.live_status == 102">
							<image src="/static/pages/images/zbico.png"></image>{{item.time}}开播
						</view>
						<view class="sta end dflex flex" v-else>
							<image src="/static/pages/images/zbico1.png"></image>已结束
						</view>
						<!-- <view class="ren dflex flex"><image src="/pages/images/ren.png"></image>6247</view> -->
						<view class="into" v-if="item.live_status == 103">查看回放</view>
						<view class="into" v-else>进入直播</view>
						<!-- <view class="into" wx:if="{{item.live_status == 102}}">开播提醒</view> -->
					</view>
				</view>
			</block>
			<footer-copyright></footer-copyright>
		</view>
		<view class="nodata" v-if="ishow">
			<image :src="picUrlss+'empty_zb.png'"></image>
			<text>暂无直播</text>
		</view>


		<foot channel="live" :isUpdate="isUpdate" v-if="query.isSwitchTab"></foot>
	</view>
</template>

<script>
	// pages/live/live.js
	const app = getApp();
	const req = require("../../utils/request.js");
	const util = require("../../utils/util.js");
	import foot from "../../components/nav-bar/index";
	import footerCopyright from "../../components/footer-copyright/footer-copyright";

	export default {
		data() {
			return {
				picUrlss: req.public.picUrls,
				query: {},
				bottomBlankHeignt: app.globalData.isIPhoneX ? 68 : 0,
				page: 1,
				pageList: [],
				isLoad: true,
				isUpdate: false // 是否更新消息
					,
				hasmore: false,
				ishow: false
			};
		},

		components: {
			foot,
			footerCopyright
		},
		props: {},

		onLoad(options) { // this.getList()
			if(options.isSwitchTab) options.isSwitchTab = true;
			this.query = options;
		},

		onShow() {
			this.getList();
			this.setData({
				isUpdate: !this.isUpdate
			});
		},

		onReachBottom() {
			this.page++;
			this.getList();
		},

		methods: {
			getList() {
				let that = this;
				let isShowLoading = false;
				// console.log(that.isLoad);
				if (!that.isLoad) return false;
				that.isLoad = false;
				let form = {
					page: that.page,
					limit: 10
				};

				if (form.page == 1 && !isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}

				req.getRequest('/api/live/list', form, data => {
					// if (!data) return req.msg('还没有直播');
					if (data && data.length == 10) that.isLoad = true;
					if (that.page > 1) data = that.pageList.concat(data);

					if (!data || data.length < 10) {
						that.setData({
							hasmore: true
						});
					}

					if (data) {
						data.map(item => {
							if (item.start_time) {
								item.time = util.transTime(item.start_time);
							}

							return item;
						});
					}

					// console.log(data);
					that.setData({
						pageList: data
					});

					if (!this.pageList) {
						that.setData({
							ishow: true
						});
					} else {
						that.setData({
							ishow: false
						});
					}

					if (isShowLoading) {
						uni.hideLoading();
						isShowLoading = false;
					}
				});
			},

			getLive(id) {
				return new Promise((resolve, reject) => {
					req.getRequest('/api/live/playBack', {
						page: 1,
						limit: 10,
						room_id: id
					}, data => {
						this.videoList = data;
						resolve();
					});
				});
			},

			intoLive(event) {
				let roomId = event.currentTarget.dataset.id;
				let index = event.currentTarget.dataset.index;
				// console.log(roomId)
				// let date=this.data.pageList.filter(res=>res.roomid==roomId)
				// // console.log(JSON.stringify(JSON.stringify(date[0])))
				// // console.log(typeof(JSON.stringify(date[0])))
				// res=JSON.stringify(date[0])
				let redirect = '/service/liveMiddle/liveMiddle?id=' + roomId
				req.isLogin().then(success => {
					if (success) {
						uni.navigateTo({
							url: redirect // url:`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`

						});
					}
				});


			},

			async playBack(event) {
				let roomId = event.currentTarget.dataset.id;
				await this.getLive(roomId);
				let videoList = JSON.stringify(this.videoList);
				if (videoList.length < 1) return req.msg('回放生成中');
				uni.navigateTo({
					url: '/service/video/video?videoList=' + videoList
				});
			}

		}
	};
</script>
<style>
	@import "./live.css";
</style>