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

<template>
	<!-- 今日课程 -->
	<!-- 内容 -->
	<view>
		<!-- 课程列表 -->
		<view style="margin-bottom: 20rpx;">
			<view class="detail-image" v-if="state === 'none'" :style="{backgroundImage:`url(${image.none})`}"></view>
			<view class="detail-image" v-if="state === ''" :style="{backgroundImage:`url(${image.class})`}"></view>
			
			
			<view class="class-block" v-for="(classInfo,classIndex) in homeClassList" :key="classIndex"
				:style="{backgroundColor: classIndex === 1 ? '#FFF' : ''}">
				<view class="block-title" :style="{color: classIndex === 1 ? '#3c9cff' : ''}">{{classInfo.name}}</view>
				<view class="block-tag-box">
					<view class="block-tag">{{classInfo.teacher}}</view>
				</view>
				<view class="block-subtitle" v-if="classIndex === 0 && state != 'none'">上节</view>
				<view class="block-subtitle" style="color: #3c9cff;" v-if="classIndex === 1 && state != 'none'">当前
				</view>
				<view class="block-subtitle" v-if="classIndex === 2 && state != 'none'">下节</view>
				<view class="block-subtitle" :style="{color: classIndex === 1 ? '#3c9cff' : ''}">{{classInfo.time}}
				</view>
				<u-tag text="查看回放" plain icon="hourglass" v-if="classIndex === 0 && state != 'none'"></u-tag>
				<u-tag text="查看直播" type="error" icon="play-right" v-if="classIndex === 1"></u-tag>
				<u-tag text="暂未开始" plain icon="pushpin" type="warning" v-if="classIndex === 2"></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 {
				//展示数据
				homeClassList: {},
				//是否展示
				state: '',
				image: {
					none:'https://image.meiye.art/pic_1631411820764Vm5iw82gnV2lVKWRokFmU',
					class: 'https://image.meiye.art/pic_1631411821366fqhkuMI110LbOlAIdv1SV',
					
					}
			};
		},
		watch: {
			classCurrent() {
				this.getHomeClassList()
			}
		},
		methods: {
			//获取首页课程数据
			getHomeClassList() {
				console.log(this.classCurrent);
				//不在任何一个时间段内
				if (this.classCurrent === -1) {
					this.state = 'none'
					this.homeClassList = [{
						name: '休息时间',
						teacher: '孩子自由安排',
						time: '更多课程点击课程列表查看'
					}]
				}
				//三节完整数据
				if (this.classCurrent >= 2 && this.classCurrent <= 6) {
					this.state = ''
					this.homeClassList = this.classList.slice(this.classCurrent - 2, this.classCurrent + 1)
				}
				//数据不足三节
				if (this.classCurrent === 1) {
					this.state = ''
					const arr = [{
						name: '早读',
						teacher: '王老师',
						time: '08:00-08:40'
					}]
					arr.push(this.classList[0])
					arr.push(this.classList[1])
					this.homeClassList = arr
				}
			}
		},
		created() {
			this.getHomeClassList()
		}
	}
</script>

<style lang="scss">
	@import '@/pages/common/blockmsg.scss';
	.detail-image{
		margin-top: -80rpx;
		width: 100%;
		height: 450rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		
	}
</style>