Vue实现阿里云短信验证码登陆代码

以下是一个简单的示例，使用Vue实现阿里云短信验证码登录的代码：

<template>
  <div>
    <input type="tel" v-model="phone" placeholder="请输入手机号码">
    <button @click="sendCode" :disabled="isSending">{{ buttonText }}</button>
    <input type="text" v-model="code" placeholder="请输入验证码">
    <button @click="login" :disabled="!code || isLoggingIn">登录</button>
  </div>
</template>

<script>
import { sendVerificationCode, loginWithVerificationCode } from '@/api/auth'

export default {
  data() {
    return {
      phone: '',
      code: '',
      isSending: false,
      isLoggingIn: false,
      countdown: 60,
      buttonText: '获取验证码'
    }
  },
  methods: {
    async sendCode() {
      if (!this.phone) {
        return this.$message.error('请输入手机号码')
      }
      this.isSending = true
      try {
        await sendVerificationCode(this.phone)
        this.countdown = 60
        this.buttonText = `${this.countdown}秒后重新发送`
        const timer = setInterval(() => {
          this.countdown--
          this.buttonText = `${this.countdown}秒后重新发送`
          if (this.countdown === 0) {
            clearInterval(timer)
            this.isSending = false
            this.buttonText = '获取验证码'
          }
        }, 1000)
      } catch (err) {
        this.isSending = false
        this.$message.error(err.message)
      }
    },
    async login() {
      if (!this.code) {
        return this.$message.error('请输入验证码')
      }
      this.isLoggingIn = true
      try {
        await loginWithVerificationCode(this.phone, this.code)
        this.$message.success('登录成功')
        // 跳转到首页
      } catch (err) {
        this.isLoggingIn = false
        this.$message.error(err.message)
      }
    }
  }
}
</script>

在此示例中，我们使用了 `sendVerificationCode` 和 `loginWithVerificationCode` 两个方法来发送验证码和登录。您需要根据您自己的实际情况来实现这些方法，这些方法通常会与您的后端API进行交互。

此外，您需要在阿里云控制台中创建一个短信模板，并将其与您的应用程序集成。您需要使用阿里云提供的SDK来发送短信验证码。