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

<template>
	<view class="container">
		
		<view class="section-header acea-row row-middle row-between">
			<view class="section-title">直播</view>
			<view class="section-more" @click="toMoreLive()">更多>></view>
		</view>
		<view class="video-list" v-if="liveList.length>0">
			<view class="video-list-item acea-row row-column" v-for="(video,index) in liveList" :key="index" @click="liveClick(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>
		<view class="section-header acea-row row-middle row-between">
			<view class="section-title">视频</view>
			<view class="section-more" @click="toMoreVideo()">更多>></view>
		</view>	 
		<view class="video-list" v-if="videoList.length>0">
			<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.cover || webUrl+'/20230304100226088424.jpg'" mode="scaleToFill"></image>
				</view>
				
				<view class="video-title line2">{{video.title}}</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="video.storeLogo" mode=""></image>
						<text>{{video.storeName}}</text>
					</view>
					<image style="width: 48rpx;height: 48rpx;border-radius: 50%;flex-shrink: 0;" :src="webUrl+'/20210203151253323822.png.png'" mode=""></image>
				</view>
				
			</view>	 
		</view>		  
		
		<uni-popup ref="popup" type="center">
		    <video id="myVideo" autoplay :src="curPlayVideoUrl" @error="videoErrorCallback" controls></video>
		</uni-popup>
		
	</view>
</template>

<script>

import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { getVideoList } from "@/api/user";
import {
	getWxLiveList
} from '@/api/public';
export default {
	components:{
		uniPopup
	},
	data() {
		return {
			webUrl:this.$VUE_APP_RESOURCES_URL,
			liveList:[],//直播列表
			videoList:[],//短视频列表
			curPlayVideoUrl:'',
			isVideoPopupShow:false
		}
	},
	onLoad:function(e){
		
	},
	onReady: function(res) {
		 
		this.getLiveList();
		this.getVideoList();

	},
	methods: {
		getLiveList:function(){
				var _this = this;
				var params = {
					page: 0,
					size: 2
				}
				getWxLiveList(params)
				.then(res => {
					_this.liveList = res.data.content;
				})
				.catch(err => {
						
				})
		},
		getVideoList:function(){
				var _this = this;
				var params = {
					page: 1,
					limit: 2
				}
				getVideoList(params)
				.then(res => {
						_this.videoList = res.data.list;
				})
				.catch(err => {
						
				})
		},
		toMoreLive:function(){
			this.$yrouter.push('/pages/LiveBroadcastList/LiveBroadcastList');
		},
		toMoreVideo:function(){
			this.$yrouter.push('/pages/VideoPlayBackList/VideoPlayBackList');
		},
		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 + '&id=' + video.id);
		},
		liveClick:function(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;
		},
		videoErrorCallback: function(e) {
			
			uni.showModal({
				content: e.target.errMsg,
				showCancel: false
			})
		}
	}
}
</script>

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

.video-list{
	 margin: 32rpx;
	 box-sizing: border-box;
	 column-count: 2;
	 column-width: 327rpx;
	 column-gap: 32rpx;
	 break-inside: avoid;
}

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

.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;
}

.section-header{
	padding: 32rpx 32rpx 0rpx 32rpx;
}

.section-title{
	font-size: 32rpx;
	font-weight: bold;
}

.section-more{
	font-size: 28rpx;
	color:#1CD1DC;
}

</style>