xdd-uniapp-new/pages/LiveBroadcastList/LiveBroadcastList.vue

<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" top="0" bottom="0" class='cotent-scroll' :up="upOption" :down="downOption" @up="upCallback" @down="downCallback" @init="mescrollInit" @emptyclick="emptyClick">
			<view class="video-list">
				<view class="video-list-item acea-row row-column" v-for="(video,index) in videoList" :key="index" @click="videoClick(video)">
					
					<view class="video-img">
						<image :src="video.coverImge || webUrl+'/20230304100226088424.jpg'" mode="scaleToFill"></image>
						<view class="live-status-tag acea-row row-center">
							<text style="color: #FFFFFF;font-size: 28rpx;font-weight: bold;">{{liveStatusText(video.liveStatus)}}</text>
						</view>
					</view>
					
					<view class="video-title line2">{{video.name}}</view>
					
					<view class="video-shop acea-row row-middle row-between" style="flex-wrap: nowrap;">
						<view class="acea-row row-middle" style="flex-wrap: nowrap;">
							<image style="width: 48rpx;height: 48rpx;border-radius: 50%;margin-right: 8rpx;" src="http://image.xdd618.com/logo.png" mode=""></image>
							<!-- <text>{{video.storeName}}</text> -->
							<text>香道滇官方商城</text>
						</view>
						<image style="width: 48rpx;height: 48rpx;border-radius: 50%;flex-shrink: 0;" :src="webUrl+'/20210203151253323822.png.png'" mode=""></image>
					</view>
					
				</view>	 
			</view>
			 
				  
		</mescroll-body>
		
	</view>
</template>

<script>
import MescrollMixins from "@/mixins/mescroll-mixins.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getVideoList } from "@/api/user";
import {
	getWxLiveList
} from '@/api/public';
export default {
	components:{
		MescrollBody,
		uniPopup
	},
	mixins:[
		MescrollMixins({
			getPageData(mescroll){
				// 此时mescroll会携带page的参数:
				let pageNum = Math.max(mescroll.num-1,0); // 页码, 默认从1开始
				let pageSize = mescroll.size; // 页长, 默认每页10条
				
				var params = {
					page: pageNum,
					size: pageSize
				}
				var _this = this;
				
				// mescroll.endSuccess(5, 0);
				
				getWxLiveList(params)
					.then(res => {
						console.log('res:'+JSON.stringify(res));
						//mescroll.endByPage(res.data.length, res.data.total_pages);
						
						
						if(mescroll.num == 1) {
							_this.videoList = []; //如果是第一页需手动制空列表
							//_this.adjustPage();
						}
						
						_this.videoList = _this.videoList.concat(res.data.content);//追加新数据
						mescroll.endSuccess(res.data.content.length, res.data.content.length>pageSize);
						
					})
					.catch(err => {
						mescroll.endErr();
						//uni.hideLoading();
						uni.showToast({
							title: err + '',
							icon: 'none',
							mask: false,
							duration: 1500
						});
					})
			}
		})
	],
	data() {
		return {
			webUrl:this.$VUE_APP_RESOURCES_URL,
			videoList:[],
			upOption:{
				noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				auto:true,
				empty:{
					tip: '暂无直播' // 提示
					// btnText:'点击刷新'
				}
			},
			downOption:{
				auto:true
			},
			curPlayVideoUrl:'',
			isVideoPopupShow:false
		}
	},
	 onReady: function(res) {
		 
		
		
		
	},
	methods: {
		videoClick:function(video){
			// this.curPlayVideoUrl = video.video;
			// this.$refs.popup.open();
			
			// this.videoContext = uni.createVideoContext('myVideo');
			// this.videoContext.requestFullScreen();
			
			// this.$yrouter.push('/pages/VideoPlayBackList/VideoPlayBackDetail?videoUrl='+video.video);
			
			
			var liveAppId = this.$WX_LIVE_APPID;
			wx.navigateTo({
				url: `plugin-private://${liveAppId}/pages/live-player-plugin?room_id=${video.roomId}`
			});
		},
		emptyClick:function(){
			
		},
		liveStatusText:function(liveStatus){
			//直播间状态 101：直播中，102：未开始，103 已结束，104 禁播，105：暂停，106：异常，107：已过期
			var txt = '';
			switch (liveStatus){
				case 101:
					txt = '直播中';
					break;
				case 102:
					txt = '未开始';
					break;
				case 103:
					txt = '已结束';
					break;
				case 104:
					txt = '已禁播';
					break;
				case 105:
					txt = '暂停中';
					break;
				case 106:
					txt = '直播异常';
					break;
				case 107:
					txt = '已过期';
					break;
				default:
					break;
			}
			return txt;
		}
	}
}
</script>

<style>
page{
	background-color: #F6F6F6;
}

.video-list{
	 margin: 32rpx;
	 box-sizing: border-box;
	 -moz-column-count:2; /* Firefox */
	 -webkit-column-count:2; /* Safari and Chrome */
	 column-count: 2;
	 column-width: 327rpx;
	 -webkit-column-width:327rpx;
	 -moz-column-width:327rpx;
	 column-gap: 32rpx;
	 -webkit-column-gap: 32rpx;
	 -moz-column-gap: 32rpx;
	 break-inside: avoid;
	 -webkit-column-break-inside:avoid;
	 -moz-column-break-inside:avoid;
}

.video-list-item{
	/* width: 327rpx; */
	position: relative;
	/* margin-right: 32rpx; */
	margin-bottom: 32rpx;
	background-color: #fff;
	height: 100%;
	overflow: hidden;
	break-inside: avoid;
	-webkit-column-break-inside:avoid;
	-moz-column-break-inside:avoid;
}

.video-title{
	font-size: 28rpx;
	font-weight: bold;
	color: #080F1A;
	margin-top: 4rpx;
	/* min-height: 80rpx; */
	margin-left: 10rpx;
	margin-right: 10rpx;
}

.video-shop{
	font-size: 24rpx;
	color: #080F1A;
	margin-top: 18rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
	margin-bottom: 24rpx;
}

/* .video-list:nth-child(even){
	margin-right: 0rpx;
} */

.video-img{
	/* width: 327rpx; */
	position: relative;
}

.video-img image{
	width: 100%;
	height: 327rpx;
}

.live-status-tag{
	position: absolute;
	left: 10rpx;
	top: 10rpx;
	border-radius: 8rpx;
	background-color: #000000;
	opacity: 0.5;
	padding: 8rpx;
}

</style>