..

src/views/login/index.vue

@@ -7,19 +7,30 @@
 			</div>
 			<div class="login_adv__mask"></div>
 			<div class="login_adv__bottom">
-				© {{$config.APP_NAME}} {{$config.APP_VER}}
+				© {{ $config.APP_NAME }} {{ $config.APP_VER }}
 			</div>
 		</div>
 		<div class="login_main">
 			<div class="login_config">
-				<el-button :icon="config.dark?'el-icon-sunny':'el-icon-moon'" circle type="info" @click="configDark"></el-button>
+				<el-button :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info"
+					@click="configDark"></el-button>
 				<el-dropdown trigger="click" placement="bottom-end" @command="configLang">
 					<el-button circle>
-						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>
+						<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+							aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet"
+							viewBox="0 0 512 512">
+							<path
+								d="M478.33 433.6l-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362L368 281.65L401.17 362z"
+								fill="currentColor"></path>
+							<path
+								d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36c-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93c.92 1.19 1.83 2.35 2.74 3.51c-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"
+								fill="currentColor"></path>
+						</svg>
 					</el-button>
 					<template #dropdown>
 						<el-dropdown-menu>
-							<el-dropdown-item v-for="item in lang" :key="item.value" :command="item" :class="{'selected':config.lang==item.value}">{{item.name}}</el-dropdown-item>
+							<el-dropdown-item v-for="item in lang" :key="item.value" :command="item"
+								:class="{ 'selected': config.lang == item.value }">{{ item.name }}</el-dropdown-item>
 						</el-dropdown-menu>
 					</template>
 				</el-dropdown>
@@ -28,7 +39,7 @@
 				<div class="login-header">
 					<div class="logo">
 						<img :alt="$config.APP_NAME" :src="appLogo">
-						<label>{{$config.APP_NAME}}</label>
+						<label>{{ $config.APP_NAME }}</label>
 					</div>
 				</div>
 				<el-tabs>
@@ -48,214 +59,390 @@
 	<el-dialog v-model="showWechatLogin" :title="$t('login.wechatLoginTitle')" :width="400" destroy-on-close>
 		<div class="qrCodeLogin">
 			<x-qr-code class="qrCode" :text="WechatLoginCode" :size="200"></x-qr-code>
-			<p class="msg">{{$tc('login.wechatLoginMsg', 1)}}</p>
+			<p class="msg">{{ $tc('login.wechatLoginMsg', 1) }}</p>
 			<div class="qrCodeLogin-result" v-if="isWechatLoginResult">
-				<el-result icon="success" :title="$tc('login.wechatLoginResult', 1)" :sub-title="$tc('login.wechatLoginResult', 2)"></el-result>
+				<el-result icon="success" :title="$tc('login.wechatLoginResult', 1)"
+					:sub-title="$tc('login.wechatLoginResult', 2)"></el-result>
 			</div>
 		</div>
 	</el-dialog>
 </template>
 
 <script>
