aiforge/templates/user/auth/phone_verify.tmpl

<style>
  .__phone-verify-code {
    max-width: 519px;
  }

  .__phone-verify-code ._label-c {
    display: flex;
    justify-content: fixed-start;
    align-items: center;
    width: 100px;
    display: none;
  }

   .__phone-verify-code ._label-c ._label {
    font-size: 13px;
    font-weight: 700;
    color: rgba(0,0,0,.87);
   }

  .__phone-verify-code ._label-c.required ._label:after {
    margin: -0.2em 0 0 0.2em;
    content: '*';
    color: #db2828;    
    display: inline-block;
    vertical-align: top;
   }

  .__phone-verify-code .phone-c {
    display: flex;
    margin: 0 0 1em;
  }

  .__phone-verify-code .phone-c .phone-area-c {
    height: 38px;
    width: 80px;
    margin-right: 10px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  .__phone-verify-code .phone-c .phone-area-c select {
    outline: none;
  }

  .__phone-verify-code .phone-c .phone-num-c {
    height: 38px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  .__phone-verify-code .phone-c .phone-num-c input {
    height: 100%;
    width: 100% !important;
    padding: 9.5px 14px;
    box-sizing: border-box;
    outline: none;
  }

  .__phone-verify-code .slide-bar-wrap {
    display: flex;
    height: 38px;
    margin: 0 0 1em;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .__phone-verify-code .slide-bar-c {
    flex: 1;
    display: flex;
    height: 38px;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg {
    height: 34px;
    flex: 1;
    background-color: rgb(245, 245, 246);
    border: 1px solid rgb(225, 227, 230);
    border-radius: 2px;
    position: relative;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-txt {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    user-select: none;
    justify-content: center;
    align-items: center;
    color: #cdcacb;
    font-size: 14px;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-bar {
    position: absolute;
    width: 38px;
    height: 34px;
    background-color: #d1e9fe;
    border: 1px solid #1991fa;
    border-radius: 2px;
    box-sizing: border-box;
    top: -1px;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-bar.sucess {
    background-color: #d2f4ef;
    border: 1px solid #52ccba;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-bar.error {
    border-color: #f57a7a;
    background-color: #fce1e1;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger {
    position: absolute;
    width: 38px;
    height: 34px;
    background-color: #1991fa;
    border-radius: 2px;
    cursor: pointer;
    top: -1px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger .icon {
    font-size: 16px;
    color: white;
    margin: 0;   
    height: 16px;
    width: 16px;
    margin-top: -6px;
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger.sucess {
    background-color: #52ccba;    
  }

  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger.error {
    background-color: #f57a7a;
  }

  .__phone-verify-code .slide-bar-c .slide-image-big {
    position: absolute;
    width: 391px;
    height: 196px;    
    top: 36px;
    left: 0;
    border-radius: 2px;
    z-index: 100;
    display: none;
  }

  .__phone-verify-code .slide-bar-c .slide-image-small {
    position: absolute;
    left: 0;
    width: 51px;
    height: 51px;
    box-shadow: 0 0 4px rgb(35 173 255);
  }

  .__phone-verify-code .slide-bar-c .verify-code-c {
    display: flex;
    height: 38px;
  }

  .__phone-verify-code .verify-code-c {
    display: flex;
    height: 38px;
    margin: 0 0 1em;
    justify-content: center;
    align-items: center;
  }

  .__phone-verify-code .verify-code-c .verify-code-num-c {
    flex: 1;
    height: 38px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .__phone-verify-code .verify-code-c .verify-code-num-c input {
    height: 100%;
    width: 100% !important;
    padding: 9.5px 14px;
    box-sizing: border-box;
    outline: none;
  }

  .__phone-verify-code .verify-code-c .verify-code-send {
    display: flex;
    width: 120px;
    height: 38px;
    justify-content: center;
    align-items: center;
  }

  .__phone-verify-code .verify-code-c .verify-code-send .verify-code-send-btn {
    height: 100%;
    width: 100%;
    margin-left: 10px;
    border: 1px solid #398dee;
    background-color: #398dee;
    color: white;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: pointer;    
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .__phone-verify-code .verify-code-c .verify-code-send .verify-code-send-btn.__disabled {
    border: 1px solid #ddd;
    background-color: #ddd;
    cursor: not-allowed;
  }

  .__phone-verify-code .new-pass-word-wrap {
    display: flex;
    height: 38px;
    margin: 0 0 1em;
    justify-content: center;
    align-items: center;
    display: none;
  }

  .__phone-verify-code .new-pass-word-wrap .new-pass-word-c {
    flex: 1;
    height: 38px;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    display: flex;
  }
  
  .__phone-verify-code .new-pass-word-wrap .new-pass-word-c input {
    height: 100%;
    width: 100% !important;
    padding: 9.5px 14px;
    box-sizing: border-box;
    border: none;
    outline: none;
  }
</style>

<div class="__phone-verify-code">
  <div class="phone-c">
    <div class="phone-label _label-c required">
      <span class="_label">{{.i18n.Tr "phone.phone_number"}}</span>
    </div>
    <div class="phone-area-c">
      <select value="+86">
        <option value="+86">+86</option>
      </select>
    </div>
    <div class="field phone-num-c">
      <input class="phoneNumber" style="width:100% !important" name="phone_number" value="{{.phone_number}}" placeholder="{{.i18n.Tr "phone.phone_number"}}" required autocomplete="off" />
    </div>
  </div>
  <div class="slide-bar-wrap" style="display:flex;">
    <div class="slide-bar-label  _label-c required" style=""></div>
    <div class="slide-bar-c" style="flex:1;">
      <div class="slide-bar-bg">
        <div class="slide-txt">{{.i18n.Tr "phone.drag_the_slider_to_fill_the_puzzle"}}</div>
        <div class="slide-bar"></div>
        <div class="slide-trigger">
          <i class="arrow right icon"></i>
          <i class="check icon" style="display:none;"></i>
          <i class="close icon" style="display:none;"></i>
        </div>
      </div>
      <div class="slide-image-big">
        <div class="slide-image-small" style="top:{{.SlideImageInfo.ImageY}}px"></div>
      </div>
    </div>
  </div>
  <div class="verify-code-c">
    <div class="verify-code-label _label-c required">
      <span class="_label">{{.i18n.Tr "phone.mobile_phone_verification_code"}}</span>
    </div>
    <div class="verify-code-num-c">
      <input class="verifyCode" style="width:100% !important" name="verify_code" value="{{.verify_code}}" placeholder="{{.i18n.Tr "phone.please_enter_SMS_verification_code"}}" required autocomplete="off" />
    </div>
    <div class="verify-code-send">
      <div class="verify-code-send-btn __disabled">{{.i18n.Tr "phone.get_verification_code"}}</div>
    </div>
  </div>
  <div class="new-pass-word-wrap">
    <div class="new-pass-word-label _label-c required">
      <span class="_label">{{.i18n.Tr "phone.new_login_password"}}</span>
    </div>
    <div class="new-pass-word-c">
      <input class="newPassword" style="width:100% !important" name="password" type="password" placeholder="{{.i18n.Tr "phone.please_enter_new_password"}}" required autocomplete="off" />
    </div>    
  </div>
  <div class="new-pass-word-wrap">
    <div class="new-pass-word-label _label-c required"></div>
    <div class="field" style="flex:1;">
      <div class="ui checkbox">
        <label>{{.i18n.Tr "auth.remember_me"}}</label>
        <input name="remember" type="checkbox">
      </div>
    </div>							
  </div>
</div>

<script>
  (function() {
    window.addEventListener('load', function () {
      function PhoneVerifyCode(dom) {
        if (!dom) return;
        this.countDownNumber = 120;
        this.init(dom);
      }
    
      PhoneVerifyCode.prototype.init = function (dom) {
        if (!dom) return;
        this.dom = $(dom);
        this.isMoving = false;
        this.verifySucess = false;
        this.canSendCode = false;
        this.countDownEnd = false;
        this.imgID = '';
        this.eventInit();
        this.refreshImages();
        var wrap = this.dom.closest('div.use-type');
        var oldPhoneNum = wrap.attr('ophonenumber');
        if (oldPhoneNum) {
          this.dom.find('input.phoneNumber').val(oldPhoneNum);
        }
        var showlabel = wrap.attr('showlabel');
        if (showlabel) {
          this.dom.find('._label-c ').show();
        } else {
          this.dom.find('._label-c ').hide();
        }
        var showNewpwd = wrap.attr('shownewpwd');
        if (showNewpwd) {
          this.dom.find('.new-pass-word-wrap').show();
        } else {
          this.dom.find('.new-pass-word-wrap').remove();
        }
        var autofocus = wrap.attr('autofocus');
        if (autofocus) {
          this.dom.find('input.phoneNumber').focus();
        }
        var verifyCodeNoRequired = wrap.attr('verifycodenorequired');
        if (verifyCodeNoRequired) {
          this.dom.find('input.verifyCode').removeAttr('required');
        }
      };

      PhoneVerifyCode.prototype.eventInit = function () {
        if (!this.dom) return;
        var self = this;
        var clientX = 0, oLeft = 0, imgHideTimer = null;
        this.dom.find('.slide-bar-bg').on('mouseenter', function (e) {
          if (self.verifySucess) return;
          imgHideTimer && clearTimeout(imgHideTimer);
          self.dom.find('.slide-image-big').slideDown();
        });
        this.dom.find('.slide-bar-bg').on('mouseleave', function (e) {
          imgHideTimer && clearTimeout(imgHideTimer);
          imgHideTimer = setTimeout(function () {
            self.dom.find('.slide-image-big').slideUp();
          }, 200);
        });
        this.dom.find('.slide-image-big').on('mouseenter', function (e) {
          imgHideTimer && clearTimeout(imgHideTimer);
        });
        this.dom.find('.slide-image-big').on('mouseleave', function (e) {
          imgHideTimer && clearTimeout(imgHideTimer);
          imgHideTimer = setTimeout(function () {
            self.dom.find('.slide-image-big').slideUp();
          }, 200);
        });
    
        function mouseMove(e) {
          var _clientX = e.clientX;
          var offset = _clientX - clientX;
          var triggerEl = self.dom.find('.slide-trigger');
          var triggerWidth = triggerEl.width();
          var parentWidth = triggerEl.parent().width();
          var maxLeft = parentWidth - triggerWidth;
          var left = oLeft + offset;
          if (oLeft + offset < 0) left = 0;
          if (oLeft + offset > maxLeft) left = maxLeft;
          triggerEl.css('left', left + 'px');
          self.dom.find('.slide-bar').css('width', left + triggerWidth);
          var imageBigWidth = self.dom.find('.slide-image-big').width();
          var imageSmallWidth = self.dom.find('.slide-image-small').width();
          self.dom.find('.slide-image-small').css('left', left / maxLeft * (imageBigWidth - imageSmallWidth) + 'px');
          self.isMoving = true;          
          self.dom.find('.slide-txt').hide();
          imgHideTimer && clearTimeout(imgHideTimer);
        }
    
        function mouseUp(e) {
          $(document).off('mousemove', mouseMove);
          $(document).off('mouseup', mouseUp);
          self.isMoving = false;
          $.ajax({
            url: '/verifySlideImage',
            type: 'post',
            dataType: 'json',
            data: {
              slide_id: self.imgID,
              x: parseInt(self.dom.find('.slide-image-small').position().left)
            },
            success: function(res) {
              if (res && res.Code === 0) {
                self.verifySucess = true;
                self.canSendCode = true;
                self.dom.find('.slide-bar').addClass('sucess');
                self.dom.find('.slide-trigger').addClass('sucess');
                self.dom.find('.slide-trigger .icon').hide();
                self.dom.find('.slide-trigger .icon.check').show();
                self.dom.find('.slide-image-big').slideUp();
                self.dom.find('.verify-code-send-btn').removeClass('__disabled');
              } else {
                self.dom.find('.slide-bar').addClass('error');
                self.dom.find('.slide-trigger').addClass('error');
                self.dom.find('.slide-trigger .icon').hide();
                self.dom.find('.slide-trigger .icon.close').show();
                setTimeout(function () {
                  self.refreshImages();
                }, 300);
              }
            },
            error: function(err) {
              self.dom.find('.slide-bar').addClass('error');
                self.dom.find('.slide-trigger').addClass('error');
                setTimeout(function () {
                  self.refreshImages();
                }, 300);
            }
          });
        }
    
        this.dom.find('.slide-trigger').on('mousedown', function (e) {
          if (self.verifySucess) return;
          clientX = e.clientX;
          oLeft = $(this).position().left;
          $(document).on('mousemove', mouseMove);
          $(document).on('mouseup', mouseUp);
        });
    
        this.dom.find('.verify-code-send-btn').on('click', function () {
          if (!self.canSendCode) return;
          if (self.countDownEnd) {
            self.refreshImages();
            return;
          }
          var phoneArea = self.dom.find('.phone-area-c select').val();
          var phoneNumber = self.dom.find('.phone-num-c input').val();
          if (!/^1[3578]\d{9}$/.test(phoneNumber)) {
            self.dom.find('.phone-num-c').addClass('error');
            return;
          } else {
            self.dom.find('.phone-num-c').removeClass('error');
            var useType = self.dom.closest('div.use-type').attr('usetype') || 0;
            $.ajax({
              url: '/sendVerifyCode',
              type: 'post',
              dataType: 'json',
              data: {
                phone_number: phoneNumber,
                mode: useType, // 0注册，1登录 ，2修改手机号，3找回密码
                slide_id: self.imgID,
              },
              success: function(res) {
                if (res && res.Code === 0) {
                  self.countDown();
                } else {
                   $('body').toast({
                    message: res.Message,
                    showProgress: 'bottom',
                    showIcon:'warning circle',
                    class: 'warning',
                    position: 'top right',
                  });
                  self.refreshImages();
                }
              },
              error: function(err) {
                console.log(err);
              }
            });
          }
        });
      };
    
      PhoneVerifyCode.prototype.refreshImages = function () {
        this.isMoving = false;
        this.verifySucess = false;
        this.canSendCode = false;
        this.countDownEnd = false;
        this.imgID = '';
        this.dom.find('.slide-bar').removeClass('sucess error').css('width', '30px');
        this.dom.find('.slide-trigger').removeClass('sucess error').css('left', '0px');
        this.dom.find('.slide-trigger .icon').hide();
        this.dom.find('.slide-trigger .icon.arrow').show();
        this.dom.find('.slide-txt').show();
        this.dom.find('.slide-image-small').css('left', '0');
        this.dom.find('.verify-code-send-btn').addClass('__disabled');
        var self = this;
        $.ajax({
          url: '/slideImage',
          type: 'get',
          success: function(res) {
            if (res && res.Code === 0) {
              self.imgID = res.Message;
              self.dom.find('.slide-image-big').css('background', `url("/slideimage/${res.Message}.png")`);
              self.dom.find('.slide-image-small').css('background', `url("/slideimage/${res.Message}screenshot.png")`);
            }
          },
          error: function(err) {
            console.log(err);
          }
        });
      };
    
      PhoneVerifyCode.prototype.countDown = function () {
        var self = this;
        var sendBtnEl = this.dom.find('.verify-code-send-btn');
        var count = this.countDownNumber;
        sendBtnEl.addClass('__disabled').text(count + {{.i18n.Tr "phone.second_resend"}});
        this.canSendCode = false;
        this.countDownEnd = false;
        var timer = setInterval(function () {
          count--;
          sendBtnEl.addClass('__disabled').text(count + {{.i18n.Tr "phone.second_resend"}});
          if (count <= 0) {
            sendBtnEl.removeClass('__disabled').text({{.i18n.Tr "phone.get_verification_code"}});
            clearInterval(timer);
            self.canSendCode = true;
            self.countDownEnd = true;
          }
        }, 1000);
      };
    
      const phoneVerifyCode = new PhoneVerifyCode($('.__phone-verify-code'));
    });
  })();
</script>