From e580006069fa12f58ede24d04e04c6662097dad5 Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期四, 24 七月 2025 18:28:34 +0800
Subject: [PATCH] 测试完成
---
src/views/login.vue | 241 +++++++++++++++++++++++++++++++++--------------
1 files changed, 167 insertions(+), 74 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index e2c49d7..e8c178c 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -7,71 +7,79 @@
class="login-form"
>
<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="orgid">
- <el-select style="width: 100%;" v-model="loginForm.orgid" placeholder="璇烽�夋嫨闄㈠尯">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
+
+ <!-- 瀵嗙爜鐧诲綍閮ㄥ垎 -->
+ <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"
>
- </el-option>
- <i slot="prefix" class="el-icon-mobile"></i>
- </el-select>
- </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
- >
+ <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"
@@ -84,53 +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 style="color: #568FBD; font-size: 25px;">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: "",
password: "",
+ smsCode: "",
rememberMe: false,
code: "",
- orgid:'1',
+ 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" },
],
- // orgid: [{ required: true, trigger: "blur", 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,
};
@@ -146,11 +172,48 @@
created() {
this.getCode();
this.getCookie();
- // if (localStorage.getItem('orgid')) {
- // this.loginForm.orgid = localStorage.getItem('orgid');
- // }
+ },
+ 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);
@@ -162,6 +225,7 @@
}
});
},
+
getCookie() {
const username = Cookies.get("username");
const password = Cookies.get("password");
@@ -173,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,
@@ -190,12 +256,25 @@
Cookies.remove("password");
Cookies.remove("rememberMe");
}
- this.loginForm.orgid = '1',
+
+ 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(() => {});
- this.$router.push({ path:"/patient/patient" }).catch(() => {});
+ this.$router.push({ path: this.redirect || "/" }).catch(() => {});
})
.catch(() => {
this.loading = false;
@@ -283,4 +362,18 @@
.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