| 提交 | 用户 | 时间 | ||
| 759b1c | 1 | <template> |
| H | 2 | <div class="container"> |
| 3 | <div class="logo"></div> | |
| 4 | <!-- 登录区域 --> | |
| 5 | <div class="content"> | |
| 6 | <!-- 配图 --> | |
| 7 | <div class="pic"></div> | |
| 8 | <!-- 表单 --> | |
| 9 | <div class="field"> | |
| 10 | <!-- [移动端]标题 --> | |
| 11 | <h2 class="mobile-title"> | |
| 12 | <h3 class="title">工业互联网平台</h3> | |
| 13 | </h2> | |
| 14 | ||
| 15 | <!-- 表单 --> | |
| 16 | <div class="form-cont"> | |
| 17 | <el-tabs class="form" v-model="loginForm.loginType " style=" float:none;"> | |
| 18 | <el-tab-pane label="绑定账号" name="uname"> | |
| 19 | </el-tab-pane> | |
| 20 | </el-tabs> | |
| 21 | <div> | |
| 22 | <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> | |
| 23 | <!-- 账号密码登录 --> | |
| 24 | <el-form-item prop="username"> | |
| 25 | <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"> | |
| 26 | <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/> | |
| 27 | </el-input> | |
| 28 | </el-form-item> | |
| 29 | <el-form-item prop="password"> | |
| 30 | <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" | |
| 31 | @keyup.enter.native="handleLogin"> | |
| 32 | <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/> | |
| 33 | </el-input> | |
| 34 | </el-form-item> | |
| 35 | <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">记住密码</el-checkbox> | |
| 36 | <!-- 下方的登录按钮 --> | |
| 37 | <el-form-item style="width:100%;"> | |
| 38 | <el-button :loading="loading" size="medium" type="primary" style="width:100%;" | |
| 39 | @click.native.prevent="getCode"> | |
| 40 | <span v-if="!loading">登 录</span> | |
| 41 | <span v-else>登 录 中...</span> | |
| 42 | </el-button> | |
| 43 | </el-form-item> | |
| 44 | </el-form> | |
| 45 | </div> | |
| 46 | </div> | |
| 47 | </div> | |
| 48 | </div> | |
| 49 | ||
| 50 | <!-- 图形验证码 --> | |
| 51 | <Verify ref="verify" :captcha-type="'blockPuzzle'" :img-size="{width:'400px',height:'200px'}" | |
| 52 | @success="handleLogin" /> | |
| 53 | ||
| 54 | <!-- footer --> | |
| 55 | <div class="footer"> | |
| 56 | Copyright © 2020-2022 iocoder.cn All Rights Reserved. | |
| 57 | </div> | |
| 58 | </div> | |
| 59 | </template> | |
| 60 | ||
| 61 | <script> | |
| 62 | import { | |
| 63 | getPassword, getRememberMe, | |
| 64 | getUsername, | |
| 65 | removePassword, | |
| 66 | removeUsername, | |
| 67 | setPassword, | |
| 68 | setRememberMe, | |
| 69 | setUsername | |
| 70 | } from "@/utils/auth"; | |
| 71 | ||
| 72 | import Verify from '@/components/Verifition/Verify'; | |
| 73 | import {getCaptchaEnable} from "@/utils/ruoyi"; | |
| 74 | ||
| 75 | export default { | |
| 76 | name: "ThirdLogin", | |
| 77 | components: { | |
| 78 | Verify | |
| 79 | }, | |
| 80 | data() { | |
| 81 | return { | |
| 82 | codeUrl: "", | |
| 83 | captchaEnable: true, | |
| 84 | loginForm: { | |
| 85 | loginType: "uname", | |
| 86 | username: "admin", | |
| 87 | password: "admin123", | |
| 88 | rememberMe: false, | |
| 89 | captchaVerification: "", | |
| 90 | }, | |
| 91 | loginRules: { | |
| 92 | username: [ | |
| 93 | { required: true, trigger: "blur", message: "用户名不能为空" } | |
| 94 | ], | |
| 95 | password: [ | |
| 96 | { required: true, trigger: "blur", message: "密码不能为空" } | |
| 97 | ], | |
| 98 | }, | |
| 99 | loading: false, | |
| 100 | redirect: undefined, | |
| 101 | // 社交登录相关 | |
| 102 | type: undefined, | |
| 103 | code: undefined, | |
| 104 | state: undefined, | |
| 105 | }; | |
| 106 | }, | |
| 107 | created() { | |
| 108 | this.getCookie(); | |
| 109 | // 验证码开关 | |
| 110 | this.captchaEnable = getCaptchaEnable(); | |
| 111 | // 重定向地址 | |
| 112 | this.redirect = this.getUrlValue('redirect'); | |
| 113 | // 社交登录相关 | |
| 114 | this.type = this.getUrlValue('type'); | |
| 115 | this.code = this.$route.query.code; | |
| 116 | this.state = this.$route.query.state; | |
| 117 | ||
| 118 | // 尝试登录一下 | |
| 119 | this.loading = true; | |
| 120 | this.$store.dispatch("SocialLogin", { | |
| 121 | code: this.code, | |
| 122 | state: this.state, | |
| 123 | type: this.type | |
| 124 | }).then(() => { | |
| 125 | this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); | |
| 126 | }).catch(() => { | |
| 127 | this.loading = false; | |
| 128 | }); | |
| 129 | }, | |
| 130 | methods: { | |
| 131 | getCode() { | |
| 132 | // 情况一，未开启：则直接登录 | |
| 133 | if (!this.captchaEnable) { | |
| 134 | this.handleLogin({}) | |
| 135 | return; | |
| 136 | } | |
| 137 | ||
| 138 | // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录 | |
| 139 | // 弹出验证码 | |
| 140 | this.$refs.verify.show() | |
| 141 | }, | |
| 142 | getCookie() { | |
| 143 | const username = getUsername(); | |
| 144 | const password = getPassword(); | |
| 145 | const rememberMe = getRememberMe(); | |
| 146 | this.loginForm = { | |
| 147 | username: username ? username : this.loginForm.username, | |
| 148 | password: password ? password : this.loginForm.password, | |
| 149 | rememberMe: rememberMe ? getRememberMe() : false, | |
| 150 | loginType: this.loginForm.loginType, | |
| 151 | }; | |
| 152 | }, | |
| 153 | handleLogin(captchaParams) { | |
| 154 | this.$refs.loginForm.validate(valid => { | |
| 155 | if (valid) { | |
| 156 | this.loading = true; | |
| 157 | if (this.loginForm.rememberMe) { | |
| 158 | setUsername(this.loginForm.username) | |
| 159 | setPassword(this.loginForm.password) | |
| 160 | setRememberMe(this.loginForm.rememberMe) | |
| 161 | } else { | |
| 162 | removeUsername() | |
| 163 | removePassword() | |
| 164 | } | |
| 165 | this.$store.dispatch("Login", { | |
| 166 | socialCode: this.code, | |
| 167 | socialState: this.state, | |
| 168 | socialType: this.type, | |
| 169 | // 账号密码登录 | |
| 170 | username: this.loginForm.username, | |
| 171 | password: this.loginForm.password, | |
| 172 | captchaVerification: captchaParams.captchaVerification | |
| 173 | }).then(() => { | |
| 174 | this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); | |
| 175 | }).catch(() => { | |
| 176 | this.loading = false; | |
| 177 | this.getCode() | |
| 178 | }); | |
| 179 | } | |
| 180 | }); | |
| 181 | }, | |
| 182 | getUrlValue(key) { | |
| 183 | const url = new URL(decodeURIComponent(location.href)); | |
| 184 | return url.searchParams.get(key); | |
| 185 | } | |
| 186 | } | |
| 187 | }; | |
| 188 | </script> | |
| 189 | ||
| 190 | <style rel="stylesheet/scss" lang="scss"> | |
| 191 | @import "~@/assets/styles/login.scss"; | |
| 192 | </style> | |
