DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/myAttendance/single.vue

<template>
	<view class="page">
		<view class="timeTable_sec3">
			<view class="tSec3Box">
				<view class="tSec3Time">
					<text>{{ data.date }}</text>
					第{{ data.time }}节
				</view>
			</view>
		</view>
		<view class="timeTable_sec4">
			<view class="tSec4Box">
				<view class="tSec4T">
					<view>{{ data.lessonName }}</view>
					<view>{{ data.classRoomName }}教室</view>
				</view>
				<view class="tSec4Con">
					<view class="studSeeSec2Txt">
						<view>
							<text>{{ data.shouldArrive }}</text>
							人
						</view>
						<view>应到</view>
					</view>
					<view class="studSeeSec2Line"></view>
					<view class="studSeeSec2Txt">
						<view>
							<text>{{ data.turnTo }}</text>
							人
						</view>
						<view>实到</view>
					</view>
				</view>
			</view>
		</view>
		<view class="timeTable_sec2">
			<view class="tSec2Box2">
				<view class="tSec2Con2">
					<view class="studCheckList">
						<view class="studCheckLi" v-for="(k, i) in data.result" :key="k.StuName">
							<view style="float:right; margin-top: 7px;" class="studCheckStatue" :class="type(k.Sort)">
								<text></text>
								{{ k.Sort }}
							</view>
							<view class="studCheckTxt">
								<image src="~@/common/images/person.png" mode="widthFix"></image>
								<text style="margin-left:0">
									{{ k.StuName }}
								</text>
								<image src="~@/common/images/location.png" mode="widthFix"></image>
								{{ k.ClassName }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageInfo: null,
			data: {}
		};
	},
	methods: {
		init() {
			let _this = this;
			_this.pageInfo = _this.GET_PARAM(); //获取页面传递参数
			_this.LOADING('加载数据中…');
			_this.HTTP_GET('learun/adms/timetable/StuList', _this.pageInfo, '加载数据时出错').then(res => {
				this.HIDE_LOADING();
				console.log(res);
				_this.data = res;
			});
		}
	},
	computed: {
		type() {
			return str => {
				let sort = '';
				switch (str) {
				    case "迟到":
				        sort = "studCheckStatue2";
				        break;
				    case "早退":
				        sort = "studCheckStatue2";
				        break;
				    case "病假":
				        sort = "studCheckStatue4";
				        break;
				    case "事假":
				        sort = "studCheckStatue2";
				        break;
				    case "准时":
				        sort = "studCheckStatue1";
				        break;
				    case "旷课":
				        sort = "studCheckStatue3";
				        break;
				    default:
				}
	
				return sort;
			};
		}
	},
	created() {
		this.init();
	}
};
</script>

<style lang="less" scoped>
.timeTable_sec2 {
	margin-bottom: 30px;
}

.tSec2Box2 {
	/*padding: 0 12px;*/
	background: #fff;
}

.tSec2Con2 {
	display: none;
}

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

.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;
	display: inline-block;
	width: 100px;
}

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

.timeTable_sec3 {
	padding: 0px 12px 1px;
	text-align: center;
	background: #0c86d8;
	height: 100px;
}

.tSec3Time {
	text-align: right;
	line-height: 24px;
	font-size: 14px;
	color: #fff;
}

.tSec3Time text {
	float: left;
}

.timeTable_sec4 {
	padding: 0 12px;
	margin-top: -65px;
	margin-bottom: 10px;
}

.tSec4Box {
	background: #fff;
	padding: 20px 0;
	text-align: center;
	font-size: 0;
	border-radius: 4px;
}

.tSec4T {
	text-align: center;
	margin-bottom: 10px;
}

.tSec4T view:first-child {
	color: #1a1a1a;
	font-size: 16px;
	margin-bottom: 5px;
}

.tSec4T view:last-child {
	color: #7a7a7a;
	font-size: 13px;
}

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

.tSec4Con .studSeeSec2Line {
	height: 25px;
	width: 1px;
	background: #d6dfe2;
	margin: 0 40px;
}

.tSec4Con .studSeeSec2Txt {
	color: #8a8a8a;
}

.tSec4Con .studSeeSec2Txt view:first-child {
	font-size: 13px;
}

.tSec4Con .studSeeSec2Txt view:first-child text {
	font-size: 20px;
	color: #0089fe;
	margin-right: 5px;
}

.tSec4Con .studSeeSec2Txt view:last-child {
	font-size: 15px;
}
</style>