MiniPrograms/subpkg/video/livepage.vue

<template>
	<view class="container">
		<u-sticky>
			<back text="课程直播" :show="false"></back>
			<!-- 视频资源 -->
			<view class="video-box">
				<video class="video" id="classVideo" :src="classInfo.resource" controls></video>
			</view>
		</u-sticky>
		<!-- 信息模块 -->
		<view class="info-box">
			<view class="flex-box" style="width: 70%;height: 100%;">
				<view class="flex">
					<view class="info-name">{{classInfo.title}}</view>
				</view>

				<view style="display: flex;align-items: baseline;">
					<view class="timeInfo">{{today.split('-')[0]}}</view>
					<view class="info-msg">月</view>
					<view class="timeInfo">{{today.split('-')[1]}}</view>
					<view class="info-msg" style="margin-right: 20rpx;">日</view>
					<view class="info-msg">{{classInfo.time}}</view>
				</view>
			</view>
			<view class="flex-box" style=" width: 30%;height: 100%;">
				<view class="flex" style="width: 95%;margin-left: auto;">
					<view class="block-tag-box">
						<view class="block-tag">{{classInfo.name}}</view>
					</view>
					<view class="block-tag-box">
						<view class="block-tag">{{classInfo.teacher}}</view>
					</view>
				</view>

				<view class="flex" style="width: 80%;margin-left: auto;">
					<view class="t-icon t-icon-fenxiang" @click="actionShow = true" style="margin-left: auto;"></view>
				</view>
			</view>
		</view>
		<!-- 列表名 -->
		<view class="list-name-box">
			<view class="index"></view>
			<view class="list-name">直播与回放</view>
		</view>

		<!-- 视频列表 -->
		<view class="video-list" v-for="(item,index) in classList" :key="index">
			<!-- 正文 -->
			<view class="class-block">
				<view class="content-box">

					<view
						:class="index<classCurrent-1? 't-icon t-icon-chenggong':(index===classCurrent-1? 't-icon t-icon-bofang1':'t-icon t-icon-yuyue-lishi-shijian')">
					</view>
					<view class="flex" style="flex-direction: column;">
						<!-- 上 -->
						<view style="display: flex;align-items: center;width: 460rpx;margin-left: 20rpx;">
							<view class="content-info" style="font-size: 34rpx;line-height: 50rpx;">
								{{item.title}}
							</view>
							<view class="block-tag-box" style="margin-left: 40rpx;">
								<view class="block-tag">{{item.name}}</view>
							</view>
							<view class="block-tag-box" style="margin-left: 10rpx;">
								<view class="block-tag">{{item.teacher}}</view>
							</view>
						</view>
						<!-- 下 -->
						<view style="display: flex;align-items: center;width: 460rpx; margin:10rpx 0 0 20rpx;">
							<view style="display: flex;align-items: baseline;">
								<view class="info-time" style="font-size: 30rpx;">
									{{item.timeFrame.replace('午','午-').split('-')[0]}}</view>
								<view class="info-time" style="margin-left: 10rpx;">
									{{item.timeFrame.replace('午','午-').split('-')[1]}}</view>
								<view class="info-time" style="font-size: 30rpx;margin-left: 40rpx;">
									{{item.time.split('-')[0]}}</view>
								<view class="info-time" style="margin-left: 10rpx;">开始</view>
							</view>
						</view>
					</view>
					<!-- 按钮 -->
					<view class="btn" v-if="index<classCurrent-1" :style="{backgroundColor:'#23b46c'}"
						@click="showVideo(index)">
						<view class="content-subtitle">观看回放</view>
					</view>
					<view class="btn" v-if="index===classCurrent-1" :style="{backgroundColor:'#ff5959'}"
						@click="showLive(index)">
						<view class="content-subtitle">正在直播</view>
					</view>
					<view class="btn" v-if="index>classCurrent-1" :style="{backgroundColor:'#aaa'}">
						<view class="content-subtitle">暂未开始</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享 -->
		<u-action-sheet :show="actionShow" @close="actionShow = false" title="分享视频到" :round="10">
			<view class="flex-icon">
				<view class="flex-box">
					<view class="t-icon t-icon-weixin" @click="shareToWeixin"></view>
					<text class="text" @click="shareToWeixin">微信</text>
				</view>
				<view class="flex-box">
					<view class="t-icon t-icon-pengyouquan" @click="shareToPengYouQuan"></view>
					<text class="text" @click="shareToPengYouQuan">朋友圈</text>
				</view>
				<view class="flex-box">
					<view class="t-icon t-icon-QQ" @click="shareToQQ"></view>
					<text class="text" @click="shareToQQ">QQ</text>
				</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_children', ['classList', 'classCurrent'])
		},
		data() {
			return {
				classInfo: '',
				today: '',
				//分享
				actionShow: false,
			};
		},
		onLoad(options) {
			this.classInfo = this.classList[options.info]
			this.getToday()
			this.videoContext = uni.createVideoContext('classVideo')
		},
		methods: {
			getToday() {
				this.today = (new Date()).format("M-d")
			},
			shareToWeixin() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 4,
					title: "来自醍摩豆家长端的分享",
					summary: `孩子正在上${this.classInfo.name}课程,快来围观吧！`,
					mediaUrl: this.classInfo.resource,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareToPengYouQuan() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneTimeline",
					type: 4,
					title: "来自醍摩豆家长端的分享",
					summary: `孩子正在上${this.classInfo.name}课程,快来围观吧！`,
					mediaUrl: this.classInfo.resource,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			shareToQQ() {

			},
			showVideo(index) {
				console.log('导航到回放页面');
				uni.redirectTo({
					url: `/subpkg/video/videopage?info=${index}`
				})
			},
			showLive(index) {
				if (index === this.classCurrent - 1) {
					uni.$showMsg('当前正在播放此课程')
				} else {
					this.classInfo = this.classList[index]
				}
			}

		}
	}
</script>

<style lang="scss">
	@import '@/subpkg/common/videopage.scss';
</style>