场景：
在点击获取验证码后，验证码开始倒计时，在点击登录后，出现弹窗不跳转页面。因此在出现弹窗后，即使倒计时没有结束，也要将倒计时的文字变为重新获取验证码。
template代码
<div class="form-box"><el-form ref="form" :model="form"><el-form-item prop="phoneNo"><el-inputv-model="form.phoneNo"type="number"placeholder="请输入手机号"></el-input></el-form-item><el-form-item prop="validateCode" class="code"><el-inputv-model="form.validateCode"placeholder="请输入验证码"maxlength="6"></el-input><el-button:disabled="btnStatus"@click="getMyCode"class="code-btn">{{ codeMessage }}</el-button></el-form-item><el-form-item><el-button class="form-subimt" @click="toLoginH5">登录</el-button></el-form-item></el-form></div>css代码
.form-box {padding: 0px 20px 0px 20px;margin-bottom: 24px;::v-deep .el-form-item {margin-bottom: 12px;}::v-deep .el-input__inner {border: none;border-radius: 30px;}::v-deep .el-form-item__content {margin-left: 0px;display: flex;}.code {background: #fff;border-radius: 30px;/deep/.el-input {width: 60%;}// ::v-deep .el-form-item__content {// margin-left: 0px;// }/deep/.el-button {border-radius: 20px;// width: 43%;padding: 12px;// margin-left: 2%;background: #fff;color: #1448ff;border: none;flex: 1;text-align: right;}}.form-subimt {border-radius: 30px;background: radial-gradient(85.8% 72.34% at 49.85% 92.55%,#349eff 0%,rgba(53, 72, 255, 0) 100%),linear-gradient(180deg, rgba(53, 71, 255, 0) 15.92%, #3385ff 102.36%),linear-gradient(89deg, #1463ff -5.8%, #7214ff 119.36%);box-shadow: 0px 4px 10px 0px rgba(20, 72, 255, 0.2);width: 100%;color: #fff;text-align: center;font-family: PingFang SC;font-size: 16px;font-style: normal;font-weight: 600;line-height: 24px; /* 150% */margin-top: 8px;height: 48px;}}js代码
data(){timePromise: null,codeMessage: "获取验证码",btnStatus: false,
}//登陆toLoginH5() {if (this.form.phoneNo === "") {this.$message.error("请输入手机号");return false;}if (!/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/.test(this.form.phoneNo)) {this.$message.error("手机号格式错误");return false;}if (!this.form.validateCode.length) {this.$message.error("请输入验证码");return false;}loginH5({telephone: this.form.phoneNo,validateCode: this.form.validateCode,}).then((res) => {if (res.data.data.type == 1) {this.showModalAlready = true; 弹窗开关clearInterval(this.timePromise); 在获取到结果后就清除倒计时this.codeMessage = "重发验证码";this.btnStatus = false;this.form = {phoneNo: "",validateCode: "",};});},//获取验证码getMyCode() {this.btnStatus = true;if (this.form.phoneNo == "") {this.btnStatus = false;return false;}if (!/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/.test(this.form.phoneNo)) {this.btnStatus = false;return false;}var second = null;this.timePromise = undefined;if (second === null) {second = 60;getCode({ phoneNo: this.form.phoneNo }).then((res) => {if (res.data.code == "0") {this.$message.success("验证码发送成功");this.loading = false;const _this = this;this.timePromise = setInterval(function () {if (second <= 0) {clearInterval(this.timePromise);this.timePromise = undefined;second = null;_this.codeMessage = "重发验证码";_this.btnStatus = false;} else {_this.codeMessage = second + "s";second--;}}, 1000);} else {this.loading = false;this.$message.error(res.data.msg);}}).catch((err) => {this.btnStatus = false;this.loading = false;second = null;});} else {return false;}},
