system-clients 3.3.6 → 4.0.1

package/src/components/server/LoginPage.vue

@@ -1,235 +1,235 @@
-<template>
-  <div class="login-box">
-    <div class="login-title" style="height: 100vh;">
-      <div class="row auto">
-        <div style="margin-top: 6vh;float: right;padding-right: 20vh">
-          <span style="font-size: 1.2rem;color: white;"><b>关于我们</b></span>
-        </div>
-      </div>
-
-      <div class="row auto">
-        <div style="width: 60vh;float: right;margin-top: 18vh;margin-right: 18vh;">
-
-          <div style="color: white;font-size: 2.5rem;text-align: center;">
-            <span>智 慧 燃 气 SaaS 云 平 台</span>
-          </div>
-
-          <div class="pt-1" style="color: white;font-size: 1.2rem;text-align: center;">
-            <span>燃气行业数字化解决方案</span>
-          </div>
-
-          <div style="margin-top: 2.7rem;padding-left: 7rem;">
-
-            <div class="pt-1" style="width: 82%;">
-              <div class="login_input">
-                <div @mouseenter="changeImageSrc(1, 'hover')"
-                     @mouseleave="changeImageSrc(1, '')">
-                  <img :src="enameImg">
-                  <span :class="enameShow ? 'color2' : 'color1'">|</span>
-                  <input type="text" placeholder=" 请输入登录账号" v-model="model.ename"/>
-                </div>
-              </div>
-            </div>
-
-            <div class="pt-1" style="width: 82%;">
-              <div class="login_input">
-                <div @mouseenter="changeImageSrc(2, 'hover')"
-                     @mouseleave="changeImageSrc(2, '')">
-                  <img :src="passwordImg">
-                  <span :class="passwordShow ? 'color2' : 'color1'">|</span>
-                  <input type="text" placeholder=" 请输入登录密码" v-model="model.password"/>
-                </div>
-              </div>
-            </div>
-
-
-            <div class="pt-1" style="width: 82%;">
-              <div class="login_input">
-                <div @mouseenter="changeImageSrc(3, 'hover')"
-                     @mouseleave="changeImageSrc(3, '')">
-                  <img :src="verificationCodeImg">
-                  <span :class="verificationCodeShow ? 'color2' : 'color1'">|</span>
-                  <input type="text" placeholder=" 请输入验证码" v-model="model.verificationCode"/>
-                  <span class="color2" style="float: right;padding-right: 2rem;" @click.native="createCode()">{{checkCode}}</span>
-                </div>
-              </div>
-            </div>
-            <div class="pt-1" style="width: 82%;padding-left: .667rem;color: white;font-size: 1rem">
-              <input type="checkbox" name="type" value="true" v-model="isRememberPassword" id="cb"/>&nbsp;记住密码
-            </div>
-          </div>
-
-          <div class="pt-1" style="color: white;font-size: 1.2rem;text-align: center;">
-            <button class="btn_login" style="width: 20rem;" @click.native="confirm()">立即登录</button>
-          </div>
-
-        </div>
-
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  title: '登录',
-  data () {
-    return {
-      enameImg: require('../../../static/guangxi/ename.png'),
-      passwordImg: require('../../../static/guangxi/password.png'),
-      verificationCodeImg: require('../../../static/guangxi/verificationCode.png'),
-      enameShow: false,
-      passwordShow: false,
-      verificationCodeShow: false,
-      notice: '',
-      model: {
-        ename: '',
-        password: '',
-        verificationCode: ''
-      },
-      isRememberPassword: false,
-      checkCode: ''
-    }
-  },
-  created () {
-    this.createCode()
-    let storage = window.localStorage
-    this.model.ename = storage.getItem('ename')
-    this.model.password = storage.getItem('password')
-    this.isRememberPassword = storage.getItem('isRememberPassword')
-  },
-  methods: {
-    changeImageSrc (key, way) {
-      switch (key) {
-        case 1:
-          if (way) {
-            this.enameShow = true
-            this.enameImg = require(`../../../static/guangxi/enameCopy.png`)
-          } else if (!this.model.ename){
-            this.enameShow = false
-            this.enameImg = require(`../../../static/guangxi/ename.png`)
-          }
-          break
-        case 2:
-          if (way) {
-            this.passwordShow = true
-            this.passwordImg = require(`../../../static/guangxi/passwordCopy.png`)
-          } else if (!this.model.password){
-            this.passwordShow = false
-            this.passwordImg = require(`../../../static/guangxi/password.png`)
-          }
-          break
-        case 3:
-          if (way) {
-            this.verificationCodeShow = true
-            this.verificationCodeImg = require(`../../../static/guangxi/verificationCodeCopy.png`)
-          } else if (!this.model.verificationCode){
-            this.verificationCodeShow = false
-            this.verificationCodeImg = require(`../../../static/guangxi/verificationCode.png`)
-          }
-          break
-      }
-    },
-    createCode(){
-      let code = "";
-      //验证码的长度
-      let codeLength = 4;
-      //随机数
-      let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
-        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
-      //循环操作
-      for (let i = 0; i < codeLength; i++) {
-        //取得随机数的索引（0~35）
-        let index = Math.floor(Math.random() * 36);
-        //根据索引取得随机数加到code上
-        code += random[index];
-      }
-      //把code值赋给验证码
-      this.checkCode = code;
-    },
-    confirm () {
-      console.log('点击登录' + JSON.stringify(this.model))
-      if (!this.model.ename) {
-        this.$showMessage("请输入登录账号!")
-        return
-      }
-      if (!this.model.password) {
-        this.$showMessage("请输入登录密码!")
-        return
-      }
-      if (!this.model.verificationCode) {
-        this.$showMessage("请输入验证码!")
-        return
-      }
-      if (this.model.verificationCode.toUpperCase() !== this.checkCode) {
-        this.$showMessage("输入的验证码有误！")
-        this.createCode()
-        return
-      }
-      if (this.model.ename === '黄群' && this.model.password === '000000') {
-        let storage = window.localStorage
-        if (this.isRememberPassword) {
-          storage.setItem('ename', this.model.ename)
-          storage.setItem('password', this.model.password)
-          storage.setItem('isRememberPassword', this.isRememberPassword)
-        } else {
-          storage.removeItem('ename')
-          storage.removeItem('password')
-          storage.removeItem('isRememberPassword')
-        }
-        console.log('555555555555')
-        this.$goto('login-view')
-      } else{
-        this.$showMessage("登录失败，输入的账号或密码有误！")
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.login-box{
-  overflow: hidden;
-  background-image: url("../../../static/guangxi/backgroundImage.png");
-  background-size:100% 100%;
-  background-repeat:no-repeat;
-  font-family: PINGFANG-MEDIUM;
-}
-.pt-1 {
-  padding-top: 1rem;
-}
-.color1 {
-  color: #c9c9c9;
-}
-.color2 {
-  color: #4190f6;
-}
-#cb{
-  accent-color: #4190f6;
-}
-.btn_login {
-  width: 100%;
-  height: 40px;
-  background-color: #4292f7;
-  border-radius: 3rem;
-  border:none;
-  font-family: PingFang,serif;
-  font-size: 16px;
-  color: #ffffff;
-}
-.btn_login:hover{background-color: #3171f4;}
-.login_input {
-  line-height: 4.3rem;
-  box-sizing: border-box;
-  border-radius: 0.8rem;
-  background: #fff;
-  input{
-    border: none;
-    outline: none;
-  }
-  input::-webkit-input-placeholder {
-    color: #c9c9c9;
-  }
-}
-</style>
+<template>
+  <div class="login-box">
+    <div class="login-title" style="height: 100vh;">
+      <div class="row auto">
+        <div style="margin-top: 6vh;float: right;padding-right: 20vh">
+          <span style="font-size: 1.2rem;color: white;"><b>关于我们</b></span>
+        </div>
+      </div>
+
+      <div class="row auto">
+        <div style="width: 60vh;float: right;margin-top: 18vh;margin-right: 18vh;">
+
+          <div style="color: white;font-size: 2.5rem;text-align: center;">
+            <span>智 慧 燃 气 SaaS 云 平 台</span>
+          </div>
+
+          <div class="pt-1" style="color: white;font-size: 1.2rem;text-align: center;">
+            <span>燃气行业数字化解决方案</span>
+          </div>
+
+          <div style="margin-top: 2.7rem;padding-left: 7rem;">
+
+            <div class="pt-1" style="width: 82%;">
+              <div class="login_input">
+                <div @mouseenter="changeImageSrc(1, 'hover')"
+                     @mouseleave="changeImageSrc(1, '')">
+                  <img :src="enameImg">
+                  <span :class="enameShow ? 'color2' : 'color1'">|</span>
+                  <input type="text" placeholder=" 请输入登录账号" v-model="model.ename"/>
+                </div>
+              </div>
+            </div>
+
+            <div class="pt-1" style="width: 82%;">
+              <div class="login_input">
+                <div @mouseenter="changeImageSrc(2, 'hover')"
+                     @mouseleave="changeImageSrc(2, '')">
+                  <img :src="passwordImg">
+                  <span :class="passwordShow ? 'color2' : 'color1'">|</span>
+                  <input type="text" placeholder=" 请输入登录密码" v-model="model.password"/>
+                </div>
+              </div>
+            </div>
+
+
+            <div class="pt-1" style="width: 82%;">
+              <div class="login_input">
+                <div @mouseenter="changeImageSrc(3, 'hover')"
+                     @mouseleave="changeImageSrc(3, '')">
+                  <img :src="verificationCodeImg">
+                  <span :class="verificationCodeShow ? 'color2' : 'color1'">|</span>
+                  <input type="text" placeholder=" 请输入验证码" v-model="model.verificationCode"/>
+                  <span class="color2" style="float: right;padding-right: 2rem;" @click.native="createCode()">{{checkCode}}</span>
+                </div>
+              </div>
+            </div>
+            <div class="pt-1" style="width: 82%;padding-left: .667rem;color: white;font-size: 1rem">
+              <input type="checkbox" name="type" value="true" v-model="isRememberPassword" id="cb"/>&nbsp;记住密码
+            </div>
+          </div>
+
+          <div class="pt-1" style="color: white;font-size: 1.2rem;text-align: center;">
+            <button class="btn_login" style="width: 20rem;" @click.native="confirm()">立即登录</button>
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '登录',
+  data () {
+    return {
+      enameImg: require('../../../static/guangxi/ename.png'),
+      passwordImg: require('../../../static/guangxi/password.png'),
+      verificationCodeImg: require('../../../static/guangxi/verificationCode.png'),
+      enameShow: false,
+      passwordShow: false,
+      verificationCodeShow: false,
+      notice: '',
+      model: {
+        ename: '',
+        password: '',
+        verificationCode: ''
+      },
+      isRememberPassword: false,
+      checkCode: ''
+    }
+  },
+  created () {
+    this.createCode()
+    let storage = window.localStorage
+    this.model.ename = storage.getItem('ename')
+    this.model.password = storage.getItem('password')
+    this.isRememberPassword = storage.getItem('isRememberPassword')
+  },
+  methods: {
+    changeImageSrc (key, way) {
+      switch (key) {
+        case 1:
+          if (way) {
+            this.enameShow = true
+            this.enameImg = require(`../../../static/guangxi/enameCopy.png`)
+          } else if (!this.model.ename){
+            this.enameShow = false
+            this.enameImg = require(`../../../static/guangxi/ename.png`)
+          }
+          break
+        case 2:
+          if (way) {
+            this.passwordShow = true
+            this.passwordImg = require(`../../../static/guangxi/passwordCopy.png`)
+          } else if (!this.model.password){
+            this.passwordShow = false
+            this.passwordImg = require(`../../../static/guangxi/password.png`)
+          }
+          break
+        case 3:
+          if (way) {
+            this.verificationCodeShow = true
+            this.verificationCodeImg = require(`../../../static/guangxi/verificationCodeCopy.png`)
+          } else if (!this.model.verificationCode){
+            this.verificationCodeShow = false
+            this.verificationCodeImg = require(`../../../static/guangxi/verificationCode.png`)
+          }
+          break
+      }
+    },
+    createCode(){
+      let code = "";
+      //验证码的长度
+      let codeLength = 4;
+      //随机数
+      let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
+        'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
+      //循环操作
+      for (let i = 0; i < codeLength; i++) {
+        //取得随机数的索引（0~35）
+        let index = Math.floor(Math.random() * 36);
+        //根据索引取得随机数加到code上
+        code += random[index];
+      }
+      //把code值赋给验证码
+      this.checkCode = code;
+    },
+    confirm () {
+      console.log('点击登录' + JSON.stringify(this.model))
+      if (!this.model.ename) {
+        this.$showMessage("请输入登录账号!")
+        return
+      }
+      if (!this.model.password) {
+        this.$showMessage("请输入登录密码!")
+        return
+      }
+      if (!this.model.verificationCode) {
+        this.$showMessage("请输入验证码!")
+        return
+      }
+      if (this.model.verificationCode.toUpperCase() !== this.checkCode) {
+        this.$showMessage("输入的验证码有误！")
+        this.createCode()
+        return
+      }
+      if (this.model.ename === '黄群' && this.model.password === '000000') {
+        let storage = window.localStorage
+        if (this.isRememberPassword) {
+          storage.setItem('ename', this.model.ename)
+          storage.setItem('password', this.model.password)
+          storage.setItem('isRememberPassword', this.isRememberPassword)
+        } else {
+          storage.removeItem('ename')
+          storage.removeItem('password')
+          storage.removeItem('isRememberPassword')
+        }
+        console.log('555555555555')
+        this.$goto('login-view')
+      } else{
+        this.$showMessage("登录失败，输入的账号或密码有误！")
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.login-box{
+  overflow: hidden;
+  background-image: url("../../../static/guangxi/backgroundImage.png");
+  background-size:100% 100%;
+  background-repeat:no-repeat;
+  font-family: PINGFANG-MEDIUM;
+}
+.pt-1 {
+  padding-top: 1rem;
+}
+.color1 {
+  color: #c9c9c9;
+}
+.color2 {
+  color: #4190f6;
+}
+#cb{
+  accent-color: #4190f6;
+}
+.btn_login {
+  width: 100%;
+  height: 40px;
+  background-color: #4292f7;
+  border-radius: 3rem;
+  border:none;
+  font-family: PingFang,serif;
+  font-size: 16px;
+  color: #ffffff;
+}
+.btn_login:hover{background-color: #3171f4;}
+.login_input {
+  line-height: 4.3rem;
+  box-sizing: border-box;
+  border-radius: 0.8rem;
+  background: #fff;
+  input{
+    border: none;
+    outline: none;
+  }
+  input::-webkit-input-placeholder {
+    color: #c9c9c9;
+  }
+}
+</style>