MiniPrograms/subpkg/video/videopage.vue

<template>
	<view class="container">
		<back text="课程回放"></back>
		<view class="video-box">
			<video class="video" id="classVideo" :src="video" controls></video>
		</view>
		<view class="info-box">
			<view class="flex" style="justify-content: space-between;">
				<view class="flex">
					<view class="info-text">当前科目:</view>
					<view class="info-name">{{classInfo.name}}</view>
				</view>
				<view class="flex">
					<view class="info-time">时间: {{classInfo.time}}</view>
				</view>
			</view>
			<view class="flex">
				<view class="info-text">授课老师:</view>
				<view class="block-tag-box">
					<view class="block-tag">{{classInfo.teacher}}</view>
				</view>
			</view>
			<view class="flex" style="justify-content: space-around;">
				<view class="flex-column">
					<view class="t-icon t-icon-tongzhihuotixing"></view>
					<view class="info-mini">通知</view>
				</view>
				<view class="flex-column">
					<view class="t-icon t-icon-baocun"></view>
					<view class="info-mini">保存</view>
				</view>
				<view class="flex-column">
					<view class="t-icon t-icon-fenxiang"></view>
					<view class="info-mini">分享</view>
				</view>
			</view>
		</view>
		<!-- 缺省区域 -->
		<view style="margin-top: 150rpx;">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('m_children', ['classList'])
		},
		data() {
			return {
				video: 'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4',
				classInfo: '',
			};
		},
		onLoad(options) {
			this.classInfo = this.classList[options.info]
			console.log(this.classInfo);
			this.videoContext = uni.createVideoContext('classVideo')
		},
		methods: {}
	}
</script>

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