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

<template>
	<view class="enSecBox">
	    <!-- 已完成 类名 sSec1Type1 图片   enter1-1 enter1-2 enter1-3 enter1-4 enter1-5-->
	    <!-- 未完成 类名 sSec1Type2 图片   enter2-1 enter2-2 enter2-3 enter2-4 enter2-5-->
	    <!-- 可以点击类名  sSec1Tap -->
	    <view class="ensHeader">
	        <view class="ensTime">2020</view>
	        <view class="ensHeadT">新生入校流程</view>
	    </view>
	    <view class="ensSec1">
	        <view class="eSec1Box">
	            <view class="eSec1Top">step<text>1</text></view>
	            <view :class="one? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="IsCompleteInfo" @click="tapList('../welcome/list')">
					<image src="~@/common/images/enter1-1.png" mode="widthFix" v-if="one"></image>
					<image src="~@/common/images/enter2-1.png" mode="widthFix" v-else></image>
	                <view class="sSec1Txt">
	                    完善学生信息
	                </view>
	                <view class="sSec1State" v-if="one">完成</view>
	                <view class="sSec1State" v-else>未完成</view>
	            </view>
	        </view>
	        <view class="eSec1Box">
				<image src="~@/common/images/enter1-6.png" class="sSecDown" mode="widthFix"></image>
	            <view class="eSec1Top">step<text>2</text></view>
	            <view :class="twoOne? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="PayFeeStatus">
					<image src="~@/common/images/enter1-2.png" mode="widthFix" v-if="twoOne"></image>
					<image src="~@/common/images/enter2-2.png" mode="widthFix" v-else></image>
	                <view class="sSec1Txt">
	                    线上缴费
	                    <text>( 已缴费、未缴费 )</text>
	                </view>
	                <view class="sSec1State" v-if="twoOne">完成</view>
	                <view class="sSec1State" v-else>未完成</view>
	            </view>
	            <view :class="twoTwo? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="StudentLoan" @click="tapList('../EducationalAdministration/StuInfoFresh/StudentLoan/list')">
					<image src="~@/common/images/enter1-3.png" mode="widthFix" v-if="twoTwo"></image>
					<image src="~@/common/images/enter2-3.png" mode="widthFix" v-else></image>
	                <view class="sSec1Txt">
	                    助学贷款
	                    <text>( 填写贷款回执码 )</text>
	                </view>
	                <view class="sSec1State" v-if="twoTwo">完成</view>
	                <view class="sSec1State" v-else>未完成</view>
	            </view>
	            <view :class="twoThree? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="OnsitePayFeeStatus">
					<image src="~@/common/images/enter1-4.png" mode="widthFix" v-if="twoThree"></image>
					<image src="~@/common/images/enter2-4.png" mode="widthFix" v-else></image>
	                <view class="sSec1Txt">
	                    现场缴费
	                    <text>( 已缴费、缓交、部分缴费、未缴费 )</text>
	                </view>
	                <view class="sSec1State" v-if="twoThree">完成</view>
	                <view class="sSec1State" v-else>未完成</view>
	            </view>
	        </view>
	        <view class="eSec1Box">
	            <image src="~@/common/images/enter1-6.png" class="sSecDown" mode="widthFix"></image>
	            <view class="eSec1Top">step<text>3</text></view>
	            <view :class="three? 'sSec1Type1' : 'sSec1Type2'" class="sSec1Con" id="RegisterStatus" @click="tapList('../EducationalAdministration/StuInfoFresh/RegisterQRCode/list')">
					<image src="~@/common/images/enter1-5.png" mode="widthFix" v-if="three"></image>
					<image src="~@/common/images/enter2-5.png" mode="widthFix" v-else></image>
	                <view class="sSec1Txt">
	                    报到注册
	                    <text>( 生成报到二维码，并显示报到教室 )</text>
	                </view>
	                <view class="sSec1State" v-if="three">完成</view>
	                <view class="sSec1State" v-else>未完成</view>
	            </view>
	        </view>
	    </view>
	</view>
