| | |
| | | ref="loginForm" |
| | | label-position="left" |
| | | > |
| | | <!-- title --> |
| | | <!-- title --> |
| | | <h2 class="login-title">用户登录 / USER LOGIN</h2> |
| | | <el-form-item prop="username"> |
| | | <!-- 用户名输入框 --> |
| | |
| | | autoComplete="on" |
| | | placeholder="请输入登录密码" |
| | | > |
| | | <!-- 输入框前icon --> |
| | | <!-- 输入框前icon --> |
| | | <span slot="prefix"> |
| | | <svg-icon icon-class="password" class="color"></svg-icon> |
| | | <svg-icon icon-class="password" class="color"></svg-icon> |
| | | </span> |
| | | <!-- 输入框后icon --> |
| | | <span slot="suffix" @click="showPwd"> |
| | |
| | | |
| | | <script> |
| | | import { isvalidUsername } from "@/utils/validate"; |
| | | |
| | | import { createNamespacedHelpers } from "vuex"; |
| | | const { mapActions } = createNamespacedHelpers("users"); |
| | | export default { |
| | | name: "login", |
| | | data() { |
| | |
| | | }; |
| | | return { |
| | | loginForm: { |
| | | username: "", |
| | | password: "", |
| | | username: "admin", |
| | | password: "macro123", |
| | | }, |
| | | loginRules: { |
| | | username: [ |
| | |
| | | pwdType: false, |
| | | }; |
| | | }, |
| | | created() { |
| | | // this.loginForm.username = getCookie("username"); |
| | | // this.loginForm.password = getCookie("password"); |
| | | // if ( |
| | | // this.loginForm.username === undefined || |
| | | // this.loginForm.username == null || |
| | | // this.loginForm.username === "" |
| | | // ) { |
| | | // this.loginForm.username = "admin"; |
| | | // } |
| | | // if ( |
| | | // this.loginForm.password === undefined || |
| | | // this.loginForm.password == null |
| | | // ) { |
| | | // this.loginForm.password = ""; |
| | | // } |
| | | }, |
| | | created() {}, |
| | | methods: { |
| | | showPwd() { |
| | | if (!this.pwdType) { |
| | |
| | | this.pwdType = false; |
| | | } |
| | | }, |
| | | ...mapActions(["login"]), |
| | | handleLogin() { |
| | | this.$router.push({ path: "/home" }); |
| | | // this.$refs.loginForm.validate((valid) => { |
| | | // if (valid) { |
| | | // console.log(valid); |
| | | // this.loading = true; |
| | | // this.$store |
| | | // .dispatch("Login", this.loginForm) |
| | | // .then(() => { |
| | | // this.loading = false; |
| | | // setCookie("username", this.loginForm.username, 15); |
| | | // setCookie("password", this.loginForm.password, 15); |
| | | // this.$router.push({ path: "/" }); |
| | | // }) |
| | | // .catch(() => { |
| | | // this.loading = false; |
| | | // }); |
| | | // } else { |
| | | // console.log("参数验证不合法!"); |
| | | // return false; |
| | | // } |
| | | // }); |
| | | console.log("in login"); |
| | | const { username, password } = this.loginForm; |
| | | this.$axios |
| | | .post("http://42.193.1.25:8082/sccg/admin/login", { |
| | | password, |
| | | username, |
| | | }) |
| | | .then(function (response) { |
| | | console.log(response); |
| | | }) |
| | | .catch(function (error) { |
| | | console.log(error); |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .color{ |
| | | .color { |
| | | color: red; |
| | | } |
| | | #background { |
| | | width: 100vw; |
| | | height: 100vh; |
| | | background: url("@/assets/imgs/login/login_bg.jpg"); |
| | | background-size: cover ; |
| | | background-size: cover; |
| | | position: relative; |
| | | display: flex; |
| | | min-width: 800px; |
| | | } |
| | | .login-form-layout { |
| | | position: absolute; |
| | | top: 20%; |
| | | right: 5%; |
| | | width: 360px; |
| | | align-self: center; |
| | | } |
| | | .text { |
| | | align-self: flex-start; |
| | | position: absolute; |
| | | top:20%; |
| | | top: 20%; |
| | | left: 5%; |
| | | // margin-top: 180px; |
| | | // margin-left: 50px; |
| | | display: flex; |
| | | width: 400px; |
| | | justify-content: space-between; |