帮我修改上面的代码，要求点击获取验证码后，按钮显示60秒后再试期间按钮不能被触发

好的，您可以参考以下代码进行修改：

<template>
  <div>
    <el-input v-model="phone" placeholder="请输入手机号"></el-input>
    <el-input v-model="code" placeholder="请输入验证码"></el-input>
    <el-button :disabled="isDisabled" @click="getCode">{{ buttonText }}</el-button>
    <el-button type="primary" @click="submit">提交</el-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        phone: '',
        code: '',
        buttonText: '获取验证码',
        isDisabled: false,
        timer: null,
        remainSeconds: 60,
      };
    },
    methods: {
      // 获取验证码
      getCode() {
        if (!/^1\d{10}$/.test(this.phone)) {
          this.$message.error('请输入正确的手机号');
          return;
        }

        // 模拟请求发送验证码
        console.log('发送验证码到手机：' + this.phone);

        // 按钮禁用60秒
        this.isDisabled = true;
        this.buttonText = `${this.remainSeconds}秒后再试`;

        // 启动定时器
        this.timer = setInterval(() => {
          if (this.remainSeconds === 1) {
            // 定时器时间到，清除定时器，按钮恢复可用状态
            clearInterval(this.timer);
            this.timer = null;
            this.isDisabled = false;
            this.buttonText = '获取验证码';
          } else {
            // 定时器未到时间，更新剩余秒数
            this.remainSeconds--;
            this.buttonText = `${this.remainSeconds}秒后再试`;
          }
        }, 1000);
      },
      // 提交表单
      submit() {
        if (!/^1\d{10}$/.test(this.phone)) {
          this.$message.error('请输入正确的手机号');
          return;
        }
        if (this.code === '') {
          this.$message.error('请输入验证码');
          return;
        }

        // 模拟提交表单数据
        console.log('手机号：' + this.phone + '，验证码：' + this.code);
        this.$message.success('提交成功');
      },
    },
  };
</script>

代码说明：

1. 添加了 `isDisabled`、`buttonText`、`timer`、`remainSeconds` 四个变量用来控制倒计时按钮状态。
2. 在 `getCode` 方法中，判断手机号是否正确，然后模拟发送验证码，并将按钮禁用60秒。
3. 启动定时器，每秒更新剩余时间和按钮显示文本，当倒计时结束时清除定时器，将按钮恢复可用状态。
4. 在 `submit` 方法中，判断手机号和验证码是否正确，然后模拟提交表单数据，并弹出提交成功的提示信息。