使用uniapp 封装一个获取验证码组件

好的，我可以为您提供一些思路和代码示例。下面是一个简单的获取验证码组件的示例：

<template>
  <div class="verification-code">
    <input
      type="text"
      v-model="phoneNumber"
      placeholder="请输入手机号"
    />
    <button :disabled="countdown > 0" @click="getCode">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: "",
      countdown: 0,
      buttonText: "获取验证码",
      timer: null,
    };
  },
  methods: {
    getCode() {
      if (!this.phoneNumber) {
        alert("请输入手机号！");
        return;
      }
      // 发送验证码接口
      // ...
      // 模拟倒计时
      this.countdown = 60;
      this.buttonText = `${this.countdown}秒后重新获取`;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.timer);
          this.timer = null;
          this.buttonText = "获取验证码";
        } else {
          this.buttonText = `${this.countdown}秒后重新获取`;
        }
      }, 1000);
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style scoped>
.verification-code {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
input {
  width: 80%;
  height: 40px;
  font-size: 16px;
  padding: 5px;
  margin-right: 10px;
  border-radius: 4px;
}
button {
  width: 20%;
  height: 40px;
  background-color: #409eff;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}
button:disabled {
  background-color: #b5b5b5;
  cursor: not-allowed;
}
</style>

这个组件包含一个输入框和一个按钮，当用户点击按钮时，会触发 `getCode` 方法，该方法会先检查用户输入的手机号，然后向后端发送验证码请求，并开启一个模拟的倒计时，防止用户重复获取验证码。在倒计时过程中，按钮会显示剩余时间，倒计时结束后，按钮会重新变为可用状态。同时，为了防止组件销毁时倒计时仍然在进行，我们需要在组件销毁前清除计时器。

以上示例代码基于 Vue.js 和 uni-app 框架，您可以根据您的实际需求进行修改和优化。