Merge branch 'dev_product' of https://git.cloud.tencent.com/joylink/jl-nclient into dev_product

src/views/login/loginDesign.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="login-container">
+    <el-form
+      ref="loginForm"
+      class="login-form"
+      auto-complete="on"
+      :model="loginForm"
+      :rules="loginRules"
+      label-position="left"
+    >
+      <h3 class="title">用户登陆</h3>
+      <el-form-item prop="username">
+        <span class="svg-container svg-container_login">
+          <svg-icon icon-class="user" />
+        </span>
+        <el-input
+          v-model="loginForm.username"
+          name="username"
+          type="text"
+          auto-complete="on"
+          placeholder="username"
+        />
+      </el-form-item>
+      <el-form-item prop="password">
+        <span class="svg-container">
+          <svg-icon icon-class="password" />
+        </span>
+        <el-input
+          v-model="loginForm.password"
+          name="password"
+          :type="pwdType"
+          auto-complete="on"
+          placeholder="password"
+          @keyup.enter.native="handleLogin"
+        />
+        <span class="show-pwd" @click="showPwd">
+          <svg-icon icon-class="eye" />
+        </span>
+      </el-form-item>
+      <el-form-item>
+        <span class="svg-container" />
+        <el-radio>城市轨道交通设计平台</el-radio>
+      </el-form-item>
+      <div class="tip-message">{{ tipsMsg }}</div>
+      <el-form-item>
+        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+          登陆
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import md5 from 'js-md5';
+import { UrlConfig } from '@/router/index';
+import { setSessionStorage } from '@/utils/auth';
+export default {
+	name: 'LoginScreen',
+	data() {
+		const validateUsername = (rule, value, callback) => {
+			if (value.length < 5) {
+				callback(new Error('请输入正确的用户名'));
+			} else {
+				callback();
+			}
+		};
+		const validatePass = (rule, value, callback) => {
+			if (value.length < 5) {
+				callback(new Error('密码不能小于5位'));
+			} else {
+				callback();
+			}
+		};
+		return {
+			loginForm: {
+				username: '',
+				password: ''
+			},
+			loginRules: {
+				username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+				password: [{ required: true, trigger: 'blur', validator: validatePass }]
+			},
+			loading: false,
+			pwdType: 'password',
+			tipsMsg: ''
+		};
+	},
+	mounted() {
+		document.title = '城市轨道交通设计平台';
+	},
+	methods: {
+		showPwd() {
+			if (this.pwdType === 'password') {
+				this.pwdType = '';
+			} else {
+				this.pwdType = 'password';
+			}
+		},
+		handleLogin() {
+			this.$refs.loginForm.validate(valid => {
+				if (valid) {
+					const model = Object.assign({}, this.loginForm);
+					model.password = md5(model.password);
+                    // model.type = 'plan';
+                    model.type = 'design';
+
+					this.loading = true;
+					this.$store.dispatch('Login', model).then(() => {
+            this.$store.dispatch('GetUserConfigInfo');
+            setSessionStorage("design",true);
+            // this.$store.dispatch('updateDesignStatus', true);
+						// 设置路由
+						this.loading = false;
+						this.tipsMsg = '';
+						this.$router.push({ path: `${UrlConfig.design.prefix}/home` });
+					}).catch(error => {
+						this.tipsMsg = error.message;
+						this.loading = false;
+						setTimeout(() => { this.tipsMsg = ''; }, 5000);
+					});
+
+				} else {
+					console.log('error submit!!');
+					return false;
+				}
+			});
+		}
+	}
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+    $bg:#2d3a4b;
+    $light_gray:#eee;
+
+    /* reset element-ui css */
+
+    .login-container {
+        .el-input {
+            display: inline-block;
+            height: 50px;
+            width: 85%;
+
+            input {
+                background: transparent;
+                border: 0px;
+                -webkit-appearance: none;
+                border-radius: 0px;
+                padding: 8px 9px 12px 15px;
+                color: $light_gray;
+                height: 50px;
+
+                &:-webkit-autofill {
+                    -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
+                    -webkit-text-fill-color: #fff !important;
+                }
+            }
+        }
+
+        .el-form-item {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: 5px;
+            color: #454545;
+        }
+
+		.tip-message {
+			color: #F56C61;
+			padding: 5px;
+			font-size: 12px;
+		}
+    }
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+    $bg:#2d3a4b;
+    $dark_gray:#889aa4;
+    $light_gray:#eee;
+
+    .login-container {
+        position: fixed;
+        height: 100%;
+        width: 100%;
+        background-color: $bg;
+
+        .login-form {
+            position: absolute;
+            left: 0;
+            right: 0;
+            width: 520px;
+            padding: 35px 35px 35px 35px;
+            margin: 240px auto;
+        }
+
+        .tips {
+            font-size: 14px;
+            color: #fff;
+            margin-bottom: 10px;
+
+            span {
+                &:first-of-type {
+                    margin-right: 16px;
+                }
+            }
+        }
+
+        .svg-container {
+            padding: 6px 5px 6px 9px;
+            color: $dark_gray;
+            vertical-align: middle;
+            width: 30px;
+            display: inline-block;
+
+            &_login {
+                font-size: 20px;
+            }
+        }
+
+        .title {
+            font-size: 26px;
+            font-weight: 400;
+            color: $light_gray;
+            margin: 0px auto 40px auto;
+            text-align: center;
+            font-weight: bold;
+        }
+
+        .show-pwd {
+            position: absolute;
+            right: 10px;
+            top: 7px;
+            font-size: 16px;
+            color: $dark_gray;
+            cursor: pointer;
+            user-select: none;
+        }
+    }
+</style>