DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/studentCheck/list.vue

<template>
	<view class="page">
		<view class="timeTable_sec1">
			<view class="tSec1Box" id="semester2">
				<image src="~@/common/images/timeT1-1.png" mode="widthFix"></image>
				<text>{{ semester }}</text>
			</view>
			<view class="tSec1Box" id="weekTime2">
				<text class="text-xxl cuIcon cuIcon-back" @click="timeTap(1)"></text>
				<text>{{todayWeek.Monday}}</text>
				-
				<text>{{todayWeek.Sunday}} </text>
				<text class="text-xxl cuIcon cuIcon-right" @click="timeTap(2)"></text>
			</view>
		</view>
		<view class="timeTable_sec2">
			<view class="tSec2Top2">
				<view class="tSec2TopUl">
					<view class="tSec2TopLi" v-for="(item, ind) in weekArr" :key="item.en" @click="liTap(ind)"
						:class="ind == num? 'active' : ''">
						<text>{{ item.en }}</text>
						<text>{{ item.cn }}</text>
					</view>
				</view>
			</view>
			<view class="tSec2Box2">
				<view class="tSec2Con2" v-for="(items, ind) in dataArr" :key="items.num" v-show="ind == num">
					<view class="studCheckList">
						<view class="studCheckLi" v-for="(k, index) in items.weekList" :key="index"
							v-if="items.weekList.length != 0">
							<view class="studCheckT">
								<image mode="widthFix" src="~@/common/images/book.png"></image>
								{{ k.LessonName }}
							</view>
							<view class="studCheckTxt">
								<image src="~@/common/images/time.png" mode="widthFix"></image>
								{{ k.LessonDate }}
								<image style="margin:0 5px 0 30px" src="~@/common/images/person.png" mode="widthFix">
								</image>
								<text>
									{{ k.Teacher }}
								</text>
								<image style="margin:0 5px 0 30px" src="~@/common/images/location.png" mode="widthFix">
								</image>
								{{ k.ClassName }}
							</view>
						 <view class="studCheckStatue"
								:class="k.Sort == '迟到'? 'studCheckStatue5' : k.Sort == '早退'? 'studCheckStatue2' : k.Sort == '病假'? 'studCheckStatue4' : k.Sort == '事假'? 'studCheckStatue6' : k.Sort == '准时'? 'studCheckStatue1' : 'studCheckStatue3' ">
								<text></text> {{ k.Sort }}
							</view>
						</view>
						<view class="noHtml" v-if="items.weekList.length == 0">
							该时间段没有数据
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/common/js/common.js'
	export default {
		data() {
			return {
				semester: '',
				num: 0,
				user: null,
				weekDayTime: 0,
				noClassTime: 0,
				todayWeek: {
					Monday:'',
					Sunday:''
				},
				dataArr: [],
				itemcs:'',
				weekArr: [{
						en: 'ONE',
						cn: '星期一'
					},
					{
						en: 'TWO',
						cn: '星期二'
					},
					{
						en: 'THREE',
						cn: '星期三'
					},
					{
						en: 'FOUR',
						cn: '星期四'
					},
					{
						en: 'FIVE',
						cn: '星期五'
					},
					{
						en: 'SIX',
						cn: '星期六'
					},
					{
						en: 'SEVEN',
						cn: '星期七'
					},
					{
						en: 'EIGHT',
						cn: '星期八'
					},
					{
						en: 'NINE',
						cn: '星期九'
					},
					{
						en: 'TEN',
						cn: '星期十'
					}
				]
				// weekArr: [
				// 	{
				// 		en: 'MON',
				// 		cn: '星期一'
				// 	},
				// 	{
				// 		en: 'TUE',
				// 		cn: '星期二'
				// 	},
				// 	{
				// 		en: 'WED',
				// 		cn: '星期三'
				// 	},
				// 	{
				// 		en: 'THU',
				// 		cn: '星期四'
				// 	},
				// 	{
				// 		en: 'FRI',
				// 		cn: '星期五'
				// 	},
				// 	{
				// 		en: 'SAT',
				// 		cn: '星期六'
				// 	},
				// 	{
				// 		en: 'SUN',
				// 		cn: '星期日'
				// 	}
				// ]
			};
		},
		methods: {
			async init() {
				let _this = this;
				// _this.todayWeek = common.weekday();
				// _this.semester = common.judgeDate();
				_this.weekDayTime = 14 * common.oneDayTime();
				_this.noClassTime = 4 * common.oneDayTime();
				_this.studentCheckData();
			},
			liTap(ind) {
				this.num = ind;
			},
			timeTap(num) {
				let _this = this;
				if (num == 1) {
					_this.todayWeek.MondayTime = _this.todayWeek.MondayTime - _this.weekDayTime;
					_this.todayWeek.SundayTime = _this.todayWeek.SundayTime - _this.weekDayTime;
				} else {
					_this.todayWeek.MondayTime = _this.todayWeek.MondayTime + _this.weekDayTime;
					_this.todayWeek.SundayTime = _this.todayWeek.SundayTime + _this.weekDayTime;
				}
				_this.num = 0;
				_this.todayWeek.Sunday = common.fmtDate(_this.todayWeek.SundayTime);
				_this.todayWeek.Monday = common.fmtDate(_this.todayWeek.MondayTime);
				// _this.semester = common.judgeDate(_this.todayWeek.SundayTime);
				_this.studentCheckData(_this.todayWeek.Monday, _this.todayWeek.Sunday);
			},
			studentCheckData(start, end) {
				// var studCheckList = $('.studCheckList');
				let _this = this;
				_this.LOADING('加载数据中…')
				_this.HTTP_GET(
					'learun/adms/timetable/StuLessonInfo', {
						StartDate: start,
						EndDate: end
					},
					'加载数据时出错'
				).then(res => {
					_this.HIDE_LOADING()
					_this.semester = res.semester
					// 回显日期
					if (!start) {
						_this.todayWeek.MondayTime = new Date(res.startDate).valueOf();
						_this.todayWeek.SundayTime = new Date(res.endDate).valueOf();
						_this.num = 0;
						_this.todayWeek.Monday = common.fmtDate(_this.todayWeek.MondayTime);
						_this.todayWeek.Sunday = common.fmtDate(_this.todayWeek.SundayTime);
					}
					// if (!start) {
					// 	_this.todayWeek.MondayTime = new Date(res.startDate).valueOf();
					// 	_this.todayWeek.SundayTime = new Date(res.endDate).valueOf() + _this.noClassTime;
					// 	_this.num = 0;
					// 	_this.todayWeek.Monday = common.fmtDate(_this.todayWeek.MondayTime);
					// 	_this.todayWeek.Sunday = common.fmtDate(_this.todayWeek.SundayTime);
					// }
					
					// console.log(res)
					_this.dataArr.length = 0;
					for(let j = 1; j < 11; j++){
						let dataFlag = true;
						var num = Math.floor(Math.random() * 100000000);
						res.results.forEach((n, i) => {
							if(n.week == j){
								n.num = num;
								_this.dataArr.push(n);
								dataFlag = false;
								return
							}
						})
						if(dataFlag){
							_this.dataArr.push({
								week: j,
								num: num,
								weekList: []
							});
						}
					}
				})
			},
		},
		created() {
			this.user = this.GET_GLOBAL('loginUser');
			this.init()
		}

	};
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
	}

	.timeTable_sec1 {
		padding: 14px 12px;
		text-align: center;
		background: #0075c4;
		color: #94d4ff;
		font-size: 0;
	}

	.tSec1Box>* {
		display: inline-block;
		vertical-align: middle;
	}

	.tSec1Line {
		height: 13px;
		width: 1px;
		background: #94d4ff;
		margin: 0 10px;
	}

	.tSec1Box {
		font-size: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	#semester2 {
		margin-bottom: 10px;
	}

	#weekTime2 text {
		margin: 0 10px;
	}

	.tSec1Box>text {
		width: auto;
		text-align: center;
		line-height: 22px;
	}

	.tSec1Box image {
		width: 15px;
		margin-right: 2px;
	}

	.tSec1Box text:after {
		display: none;
	}

	.timeTable_sec2 {
		margin-bottom: 30px;
	}

	.tSec2Top2 {
		padding: 0 12px;
		background: #0075c4;
		height: 55px;
		text-align: center;
		overflow: auto;
	}

	.tSec2TopUl {
		width: 800px;
	}

	.tSec2TopLi {
		width: 10%;
		float: left;
		line-height: 18px;
		padding: 9px 0 9px;
		color: #fff;
		font-size: 13px;
		border-right: 1px solid #1084d2;
		border-top: 1px solid #1084d2;
	}

	.tSec2TopLi:first-child {
		border-left: 1px solid #1084d2;
	}

	.tSec2TopLi.active {
		color: #0075c4;
		background: #fff;
		border-color: #fff;
	}

	.tSec2TopLi text {
		display: block;
	}

	.tSec2TopLi text:first-child {
		letter-spacing: 2px;
		text-transform: uppercase;
	}

	.tSec2Box2 {
		background: #fff;
	}

	.studCheckLi {
		border-bottom: 1px solid #d5eaf7;
		padding: 8px 12px;
		font-size: 15px;
	}

	.studCheckT {
		font-size: 15px;
		color: #6e6e6e;
	}

	.studCheckT image {
		width: 11px;
		position: relative;
		margin-right: 5px;
	}

	.studCheckTxt {
		font-size: 13px;
		color: #9d9e9e;
		margin: 7px 0;
	}

	.studCheckTxt text {
		// margin: 0 30px;
	}

	.studCheckTxt image {
		width: 12px;
		position: relative;
		margin-right: 3px;
		top: 1px;
	}

	.studCheckStatue {
		font-size: 13px;
	}

	.studCheckStatue text {
		display: inline-block;
		width: 8px;
		height: 8px;
		position: relative;
		margin-right: 5px;
		vertical-align: middle;
		top: -2px;
	}

	.studCheckStatue1 {
		color: #0089fe;
	}

	.studCheckStatue1 text {
		background: #0089fe;
	}

	.studCheckStatue2 {
		color: #f2b60a;
	}

	.studCheckStatue2 text {
		background: #f2b60a;
	}

	.studCheckStatue3 {
		color: #e24545;
	}

	.studCheckStatue3 text {
		background: #e24545;
	}

	.studCheckStatue4 {
		color: #29cf41;
	}

	.studCheckStatue4 text {
		background: #29cf41;
	}
	
	.studCheckStatue5 {
		color: #ad5151;
	}
	
	.studCheckStatue5 text {
		background: #ad5151;
	}
	
	.studCheckStatue6 {
		color: #84f193;
	}
	
	.studCheckStatue6 text {
		background: #84f193;
	}
	
	.noHtml {
		height: 100%;
		line-height: 60px;
		text-align: center;
		font-size: 14px;
	}
</style>