uniapp 倒计时验证码组件

你可以使用 Uniapp 中的 `setInterval` 方法实现一个倒计时验证码组件。以下是一个简单的实现示例：

1. 在 `components` 文件夹下新建一个名为 `countdown` 的组件。
2. 在 `countdown.vue` 文件中，编写如下代码：

<template>
  <div class="countdown">
    <span>{{ countDown }}</span>
    <button v-if="!isCounting" @click="startCountDown">获取验证码</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countDown: 0,
      isCounting: false,
      intervalID: null
    };
  },
  methods: {
    startCountDown() {
      this.countDown = 60;
      this.isCounting = true;
      this.intervalID = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown--;
        } else {
          this.stopCountDown();
        }
      }, 1000);
    },
    stopCountDown() {
      clearInterval(this.intervalID);
      this.isCounting = false;
    }
  }
};
</script>

<style scoped>
.countdown {
  display: flex;
  align-items: center;
}

.countdown span {
  margin-right: 10px;
}
</style>

3. 在需要使用倒计时验证码的页面中，引入 `countdown` 组件并使用。

<template>
  <div>
    <countdown />
  </div>
</template>

<script>
import countdown from "@/components/countdown.vue";
export default {
  components: {
    countdown
  }
};
</script>

这样，当用户点击获取验证码按钮时，倒计时就会开始，并且按钮会在倒计时过程中变为不可用状态。当倒计时结束后，按钮重新变为可用状态，用户可以再次点击获取验证码。