|
@@ -43,10 +43,14 @@ const typeChange=(e)=>{
|
|
|
form.mobile=''
|
|
|
form.code=''
|
|
|
form.email=''
|
|
|
+ remainingTime.value = 0
|
|
|
clearTimeout(sendCodeInterval)
|
|
|
isSendCode.value=false
|
|
|
}
|
|
|
|
|
|
+// 登录验证码增加倒计时
|
|
|
+let remainingTime = ref(0); // 剩余时间,单位为秒
|
|
|
+
|
|
|
//发送验证码
|
|
|
|
|
|
let isSendCode=ref(false)//是否已发送验证码
|
|
@@ -70,11 +74,18 @@ const handleSendCode=async (type)=>{
|
|
|
res=await apiGetEmailCode({email: form.email})
|
|
|
}
|
|
|
if(res.code===200){
|
|
|
- isSendCode.value=true
|
|
|
- ElMessage.success('验证码已发送')
|
|
|
- sendCodeInterval=setTimeout(() => {
|
|
|
- isSendCode.value=false
|
|
|
- }, 60000);
|
|
|
+ isSendCode.value = true;
|
|
|
+ remainingTime.value = 60; // 设置初始倒计时为60秒
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ if (remainingTime.value > 1) {
|
|
|
+ remainingTime.value--;
|
|
|
+ } else {
|
|
|
+ clearInterval(timer);
|
|
|
+ isSendCode.value = false;
|
|
|
+ remainingTime.value = 0; // 重置剩余时间
|
|
|
+ }
|
|
|
+ }, 1000); // 每秒减少一次剩余时间
|
|
|
+ ElMessage.success('验证码已发送');
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -98,11 +109,18 @@ const handlePCSendCode=async (type)=>{
|
|
|
res=await apiGetPCEmailCode({email: form.email})
|
|
|
}
|
|
|
if(res.code===200){
|
|
|
- isSendCode.value=true
|
|
|
- ElMessage.success('验证码已发送')
|
|
|
- sendCodeInterval=setTimeout(() => {
|
|
|
- isSendCode.value=false
|
|
|
- }, 60000);
|
|
|
+ isSendCode.value = true;
|
|
|
+ remainingTime.value = 60; // 设置初始倒计时为60秒
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ if (remainingTime.value > 1) {
|
|
|
+ remainingTime.value--;
|
|
|
+ } else {
|
|
|
+ clearInterval(timer);
|
|
|
+ isSendCode.value = false;
|
|
|
+ remainingTime.value = 0; // 重置剩余时间
|
|
|
+ }
|
|
|
+ }, 1000); // 每秒减少一次剩余时间
|
|
|
+ ElMessage.success('验证码已发送');
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -231,7 +249,9 @@ onMounted(()=>{
|
|
|
</div>
|
|
|
<div class="input-item">
|
|
|
<input v-model="form.code" placeholder="请输入验证码" />
|
|
|
- <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handlePCSendCode('phone')">{{isSendCode?'已发送':'发送验证码'}}</span>
|
|
|
+ <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handlePCSendCode('phone')">
|
|
|
+ {{ isSendCode ? `${remainingTime}秒后重新发送` : '发送验证码' }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div class="global-main-btn login-btn" @click="handleLogin('phone')">登录</div>
|
|
|
<div style="display:flex;justify-content: space-around;">
|
|
@@ -253,7 +273,9 @@ onMounted(()=>{
|
|
|
</div>
|
|
|
<div class="input-item">
|
|
|
<input v-model="form.code" placeholder="请输入验证码" />
|
|
|
- <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handlePCSendCode('email')">{{isSendCode?'已发送':'发送验证码'}}</span>
|
|
|
+ <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handlePCSendCode('email')">
|
|
|
+ {{ isSendCode ? `${remainingTime}秒后重新发送` : '发送验证码' }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div class="global-main-btn login-btn" @click="handleLogin('email')">登录</div>
|
|
|
|
|
@@ -302,7 +324,9 @@ onMounted(()=>{
|
|
|
</div>
|
|
|
<div class="input-item">
|
|
|
<input v-model="form.code" placeholder="请输入验证码" />
|
|
|
- <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('phone')">{{isSendCode?'已发送':'发送验证码'}}</span>
|
|
|
+ <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('phone')">
|
|
|
+ {{ isSendCode ? `${remainingTime}秒后重新发送` : '发送验证码' }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div class="global-main-btn login-btn" @click="handleBind('phone')">登录</div>
|
|
|
<div class="bot-img">
|
|
@@ -318,7 +342,9 @@ onMounted(()=>{
|
|
|
</div>
|
|
|
<div class="input-item">
|
|
|
<input v-model="form.code" placeholder="请输入验证码" />
|
|
|
- <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('email')">{{isSendCode?'已发送':'发送验证码'}}</span>
|
|
|
+ <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('email')">
|
|
|
+ {{ isSendCode ? `${remainingTime}秒后重新发送` : '发送验证码' }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
<div class="global-main-btn login-btn" @click="handleBind('email')">登录</div>
|
|
|
<div class="bot-img">
|