From ffdeb042145a75f6693c05229c988d78bc6319e8 Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期四, 24 七月 2025 18:13:23 +0800
Subject: [PATCH] 测试完成
---
src/views/login.vue | 244 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 186 insertions(+), 58 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 6402807..e8c178c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -6,59 +6,80 @@
:rules="loginRules"
class="login-form"
>
- <h3 class="title">鏅烘収闅忚绠＄悊绯荤粺</h3>
+ <h3 class="title">鏃犻敗鍎跨鍖婚櫌鏅烘収闅忚骞冲彴</h3>
+
+ <!-- 鐧诲綍鏂瑰紡鍒囨崲 -->
+ <div class="login-method">
+ <el-radio-group v-model="loginMethod" @change="changeLoginMethod">
+ <el-radio-button label="password">瀵嗙爜鐧诲綍</el-radio-button>
+ <el-radio-button label="sms">楠岃瘉鐮佺櫥褰�</el-radio-button>
+ </el-radio-group>
+ </div>
+
+ <!-- 鐢ㄦ埛鍚�/鎵嬫満鍙疯緭鍏� -->
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
type="text"
auto-complete="off"
- placeholder="璐﹀彿"
+ :placeholder="loginMethod === 'password' ? '璐﹀彿' : '鎵嬫満鍙�'"
>
<svg-icon
slot="prefix"
- icon-class="user"
+ :icon-class="loginMethod === 'password' ? 'user' : 'phone'"
class="el-input__icon input-icon"
/>
</el-input>
</el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- auto-complete="off"
- placeholder="瀵嗙爜"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon
- slot="prefix"
- icon-class="password"
- class="el-input__icon input-icon"
- />
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- auto-complete="off"
- placeholder="楠岃瘉鐮�"
- style="width: 63%"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon
- slot="prefix"
- icon-class="validCode"
- class="el-input__icon input-icon"
- />
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img" />
- </div>
- </el-form-item>
- <el-checkbox
- v-model="loginForm.rememberMe"
- style="margin: 0px 0px 25px 0px"
- >璁颁綇瀵嗙爜</el-checkbox
- >
+
+ <!-- 瀵嗙爜鐧诲綍閮ㄥ垎 -->
+ <template v-if="loginMethod === 'password'">
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ auto-complete="off"
+ placeholder="瀵嗙爜"
+ @keyup.enter.native="handleLogin"
+ >
+ <svg-icon
+ slot="prefix"
+ icon-class="password"
+ class="el-input__icon input-icon"
+ />
+ </el-input>
+ </el-form-item>
+ <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">
+ 璁颁綇瀵嗙爜
+ </el-checkbox>
+ </template>
+
+ <!-- 楠岃瘉鐮佺櫥褰曢儴鍒� -->
+ <template v-else>
+ <el-form-item prop="smsCode">
+ <el-input
+ v-model="loginForm.smsCode"
+ auto-complete="off"
+ placeholder="鐭俊楠岃瘉鐮�"
+ style="width: 60%"
+ @keyup.enter.native="handleLogin"
+ >
+ <svg-icon
+ slot="prefix"
+ icon-class="validCode"
+ class="el-input__icon input-icon"
+ />
+ </el-input>
+ <el-button
+ :disabled="countdown > 0"
+ @click="phoneCode"
+ style="width: 38%; margin-left: 2%"
+ >
+ {{ countdown > 0 ? `${countdown}绉掑悗閲嶆柊鑾峰彇` : '鑾峰彇楠岃瘉鐮�' }}
+ </el-button>
+ </el-form-item>
+ </template>
+
<el-form-item style="width: 100%">
<el-button
:loading="loading"
@@ -71,49 +92,71 @@
<span v-else>鐧� 褰� 涓�...</span>
</el-button>
<div style="float: right" v-if="register">
- <router-link class="link-type" :to="'/register'"
- >绔嬪嵆娉ㄥ唽1</router-link
- >
+ <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link>
</div>
</el-form-item>
</el-form>
- <!-- 搴曢儴 -->
- <div class="el-login-footer">
- <span>Copyright 漏 2018-2022 ruoyi.vip All Rights Reserved.</span>
- </div>
</div>
+ <!-- <div class="block">
+ <div class="smerry">
+ <el-image >
+ <div slot="error" class="image-slot">鏃犳潈闄愯闂�</div>
+ </el-image>
+ </div>
+ </div> -->
</template>
<script>
-import { getCodeImg } from "@/api/login";
+import { getCodeImg, phoneCode } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
export default {
name: "Login",
data() {
+ // 楠岃瘉鎵嬫満鍙疯鍒�
+ const validatePhone = (rule, value, callback) => {
+ if (!value) {
+ callback(new Error("璇疯緭鍏ユ墜鏈哄彿"));
+ } else if (!/^1[3-9]\d{9}$/.test(value)) {
+ callback(new Error("璇疯緭鍏ユ纭殑鎵嬫満鍙�"));
+ } else {
+ callback();
+ }
+ };
+
return {
+ loginMethod: "password", // 鐧诲綍鏂瑰紡锛宲assword鎴杝ms
+ countdown: 0, // 鐭俊楠岃瘉鐮佸�掕鏃�
+ timer: null, // 鍊掕鏃跺畾鏃跺櫒
codeUrl: "",
loginForm: {
- username: "admin",
- password: "admin123",
+ username: "",
+ password: "",
+ smsCode: "",
rememberMe: false,
code: "",
- uuid: "",
+ orgid: "1",
},
+ options: [
+ { value: "1", label: "鏅畞鐣叉棌鑷不鍘夸汉姘戝尰闄�" },
+ { value: "2", label: "涓芥按甯備腑鍖婚櫌" },
+ ],
loginRules: {
username: [
{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勮处鍙�" },
+ { validator: validatePhone, trigger: "blur", when: () => this.loginMethod === "sms" }
],
password: [
- { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" },
+ { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�", when: () => this.loginMethod === "password" },
],
- code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }],
+ smsCode: [
+ { required: true, trigger: "blur", message: "璇疯緭鍏ラ獙璇佺爜", when: () => this.loginMethod === "sms" },
+ { pattern: /^\d{6}$/, message: "楠岃瘉鐮佷负6浣嶆暟瀛�", trigger: "blur", when: () => this.loginMethod === "sms" }
+ ],
},
loading: false,
- // 楠岃瘉鐮佸紑鍏�
captchaEnabled: true,
- // 娉ㄥ唽寮�鍏�
register: false,
redirect: undefined,
};
@@ -130,9 +173,50 @@
this.getCode();
this.getCookie();
},
+ beforeDestroy() {
+ if (this.timer) {
+ clearInterval(this.timer);
+ }
+ },
methods: {
+ // 鍒囨崲鐧诲綍鏂瑰紡
+ changeLoginMethod() {
+ this.$refs.loginForm.clearValidate();
+ },
+
+ // 鍙戦�佺煭淇￠獙璇佺爜
+ phoneCode() {
+ this.$refs.loginForm.validateField("username", (error) => {
+ if (!error) {
+ this.loading = true;
+ phoneCode({ phone: this.loginForm.username })
+ .then(() => {
+ this.$message.success("楠岃瘉鐮佸凡鍙戦��");
+ this.startCountdown();
+ this.loading = false;
+
+ })
+ .catch(() => {
+ this.loading = false;
+ });
+ }
+ });
+ },
+
+ // 寮�濮嬪�掕鏃�
+ startCountdown() {
+ this.countdown = 60;
+ this.timer = setInterval(() => {
+ this.countdown--;
+ if (this.countdown <= 0) {
+ clearInterval(this.timer);
+ }
+ }, 1000);
+ },
+
getCode() {
getCodeImg().then((res) => {
+ console.log(res);
this.captchaEnabled =
res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (this.captchaEnabled) {
@@ -141,6 +225,7 @@
}
});
},
+
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
@@ -152,11 +237,13 @@
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
};
},
+
handleLogin() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
- if (this.loginForm.rememberMe) {
+
+ if (this.loginMethod === "password" && this.loginForm.rememberMe) {
Cookies.set("username", this.loginForm.username, { expires: 30 });
Cookies.set("password", encrypt(this.loginForm.password), {
expires: 30,
@@ -169,8 +256,23 @@
Cookies.remove("password");
Cookies.remove("rememberMe");
}
+
+ const loginData = {
+ username: this.loginForm.username,
+ orgid: "1",
+ loginType: this.loginMethod
+ };
+
+ if (this.loginMethod === "password") {
+ loginData.password = this.loginForm.password;
+ } else {
+ console.log(this.loginForm.smsCode);
+
+ loginData.phoneCode = this.loginForm.smsCode;
+ }
+
this.$store
- .dispatch("Login", this.loginForm)
+ .dispatch("Login", loginData)
.then(() => {
this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
@@ -193,6 +295,17 @@
justify-content: center;
align-items: center;
height: 100%;
+ overflow: hidden !important;
+ background-position: center center;
+
+ /* 鑳屾櫙鍥句笉骞抽摵 */
+ background-repeat: no-repeat;
+ /* 褰撳唴瀹归珮搴﹀ぇ浜庡浘鐗囬珮搴︽椂锛岃儗鏅浘鍍忕殑浣嶇疆鐩稿浜巚iewport鍥哄畾 */
+ background-attachment: fixed;
+ /* 璁╄儗鏅浘鍩轰簬瀹瑰櫒澶у皬浼哥缉 */
+ background-size: cover;
+ /* 璁剧疆鑳屾櫙棰滆壊锛岃儗鏅浘鍔犺浇杩囩▼涓細鏄剧ず鑳屾櫙鑹� */
+ background-color: #464646;
background-image: url("../assets/images/login-background.jpg");
background-size: cover;
}
@@ -245,7 +358,22 @@
font-size: 12px;
letter-spacing: 1px;
}
+
.login-code-img {
height: 38px;
}
+.smerry {
+ text-align: center;
+ align-items: center;
+ .el-image {
+ width: 95vw;
+ height: 94vh;
+ line-height: 94vh;
+ font-size: 50px;
+ justify-content: center;
+ align-items: center;
+ color: #c0c4cc;
+ vertical-align: middle;
+ }
+}
</style>
--
Gitblit v1.9.3