登录页添加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/assets/styles/base.scss

@@ -90,7 +90,7 @@ $date-state3: #d6333b;
 //电视墙视频摄像头预览弹层样式
 .TVWallCustomWidth {
   width: 1200px !important;
-  height: 750px !important;
+  height: 790px !important;
 }
 
 //公共

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,180 +59,212 @@
 </template>
 
 <script>
-  import StarBackground from '@/components/star'
+  import StarBackground from "@/components/star";
   import {
-    getCodeImg,fontConfig,getSecretKey
-  } from '@/api/login'
+    getCodeImg,
+    fontConfig,
+    getSecretKey
+  } from "@/api/login";
   import {
     encryptedData
-  } from '@/api/encrypt'
-  import Cookies from 'js-cookie'
+  } from "@/api/encrypt";
+  import Cookies from "js-cookie";
   import {
     encrypt,
     decrypt
-  } from '@/utils/jsencrypt'
+  } from "@/utils/jsencrypt";
+  import {
+    getVersionInfo
+  } from "@/api/system/version"
+  import axios from 'axios'
 
   export default {
     beforeCreate: function() {
-      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
+      document.getElementsByTagName("body")[0].style.overflow = "hidden";
     },
-    name: 'Login',
-    components:{
-      StarBackground
+    name: "Login",
+    components: {
+      StarBackground,
     },
     data() {
       return {
-        backgroudImg:'', //背景图片
-        systemTitle:{
-          title:'',  //标题
-          subTitle:''  ,//副标题 数字交通
+        QRCode: "",
+        backgroudImg: "", //背景图片
+        systemTitle: {
+          title: "", //标题
+          subTitle: "", //副标题 数字林业
         },
-        codeUrl: '',
+        codeUrl: "",
         loginForm: {
-          username: '',
-          password: '',
+          username: "",
+          password: "",
           rememberMe: false,
-          code: '',
-          uuid: ''
+          code: "",
+          uuid: "",
         },
         loginRules: {
           username: [{
             required: true,
-            trigger: 'blur',
-            message: '请输入您的账号'
-          }],
+            trigger: "blur",
+            message: "请输入您的账号",
+          }, ],
           password: [{
             required: true,
-            trigger: 'blur',
-            message: '请输入您的密码'
-          }],
+            trigger: "blur",
+            message: "请输入您的密码",
+          }, ],
           code: [{
             required: true,
-            trigger: 'change',
-            message: '请输入验证码'
-          }]
+            trigger: "change",
+            message: "请输入验证码",
+          }, ],
         },
         loading: false,
         // 验证码开关
         captchaOnOff: true,
         // 注册开关
         register: false,
-        redirect: undefined
-      }
+        redirect: undefined,
+        appDowPath: ''
+      };
     },
     watch: {
       $route: {
         handler: function(route) {
-          this.redirect = route.query && route.query.redirect
+          this.redirect = route.query && route.query.redirect;
         },
-        immediate: true
-      }
+        immediate: true,
+      },
     },
     created() {
-      this.getCode()
-      this.getCookie()
-      this.fontConfig()
+      this.getCode();
+      this.getCookie();
+      this.fontConfig();
     },
     methods: {
-      fontConfig(){
-        fontConfig().then(res => {
+      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
+        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
+            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')
+        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)
-        }
+          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+        };
       },
       handleLogin() {
-        this.$refs.loginForm.validate(valid => {
+        this.$refs.loginForm.validate((valid) => {
           if (valid) {
-            this.loading = true
+            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
-              })
+              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')
+              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.jpg") center;
+    background: url("../../assets/images/login/login-ty.jpg") center;
     background-size: cover;
   }
 
   .m-b-15 {
     margin-bottom: 15px;
   }
-  .sub-title{
+
+  .sub-title {
     margin: 0px auto 10px auto;
     text-align: center;
     color: #fff;
     font-family: $fontFk;
     font-size: 55px;
   }
+
   .title {
-    margin: 0px auto 30px auto;
+    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 {
@@ -228,15 +274,15 @@
     align-items: center;
 
     h3 {
-      text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: .7);
+      text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: 0.7);
     }
 
     .login-container {
       border-radius: 6px;
-      background: rgba($color: #fff, $alpha: .7);
+      background: rgba($color: #fff, $alpha: 0.7);
       width: 450px;
       padding: 30px;
-      box-shadow: 0 0 20px rgba($color: #fff, $alpha: .5);
+      box-shadow: 0 0 20px rgba($color: #fff, $alpha: 0.5);
 
       h4 {
         border-bottom: #3e6bfb 1px solid;
@@ -266,7 +312,7 @@
     .el-button--primary {
       font-size: 20px;
       background: #3e69fb;
-      padding: 15px
+      padding: 15px;
     }
   }