MiniPrograms/components/todayclass-box/todayclass-box.vue

<template>
	<!-- 今日课程 -->
	<!-- 内容 -->
	<view>
		<view class="home-title-text" style="margin: 0 0 20rpx 0;">
			<view style="display: flex; align-items: center;margin: 0 30rpx 0 auto;">
				<u-icon name="list-dot" @click="navClass"></u-icon>
				<view class="msg" style="margin-left: 10rpx;" @click="navClass">查看更多</view>
			</view>
		</view>

		<!-- 课程列表 -->
		<view style="margin-bottom: 20rpx;">
			<view class="class-block" v-if="classCurrent > 1">
				<view class="block-title">{{classList[classCurrent-2].name}}</view>
				<u-tag :text="classList[classCurrent-2].teacher" size="mini" plain shape="circle"></u-tag>
				<view class="block-subtitle">上节</view>
				<view class="block-subtitle">{{classList[classCurrent-2].time}}</view>
				<u-tag text="查看回放" plain icon="hourglass"></u-tag>
			</view>

			<view class="class-block" style="background-color: #fff;" v-if="classCurrent <= classNum">
				<view class="block-title" style="color: #3c9cff;">{{classList[classCurrent - 1].name}}</view>
				<u-tag :text="classList[classCurrent - 1].teacher" size="mini" shape="circle"></u-tag>
				<view class="block-subtitle" style="color: #3c9cff;">当前</view>
				<view class="block-subtitle" style="color: #3c9cff;">{{classList[classCurrent - 1].time}}</view>
				<u-tag text="查看直播" type="error" icon="play-right"></u-tag>
			</view>

			<view class="class-block" v-if="classCurrent < classNum">
				<view class="block-title">{{classList[classCurrent].name}}</view>
				<u-tag :text="classList[classCurrent].teacher" size="mini" plain shape="circle"></u-tag>
				<view class="block-subtitle">下节</view>
				<view class="block-subtitle">{{classList[classCurrent].time}}</view>
				<u-tag text="暂未开始" plain icon="pushpin" type="warning"></u-tag>
			</view>
			
			
		</view>
	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "todayclass-box",
		computed: {
			...mapState('m_children', ['classList'])
		},
		props: {
			classCurrent: {
				type: Number,
				default () {
					return 2
				}
			},
		},
		data() {
			return {
				//课程数量
				classNum:'',//测试数据最大为6最小为1
				//倒计时时间
				dayTimeData: {},
				classTimeData: {}
			};
		},
		methods: {
			navClass() {
				uni.navigateTo({
					url: '/subpkg/classmsg/classmsg'
				})
			},
			//获取到课程列表长度
			getClassNum(){
				this.classNum = this.classList.length
			}
		},
		created() {
			this.getClassNum()
		}
	}
</script>

<style lang="scss">
	@import '@/pages/common/blockmsg.scss';
</style>