FE-lab-xcx/pages/views/login/login.vue

<template>
	<view id="login">
		<img class="logo-img" :src="imagesUrl('commonality/logo%401x.png')" @click="verificationButton(1)">
		<view class="title-1">欢迎使用</view>
		<view class="title-2">实验室安全智慧化管控系统</view>
		<view class="null-p"></view>
		<img class="login-img" @click="verificationButton(2)" :src="imagesUrl('commonality/img_tyrzdl_ch%402x.png')">
		<view class="ssoButton" @click="goPage('ssoLogin')">统一身份认证登录</view>
		<view class="accountButton" v-if="!weChatProgramVersion"
		@click="goPage('accountLogin')">账号密码登录</view>
		<view class="position-top-right-box"></view>
		<view class="position-bottom-left-box" @click="verificationButton(5)"></view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		configInfo,
		getConfigByType
	} from '@/pages/api/index.js'
	export default {
		name: "ssoLogin",
		data() {
			return {
				weChatProgramVersion:true,
				verificationList:[],
			}
		},
		onLoad(option) {
			
		},
		mounted() {
			this.getConfigInfo();
		},
		methods: {
			goPage(type){
				if(type == 'ssoLogin'){
					uni.navigateTo({
						url: '/pages/views/login/ssoLogin'
					});
				}else if(type == 'accountLogin'){
					uni.navigateTo({
						url: '/pages/views/login/accountLogin'
					});
				}
			},
			//查询公共配置
			async getConfigInfo() {
				const {
					data
				} = await configInfo({
					type: '5'
				});
				if (data.code == 200) {
					let list = JSON.parse(data.data)
					let newData = {};
					list.forEach((item) => {
						let obj = JSON.parse(item.configValue)
						newData = {
							...newData,
							...obj
						}
					})
					if(config.weChatProgramVersion === newData.weChatProgramVersion){
						this.$set(this,'weChatProgramVersion',true);
					}else{
						this.$set(this,'weChatProgramVersion',false);
					}
				}
			},
			verificationButton(val){
				if(val == 1){
					this.verificationList.push(1)
				}else if(val == 2){
					this.verificationList.push(2)
				}else if(val == 5){
					const str = this.verificationList.join(''); 
					if(str === '1122'){
						this.$set(this,'verificationList',[]);
						uni.navigateTo({
							url: '/pages/views/login/accountLogin'
						});
					}else{
						this.$set(this,'verificationList',[]);
					}
				}
			},
		},
	}
</script>

<style lang="stylus" scoped>
	#login{
		height: 100%;
		width: 100%;
		background #fff;
		position relative;
		display: flex;
		flex-direction: column;
		position: relative;
		.logo-img{
			width:370rpx;
			height:68rpx;
			margin:320rpx 190rpx 0;
		}
		.position-top-right-box{
			position: absolute;
			top:0;
			right:0;
			width:230rpx;
			height:230rpx;
			border-bottom-left-radius: 100%;
			background-color: #E5F2FE;
			filter: blur(4px);
		}
		.position-bottom-left-box{
			position: absolute;
			bottom:0;
			left:0;
			width:230rpx;
			height:230rpx;
			border-top-right-radius: 100%;
			background-color: #E5F2FE;
			filter: blur(4px);
			z-index:0;
		}
		.title-1{
			font-size:38rpx;
			line-height:55rpx;
			height:55rpx;
			text-align: center;
			color:#333;
			margin:90rpx 0 31rpx;
		}
		.title-2{
			font-size:38rpx;
			line-height:55rpx;
			height:55rpx;
			text-align: center;
			color:#0183fa;
		}
		.null-p{
			flex:1;
		}
		.login-img{
			width:600rpx;
			height:408rpx;
			margin:0 auto 125rpx;
		}
		.ssoButton{
			width:650rpx;
			height:80rpx;
			line-height:80rpx;
			text-align: center;
			background-color:#0183fa;
			color:#fff;
			font-size:32rpx;
			margin:0 auto 175rpx;
			border-radius:50rpx;
			z-index:1;
		}
		.accountButton{
			width:200;
			height:80rpx;
			line-height:80rpx;
			text-align: center;
			color:#0183fa;
			font-size:28rpx;
			margin:0 auto 40rpx;
		}
	}
</style>