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

<template>
	<view class="page">
		<view class="studSeeSec1">
		    <view class="studSeeSec1Box">
		        <l-select :range="selectArr1" :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">
					<div>
						<text>{{ n.EncourgeName }}</text>
						<text class="EncourgeLevel" v-if="n.EncourgeLevel != null">【 {{ n.EncourgeLevel }} 】 【 {{ n.EncourgeSort }} 】</text>
					</div>
					<div>奖励金额：<text>{{ n.Fee }}</text>元</div>
					<div>{{ n.Reason }}</div>
					<div class="dateRow">奖励日期：{{ n.EncourgeDate }}</div>
				</view>
			</view>
		</view>
	</view>
</template>

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

<style lang="less" scoped>
/deep/ .picker {
	text-align: center;
}
/deep/ .cu-form-group {
	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;
}
.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;
}
.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: 24px;
	font-size: 13px;
	color: #7a7a7a;
	position: relative;
}
.studSeeSec2Li:before {
	/*content: '';*/
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	margin: auto;
	width: 6px;
	height: 6px;
	background: #8ac9ff;
	border-radius: 50%;
}
.studSeeSec2List .EncourgeLevel {
	float: right;
}
.studSeeSec2List image {
	width: 12px;
	margin-right: 5px;
	position: relative;
	top: 2px;
}
.studSeeSec2Li .dateRow {
	text-align: right;
}
.studSeeSec2 .tips {
	text-align: center;
}
</style>