</template>

<script>
export default{
	data() {
		return {
			one: '',
			twoOne: '',
			twoTwo: '',
			twoThree: '',
			three: '',
			userinfo: {},
			data: {
				StuInfoFreshEntity:{},
				StuInfoFreshFamilyList: [],
				StuInfoFreshEmergePeopleList: []
			}
		}
	},
	methods:{
		init() {
			let _this = this;
			_this.userinfo = _this.GET_GLOBAL('loginUser'); //获取登录信息
			_this.LOADING('加载数据中…');
			_this.HTTP_GET('StuInfoFresh/stuInfoFreshEntity', _this.userinfo.account, '加载数据时出错').then(res => {
				_this.HIDE_LOADING();
				console.log(res);
				_this.data = _this.COPY(res);
				if (this.data["StuInfoFreshFamilyList"].length && this.data["StuInfoFreshFamilyList"].length > 0) {
					_this.one =  true
				} else {
					_this.one = false
				}
				
				if (_this.data["StuInfoFreshEntity"].PayFeeStatus == "1") {
				    _this.twoOne =  true
				} else {
					_this.twoOne = false
				}
				
				if (_this.data["StuInfoFreshEntity"].StudentLoanStatus == "1") {
					_this.twoTwo =  true
				} else {
					_this.twoTwo = false
				}
				
				if (_this.data["StuInfoFreshEntity"].OnsitePayFeeStatus == "1") {
					_this.twoThree =  true
				} else {
					_this.twoThree = false
				}
				
				if (_this.data["StuInfoFreshEntity"].RegisterStatus == "1") {
					_this.three =  true
				} else {
					_this.three = false
				}
			});
		},
		tapList(str) {
			this.NAV_TO(str, {}, true);
		}
	},
	created() {
		this.init()
	}
}
</script>

<style lang="less" scoped>
.enSecBox{
	min-height: 100%;
	background-color: #fff;
	padding-bottom: 20px;
}
.ensTime{
	position: relative;
	text-align: center;
	line-height: 24px;
	font-size: 14px;
	color: #B8E2FF;
}
.ensTime:after,.ensTime::before{
	content: '';
	width: 6px;
	height: 6px;
	background-color: #B8E2FF;
	border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.ensTime:after{
	right: 20%;
}
.ensTime::before{
	left: 20%;
}
.ensHeader{
	background-color: #0C86D8;
	padding: 20px 0;
}
.ensHeadT{
	font-size: 18px;
	color: #fff;
	text-align: center;
	margin-top: 15px;
}
.ensSec1{
	padding: 0 15px;
}
.eSec1Box{
	position: relative;
	margin-top: 20px;
}
.eSec1Box:first-child{
	margin-top: 10px;
}
.sSecDown{
	position: absolute;
	width: 25px;
	left: 0;
	right: 0;
	top: -4px;
	margin: auto;
}
.eSec1Top{
	font-size: 14px;
	font-weight: bold;
	color: #ABDDFF;
	font-style: italic;
	padding-left: 18px;
}
.eSec1Top text {
	color: #0C86D8;
	font-size: 20px;
	margin-left: 5px;
}
.sSec1Con{
	padding: 5px 15px 5px 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.sSec1Type1{
	border: 2px solid #AEE8CF;
	border-radius: 30px;
}
.sSec1Type1 .sSec1State{
	color: #12B215;
}
.sSec1Type2{
	border: 2px solid #B8E2FF;
	border-radius: 32px;
}
.sSec1Type2 .sSec1State{
	color: #17AAEE;
}
.sSec1Con > image{
	width: 30px;
}
.sSec1State{
	font-size: 14px;
} 
.sSec1Txt{
	font-size: 16px;
	text-align: center;
	color: #1A1A1A;
	margin: 5px 0;
}
.sSec1Txt text{
	display: block;
	color: #9A9A9A;
	margin-top: 2px;
	font-size: 12px;
}
</style>