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

<template>
	<view class="page">
		<view class="timeTable_sec1">
			<view class="tSec1Box" id="semester">
				<image src="~@/common/images/timeT1-1.png" mode="widthFix"></image>
				<text>{{ semester }}</text>
			</view>
			<!--<span class="tSec1Line"></span>-->
			<view class="tSec1Box" id="weekTime">
				<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="tSec2Top">
				<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="tSec2Box">
				<view class="tSec2Con" v-for="(items, i) in weekArr" :key="items.num" v-show="i == num">
					<view class="tSec2List">
						<view v-if="dataArr[i+1]&&dataArr[i+1].length <= 0" class="tSec2ListLi">
							<view class="noHtml">该时间段没有课程</view>
						</view>
						<view v-if="dataArr[i+1]&&dataArr[i+1].length > 0">
							<view class="tSec2ListLi" v-for="(k, j) in dataArr[i+1]" :key="j" @click="classTap(k)">
								<view class="tSec2ListL">第 {{ k.jc }} 节</view>
								<view class="tSec2ListR">
									<view class="tSec2ListBox">
										<view class="tSec2ListT">{{ k.curriculum }}</view>
										<view class="tSec2ListTxt">
											<text class="text-xxl cuIcon cuIcon-profile"></text>
											{{ k.teacher }}
										</view>
									</view>
									<view class="tSec2Location">
										<text class="text-xxl cuIcon cuIcon-location"></text>
										{{ k.className }}
									</view>
								</view>
							</view>
						</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: {},
				dataArr: [],
				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: '星期日'
				// 	}
				// ]
			};
		},
		onUnload() {
			this.OFF('timeTable');
		},
		methods: {
			async init() {
				let _this = this;
				// _this.todayWeek = common.weekday();
				// _this.semester = common.judgeDate();
				// _this.weekDayTime = 7 * common.oneDayTime();
				
				_this.weekDayTime = 14 * common.oneDayTime();
				_this.noClassTime = 4 * common.oneDayTime();
				
				_this.user = _this.GET_GLOBAL('loginUser');
				_this.loadData(_this.todayWeek.Monday, _this.todayWeek.Sunday);
			},
			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.Monday = common.fmtDate(_this.todayWeek.MondayTime);
				_this.todayWeek.Sunday = common.fmtDate(_this.todayWeek.SundayTime);
				// _this.semester = common.judgeDate(_this.todayWeek.SundayTime);
				_this.loadData(_this.todayWeek.Monday, _this.todayWeek.Sunday);
			},
			loadData(start, end) {
				if(!this.user) return
				let {
					Description,
					account: Account
				} = this.user
				let param = {
					StartDate: start,
					EndDate: end,
					Description,
					Account,
				};
				// var param = {
				// 	StartDate: start,
				// 	EndDate: end
				// };
				let _this = this;
				_this.LOADING('加载数据中…');
				_this.HTTP_GET('learun/adms/timetable/TenDay', param, '加载数据时出错').then(res => {
					this.HIDE_LOADING();
					_this.semester = res.semester
					_this.dataArr = _this.ProcessingData(res.weekList);
					// console.log(_this.dataArr)
					// 回显日期
					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);
					// }
				});

			},
			ProcessingData(data) {
				let courseCateByDay = {}
				for (let i = 1; i < 11; i++) {
					courseCateByDay[i] = []
				}
				data.forEach((item) => {
					item.list.sort((a, b) => {
						return a.jc - b.jc
					})
					courseCateByDay[item.time] = item.list
				})
				return courseCateByDay;
				// let dataM = [{
				// 		weekTime: 1,
				// 		num: Math.floor(Math.random() * 100000000),
				// 		lessonData: []
				// 	},
				// 	{
				// 		weekTime: 2,
				// 		num: Math.floor(Math.random() * 100000000),
				// 		lessonData: []
				// 	},
				// 	{
				// 		weekTime: 3,
				// 		num: Math.floor(Math.random() * 100000000),
				// 		lessonData: []
				// 	},
				// 	{
				// 		weekTime: 4,
				// 		num: Math.floor(Math.random() * 100000000),
				// 		lessonData: []
				// 	},
				// 	{
				// 		weekTime: 5,
				// 		num: Math.floor(Math.random() * 100000000),
				// 		lessonData: []
				// 	},
				// 	{
				// 		weekTime: 6,
				// 		num: Math.floor(Math.random() * 100000000),
				// 		lessonData: []
				// 	},
				// 	{
				// 		weekTime: 7,
				// 		num: Math.floor(Math.random() * 100000000),
				// 		lessonData: []
				// 	}
				// ];
				// data.forEach((n, i) => {
				// 	n.sectionTime = n.LessonTime.slice(1);
				// 	dataM.forEach((k, j) => {
				// 		if (k.weekTime == n.LessonTime.slice(0, 1)) {
				// 			k.lessonData.push(n);
				// 		}
				// 	});
				// });
				// dataM.forEach((n, i) => {
				// 	n.lessonData.sort(common.compare('sectionTime'));
				// });
				// this.dataArr = dataM;
			},
			classTap(data) {
				let _this = this;
				// console.log(data)
				// console.log(_this.user)
				this.NAV_TO('./single', data, true);
			}
		},
		created() {
			this.ON('timeTable', this.init);
			this.user = this.GET_GLOBAL('loginUser');
			this.init()
		}
	};
</script>

<style lang="less" scoped>
	.page {
		background: #fff;
	}

	.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;
	}

	#semester {
		margin-bottom: 10px;
	}

	#weekTime {}

	#weekTime 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;
	}

	.tSec2Top {
		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;
	}

	.tSec2Box {
		padding: 0 12px;
		margin-top: 10px;
	}

	.tSec2Con {
		border-left: 1px solid #d5eaf7;
		border-right: 1px solid #d5eaf7;
		border-top: 1px solid #d5eaf7;
		// display: none;
	}

	.tSec2Con:first-child {
		display: block;
	}

	.tSec2List {
		margin-top: 10px;
	}

	.tSec2List:first-child {
		margin-top: 0;
	}

	.tSec2ListLi {
		border-bottom: 1px solid #d5eaf7;
		overflow: hidden;
		height: 60px;
	}

	.tSec2ListL {
		float: left;
		background: #e8f6ff;
		height: 100%;
		width: 25%;
		text-align: center;
		line-height: 36px;
		padding: 11px 0;
		font-size: 14px;
		color: #646464;
	}

	.tSec2ListR {
		float: left;
		width: 75%;
		height: 100%;
		line-height: 18px;
		padding: 4px 0;
		overflow: hidden;
	}

	.tSec2ListBox {
		width: 70%;
		float: left;
		padding-left: 5px;
	}

	.tSec2ListT {
		color: #3e3e3e;
		font-size: 15px;
		margin: 5px 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.tSec2ListTxt {
		color: #888888;
		font-size: 13px;
	}

	.tSec2Location {
		width: 30%;
		float: left;
		line-height: 44px;
		font-size: 13px;
		color: #888888;
	}

	.noHtml {
		height: 100%;
		line-height: 60px;
		text-align: center;
		font-size: 14px;
	}
</style>