zc_saas_h5/pages5/liveDetail/list.vue

<template>
	<view>
		<nav-bar title="我的直播课"></nav-bar>
		<view class="content">
			<view class="content__header" v-if="livingSectionList[0]" @click="goLive(livingSectionList[0])">
				<image class="img" src="../static/live.png" mode="widthFix"></image>
				<view class="note">正在直播中</view>
				<view class="title">{{livingSectionList[0].name}}</view>
			</view>
			<view class="content__body">
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="index" @click="go(item)">
						<image  mode="widthFix" class="img" :src="$method.splitImgHost(item.coverUrl,false)"></image>
						<view class="title">{{item.goodsName}}</view>
						<view class="desc">
							<image class="desc__img" src="../static/icon-list.png"></image>
							共 <text>{{item.studyCount}}</text> 学时
						</view>
						<view class="desc">
							<image  mode="widthFix" class="desc__img" src="../static/icon-time.png"></image>
							直播日期：<text>{{$method.timestampToTime(item.liveStartTime)}} - {{$method.timestampToTime(item.liveEndTime)}}</text>
						</view>
						<view class="button">进入学习</view>
					</view>
					
					<view v-if="list.length==0">
						<u-empty text="暂无直播课" margin-top="500" mode="list"></u-empty>
					
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import config from '@/common/config'
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			list:[],
			param:{
				pageNum:1,
				pageSize:10
			},
			livingSectionList:[],
			total:0,
		};
	},
	onUnload() {},
	computed: { ...mapGetters(['userInfo']) },
	onLoad(option) {
		this.goodsListGoodsUserLive()
		this.goodsLivingSectionList();
	},
	onShow() {},
	onReachBottom() {
		if (this.list.length < this.total) {
			this.param.pageNum++;
			this.goodsListGoodsUserLive();
		}
	},
	methods: {
		studyRecordGetChannelBasicInfo(channelId) {
			return new Promise((resolve) => {
				this.$api
					.studyRecordGetChannelBasicInfo({
						channelId,
					})
					.then((res) => {
						resolve(res.data.data);
					});
			});
		},
		goodsLivingSectionList() {
			this.$api.goodsLivingSectionList().then(res => {
				this.livingSectionList = res.data.data;
			})
		},
		goodsListGoodsUserLive() {
			this.$api.goodsListGoodsUserLive(this.param).then(res => {
				this.list.push(...res.data.rows)
				this.total = res.data.total
			})
		},
		async goLive(item) {
			let data = await this.studyRecordGetChannelBasicInfo(item.liveUrl);
			let nowTime = +this.$method.timest();
			
			if (item.liveStartTime > nowTime) {
				if (data.watchStatus == "end" || data.watchStatus == "playback") {
					uni.showToast({
						title: '直播未开始',
						icon: 'none'
					});
					return;
				}
			} else if (
				item.liveStartTime < nowTime &&
				item.liveEndTime > nowTime
			) {
				if (data.watchStatus == "end" || data.watchStatus == "playback") {
					uni.showToast({
						title: '暂无直播',
						icon: 'none'
					});
					return;
				}
			} else if (item.liveEndTime < nowTime) {
				if (data.watchStatus == "end" || data.watchStatus == "playback") {
					uni.showToast({
						title: '直播已结束',
						icon: 'none'
					});
					return;
				}
			}
			let moduleId = item.moduleId || 0;
			let chapterId = item.chapterId || 0;
			let sectionId = item.sectionId || item.menuId;
			let uuid = new Date().valueOf() + ""
      		// buyCourse 是否购买课程：1是 0否
			let encode = encodeURIComponent(config.WEBVIEW_URL+'pages/live/index?token='+uni.getStorageSync('token')+'&userInfo='+JSON.stringify(this.userInfo)+'&channelId='
			+item.liveUrl+'&gradeId='+0+'&courseId='+this.courseId+'&goodsId='+this.goodsId+'&orderGoodsId='+this.orderGoodsId+'&sectionId='+sectionId+'&chapterId='
			+chapterId+'&moduleId='+moduleId+'&buyCourse=1'+'&ident='+uuid)
			uni.navigateTo({
				url:`../../pages/webview/index?url=`+encode
			})
		},
		go(item) {
			this.$api.courseCourseList({
				pageNum: 1,
				pageSize: 1,
				goodsId: item.goodsId,
				gradeId: 0,
				orderGoodsId: item.orderGoodsId,
			}).then(res => {
				if (res.data.code == 200) {
					if(res.data.total > 1) {
						// uni.navigateTo({
						// 	url:'/pages5/liveDetail/course?orderGoodsId='+item.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0'
						// })
						uni.navigateTo({
							url:'/pages3/live/detail?orderGoodsId='+item.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0&courseId=""'
						})
					} else if(res.data.total == 1) {
						uni.navigateTo({
							url:'/pages3/live/detail?orderGoodsId='+item.orderGoodsId+'&goodsId='+item.goodsId+'&gradeId=0&courseId='+ res.data.rows[0].courseId
						})
					} else {
						uni.showToast({
							icon:'none',
							title:'暂无可观看的直播课程'
						})
					}
				
				}
			});
			
		}
	}
};
</script>
<style>
page {
	background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
.content {
	padding:24rpx;
	
	&__header {
		position:relative;
		width:100%;
		height:150rpx;
		padding:24rpx 150rpx 24rpx 24rpx;
		
		.img {
			position:absolute;
			left:0;
			top:0;
			width:100%;
		}
		
		.note {
			position:relative;
			z-index: 10;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #EFDBFF;
		}
		
		.title {
			position:relative;
			z-index: 10;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
		
		.desc {
			
		}
	}
	
	&__body {
		.list {
			.item {
				margin-top:20rpx;
				background: #fff;
				padding: 24rpx;
				box-shadow: 0px 10rpx 9rpx 1px rgba(165, 196, 239, 0.1);
				border-radius: 24rpx;
				
				.img {
					width: 654rpx;
					height: 367rpx;
					background: #E6EEFF;
					border-radius: 16rpx;
				}
				
				.title {
					margin-top:10rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					display: -webkit-box;
					
					-webkit-box-orient: vertical;

					-webkit-line-clamp: 2;

					overflow: hidden;
				}
				
				.desc {
					margin-top:10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					display: flex;
					align-items: center;
					
					&__img {
						margin-right:5rpx;
						width:24rpx;
						height:24rpx;
					}
					
					text {
						color:#666;
					}
				}
				
				.button {
					margin-top:10rpx;
					width: 100%;
					height: 64rpx;
					background: #007AFF;
					border-radius: 16rpx;
					text-align: center;
					line-height: 64rpx;
					color:#fff;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>