-	import passwordForm from './components/passwordForm'
+import passwordForm from './components/passwordForm'
-	import phoneForm from './components/phoneForm'
+import phoneForm from './components/phoneForm'
-	import logo from '@/assets/img/logo.png';
+import logo from '@/assets/img/logo.png';
 
 
-	export default {
+export default {
-		components: {
+	components: {
-			passwordForm,
+		passwordForm,
-			phoneForm
+		phoneForm
-		},
+	},
-		data() {
+	data() {
-			return {
+		return {
-				config: {
+			config: {
-					lang: this.$tool.data.get('APP_LANG') || this.$config.LANG,
+				lang: this.$tool.data.get('APP_LANG') || this.$config.LANG,
-					dark: this.$tool.data.get('APP_DARK') || false
+				dark: this.$tool.data.get('APP_DARK') || false
+			},
+			lang: [
+				{
+					name: '简体中文',
+					value: 'zh-cn',
 				},
-				lang: [
+				{
-					{
+					name: 'English',
-						name: '简体中文',
+					value: 'en',
-						value: 'zh-cn',
-					},
-					{
-						name: 'English',
-						value: 'en',
-					}
-				],
-				WechatLoginCode: "",
-				WechatLoginuniqid: "",
-				appLogo: "",
-				showWechatLogin: false,
-				isWechatLoginResult: false
-			}
-		},
-		watch:{
-			'config.dark'(val){
-				if(val){
-					document.documentElement.classList.add("dark")
-					this.$tool.data.set("APP_DARK", val)
-				}else{
-					document.documentElement.classList.remove("dark")
-					this.$tool.data.remove("APP_DARK")
 				}
-			},
+			],
-			'config.lang'(val){
+			WechatLoginCode: "",
-				this.$i18n.locale = val
+			WechatLoginuniqid: "",
-				this.$tool.data.set("APP_LANG", val)
+			appLogo: "",
+			showWechatLogin: false,
+			isWechatLoginResult: false
+		}
+	},
+	watch: {
+		'config.dark'(val) {
+			if (val) {
+				document.documentElement.classList.add("dark")
+				this.$tool.data.set("APP_DARK", val)
+			} else {
+				document.documentElement.classList.remove("dark")
+				this.$tool.data.remove("APP_DARK")
 			}
 		},
-		created: function() {
+		'config.lang'(val) {
+			this.$i18n.locale = val
+			this.$tool.data.set("APP_LANG", val)
+		}
+	},
+	created: function () {
 
-			this.appLogo = this.$tool.data.get("appLogo") || (this.$config.APP_LOGO || logo);
+		this.appLogo = this.$tool.data.get("appLogo") || (this.$config.APP_LOGO || logo);
 
-			this.$tool.cookie.remove(this.$config.SESSIONNAME)
+		this.$tool.cookie.remove(this.$config.SESSIONNAME)
-			this.$tool.data.remove("user")
+		this.$tool.data.remove("user")
-			this.$tool.data.remove("menu")
+		this.$tool.data.remove("menu")
-			this.$tool.data.remove("permissions")
+		this.$tool.data.remove("permissions")
-			this.$tool.data.remove("dashboardgrid")
+		this.$tool.data.remove("dashboardgrid")
-			this.$tool.data.remove("grid")
+		this.$tool.data.remove("grid")
-			this.$tool.store.remove("token")
+		this.$tool.store.remove("token")
-			this.$store.commit("clearViewTags")
+		this.$store.commit("clearViewTags")
-			this.$store.commit("clearKeepLive")
+		this.$store.commit("clearKeepLive")
-			this.$store.commit("clearIframeList")
+		this.$store.commit("clearIframeList")
+	},
+	methods: {
+		configDark() {
+			this.config.dark = this.config.dark ? false : true
 		},
-		methods: {
+		configLang(command) {
-			configDark(){
+			this.config.lang = command.value
-				this.config.dark = this.config.dark ? false : true
+		},
-			},
+		long_contact: function () {
-			configLang(command){
-				this.config.lang = command.value
-			},
-			long_contact:function(){
 
-			    if (!this.WechatLoginuniqid) {
+			if (!this.WechatLoginuniqid) {
-			        return false;
+				return false;
-			    }
+			}
 
 
-			    setTimeout(async ()=>{
+			setTimeout(async () => {
-			    	var res =  await this.$http.post('login/wechatSubmit', {uniqid:this.WechatLoginuniqid});
+				var res = await this.$http.post('login/wechatSubmit', { uniqid: this.WechatLoginuniqid });
 
 
-			    	    if(res.code==201){
+				if (res.code == 201) {
-			    	    	this.showWechatLogin = false
+					this.showWechatLogin = false
-			    	       	this.$message.warning(res.message)
-			    	    }else if(res.code==202){
-			    	        this.long_contact()
-
-			    	    }else if(res.code==200){
-
-			    	    	this.showWechatLogin = false
-			    	    	this.$tool.cookie.set(this.$config.SESSIONNAME, res.data.token, {
-			    	    		expires: 86400*360
-			    	    	})
-
-			    	    	// //获取菜单
-			    	    	// var menu = null
-			    	    	// menu = await this.$api.system.index.get()
-
-			    	    	// if(menu.code == 200){
-
-			    	    		// if(menu.data.menu.length==0){
-			    	    		// 	this.islogin = false
-			    	    		// 	this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
-			    	    		// 		type: 'error',
-			    	    		// 		center: true
-			    	    		// 	})
-			    	    		// 	return false
-			    	    		// }
-			    	    		// for (const key in menu.data) {
-			    	    		//     if (Object.prototype.hasOwnProperty.call(menu.data, key)) {
-			    	    		//         this.$tool.data.set(key, menu.data[key]);
-			    	    		//     }
-			    	    		// }
-
-			    	    		// 获取登录前的URL
-			    	    		const redirect = this.$route.query.redirect || '/'
-			    	    		this.$router.replace({
-			    	    			path: redirect
-			    	    		})
-
-			    	    		this.$message.success("Login Success 登录成功")
-			    	    		this.islogin = false
-		    	    			return false
-			    	    	// }
-		    	    		// this.islogin = false
-		    	    		// this.$message.warning(menu.message)
-			    	    }
-			    },1000)
-
-			},
-			async wechatLogin(){
-				var res = await this.$http.get('login/wechatQrcode');
-				if (res.code==200) {
-					this.showWechatLogin = true
-					this.WechatLoginCode = res.data.qrcodeurl
-					this.WechatLoginuniqid = res.data.uniqid
-					this.long_contact();
-					// 已扫码
-					// this.isWechatLoginResult = true
-				}else{
 					this.$message.warning(res.message)
+				} else if (res.code == 202) {
+					this.long_contact()
+
+				} else if (res.code == 200) {
+
+					this.showWechatLogin = false
+					this.$tool.cookie.set(this.$config.SESSIONNAME, res.data.token, {
+						expires: 86400 * 360
+					})
+
+					// //获取菜单
+					// var menu = null
+					// menu = await this.$api.system.index.get()
+
+					// if(menu.code == 200){
+
+					// if(menu.data.menu.length==0){
+					// 	this.islogin = false
+					// 	this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
+					// 		type: 'error',
+					// 		center: true
+					// 	})
+					// 	return false
+					// }
+					// for (const key in menu.data) {
+					//     if (Object.prototype.hasOwnProperty.call(menu.data, key)) {
+					//         this.$tool.data.set(key, menu.data[key]);
+					//     }
+					// }
+
+					// 获取登录前的URL
+					const redirect = this.$route.query.redirect || '/'
+					this.$router.replace({
+						path: redirect
+					})
+
+					this.$message.success("Login Success 登录成功")
+					this.islogin = false
 					return false
+					// }
+					// this.islogin = false
+					// this.$message.warning(menu.message)
 				}
+			}, 1000)
+
+		},
+		async wechatLogin() {
+			var res = await this.$http.get('login/wechatQrcode');
+			if (res.code == 200) {
+				this.showWechatLogin = true
+				this.WechatLoginCode = res.data.qrcodeurl
+				this.WechatLoginuniqid = res.data.uniqid
+				this.long_contact();
+				// 已扫码
+				// this.isWechatLoginResult = true
+			} else {
+				this.$message.warning(res.message)
+				return false
 			}
 		}
 	}
+}
 </script>
 
 <style scoped>
-	.login_bg {width: 100%;height: 100%;background: #fff;display: flex;}
+.login_bg {
-	.login_adv {width: 33.33333%;background-color: #555;background-size: cover;background-position: center center;background-repeat: no-repeat;position: relative;}
+	width: 100%;
-	.login_adv__title {color: #fff;padding: 40px;position: absolute;top:0px;left:0px;right: 0px;z-index: 2;}
+	height: 100%;
-	.login_adv__title h2 {font-size: 40px;}
+	background: #fff;
-	.login_adv__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
+	display: flex;
-	.login_adv__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}
+}
-	.login_adv__title div {margin-top: 10px;display: flex;align-items: center;}
-	.login_adv__title div span {margin-right: 15px;}
-	.login_adv__title div i {font-size: 40px;}
-	.login_adv__title div i.add {font-size: 20px;color: rgba(255,255,255,0.6);}
-	.login_adv__bottom {position: absolute;left:0px;right: 0px;bottom: 0px;color: #fff;padding: 40px;background-image:linear-gradient(transparent, #000);z-index: 3;}
-	.login_adv__mask {position: absolute;top:0px;left:0px;right: 0px;bottom: 0px;background: rgba(0,0,0,0.5);z-index: 1;}
 
-	.login_main {flex: 1;overflow: auto;display:flex;}
+.login_adv {
-	.login-form {width: 400px;margin: auto;padding:20px 0;}
+	width: 33.33333%;
-	.login-header {margin-bottom: 40px;}
+	background-color: #555;
-	.login-header .logo {display: flex;align-items: center;}
+	background-size: cover;
-	.login-header .logo img {width: 40px;height: 40px;vertical-align: bottom;margin-right: 10px;}
+	background-position: center center;
-	.login-header .logo label {font-size: 26px;font-weight: bold;}
+	background-repeat: no-repeat;
-	.login-oauth {display: flex;justify-content:space-around;}
+	position: relative;
-	.login-form .el-divider {margin-top:40px;}
+}
 
-	.login-form {}
+.login_adv__title {
-	.login-form:deep(.el-tabs) .el-tabs__header {margin-bottom: 25px;}
+	color: #fff;
-	.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {font-size: 14px;}
+	padding: 40px;
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	z-index: 2;
+}
 
-	.login-form:deep(.login-forgot) {text-align: right;}
+.login_adv__title h2 {
-	.login-form:deep(.login-forgot) a {color: var(--el-color-primary);}
+	font-size: 40px;
-	.login-form:deep(.login-forgot) a:hover {color: var(--el-color-primary-light-3);}
+}
-	.login-form:deep(.login-reg) {font-size: 14px;color: var(--el-text-color-primary);}
-	.login-form:deep(.login-reg) a {color: var(--el-color-primary);}
-	.login-form:deep(.login-reg) a:hover {color: var(--el-color-primary-light-3);}
 
-	.login_config {position: absolute;top:20px;right: 20px;}
+.login_adv__title h4 {
+	font-size: 18px;
+	margin-top: 10px;
+	font-weight: normal;
+}
 
-	.login-form:deep(.login-msg-yzm) {display: flex;width: 100%;}
+.login_adv__title p {
-	.login-form:deep(.login-msg-yzm) .el-button {margin-left: 10px;--el-button-size:42px;}
+	font-size: 14px;
+	margin-top: 10px;
+	line-height: 1.8;
+	color: rgba(255, 255, 255, 0.6);
+}
 
-	.qrCodeLogin {text-align: center;position: relative;padding: 20px 0;}
+.login_adv__title div {
-	.qrCodeLogin img.qrCode {background: #fff;padding:20px;border-radius:10px;}
+	margin-top: 10px;
-	.qrCodeLogin p.msg {margin-top: 15px;}
+	display: flex;
-	.qrCodeLogin .qrCodeLogin-result {position: absolute;top:0;left:0;right: 0;bottom: 0;text-align: center;background: var(--el-mask-color);}
+	align-items: center;
+}
 
-	@media (max-width: 1200px){
+.login_adv__title div span {
-		.login-form {width: 340px;}
+	margin-right: 15px;
+}
+
+.login_adv__title div i {
+	font-size: 40px;
+}
+
+.login_adv__title div i.add {
+	font-size: 20px;
+	color: rgba(255, 255, 255, 0.6);
+}
+
+.login_adv__bottom {
+	position: absolute;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	color: #fff;
+	padding: 40px;
+	background-image: linear-gradient(transparent, #000);
+	z-index: 3;
+}
+
+.login_adv__mask {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 1;
+}
+
+.login_main {
+	flex: 1;
+	overflow: auto;
+	display: flex;
+}
+
+.login-form {
+	width: 400px;
+	margin: auto;
+	padding: 20px 0;
+}
+
+.login-header {
+	margin-bottom: 40px;
+}
+
+.login-header .logo {
+	display: flex;
+	align-items: center;
+}
+
+.login-header .logo img {
+	width: 40px;
+	height: 40px;
+	vertical-align: bottom;
+	margin-right: 10px;
+}
+
+.login-header .logo label {
+	font-size: 26px;
+	font-weight: bold;
+}
+
+.login-oauth {
+	display: flex;
+	justify-content: space-around;
+}
+
+.login-form .el-divider {
+	margin-top: 40px;
+}
+
+.login-form {}
+
+.login-form:deep(.el-tabs) .el-tabs__header {
+	margin-bottom: 25px;
+}
+
+.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {
+	font-size: 14px;
+}
+
+.login-form:deep(.login-forgot) {
+	text-align: right;
+}
+
+.login-form:deep(.login-forgot) a {
+	color: var(--el-color-primary);
+}
+
+.login-form:deep(.login-forgot) a:hover {
+	color: var(--el-color-primary-light-3);
+}
+
+.login-form:deep(.login-reg) {
+	font-size: 14px;
+	color: var(--el-text-color-primary);
+}
+
+.login-form:deep(.login-reg) a {
+	color: var(--el-color-primary);
+}
+
+.login-form:deep(.login-reg) a:hover {
+	color: var(--el-color-primary-light-3);
+}
+
+.login_config {
+	position: absolute;
+	top: 20px;
+	right: 20px;
+}
+
+.login-form:deep(.login-msg-yzm) {
+	display: flex;
+	width: 100%;
+}
+
+.login-form:deep(.login-msg-yzm) .el-button {
+	margin-left: 10px;
+	--el-button-size: 42px;
+}
+
+.qrCodeLogin {
+	text-align: center;
+	position: relative;
+	padding: 20px 0;
+}
+
+.qrCodeLogin img.qrCode {
+	background: #fff;
+	padding: 20px;
+	border-radius: 10px;
+}
+
+.qrCodeLogin p.msg {
+	margin-top: 15px;
+}
+
+.qrCodeLogin .qrCodeLogin-result {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	text-align: center;
+	background: var(--el-mask-color);
+}
+
+@media (max-width: 1200px) {
+	.login-form {
+		width: 340px;
 	}
-	@media (max-width: 1000px){
+}
-		.login_main {display: block;}
+
-		.login_main .login_config {position: static;padding:20px 20px 0 20px;text-align: right;}
+@media (max-width: 1000px) {
-		.login-form {width:100%;padding:20px 40px;}
+	.login_main {
-		.login_adv {display: none;}
+		display: block;
 	}
-</style>
+
+	.login_main .login_config {
+		position: static;
+		padding: 20px 20px 0 20px;
+		text-align: right;
+	}
+
+	.login-form {
+		width: 100%;
+		padding: 20px 40px;
+	}
+
+	.login_adv {
+		display: none;
+	}
+}</style>