uniapp项目用vue3语法写一个输入手机号、验证码的uni-ui

好的，以下是一个基于 Vue3 及 uni-ui 的输入手机号和验证码的示例代码：

<template>
  <view>
    <uni-field
      v-model.trim="phone"
      type="number"
      input-align="right"
      placeholder="请输入手机号"
      clear
    ></uni-field>
    <uni-field
      v-model.trim="captcha"
      type="number"
      input-align="right"
      placeholder="请输入验证码"
      clear
    >
      <button slot="button" :disabled="!phone" @click="sendCaptcha">
        {{ captchaButton }}
      </button>
    </uni-field>
  </view>
</template>

<script>
import { ref } from "vue";

export default {
  name: "PhoneCaptchaInput",
  setup() {
    const phone = ref("");
    const captcha = ref("");
    const captchaButton = ref("获取验证码");
    const countdown = ref(60);

    const sendCaptcha = () => {
      // 发送验证码的逻辑
      console.log(`发送验证码至手机号：${phone.value}`);

      // 模拟发送验证码的过程
      captchaButton.value = `${countdown.value}s`;
      const timer = setInterval(() => {
        countdown.value--;
        if (countdown.value === 0) {
          clearInterval(timer);
          countdown.value = 60;
          captchaButton.value = "获取验证码";
        } else {
          captchaButton.value = `${countdown.value}s`;
        }
      }, 1000);
    };

    return {
      phone,
      captcha,
      captchaButton,
      sendCaptcha,
    };
  },
};
</script>

这里使用了 `uni-field` 组件实现输入框，同时在验证码输入框中添加了一个按钮用于发送验证码。点击按钮后会触发 `sendCaptcha` 方法，可以在该方法中实现发送验证码的逻辑。在示例代码中，我们只是简单地模拟了发送验证码的过程，实际项目中需要根据具体需求进行更改。