jp-education-student/pages/youth/mine/classRecord.vue

<template>
	<view>
		<u-navbar :title="className">

		</u-navbar>
		<!-- 头部 -->
		<view class="header">
			<view class="infos">
				<view class="title">
					{{className}}
				</view>
				<view class="times">
					已上 {{classTimes}} 节 / 共 {{allClassTimes}} 课次
				</view>

			</view>
			<view class="state" v-if="status=='1' || status=='5'">
				进行中
			</view>
			<view class="stateClose" v-if="status=='2'">
				已结课
			</view>

		</view>
		<!-- 课次 -->
		<view class="class-times">

			<view class="item-box" v-for="(item,index) in classList" :key="index">
				<view class="item">
					<view class="class">
						课程&nbsp;{{index+1}}
					</view>
					<view class="state0" v-if="item.rollcall == ''">
						{{item.rollcall}}
					</view>
					<view class="state2" v-else>
						{{item.rollcall}}
					</view>
					<!-- <view class="state4" v-if="item.rollcall == '请假'">
						{{item.rollcall}}
					</view>
					<view class="state3" v-if="item.rollcall == '旷课'">
						{{item.rollcall}}
					</view>
					<view class="state1" v-if="item.rollcall == '停课'">
						{{item.rollcall}}
					</view> -->
					<view class="boder-right">

					</view>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	import * as mineApi from '@/apis/youth/mine.js'
	
	export default {
		data() {
			return {
				buyId: '',
				classList: [],
				allClassTimes: 0,
				classTimes: 0,
				className: '',
				status: '',
				studentId: ''
			}
		},
		onLoad(op) {
			if(op.id) {
				this.buyId = op.id;
				this.studentId = this.carhelp.getNsStudentId().studentId;
				this.getLoadMyCourses();
			}
		},
		methods: {
			toDetail(item) {
				if(item.id) {
					uni.navigateTo({
						url: '/pages/youth/classSchedule/classScheduleDetails?id='+item.id
					})
				}
			},
			getLoadMyCourses() {
				this.classList = [];
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.loadMyCourses({
					studentId: this.studentId,
					pageNum: 1,
					pageSize: 10000
				}).then((res) => {
					uni.hideLoading();
					var list = res.data.data;
					for (var i = 0; i < list.length; i++) {
						if(list[i].buyId == this.buyId) {
							this.allClassTimes = list[i].courseAmount+list[i].freeAmount;
							if(list[i].rollcallCount != null) {
								this.classTimes = list[i].rollcallCount;
							}
							this.className = list[i].className;
							this.status = list[i].status;
						}
					}
					
					for (var i = 0; i < this.allClassTimes; i++) {
						this.classList.push({id: '',rollcall: ''});
					}
					for (var j = 0; j < this.classTimes; j++) {
						this.classList[j].rollcall = '已上课';
						this.classList[j].id = j+1;
					}
					// this.getLoadCourseRollcall();
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getLoadCourseRollcall() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				mineApi.loadCourseRollcall({
					buyId: this.buyId
				}).then((res) => {
					uni.hideLoading();
					var list = res.data;
					for (var i = 0; i < list.length; i++) {
						this.classList[i].rollcall = list[i].rollcall;
						this.classList[i].id = list[i].sheetId;
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 140rpx;
	}

	// 头部
	.header {
		background: linear-gradient(90deg, rgba(0, 156, 185, 1) 0%, rgba(13, 186, 199, 1) 100%);
		padding: 24rpx 32rpx;
		color: #fff;
		display: flex;
		align-items: center;

		.infos {
			.title {
				font-size: 40rpx;
				font-family: PingFangSC-medium;

			}

			.times {
				font-family: PingFangSC-regular;
				margin-top: 8rpx;
			}
		}

		.state {
			margin-left: auto;
			border-radius: 8rpx;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(255, 255, 255, 1);
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
		}
		
		.stateClose {
			margin-left: auto;
			border-radius: 8rpx;
			background-color: rgba(13, 186, 199, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 24rpx;
			text-align: center;
			font-family: Arial;
			border: 1px solid rgba(255, 255, 255, 1);
			width: 100rpx;
			height: 48rpx;
			line-height: 48rpx;
		}
	}

	// 课次
	.class-times {
		background-color: #F2F4F4;

		display: flex;
		flex-wrap: wrap;

		.item-box {
			width: 33.3%;
			padding: 24rpx 0;
			background-color: #fff;
			margin-bottom: 16rpx;
		}

		.item {


			border-right: 1px #e8e8e8 solid;

			text-align: center;

			.class {
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
				text-align: center;
				font-family: PingFangSC-medium;
				height: 44rpx;
				line-height: 44rpx;
				font-weight: bold;
			}

			.state0 {
				margin-top: 8rpx;
				height: 36rpx;
			}

			.state1 {
				color: rgba(238, 49, 56, 1);
				font-family: PingFangSC-regular;
				margin-top: 8rpx;
				height: 36rpx;
			}

			.state2 {
				color: rgba(13, 186, 199, 1);
				font-family: PingFangSC-regular;
				margin-top: 8rpx;
				height: 36rpx;
			}

			.state3 {
				color: rgba(255, 107, 0, 1);
				font-family: PingFangSC-regular;
				margin-top: 8rpx;
				height: 36rpx;
			}

			.state4 {
				color: rgba(129, 97, 255, 1);
				font-family: PingFangSC-regular;
				margin-top: 8rpx;
				height: 36rpx;
			}
		}



	}
</style>