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

<template>
	<!-- 今日课程 -->
	<view>
		<!-- 课程列表 -->
		<view style="margin-bottom: 20rpx;">
			<!-- 插画 -->
			<view class="detail-image" v-if="classCurrent === -1" :style="{backgroundImage:`url(${image.none})`}">
			</view>
			<view v-if="classCurrent === -1">
				<view class="class-block">
					<view class="block-title">自由安排</view>
					<view class="block-tag-box">
						<view class="block-tag">已下课</view>
					</view>
					<view class="block-subtitle">休息时间</view>
					<view style="display: flex; align-items: center;" @click="navClass">
						<view class="t-icon t-icon-fenlei" style="width: 40rpx;height: 40rpx;"></view>
						<view style="font-size: 30rpx;color: #4169E1;margin-left: 10rpx;">课程列表</view>
					</view>
				</view>
			</view>
			<!-- 课程列表 -->
			<view v-if="classCurrent != -1">
				<!-- 上上节 -->
				<view class="class-block" v-if="classCurrent === classList.length">
					<view class="block-title">{{classList[classCurrent-3].name}}</view>
					<view class="block-tag-box">
						<view class="block-tag">{{classList[classCurrent-3].teacher}}</view>
					</view>
					<view class="block-subtitle">更早</view>
					<view class="block-title">{{classList[classCurrent-3].time}}</view>
					<view class="btn" @click="navVideoBefore(classCurrent-3)">
						<!-- <view class="t-icon t-icon-bofang3"></view> -->
						<view class="btn-text">已出勤</view>
					</view>
				</view>
				<!-- 上节 -->
				<view class="class-block" v-if="classCurrent >= 2">
					<view class="block-title">{{classList[classCurrent-2].name}}</view>
					<view class="block-tag-box">
						<view class="block-tag">{{classList[classCurrent-2].teacher}}</view>
					</view>
					<view class="block-subtitle">上节</view>
					<view class="block-title">{{classList[classCurrent-2].time}}</view>
					<view class="btn" @click="navVideoBefore(classCurrent-2)">
						<!-- <view class="t-icon t-icon-bofang3"></view> -->
						<view class="btn-text">已出勤</view>
					</view>
				</view>
				<!-- 当前 -->
				<view class="class-block" style="background-color: #FFF;">
					<view class="block-title" style="color: #4169E1;">{{classList[classCurrent-1].name}}</view>
					<view class="block-tag-box">
						<view class="block-tag">{{classList[classCurrent-1].teacher}}</view>
					</view>
					<view class="block-index">当前</view>
					<view class="block-title" style="color: #4169E1;">{{classList[classCurrent-1].time}}</view>
					<view class="btn" style="background-color: #ff5959" @click="navVideoNow(classCurrent-1)">
						<!-- <view class="t-icon t-icon-zhibo"></view> -->
						<view class="btn-text">正出勤</view>
					</view>
				</view>
				<!-- 下节 -->
				<view class="class-block" v-if="!(classCurrent === classList.length)">
					<view class="block-title">{{classList[classCurrent].name}}</view>
					<view class="block-tag-box">
						<view class="block-tag">{{classList[classCurrent].teacher}}</view>
					</view>
					<view class="block-subtitle">下节</view>
					<view class="block-title">{{classList[classCurrent].time}}</view>
					<view class="btn" style="background-color: #aaaaaa">
						<!-- <view class="t-icon t-icon-daojishi"></view> -->
						<view class="btn-text">未开始</view>
					</view>
				</view>
				<!-- 下下节 -->
				<view class="class-block" v-if="classCurrent === 1">
					<view class="block-title">{{classList[classCurrent+1].name}}</view>
					<view class="block-tag-box">
						<view class="block-tag">{{classList[classCurrent+1].teacher}}</view>
					</view>
					<view class="block-subtitle">更晚</view>
					<view class="block-title">{{classList[classCurrent+1].time}}</view>
					<view class="btn" style="background-color: #aaaaaa">
						<!-- <view class="t-icon t-icon-daojishi"></view> -->
						<view class="btn-text">未开始</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		name: "todayclass-box",
		computed: {
			...mapState('m_children', ['classList']),
		},
		props: {
			classCurrent: {
				type: Number,
				default () {
					return -1
				}
			},
		},
		data() {
			return {
				image: {
					none: 'https://image.meiye.art/pic_1631411820764Vm5iw82gnV2lVKWRokFmU',
					class: 'https://image.meiye.art/pic_1631411821366fqhkuMI110LbOlAIdv1SV',
				},
			};
		},
		watch: {
			classCurrent() {
				this.setClassCurrent()
			}
		},
		methods: {
			...mapMutations('m_children',['updateClassCurrent']),
			//获取首页课程数据
			setClassCurrent() {
				this.updateClassCurrent(this.classCurrent)
			},
			navClass() {
				uni.navigateTo({
					url: '/subpkg/classlist/classlist'
				})
			},
			navVideoBefore(index) {
				uni.navigateTo({
					url: `/subpkg/video/videopage?info=${index}`
				})
			},
			navVideoNow(index) {
				uni.navigateTo({
					url: `/subpkg/video/livepage?info=${index}`
				})
			},
		},
		created() {
			this.setClassCurrent()
		}
	}
</script>

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

	.detail-image {
		margin-top: -50rpx;
		width: 100%;
		height: 450rpx;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.block-index {
		font-size: 22rpx;
		color: $color-mixblue;
	}

	.t-icon {
		width: 46rpx;
		height: 46rpx;
	}
	.btn{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: $color-green;
		width: 120rpx;
		height: 60rpx;
		border-radius: 8rpx;
		.btn-text{
			color: #FFF;
			font-weight: bold;
			font-size: 30rpx;
		}
	}
</style>