登录页添加APP下载

src/api/system/version.js

@@ -1,5 +1,12 @@
 import request from '@/utils/request'
 
+// 查询app版本
+export function getVersionInfo() {
+  return request({
+    url: '/system/version/getVersionInfo',
+    method: 'post'
+  })
+}
 // 查询app版本列表
 export function listVersion(query) {
   return request({

src/views/system/login.vue

@@ -1,27 +1,41 @@
 <template>
-  <div class="login" :style="{backgroundImage: 'url('+backgroudImg+')'}">
-    <StarBackground />
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="sub-title" v-if="systemTitle.subTitle">{{systemTitle.subTitle}}</h3>
-      <h3 class="title">{{systemTitle.title}}</h3>
+  <div class="login" :style="{ backgroundImage: 'url(' + backgroudImg + ')' }">
 
+    <!-- 二维码开始 -->
+    <el-popover placement="top-start" trigger="hover" :show="bindQRCode">
+      <img :src="QRCode" width="120px" height="120px" alt="" />
+      <el-tag slot="reference" class="el-icon-mobile-phone" style="
+			position: absolute;
+			top: 1rem;
+			right: 1rem;
+			padding: 0 1rem;
+			cursor: pointer;
+		  " effect="dark">
+        下载APP</el-tag>
+    </el-popover>
+    <!-- 二维码结束 -->
+    <StarBackground />
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form to-right">
+      <h3 class="title">{{ systemTitle.title }}</h3>
+      <h3 class="sub-title" v-if="systemTitle.subTitle">
+        {{ systemTitle.subTitle }}
+      </h3>
       <div class="login-container">
         <h4>请登录</h4>
         <el-form-item prop="username">
-          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"
-                    class="m-b-15">
+          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" class="m-b-15">
             <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码"
-                    @keyup.enter.native="handleLogin" class="m-b-15">
+            @keyup.enter.native="handleLogin" class="m-b-15">
             <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
           </el-input>
         </el-form-item>
         <el-form-item prop="code" v-if="captchaOnOff">
           <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
-                    @keyup.enter.native="handleLogin">
+            @keyup.enter.native="handleLogin">
             <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
           </el-input>
           <div class="login-code">
@@ -29,13 +43,13 @@
           </div>
         </el-form-item>
         <!--				<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
-        <el-form-item style="width:100%;">
-          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
-                     @click.native.prevent="handleLogin">
+        <el-form-item style="width: 100%">
+          <el-button :loading="loading" size="medium" type="primary" style="width: 100%"
+            @click.native.prevent="handleLogin">
             <span v-if="!loading">登 录</span>
             <span v-else>登 录 中...</span>
           </el-button>
-          <div style="float: right;" v-if="register">
+          <div style="float: right" v-if="register">
             <router-link class="link-type" :to="'/register'">立即注册</router-link>
           </div>
         </el-form-item>
@@ -45,276 +59,294 @@
 </template>
 
 <script>
-	import StarBackground from '@/components/star'
-	import {
-		getCodeImg,fontConfig,getSecretKey
-	} from '@/api/login'
-	import {
+  import StarBackground from "@/components/star";
+  import {
+    getCodeImg,
+    fontConfig,
+    getSecretKey
+  } from "@/api/login";
+  import {
     encryptedData
-	} from '@/api/encrypt'
-	import Cookies from 'js-cookie'
-	import {
-		encrypt,
-		decrypt
-	} from '@/utils/jsencrypt'
+  } from "@/api/encrypt";
+  import Cookies from "js-cookie";
+  import {
+    encrypt,
+    decrypt
+  } from "@/utils/jsencrypt";
+  import {
+    getVersionInfo
+  } from "@/api/system/version"
+  import axios from 'axios'
 
-	export default {
-		beforeCreate: function() {
-		    document.getElementsByTagName('body')[0].style.overflow = 'hidden'
-		  },
-		name: 'Login',
-		components:{
-			StarBackground
-		},
-		data() {
-			return {
-        backgroudImg:'', //背景图片
+  export default {
+    beforeCreate: function() {
+      document.getElementsByTagName("body")[0].style.overflow = "hidden";
+    },
+    name: "Login",
+    components: {
+      StarBackground,
+    },
+    data() {
+      return {
+        QRCode: "",
+        backgroudImg: "", //背景图片
         systemTitle: {
-          title: '',  //标题
-          subTitle: '',//副标题  数字应急
+          title: "", //标题
+          subTitle: "", //副标题 数字林业
+        },
+        codeUrl: "",
+        loginForm: {
+          username: "",
+          password: "",
+          rememberMe: false,
+          code: "",
+          uuid: "",
+        },
+        loginRules: {
+          username: [{
+            required: true,
+            trigger: "blur",
+            message: "请输入您的账号",
+          }, ],
+          password: [{
+            required: true,
+            trigger: "blur",
+            message: "请输入您的密码",
+          }, ],
+          code: [{
+            required: true,
+            trigger: "change",
+            message: "请输入验证码",
+          }, ],
         },
-				codeUrl: '',
-				loginForm: {
-					username: '',
-					password: '',
-					rememberMe: false,
-					code: '',
-					uuid: ''
-				},
-				loginRules: {
-					username: [{
-						required: true,
-						trigger: 'blur',
-						message: '请输入您的账号'
-					}],
-					password: [{
-						required: true,
-						trigger: 'blur',
-						message: '请输入您的密码'
-					}],
-					code: [{
-						required: true,
-						trigger: 'change',
-						message: '请输入验证码'
-					}]
-				},
-				loading: false,
-				// 验证码开关
-				captchaOnOff: true,
-				// 注册开关
-				register: false,
-				redirect: undefined
-			}
-		},
-		watch: {
-			$route: {
-				handler: function(route) {
-					this.redirect = route.query && route.query.redirect
-				},
-				immediate: true
-			}
-		},
-		created() {
-			this.getCode()
-			this.getCookie()
-      this.fontConfig()
-		},
-		methods: {
-      fontConfig(){
-        fontConfig().then(res => {
+        loading: false,
+        // 验证码开关
+        captchaOnOff: true,
+        // 注册开关
+        register: false,
+        redirect: undefined,
+        appDowPath: ''
+      };
+    },
+    watch: {
+      $route: {
+        handler: function(route) {
+          this.redirect = route.query && route.query.redirect;
+        },
+        immediate: true,
+      },
+    },
+    created() {
+      this.getCode();
+      this.getCookie();
+      this.fontConfig();
+    },
+    methods: {
+      getVersionInfo(){
+        getVersionInfo().then(res => {
+          this.QRCode = res.data.QRCode
+        })
+      },
+      fontConfig() {
+        fontConfig().then((res) => {
           this.systemTitle.title = res.data.fontTitle;
           this.systemTitle.subTitle = res.data.subTitle;
           this.backgroudImg = res.data.picUrl;
-        })
+        });
       },
-
       getCode() {
-				getCodeImg().then(res => {
-					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
-					if (this.captchaOnOff) {
-						this.codeUrl = 'data:image/gif;base64,' + res.img
-						this.loginForm.uuid = res.uuid
-					}
-				})
-			},
-			getCookie() {
-				const username = Cookies.get('username')
-				const password = Cookies.get('password')
-				const rememberMe = Cookies.get('rememberMe')
-				this.loginForm = {
-					username: username === undefined ? this.loginForm.username : username,
-					password: password === undefined ? this.loginForm.password : decrypt(password),
-					rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-				}
-			},
-			handleLogin() {
-				this.$refs.loginForm.validate(valid => {
-					if (valid) {
-						this.loading = true
-						// if (this.loginForm.rememberMe) {
-						//无论如何我都记-孙一石
-						if (true) {
-							Cookies.set('username', this.loginForm.username, {
-								expires: 30
-							})
-							Cookies.set('password', encrypt(this.loginForm.password), {
-								expires: 30
-							})
-							Cookies.set('rememberMe', this.loginForm.rememberMe, {
-								expires: 30
-							})
-						} else {
-							Cookies.remove('username')
-							Cookies.remove('password')
-							Cookies.remove('rememberMe')
-						}
-						// this.$store.dispatch('Login', this.loginForm).then(() => {
-						// 	console.log('!@!@!@', this.redirect)
-						// 	this.$router.push({
-						// 		//path: this.redirect || '/'
-						// 		path: '/'
-						// 	}).catch(() => {})
-						// }).catch(() => {
-						// 	this.loading = false
-						// 	if (this.captchaOnOff) {
-						// 		this.getCode()
-						// 	}
-						// })
+        getCodeImg().then((res) => {
+          this.captchaOnOff =
+            res.captchaOnOff === undefined ? true : res.captchaOnOff;
+          if (this.captchaOnOff) {
+            this.codeUrl = "data:image/gif;base64," + res.img;
+            this.loginForm.uuid = res.uuid;
+          }
+        });
+      },
+      getCookie() {
+        const username = Cookies.get("username");
+        const password = Cookies.get("password");
+        const rememberMe = Cookies.get("rememberMe");
+        this.loginForm = {
+          username: username === undefined ? this.loginForm.username : username,
+          password: password === undefined ? this.loginForm.password : decrypt(password),
+          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        };
+      },
+      handleLogin() {
+        this.$refs.loginForm.validate((valid) => {
+          if (valid) {
+            this.loading = true;
+            // if (this.loginForm.rememberMe) {
+            //无论如何我都记-孙一石
+            if (true) {
+              Cookies.set("username", this.loginForm.username, {
+                expires: 30,
+              });
+              Cookies.set("password", encrypt(this.loginForm.password), {
+                expires: 30,
+              });
+              Cookies.set("rememberMe", this.loginForm.rememberMe, {
+                expires: 30,
+              });
+            } else {
+              Cookies.remove("username");
+              Cookies.remove("password");
+              Cookies.remove("rememberMe");
+            }
             //登录前先获取密码加密传输的公钥，对密码进行加密
-            getSecretKey().then(res => {
-              const encryptedPassword = encryptedData(res.data,this.loginForm.password);
+            getSecretKey().then((res) => {
+              const encryptedPassword = encryptedData(
+                res.data,
+                this.loginForm.password
+              );
               this.loginForm.password = encryptedPassword;
-              this.$store.dispatch('Login', this.loginForm).then(() => {
-                this.$router.push({
-                  //path: this.redirect || '/'
-                  path: '/'
+              this.$store
+                .dispatch("Login", this.loginForm)
+                .then(() => {
+                  this.$router.push({
+                    //path: this.redirect || '/'
+                    path: "/",
+                  });
                 })
-              }).catch(() => {
-                this.loading = false
-                if (this.captchaOnOff) {
-                  this.getCode()
-                }
-              })
-            })
-
+                .catch(() => {
+                  this.loading = false;
+                  if (this.captchaOnOff) {
+                    this.getCode();
+                  }
+                });
+            });
           }
-				})
-			}
-		}
-	}
+        });
+      },
+    },
+  };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	@import '@/assets/styles/base.scss';
+  @import "@/assets/styles/base.scss";
 
-	.login {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		height: 100%;
-		background: url("../../assets/images/login/login-ty.jpg") center;
-		background-size: cover;
-	}
+  .login {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    background: url("../../assets/images/login/login-ty.jpg") center;
+    background-size: cover;
+  }
 
-	.m-b-15 {
-		margin-bottom: 15px;
-	}
-  .sub-title{
+  .m-b-15 {
+    margin-bottom: 15px;
+  }
+
+  .sub-title {
     margin: 0px auto 10px auto;
     text-align: center;
     color: #fff;
     font-family: $fontFk;
     font-size: 55px;
   }
-	.title {
-		margin: 0px auto 30px auto;
-		text-align: center;
-		color: #fff;
-		font-family: $fontFk;
-		font-size: 38px;
 
-	}
+  .title {
+    margin: 0px auto 10px auto;
+    text-align: center;
+    color: #fff;
+    font-family: $fontFk;
+    font-size: 38px;
+  }
+
+  .sub-title {
+    text-align: center;
+    color: #fff;
+    font-family: $fontFk;
+    font-size: 38px;
+  }
+
+  .to-right {
+    margin-left: 30%;
+  }
 
-	.login-form {
-		border-radius: 6px;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
+  .login-form {
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
-		h3 {
-			text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: .7);
-		}
+    h3 {
+      text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: 0.7);
+    }
 
-		.login-container {
-			border-radius: 6px;
-			background: rgba($color: #fff, $alpha: .7);
-			width: 450px;
-			padding: 30px;
-			box-shadow: 0 0 20px rgba($color: #fff, $alpha: .5);
+    .login-container {
+      border-radius: 6px;
+      background: rgba($color: #fff, $alpha: 0.7);
+      width: 450px;
+      padding: 30px;
+      box-shadow: 0 0 20px rgba($color: #fff, $alpha: 0.5);
 
-			h4 {
-				border-bottom: #3e6bfb 1px solid;
-				width: fit-content;
-				display: inline-block;
-				margin-top: 0;
-				padding-bottom: 5px;
-				margin-bottom: 20px;
-			}
-		}
+      h4 {
+        border-bottom: #3e6bfb 1px solid;
+        width: fit-content;
+        display: inline-block;
+        margin-top: 0;
+        padding-bottom: 5px;
+        margin-bottom: 20px;
+      }
+    }
 
-		.el-input {
-			height: 38px;
+    .el-input {
+      height: 38px;
 
-			input {
-				height: 38px;
-			}
-		}
+      input {
+        height: 38px;
+      }
+    }
 
-		.input-icon {
-			height: 39px;
-			width: 14px;
-			margin-left: 2px;
-			color: #3e69fb;
-		}
+    .input-icon {
+      height: 39px;
+      width: 14px;
+      margin-left: 2px;
+      color: #3e69fb;
+    }
 
-		.el-button--primary {
-			font-size: 20px;
-			background: #3e69fb;
-			padding: 15px
-		}
-	}
+    .el-button--primary {
+      font-size: 20px;
+      background: #3e69fb;
+      padding: 15px;
+    }
+  }
 
-	.login-tip {
-		font-size: 13px;
-		text-align: center;
-		color: #bfbfbf;
-	}
+  .login-tip {
+    font-size: 13px;
+    text-align: center;
+    color: #bfbfbf;
+  }
 
-	.login-code {
-		width: 33%;
-		height: 38px;
-		float: right;
+  .login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
 
-		img {
-			cursor: pointer;
-			vertical-align: middle;
-		}
-	}
+    img {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
 
-	.el-login-footer {
-		height: 40px;
-		line-height: 40px;
-		position: fixed;
-		bottom: 0;
-		width: 100%;
-		text-align: center;
-		color: #fff;
-		font-family: Arial;
-		font-size: 12px;
-		letter-spacing: 1px;
-	}
+  .el-login-footer {
+    height: 40px;
+    line-height: 40px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+    font-family: Arial;
+    font-size: 12px;
+    letter-spacing: 1px;
+  }
 
-	.login-code-img {
-		height: 38px;
-	}
+  .login-code-img {
+    height: 38px;
+  }
 </style>