vue手写验证码

最新推荐文章于 2023-04-04 17:27:48 发布

周亚鑫

最新推荐文章于 2023-04-04 17:27:48 发布

阅读量291

点赞数 1

分类专栏： vue 验证码文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/q4717529/article/details/121766365

版权

vue 同时被 2 个专栏收录

121 篇文章 15 订阅

订阅专栏

验证码

2 篇文章 0 订阅

订阅专栏

包括倒计时里面都有的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>查询申卡进度</title>
    <link rel="stylesheet" href="../../css/main.css" />
    <link rel="stylesheet" href="../../css/vant.css" />
    <link rel="stylesheet" href="../../css/progress/index.css" />
    <script src="../../js/rem.js"></script>
  </head>

  <body>
    <div id="app" v-cloak>
      <div class="card-group">
        <input
          type="text"
          placeholder="姓名"
          maxlength="20"
          v-model="card_name"
        />
      </div>
      <div class="card-group" @click="showPicker=true">
        <p>证件类型</p>
        <p class="group">
          <span>{{certType.text}}</span>
          <van-icon name="arrow" size="o.4rem" />
        </p>
      </div>
      <div class="card-group">
        <input
          type="text"
          @input="onInput"
          maxlength="18"
          placeholder="证件号码"
          v-model="card_no"
        />
      </div>
      <div style="display: flex; background: #fff; height: 50px">
        <input
          maxlength="4"
          style="padding-left: 15px; width: 70%"
          v-model="msgCode"
          type="number"
          label=""
          onchange="value=value.replace(/[\D]/g,'')"
          placeholder="请输入验证码"
        />
        <p class="send" @click="getMsgCode" :class="{ disabled: msgCodes.time < 60 }">
          {{ msgCodes.msg }}
        </p>
      </div>
      <div
        class="query-btn"
        :class="{'active':card_name==''||card_no==''}"
        @click="query"
      >
        立即查询
      </div>
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          title="证件选择"
          show-toolbar
          :columns="certList"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </van-popup>
    </div>
    <script src="../../js/vconsole.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="../../js/zepto.min.js"></script>
    <script src="../../js/vue.min.js"></script>
    <script src="../../js/vant.js"></script>
    <script src="../../js/keyou-crypto-min.js"></script>
    <script src="../../js/md5.js"></script>
    <script src="../../js/sha1.js"></script>
    <script src="../../js/jsrsasign-all-min.min.js"></script>
    <script src="../../js/request_v_0.1.js"></script>
    <script src="../../js/plugIn_v_0.1.js"></script>
    <script>
      new Vue({
        el: "#app",
        data() {
          return {
            msgCode: "",
            showPicker: false,
            card_name: "",
            card_no: "",
            msgCodes: {
              msg: "发送验证码",
              time: 60,
            },
            certType: {
              text: "身份证",
              value: "00",
            },
            certList: [
              {
                text: "身份证",
                value: "00",
              },
              {
                text: "户口簿",
                value: "01",
              },
              {
                text: "护照",
                value: "03",
              },
              {
                text: "港澳通行证",
                value: "04",
              },
              {
                text: "台湾通行证",
                value: "05",
              },
              {
                text: "外国永久居住证",
                value: "06",
              },
              {
                text: "军官证",
                value: "07",
              },
              {
                text: "警官证",
                value: "08",
              },
              {
                text: "其他",
                value: "99",
              },
            ],
          };
        },
        mounted() {},
        methods: {
          getMsgCode() {
            console.log("1");
            if (this.msgCodes.time > 59) {
              console.log("23");
              // http
              //   .postRequest("frontEnd/M001", {
              //     userId: user.userId,
              //     ses_id: user.ses_id,
              //     verifyNo: form.mobile,
              //     handleType: "22",
              //     verifyMode: "0",
              //   })
              //   .then((res) => {
                  // if (res.result == "0") {
                    // Toast("发送成功");
                    this.msgCodes.time--;
                    this.msgCodes.msg = `59s后重发`;
                    let timer = setInterval(() => {
                      let that=this
                      that.msgCodes.time--;
                      that.msgCodes.msg = `${that.msgCodes.time}s后重发`;
                      if (that.msgCodes.time < 1) {
                        clearInterval(timer);
                        that.msgCodes.time = 60;
                        that.msgCodes.msg = "重新发送";
                      }
                    }, 1000);
                  // }
                // });
            }
          },
          onConfirm() {
            if (this.msgCode == "") {
              Toast("请输入验证码");
              return;
            }
            
          },
          onInput() {
            this.card_no = this.card_no.replace(/[^A-Za-z0-9]/g, "");
          },
          onCancel() {
            this.showPicker = false;
          },
          onConfirm(value) {
            this.certType.text = value.text;
            this.certType.value = value.value;
            this.showPicker = false;
          },
          query() {
            let _this = this;
            if (this.card_no == "" || this.card_name == "") {
              return false;
            }
            ajax(
              "/interf/frontEnd/AC/AC08",
              {
                name: _this.card_name,
                cert_no: _this.card_no,
                cert_type: _this.certType.value,
              },
              true,
              "POST",
              function (data) {
                if (data.result == "0") {
                  setLocalStore("queryData", JSON.stringify(data));
                  window.location.href = "./progress.html";
                }
              }
            );
          },
        },
      });
    </script>
    <style>
      .send {
        margin-top: 15px;
        font-size: 13px;
        line-height: 18px;
        color: #2aa5fe;
      }
      .send .disabled {
        color: #999;
      }
    </style>
  </body>
</html>