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="@/static/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 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 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="k.LessonDate" 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.ClassRoomName }}
						    </view>
						    <view class="studCheckStatue" :class="k.Sort == '迟到'? 'studCheckStatue2' : k.Sort == '早退'? 'studCheckStatue2' : k.Sort == '病假'? 'studCheckStatue4' : k.Sort == '事假'? 'studCheckStatue2' : 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,
			weekDayTime: 0,
			todayWeek: {},
			dataArr: [],
			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 = 7 * common.oneDayTime();
			_this.studentCheckData(_this.todayWeek.Monday, _this.todayWeek.Sunday);
		},
		studentCheckData(Monday, Sunday) {
		    // var studCheckList = $('.studCheckList');
			let _this = this;
			_this.LOADING('加载数据中…')
			_this.HTTP_GET(
			  'learun/adms/timetable/StuLessonInfo',
			  {StartDate:Monday, EndDate:Sunday},
			  '加载数据时出错'
			).then( res => {
				_this.HIDE_LOADING()
				//console.log(res)
				_this.dataArr.length = 0;
				for(let j = 1; j < 8; j++){
					let dataFlag = true;
					var num = Math.floor(Math.random() * 100000000);
					res.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: []
						});
					}
				}
			})
		},
		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.todayWeek.Monday = common.fmtDate(_this.todayWeek.MondayTime);
			_this.todayWeek.Sunday = common.fmtDate(_this.todayWeek.SundayTime);
			_this.semester = common.judgeDate(_this.todayWeek.SundayTime);
			_this.studentCheckData(_this.todayWeek.Monday, _this.todayWeek.Sunday);
		}
	},
	created() {
		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;
	height: 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: hidden;
}
.tSec2Top2 view {
	width: 14.285714%;
	float: left;
	line-height: 18px;
	padding: 9px 0 9px;
	color: #fff;
	font-size: 13px;
	border-right: 1px solid #1084d2;
	border-top: 1px solid #1084d2;
}
.tSec2Top2 view:first-child {
	border-left: 1px solid #1084d2;
}
.tSec2Top2 view.active {
	color: #0075c4;
	background: #fff;
	border-color: #fff;
}
.tSec2Top2 view text {
	display: block;
}

.tSec2Top2 view 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;
}
.noHtml {
	height: 100%;
	line-height: 60px;
	text-align: center;
	font-size: 14px;
}
</style>