DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/myAttendance/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="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 class="tSec2Box">
				<view class="tSec2Con" v-for="(items, i) in dataArr" :key="items.num" v-show="i == num">
					<view class="tSec2List">
						<view v-if="items.lessonData.length <= 0" class="tSec2ListLi"><view class="noHtml">该时间段没有课程</view></view>
						<view v-if="items.lessonData.length > 0">
							<view class="tSec2ListLi" v-for="(k, j) in items.lessonData" :key="j" @click="classTap(k)">
								<view class="tSec2ListL">第 {{ k.sectionTime }} 节</view>
								<view class="tSec2ListR">
									<view class="tSec2ListBox">
										<view class="tSec2ListT">{{ k.LessonName }}</view>
										<view class="tSec2ListTxt">
											<text class="text-xxl cuIcon cuIcon-profile"></text>
											{{ k.EmpName }}
										</view>
									</view>
									<view class="tSec2Location">
										<text class="text-xxl cuIcon cuIcon-location"></text>
										{{ k.ClassroomName }}
									</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,
			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.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) {
		    var param = { StartDate: start, EndDate: end };
			let _this = this;
			_this.LOADING('加载数据中…');
			_this.HTTP_GET('learun/adms/timetable/list', param, '加载数据时出错').then(res => {
				this.HIDE_LOADING();
				console.log(res);
				_this.ProcessingData(res);
			});
			
		},
		ProcessingData(data) {
			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(_this.user)
			this.NAV_TO('./single', data, true);
		}
	},
	created() {
		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: hidden;
}
.tSec2TopLi {
	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;
}
.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>