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

<template>
	<view class="page">
		<view class="studSeeSec1">
			<view class="studSeeSec1Box">
				<l-select :range="semeArr" :placeholder="placeholder" @change="bindDateChange" valueField="value" textField="text" />
			</view>
		</view>
		<view class="studSeeSec2">
			<view class="tips" v-show="flag">暂无数据！</view>
			<view class="studSeeSec2List" v-show="!flag">
				<view class="studSeeSec2Li" v-for="(n, ind) in data" :key="n.Id">
					<view>
						<text>{{ n.PunishName }}</text>
						<text v-if="n.WithdrawDate != null">【已撤销】</text>
					</view> 
					<view>{{ n.PunishReason }}</view>
					<view class="dateRow">处分日期：{{ n.PunishDate }}</view>
					<view class="dateRow" v-if="n.WithdrawDate != null">撤销日期：{{ n.WithdrawDate }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default{
	data() {
		return {
			semeArr:[],
			placeholder: '请选择学期',
			flag: true,
			data: []
		}
	},
	methods:{
		init() {
			let _this = this;
			_this.LOADING('加载数据中…')
			//获取学年学期列表
			_this.HTTP_GET(
			  'StuPunishment/academicAndSemesterList',
			  {},
			  '加载数据时出错'
			).then( res => { 
				this.HIDE_LOADING()
				//console.log(res)
				_this.semeArr = res;
				_this.placeholder = res[0].text;
				_this.getListAjax(res[0].value)
			})
		},
		bindDateChange: function(e) {
			//console.log(e);
			this.LOADING('加载数据中…')
			this.getListAjax(e)
		},
		getListAjax(id) {
		    var param = { value: id };
			let _this = this;
			//获取处分数据
			_this.HTTP_GET(
			  'StuPunishment/punishmentList',
			  param,
			  '加载数据时出错'
			).then( res => { 
				this.HIDE_LOADING()
				// console.log(res)
				if (res == null || res.length <= 0) {
				   _this.flag = true
				    return;
				}
				_this.flag = false;
				_this.data = res;
			})
		    
		}
	},
	created() {
		this.init()
	}
}
</script>

<style lang="less" scoped>

/deep/ .picker {
	text-align: center;
}
/deep/ .cu-form-group {
	min-height: 28px;
	background: #fff;
	height: 28px;
	border-radius: 14px;
	line-height: 28px;
	text-align: center;
	font-size: 15px;
	color: #1a1a1a;
	position: relative;
	margin: 0 auto;
	min-height: 28px;
}

.studSeeSec2Li .dateRow {
	text-align: right;
}

.studSeeSec2 .tips {
	text-align: center;
}
.studSeeSec1 {
	background: #0c86d8;
	height: 100px;
	padding-top: 10px;
}
.studSeeSec1Box {
	width: 84%;
	background: #fff;
	height: 28px;
	border-radius: 14px;
	line-height: 28px;
	text-align: center;
	font-size: 15px;
	color: #1a1a1a;
	position: relative;
	margin: 0 auto;
}
.studSeeSec1Box .icon {
	position: absolute;
	top: 0;
	right: 15px;
	line-height: 28px;
	color: #818181;
}
.studSeeSec2Top {
	padding: 0 12px;
	margin-top: -52px;
}
.studSeeSec2TopBox {
	background: #fff;
	padding: 20px 0;
	text-align: center;
	font-size: 0;
	border-radius: 4px;
}
.studSeeSec2TopBox > * {
	display: inline-block;
	vertical-align: middle;
}
.studSeeSec2Line {
	height: 25px;
	width: 1px;
	background: #d6dfe2;
	margin: 0 40px;
}
.studSeeSec2Txt {
	color: #8a8a8a;
}
.studSeeSec2Txt view:first-child {
	font-size: 12px;
}
.studSeeSec2Txt view:first-child text {
	font-size: 20px;
	color: #0089fe;
	margin-right: 5px;
}
.studSeeSec2Txt view:last-child {
	font-size: 15px;
}
.studSeeSec2List {
	margin-top: 10px;
	background: #fff;
}
.studSeeSec2Li{
	padding: 0 12px 0 30px;
	border-bottom: 1px solid #d6dfe2;
	line-height: 39px;
	font-size: 13px;
	color: #7a7a7a;
	position: relative;
	line-height: 24px;
}

.studSeeSec2List text {
	float: right;
}
.studSeeSec2List image {
	width: 12px;
	margin-right: 5px;
	position: relative;
	top: 2px;
}
.studSeeSec2Li text{
	font-weight: bold;
}
</style>