vue 获取短信验证码

<template>
  <div id="fuxinRecharge" class="elementui-add-common-sty">
    <div class="container">
      <div class="page-content">

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item class="account-information">
   
        
          <!-- 验证身份信息 -->
          <el-form-item class="personal-information">
            <el-form-item class="list-title-bold18 list-table-title" label="2、录入审批单号"></el-form-item>
            <el-form-item class="add-white-bg-radius-padding">
              <el-form-item label="管理员手机号" required prop="phone">
                <el-input v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="remark">
                <el-input placeholder="请输入短信验证码" v-model="ruleForm.yzm">
                  <el-button slot="append"   v-if="setCode" @click="getYzm">{{setCode}}</el-button>
                </el-input>
              </el-form-item>
            </el-form-item>
          </el-form-item>
        </el-form>
        <div class="add-table-btn">
          <el-button @click="returnPage">取消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确定充值</el-button>
        </div>
      </div>
    </div>
   
  </div>
</template>
<script>
import "@/style/addElementuiSty.css";
export default {
  realName: "fuxinRecharge",
  data() {
    return {
      setCode: "获取验证码",
 
      yzmType:2,
    
      ruleForm: {
          phone:"",
          yzm: ""
        
      },
      rules: {
        phone: [
          {
            required: true,
            message:"请输入手机号",
            trigger: "blur",
          }
        ],
        yzm: [
          {
            required: true,
            message: "请输入短信验证码",
            trigger: "blur",
          },
        ]
      },
    };
  },
  methods: {

     // 获取短信验证码
    getYzm() {
      this.validateBtn();
//后台需传入的参数
      let data = {
        phone: this.ruleForm.phone,
        type: this.yzmType
      };
      this.$ajax.post("/sms/getVerificationCode", data, res => {
        if (res.code == 0) {
          this.ruleForm.yzm = res.data.data;
        }
      });
    },
    validateBtn() {
      //倒计时
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.disabled = false;
          this.setCode = "发送验证码";
        } else {
          this.setCode = time + "秒后重试";
          this.disabled = true;
          time--;
        }
      }, 1000);
    },
    // 添加表单
    getAddList(){},
    // 提交表单
    submitForm(formName) {
    
      this.$refs[formName].validate((valid) => {
          this.dialogVisible = true;
         this.getAddList();
      });
    },
    // 关闭当前页并返回上一页
    returnPage() {
      this.$router.go(-1);
    },
   
  },

};
</script>
<style>
.el-dialog{
  width: 40%;
}
.el-dialog__header {
  display: flex;
  align-items: center;
}
.el-dialog--center .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fuxin-recharge-successfully-icon {
  font-size: 0.84rem;
  color: #409eff;
  margin-bottom: 0.16rem;
}
.fuxin-recharge-successfully {
  font-size: 0.18rem;
  font-weight: bold;

  color: rgba(48, 49, 51, 1);
  padding-bottom: 0.24rem;
}
.fuxin-recharge-dialog-item{
  margin-top: 0.16rem;
}
.fuxin-recharge-successfully-title {
  font-size: 0.16rem;
  font-weight: 500;
  color: rgba(48, 49, 51, 1);
}
.fuxin-recharge-successfully-content {
  font-size: 0.14rem;
  font-weight: 400;
  color: rgba(96, 98, 102, 1);
}
.el-dialog__footer{
  padding: 0.1rem 0.2rem 0.4rem;
}
.el-dialog__footer .dialog-footer{
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>