|
|
@@ -16,8 +16,8 @@
|
|
|
label-position="left"
|
|
|
>
|
|
|
<el-form-item prop="userName">
|
|
|
- <i class="el-icon-user-solid"></i>
|
|
|
<el-input
|
|
|
+ class="inText"
|
|
|
name="userName"
|
|
|
type="text"
|
|
|
v-model="loginForm.userName"
|
|
|
@@ -26,16 +26,25 @@
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="password">
|
|
|
- <i class="el-icon-lock"></i>
|
|
|
<el-input
|
|
|
+ class="inText"
|
|
|
name="password"
|
|
|
:type="pwdType"
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
v-model="loginForm.password"
|
|
|
autocomplete="on"
|
|
|
placeholder="请输入密码"
|
|
|
- />
|
|
|
- <i class="el-icon-view" @click="showPwd"></i>
|
|
|
+ >
|
|
|
+ <i slot="append" class="el-icon-view" @click="showPwd"></i>
|
|
|
+ </el-input>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="captCha">
|
|
|
+ <el-input placeholder="请输入验证码" v-model="loginForm.captCha" >
|
|
|
+ <el-button slot="append" @click="sendVerificationCode" :disabled="isSending">
|
|
|
+ {{ countdown > 0 ? countdown + '秒后重新发送' : '获取验证码' }}
|
|
|
+ </el-button>
|
|
|
+ </el-input>
|
|
|
</el-form-item>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
@@ -62,6 +71,7 @@ import userApi from "@/api/sys/user";
|
|
|
import Constant from "@/constant";
|
|
|
import { Message } from "element-ui";
|
|
|
import { setToken} from '@/utils/auth'
|
|
|
+import { ref,watch,onMounted } from 'vue';
|
|
|
|
|
|
export default {
|
|
|
name: "login",
|
|
|
@@ -71,7 +81,8 @@ export default {
|
|
|
rnd : Math.ceil(Math.random()*1000000),
|
|
|
loginForm: {
|
|
|
userName: "",
|
|
|
- password: ""
|
|
|
+ password: "",
|
|
|
+ captCha:"",
|
|
|
},
|
|
|
loginRules: {
|
|
|
userName: [
|
|
|
@@ -85,13 +96,19 @@ export default {
|
|
|
message: "密码长度不能小于2位",
|
|
|
trigger: "blur"
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ captCha: [
|
|
|
+ { required: true, message: "请填写验证码", trigger: "blur" }
|
|
|
+ ],
|
|
|
},
|
|
|
pwdType: "password",
|
|
|
loading: false,
|
|
|
redirect: undefined,
|
|
|
qrcodeUrl: "",
|
|
|
- queryScanResultHandler: 0
|
|
|
+ queryScanResultHandler: 0,
|
|
|
+ countdown: 0, // 倒计时的秒数
|
|
|
+ isSending: false, // 控制发送按钮的状态
|
|
|
+ timer: null // 定时器ID
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -106,6 +123,47 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ async sendVerificationCode() {
|
|
|
+
|
|
|
+ // 在这里实现发送验证码的逻辑，例如调用后端API
|
|
|
+ // await sendSmsCodeToServer(this.mobile);
|
|
|
+ this.sendSms();
|
|
|
+
|
|
|
+ },
|
|
|
+ sendSms(){
|
|
|
+ var self = this;
|
|
|
+ var formData = new FormData();
|
|
|
+ formData.append("phoneNumber", self.loginForm.userName);
|
|
|
+
|
|
|
+ userApi.generateCaptCha(formData).then(function(response) {
|
|
|
+ var jsonData = response.data;
|
|
|
+ if(jsonData.result) {
|
|
|
+ self.countdown = 60;
|
|
|
+ // 假设发送成功，开始倒计时
|
|
|
+ self.startCountdown();
|
|
|
+ // 可以在这里添加发送成功的提示
|
|
|
+ // this.$toast('验证码已发送，请注意查收');
|
|
|
+ self.$message.success("验证码发送成功！");
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ self.$message.warning(jsonData.message);
|
|
|
+ }
|
|
|
+ }).catch((error)=>{
|
|
|
+ self.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ startCountdown() {
|
|
|
+ this.isSending = true;
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.countdown--;
|
|
|
+ if (this.countdown <= 0) {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ this.countdown = 0; // 重置倒计时
|
|
|
+ this.isSending = false; // 重新启用发送按钮
|
|
|
+ }
|
|
|
+ }, 1000); // 每秒更新一次
|
|
|
+ },
|
|
|
showPwd() {
|
|
|
if (this.pwdType === "password") {
|
|
|
this.pwdType = "";
|
|
|
@@ -115,11 +173,9 @@ export default {
|
|
|
},
|
|
|
handleLogin() {
|
|
|
var self = this;
|
|
|
-
|
|
|
this.$refs.loginForm.validate(valid => {
|
|
|
if (valid) {
|
|
|
this.loading = true;
|
|
|
-
|
|
|
self.$store
|
|
|
.dispatch("user/login", self.loginForm)
|
|
|
.then((result) => {
|
|
|
@@ -219,26 +275,6 @@ $text_color: black;
|
|
|
h3{
|
|
|
text-align:center;
|
|
|
}
|
|
|
-
|
|
|
- input:-webkit-autofill {
|
|
|
- -webkit-box-shadow: 0 0 0px 1000px #293444 inset !important;
|
|
|
- -webkit-text-fill-color: #fff !important;
|
|
|
- }
|
|
|
-
|
|
|
- input {
|
|
|
- background: transparent;
|
|
|
- border: 0px;
|
|
|
- -webkit-appearance: none;
|
|
|
- border-radius: 0px;
|
|
|
- padding: 12px 5px 12px 15px;
|
|
|
- color: $text_color;
|
|
|
- height: 47px;
|
|
|
- }
|
|
|
- .el-input {
|
|
|
- display: inline-block;
|
|
|
- height: 47px;
|
|
|
- width: 85%;
|
|
|
- }
|
|
|
.tips {
|
|
|
font-size: 14px;
|
|
|
color: #fff;
|
|
|
@@ -283,8 +319,6 @@ $text_color: black;
|
|
|
}
|
|
|
|
|
|
.el-form-item {
|
|
|
- border: 1px solid rgba(228, 228, 228, 1);
|
|
|
- background: rgba(242, 242, 242, 1);
|
|
|
border-radius: 5px;
|
|
|
padding-left:5px;
|
|
|
}
|
yanliming