vant做手机号图片验证和验证码验证

页面样式：

//用vant的dialog组件

<van-dialog
        v-model="showSMS"
        show-cancel-button
        confirm-button-text="取消"
        cancel-button-text="确定"
        :closeOnClickOverlay="true"
        @confirm="confirm"
        @cancel="cancel"
        :before-close="onBeforeClose"
      >
        <div class="dialog_layout">
          <van-row type="flex" justify="space-between">
            <van-col span="9"
              ><span style="margin-left: .6rem">手机号</span></van-col
            >
            <van-col span="9"
              ><span style="margin-right: 22px">{{ mobileNo }}</span></van-col
            >
          </van-row>

          <van-row type="flex">
            <van-col span="16"
              ><van-field
                v-model="picCode"
                maxlength="4"
                label="图形验证码"
                placeholder="输入验证码"
            /></van-col>
            <van-col span="8">
              <img
                class="refresh_code"
                @click="refreshCode"
                alt=""
                :src="picCodeUrl"
            /></van-col>
          </van-row>

          <van-row type="flex">
            <van-col span="16">
              <van-field
                v-model="smsCode"
                maxlength="6"
                label="验证码"
                placeholder="获取验证码"
              />
            </van-col>
            <van-col span="8">
              <span
                class="sms-send-btn"
                :class="{ 'not-can-send': smsNotCanSend }"
                @click="sendSMS"
                >{{ showText }}</span
              >
            </van-col>
          </van-row>
        </div>
      </van-dialog>

//data中声明数据
data:{
      picCode: "", //用户输入的图形验证码
      smsCode: "", //用户输入的短信验证码
      timer: 60,
      smsNotCanSend: false, //发送后禁止点击
      showSMS: false, //是否展示弹窗
      picCodeUrl: "", //图形验证码地址
      verifyCode: "", //图形验证码具体内容，如“ae86”
      mobileNo: "13618506674",
}

//computed中声明showText
 computed: {
    showText() {
      let text = "发送验证码";
      if (this.smsNotCanSend) {
        text = `重新获取(${this.timer})s`;
      }
      return text;
    },
  },



//methods中的点击事件
mmethods:{
 //点击确定
    cancel() {
      if (!this.smsCode) {
        this.$notify_err("短信验证码不能为空！");
        return false;
      }
    },
    confirm() {},
    sendSMS() {
      //去空格处理
      this.picCode = this.picCode.replace(/(^\s*)|(\s*$)/g, "");
      if (!this.picCode) {
        this.$notify_err("请输入图形验证码");
        return false;
      }
      //发送之后置灰，不能再次点击
      if (this.smsNotCanSend) {
        return false;
      }
      let params = {
        iamgeCode: this.picCode, //用户输入的图形验证码
        iamgeCodeByInterface: this.verifyCode, //接口返回的图形验证码
        operateType: "05", //操作类型
        platformType: "01", //平台类型
        phone: this.mobileNo,
      };
      console.log(JSON.stringify(params));
      this.$loading("正在获取验证码...");
        //下面调用验证码接收接口  根据接口路径自行修改
      sendVerificationCodeMessage(params).then((res) => {
        this.$cls();
        console.log(JSON.stringify(res));
        if (res.code === "0000") {
          if (res.data.state == true) {
            Toast("发送成功");
            this.setItime();
          } else {
            Toast("发送失败");
          }
        } else {
          this.$notify_err(res.msg);
        }
      });
    },
    onBeforeClose(action, done) {
      if (action === "cancel") {
        //点击确定不关闭
        return done(false);
      }
      if (action === "confirm") {
        return done();
      }
    },
    refreshCode() {
      let params = {};
      getPictureCaptchaInfo(params).then((res) => {
        if (res.code === "0000") {
          this.picCodeUrl = "data:image/jpg;base64," + res.data.pictureCaptcha;
          this.verifyCode = res.data.verifyCode;
        }
      });
      this.picCode = "";
    },
    setItime() {
      // 设置加载时间
      this.smsNotCanSend = true;
      var timeInter = setInterval(() => {
        if (this.timer == 0) {
          this.smsNotCanSend = false;
          this.timer = 60;
          clearInterval(timeInter);
        } else {
          this.timer--;
        }
      }, 1000);
    },
}


//页面加载时就调用图片验证码接口
 mounted() {
    this.refreshCode();
  },