工业互联网平台前端 vue2版本
查看 | 历史 | 提交 | 提交对比
houzhongjian
2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2
提交 | 用户 | 时间
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>