手机号倒计时模板

最新推荐文章于 2024-11-02 12:42:04 发布

零无无无无无

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量95

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wffcn/article/details/141212525

版权

<template>
  <view class="wai">
    <view class="bd">绑定手机号</view>
    <view class="wz">为防止账号丢失以及方便找回，建议你绑定手机号码后在使用</view>
    <view class="souji">
      <view class="sera">手机号</view>
      <input v-model="mobile" class="inputo" placeholder="请输入手机号" type="text" />
    </view>
    <view class="yanz">
      <view class="yzm">验证码</view>
      <input v-model="sms" style="flex: 1" placeholder="请输入验证码" type="text" />
      <view class="hq" :disabled="isCounting" @click="getVerificationCode">{{ isCounting ? countdownText : '获取验证码' }}</view>
    </view>
    <view class="btn">完成</view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { uniFetch } from '@/conmit/uniFetch.js';
const sms = ref(''); //获取验证码的值
const mobile = ref(''); //获取手机号
const isCounting = ref(false);
const countdown = ref(60); //倒计时
let timer = null;
// 计算倒计时的文本
const countdownText = computed(() => {
  if (isCounting.value) {
    return `${countdown.value}s重新获取`;
  }
});
const getVerificationCode = () => {
  if (isCounting.value) return; // 如果已经在倒计时，则不执行
  isCounting.value = true; // 开始倒计时
  startCountdown();
};

const startCountdown = () => {
  timer = setInterval(() => {
    if (countdown.value > 0) {
      //如果秒数大于零就--
      countdown.value--;
    } else {
      //如果不大于零就移除定时器,其他数据复原
      clearInterval(timer);
      isCounting.value = false;
      countdown.value = 60;
    }
  }, 1000);
};
// 移除定时器
const resetCountdown = () => {
  clearInterval(timer);
  isCounting.value = false;
  countdown.value = 60;
};

onMounted(() => {
  // 组件挂载时的逻辑（如果有的话）
});

onUnmounted(() => {
  // 组件卸载时清除定时器
  resetCountdown();
});
</script>

<style lang="scss" scoped>
.wai {
  .btn {
    height: 76.92rpx;
    color: #fff;
    text-align: center;
    line-height: 76.92rpx;
    background: #ed1017;
    // background-color: #ed1017;
    border-radius: 38rpx;
  }
  .yanz {
    .yzm {
      color: #666666;
      margin-right: 46.15rpx;
    }
    .hq {
      color: #ed1017;
      // font-size: 26.92rpx;
    }
    display: flex;
    // flex-wrap: nowrap;
    height: 85rpx;
    background-color: #f7f7f7;
    border-radius: 10rpx;
    margin-top: 23.08rpx;
    padding: 23.08rpx;
    margin-bottom: 107.69rpx;
  }
  .souji {
    display: flex;
    height: 84.62rpx;
    background-color: #f7f7f7;
    border-radius: 10rpx;
    padding: 23.08rpx;
    .sera {
      margin-right: 46.15rpx;
      color: #666666;
    }
    .inputo {
      flex: 1;
    }
  }
  .wz {
    margin-bottom: 61.54rpx;
    font-weight: 400;
    font-size: 27rpx;
    color: #666666;
  }
  .bd {
    margin-top: 67.31rpx;
    margin-bottom: 15.38rpx;
    font-size: 38rpx;
    color: #000000;
    font-weight: 500;
  }
  padding: 0 46.15rpx;
}
</style>