| | |
| | | <template v-if="connectDevice === 'MOBILE'"> |
| | | <div v-show="showPhoneOtpCodeField"> |
| | | <el-row type="flex" justify="space-between"> |
| | | <div class="mdTxt">輸入驗證碼</div> |
| | | <div class="mdTxt">輸入 OTP 驗證碼</div> |
| | | <div class="otp-count-timer"> |
| | | {{counterTime(otpCounterSec)}} |
| | | </div> |
| | |
| | | 'is-invalid': !otpCode |
| | | }" |
| | | v-model="otpCode" |
| | | placeholder="請輸入驗證碼" |
| | | placeholder="請輸入 OTP 驗證碼" |
| | | > |
| | | </el-row> |
| | | <div class="error mt-5 mb-10"> |
| | | <span v-show="otpCounterSec === 0">驗證碼已過期,請重發驗證碼</span> |
| | | <span v-show="otpCounterSec === 0">OTP 驗證碼已過期,請重發 OTP 驗證碼</span> |
| | | </div> |
| | | |
| | | <el-row> |
| | |
| | | @click="resentOtp('MOBILE')" |
| | | icon="icon-arrow" |
| | | > |
| | | 重發驗證碼<span |
| | | 重發 OTP 驗證碼<span |
| | | class="pam-field-title__hint pl-5" |
| | | v-if="otpResendCounter !== 0" |
| | | >({{ otpResendCounter }})</span> |
| | |
| | | <template v-if="connectDevice === 'EMAIL'"> |
| | | <el-row v-show="showEmailVerifyField"> |
| | | <el-row type="flex" justify="space-between"> |
| | | <div class="mdTxt">輸入驗證碼</div> |
| | | <div class="mdTxt">輸入 OTP 驗證碼</div> |
| | | <div class="otp-count-timer"> |
| | | {{counterTime(emailCounterSec)}} |
| | | </div> |
| | |
| | | 'is-invalid': !emailOtpCode |
| | | }" |
| | | v-model="emailOtpCode" |
| | | placeholder="請輸入驗證碼" |
| | | placeholder="請輸入 OTP 驗證碼" |
| | | > |
| | | </el-row> |
| | | <div class="error mt-5 mb-10"> |
| | | <span v-show="emailCounterSec === 0">驗證碼已過期,請重發驗證碼</span> |
| | | <span v-show="emailCounterSec === 0">OTP 驗證碼已過期,請重發 OTP 驗證碼</span> |
| | | </div> |
| | | |
| | | <el-button |
| | |
| | | icon="icon-arrow" |
| | | @click="resentOtp('EMAIL')" |
| | | > |
| | | 重發驗證碼<span |
| | | 重發 OTP 驗證碼<span |
| | | v-if="emailResendCounter !== 0" |
| | | class="pam-field-title__hint pl-5" |
| | | >({{ emailResendCounter }})</span> |
| | |
| | | this.emailCounterSec -= 1; |
| | | if (this.emailResendCounter !== 0) { |
| | | this.emailResendCounter -= 1; |
| | | if (this.emailResendCounter === 0) { |
| | | this.verificationCode = ''; |
| | | this.regenerateImgOfVerification(); |
| | | } |
| | | } |
| | | if (this.emailCounterSec === 0) { |
| | | clearInterval(this.emailResendInterval); |
| | |
| | | this.otpCounterSec -= 1; |
| | | if (this.otpResendCounter !== 0) { |
| | | this.otpResendCounter -= 1; |
| | | if (this.otpResendCounter === 0) { |
| | | this.verificationCode = ''; |
| | | this.regenerateImgOfVerification(); |
| | | } |
| | | } |
| | | if (this.otpCounterSec === 0) { |
| | | clearInterval(this.otpInterval) |
| | | clearInterval(this.otpInterval); |
| | | } |
| | | }, 1000) |
| | | } |