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

<template>
	<view class="page">
		<uni-calendar 
			:insert="true" 
			:lunar="true" 
			@change="change"
			:selected="selected"
		></uni-calendar>
		
		<view class="attendBox" v-show="flag">
			<view class="attendBoxT">{{ data.data.day }}</view>
			<view class="attendBoxTime">
				<view class="attendCon" v-for="(n, i) in data.data.list" :key="n.time">
					<view class="attendConT">{{ n.time }} <span>(上班时间 {{ n.time }})</span></view>
					<!-- <view class="attendConTxt">
						<image src="~@/common/images/location2.png" mode="widthFix"></image>
						山西省太原市杏花岭区七府园路11号山西冶金技师学院
					</view> -->
					<view class="attendConStatus attendConStatus1">{{ n.status == 1? '正常' : '早退'}}</view>
					<view class="attendCircular">{{ i == 0? '上' : '下'}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
export default {
	components: {
		uniCalendar
	},
	data() {
		return {
			selected:[],
			data: {
				data:{
					day: '',
					list: []
				}
			},
			flag: false
		};
	},
	methods: {
		init() {
			let _this = this;
			_this.LOADING('加载数据中…');
			_this.HTTP_GET('teachattendance/major', {}, '加载数据时出错').then(res => {
				_this.HIDE_LOADING();
				// console.log(res);
				res.forEach((n, i) => {
					let jsons = {
						date: `${n.y}-${n.m}-${n.d}`,
						info: n.state == 1? '正常' : n.state == 2? '迟到' : '缺勤',
						data:{
							day: n.day,
							list: []
						}
					}
					jsons.data.list = _this.COPY(n.list);
					_this.selected.push(jsons)
				})
			});
		},
		change(e) {
			// console.log(e)
			if(JSON.stringify(e.extraInfo) == '{}'){
				this.flag = false;
			}else{
				this.flag = true;
				this.data = {};
				this.data = this.COPY(e.extraInfo);
				// console.log(this.data)
			}
		}
	},
	created() {
		this.init();
	}
};
</script>

<style lang="less" scoped>
	.attendBox{
		margin-top: 10px;
		background: #fff;
		padding: 20px 12px;
		// display: none;
	}
	.attendBoxT{
		font-size: 15px;
		color: #0089FE;
	}
	.attendBoxTime{
		position: relative;
		height: 143px;
	}
	.attendBoxTime:before{
		    content: '';
	    position: absolute;
	    left: 12px;
	    top: -17px;
	    width: 1px;
	    height: 143px;
	    background: #CBD1D4;
	}
	.attendCon{
		position: relative;
		margin-top: 20px;
		padding-left: 30px;
	}
	.attendConT{
		font-size: 15px;
		color: #6E6E6E;
	}
	.attendConT span{
		color: #9E9E9E;
		margin-left: 5px;
	}
	.attendConTxt{
		font-size: 13px;
		color: #9E9E9E;
		margin: 10px 0;
	}
	.attendConTxt image{
		width: 10px;
	    margin-right: 5px;
	    position: relative;
	    top: 1px;
	}
	.attendConStatus{
		height: 24px;
		line-height: 24px;
		padding: 0 10px;
		font-size: 13px;
		color: #fff;
		display: inline-block;
		border-radius: 12px;
	}
	.attendConStatus1{
		background: #0089FE;
	}
	.attendConStatus2{
		background: #F3C84E;
	}
	.attendCircular{
		position: absolute;
		top: 0;
		left: 0;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		text-align: center;
		line-height: 24px;
		font-size: 15px;
		color: #fff;
		background: #CBD1D4;
	}
	
</style>