DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/EducationalAdministration/StudentQRCode/components/content.vue

<template>
	<view id="sQrCode">
		<view class="sQrCode">
			<view class="sQrLogo">
				<image mode="widthFix" class="sQrLogoBg" src="@/common/images/xcBg.jpg"></image>
				<view class="sQrLogoImg1"><image mode="widthFix" src="@/common/images/logoXc.png"></image></view>
				<view class="sQrLogoImg2"><image mode="widthFix" src="@/common/images/logoXcTxt.png"></image></view>
			</view>
			<view class="sQrBox">
				<view class="sQrT">健康通行登记</view>
				<view class="sQrList">
					<view>
						<text>姓名</text>
						<text class="sQrListTxt">{{ data.stuInfo.StuName }}</text>
					</view>
					<view>
						<text>专业</text>
						<text class="sQrListTxt">{{ data.majorInfo.MajorName }}</text>
					</view>
					<view>
						<text>班级</text>
						<text class="sQrListTxt">{{ data.classInfo.ClassName }}</text>
					</view>
					<view>
						<text>学号</text>
						<text class="sQrListTxt">{{ data.stuInfo.StuNo }}</text>
					</view>
					<view>
						<text>宿舍</text>
						<text style="font-weight: bold;">{{ data.roomInfo }}</text>
					</view>
				</view>
				<view id="lr_mycode_qrcode" class="sQrImg"><tki-qrcode ref="qrcode" :val="data.stuInfo.StuNo" :size="size" :onval="true" :loadMake="true" /></view>
				<view class="sQrTxt">请使用数字校园扫码并出示通行凭证</view>
				<view class="sQrText">
					温馨提示:因疫情防控需要，校园实行封闭管理，目前暂仅限经许可的校内师生员工通行。师生出入学校各个公共场所，请使用数字校园扫码，出示通行凭证接受核验。谢谢配合!
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
	name: 'stuqrCode',
	components: { tkiQrcode },
	props: {
		stuNo: {
			type: String
		}
	},
	data() {
		return {
			data: {
				stuInfo: {},
				majorInfo: {},
				classInfo: {}
			},
			size: 300
		};
	},
	methods: {
		init() {
			let _this = this;
			console.log(_this.stuNo);
			_this.LOADING('加载数据中…');
			_this.HTTP_GET('learun/adms/EducationalAdministration/StuInfoBasic/stuinfoDetail', _this.stuNo, '加载数据时出错').then(res => {
				this.HIDE_LOADING();
				console.log(res);
				_this.data = res;
			});
		}
	},
	created() {
		this.init();
	}
};
</script>

<style lang="less" scoped>
#sQrCode {
	height: 100%;
	background-color: #eef2f3;
	padding-bottom: 30px;
}

.sTabBox {
	line-height: 24px;
	text-align: center;
	margin-bottom: 18px;
	color: #333;
}

.sTabBox view {
	display: inline-block;
	width: 80px;
	background-color: rgba(255, 255, 255, 0.7);
	margin: 0 5px;
	font-size: 14px;
	border-radius: 2px;
}
.sQrLogoBg {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	width: 100%;
}
.sQrLogo {
	background-size: 100% 100%;
	text-align: center;
	line-height: 0;
	padding: 20px 0 70px;
	position: relative;
}
.sQrLogo view {
	position: relative;
	z-index: 2;
}
.sQrLogoImg1 image {
	width: 20%;
}

.sQrLogoImg1 {
	margin-bottom: 10px;
}

.sQrLogoImg2 image {
	width: 50%;
}

.sQrBox {
	position: relative;
	z-index: 3;
	margin: -50px 20px 0;
	background-color: #fff;
	padding: 30px 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.sQrT {
	font-weight: bold;
	text-align: center;
	font-size: 22px;
	margin-bottom: 20px;
	color: #000;
}

.sQrList {
	background-color: #f8f8f8;
	margin: 0 10px;
	padding: 10px 15px;
	border-radius: 4px;
}

.sQrList view {
	padding: 7px 10px;
	font-size: 14px;
	color: #000;
	border-top: 1px solid #d7d7d7;
}

.sQrList view:first-child {
	border: 0;
}

.sQrList view text:first-child {
	color: #aeaeae;
	margin-right: 10px;
}

.sQrImg {
	width: 145px;
	height: 145px;
	line-height: 0;
	margin: 20px auto;
}

.sQrImg image {
	width: 100%;
}

.sQrTxt {
	margin-bottom: 10px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #aeaeae;
}

.sQrText {
	font-size: 14px;
	color: #aeaeae;
}
.sQrListTxt {
	color: #000;
	font-weight: bold;
}
</style>