zc_saas_h5/components/course/courseSection.vue

<template>
	<view style="display: flex;justify-content: space-between;align-items: center;" @click="getVideo">
		<view style="display: flex;justify-content: space-between;margin: 20rpx 0;width: 100%;">
			<view style="display: flex;align-items: center;">
				<view class="tag tagColor1" v-if="menuItem.sectionType==1">录播</view>
				<view class="tag tagColor2" v-if="menuItem.sectionType==2">直播</view>
				<view class="tag tagColor3" v-if="menuItem.sectionType==3">回放</view>
				<view class="t_content">
				<view v-if="menuItem.sectionType==1" :class="playSectionId==newId?'color1':''">{{menuItem.name}}</view>
				<view v-if="menuItem.sectionType==2" :class="playSectionId==newId?'color2':''">{{menuItem.name}}</view>
				<view v-if="menuItem.sectionType==3" :class="playSectionId==newId?'color3':''">{{menuItem.name}}</view>
					<view style="font-size: 20rpx;color: #FF3B30;" v-if="menuItem.liveStartTime">
						<view v-if="menuItem.liveStartTime>nowTime">
							<text>{{$method.timestampToTime(menuItem.liveStartTime)}}</text>-
							<text>{{$method.timestampToTime(menuItem.liveEndTime)}}</text>
						</view>
						<view v-if="menuItem.liveStartTime<=nowTime&&menuItem.liveEndTime>nowTime">
							<text>直播中</text>
						</view>
						<view v-if="menuItem.liveEndTime<nowTime">
							<text>回放</text>
						</view>
					</view>
				</view>
				<view v-if="menuItem.sectionType==null">{{menuItem.name}}</view>
			</view>
			<view v-if="isRebuild||menuItem.rebuild>0" class="tagRe">待重修</view>
			<view v-if="menuItem.learning==1" class="tagGreen">已看完</view>
		</view>
		<view v-if="menuItem.tryListen&&!isBuy" class="tryBox">
			试看
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import eventHub from '@/common/eventHub.js'
export default {
	name: 'courseSection',
	props: {
		courseId: {
			type: Number,
			default: 0
		},
		goodsId: {
			type: Number,
			default: 0
		},
		menuItem: {
			type: Object,
			default: {}
		},
		isBuy: {
			type: Boolean,
			default: false
		},
		levelId: {
			type: String,
			default: ""
		},
		isRebuild: {
			type: Boolean,
			default: false
		},
		gradeId: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			nowTime:0,
			newId:0
		};
	},
	onLoad() {},
	created() {
		
	},
	mounted() {
		this.nowTime = Number(new  Date().getTime()/1000).toFixed(0)
		this.newId= this.menuItem.sectionId>0?this.menuItem.sectionId:this.menuItem.menuId
	},
	methods: {
		getVideo(){
			if(!this.isBuy){
				//非购买
				if(!this.menuItem.tryListen){
					//不允许试听
					return
				}
				
			}
			if(!this.menuItem.recordingUrl){
				uni.showToast({
				    title: '暂无播放数据',
				    icon: 'error'
				});
			}
			if(this.playSectionId==this.newId){
				//切换为同一节
				return
			}
			if(this.playSectionId){
				//切换视频
				let oldSectionId = this.playSectionId
				uni.$emit('changeSection', oldSectionId)
			}
			//设置播放的节ID
			this.$store.commit('setPlaySectionId', {playSectionId  :this.newId});
	//		return
			uni.$emit('getSection', this.menuItem)
			uni.$emit('levelId', this.levelId)
			
		}
	},
	computed: { ...mapGetters(['playSectionId']) }
	
};
</script>

<style scoped>
	.tagGreen{
		width: 80rpx;
		height: 28rpx;
		background: #34C759;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tagRe{
		width: 80rpx;
		height: 28rpx;
		background: #FF3B30;
		border-radius: 8rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.tryBox{
		width: 96rpx;
		height: 48rpx;
		background: #007AFF;
		border-radius: 24rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		line-height: 48rpx;
		text-align: center;
	}
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
	.t_content3{
		color: #007AFF;
	}
	.t_content2{
		color: #007AFF;
	}
	.t_content1{
		color: #007AFF;
	}
	.t_content{
		margin-left: 10rpx;
		color: #666666;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis; 
	}
	.tagColor3{
		border: 2rpx solid #FF9500;
		color: #FF9500;
	}
	.tagColor2{
		border: 2rpx solid #FF3B30;
		color: #FF3B30;
	}
	.tagColor1{
		border: 2rpx solid #007AFF;
		color: #007AFF;
	}
	.color3{
		color: #FF9500;
	}
	.color2{
		color: #FF3B30;
	}
	.color1{
		color: #007AFF;
	}
	.tag{
		border-radius: 8rpx;
		font-size: 20rpx;
		padding: 5rpx;
	}
</style>