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

<template>
	<view class="page">
		<view class="selectBox">
			<l-select :range="selectArr1" :placeholder="placeholder" @change="bindDateChange" valueField="value" textField="text"  v-model="value" />
		</view>
		<view class="studSeeSec2">
			<view class="tips" v-show="!flag">暂无数据！</view>
			<view class="studSeeSec2Top" v-show="flag">
				<view class="studSeeSec2TopBox">
					<view class="studSeeSec2Txt">
					    <view><text>{{ data.Rank }}</text>名</view><view>班级排名</view>
					</view>
					<view class="studSeeSec2Line"></view>
					<view class="studSeeSec2Txt">
						<view><text>{{data.TotalScore}}</text>分</view><view>综合成绩</view>
					</view>
				</view>
			</view>
			<view class="studSeeSec2List" v-show="flag">
				<view v-for="n in data.ScoreList" :key="n.LessonName">
					<image  mode="widthFix" src="~@/common/images/book.png"></image>
					{{ n.LessonName }}
					<text>{{ n.Score }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// import get from 'lodash/get'
export default {
	data() {
		return {
			value: 0,
			flag:false,
			selectArr1: [],
			placeholder: '请选择学期',
			data: {}
		};
	},
	methods: {
		async init() {
			let _this = this;
			_this.LOADING('加载数据中…')
			_this.HTTP_GET(
			  'scoreSearch/academicAndSemesterList',
			  {},
			  '加载数据时出错'
			).then( res => { 
				this.HIDE_LOADING()
				// console.log(res)
				if (res == null || res.length <= 0) {
				    return;
				}
				_this.selectArr1 = res;
				_this.placeholder = res[0].text;
				_this.studentSeeAjax(res[0].value);
			})
		},
		bindDateChange: function(e) {
			console.log(e);
			this.LOADING('加载数据中…')
			this.studentSeeAjax(e)
		},
		studentSeeAjax(id) {
			let param = { value: id };
			let _this = this;
			this.HTTP_GET(
			  'scoreSearch/scoreList',
			  param,
			  '加载数据时出错'
			).then( res => { 
				this.HIDE_LOADING()
				// console.log(res)
				if (res == null || JSON.stringify(res) == '{}') {
				    _this.flag = false;
				    return;
				}
				_this.flag = true;
				_this.data = res;
			})
		}
	},
	created() {
		this.init()
	}
};
</script>

<style lang="less" scoped>
@import '~@/common/css/common.less';
* {
	box-sizing: border-box;
}

/deep/ .picker {
	text-align: center;
}
/deep/ .cu-form-group {
	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;
	min-height: 28px;
}
.loading{
	background-color: transparent;
	font-size: 26px;
}
.selectBox {
	background-color: @pubColor;
	height: 100px;
}
.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;
}
.studSeeSec2List view {
	padding: 0 12px 0 30px;
	border-bottom: 1px solid #d6dfe2;
	line-height: 39px;
	font-size: 13px;
	color: #7a7a7a;
	position: relative;
}
.studSeeSec2List view:before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 12px;
	margin: auto;
	width: 6px;
	height: 6px;
	background: #8ac9ff;
	border-radius: 50%;
}
.studSeeSec2List text {
	float: right;
}
.studSeeSec2List image {
	width: 12px;
	margin-right: 5px;
	position: relative;
	top: 2px;
}
.studSeeSec2 .tips {
	text-align: center;
}
</style>