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'">{{first}}</view>
				<view class="block-subtitle" style="color: #3c9cff;" v-if="classIndex === 1 && state != 'none'">
					{{second}}
				</view>
				<view class="block-subtitle" v-if="classIndex === 2 && state != 'none'">{{third}}</view>
				<view class="block-subtitle" :style="{color: classIndex === 1 ? '#3c9cff' : ''}" @click="navClass">
					{{classInfo.time}}
				</view>
				<u-tag :text="before" :type="beforeType" plain icon="hourglass"
					v-if="classIndex === 0 && state != 'none'" @click="navVideoBefore">
				</u-tag>
				<u-tag :text="now" type="success" icon="play-right" v-if="classIndex === 1" @click="navVideoNow">
				</u-tag>
				<u-tag :text="after" type="error" :color="afterColor" :borderColor="afterColor" plain icon="pushpin"
					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 -1
				}
			},
		},
		data() {
			return {
				//展示数据
				homeClassList: {},
				//是否展示
				state: '',
				image: {
					none: 'https://image.meiye.art/pic_1631411820764Vm5iw82gnV2lVKWRokFmU',
					class: 'https://image.meiye.art/pic_1631411821366fqhkuMI110LbOlAIdv1SV',
				},
				first: '上节',
				second: '当前',
				third: '下节',

				before: '查看回放',
				now: '查看直播',
				after: '暂未开始',

				beforeType: 'warning'
			};
		},
		watch: {
			classCurrent() {
				this.getHomeClassList()
			}
		},
		methods: {
			//获取首页课程数据
			getHomeClassList() {
				//不在任何一个时间段内
				if (this.classCurrent === -1) {
					this.state = 'none'
					this.homeClassList = [{
						name: '休息时间',
						teacher: '孩子自由安排',
						time: '点击查看课程列表'
					}]
				}
				//三节完整数据
				if (this.classCurrent >= 2 && this.classCurrent <= this.classList.length) {
					this.state = ''
					this.third = '下节'
					this.after = '暂未开始'
					this.before = '查看回放'
					this.first = '上节'
					this.homeClassList = this.classList.slice(this.classCurrent - 2, this.classCurrent + 1)
					if (this.classCurrent === this.classList.length) {
						const arr = {
							name: '放学',
							teacher: '完成今日课程',
							time: '17:20'
						}
						this.third = '时间:'
						this.after = '巩固已学'
						this.homeClassList.push(arr)
					}
				}
				//数据不足三节
				if (this.classCurrent === 1) {
					this.state = ''
					const arr = [{
						name: '上学',
						teacher: '开始今日课程',
						time: '8:30'
					}]
					this.before = '上学打卡'
					this.first = '时间:'
					this.beforeType = 'info'
					arr.push(this.classList[0])
					arr.push(this.classList[1])
					this.homeClassList = arr
				}
			},
			navClass() {
				uni.navigateTo({
					url: '/subpkg/classmsg/classmsg'
				})
			},
			navVideoBefore() {
				if (this.before === '查看回放') {
					uni.navigateTo({
						url: '/subpkg/classvideo/classvideo'
					})
				}
			},
			navVideoNow() {
				uni.navigateTo({
					url: '/subpkg/classvideo/classvideo'
				})
			},
		},
		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>