手机验证码前端代码拆分独立构建，构建配置修改

templates/user/auth/phone_verify.tmpl

@@ -1,278 +1,4 @@
-<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;
-    position: relative;
-  }
-
-  .__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 .phone-c .modify-phone-number {
-    position: absolute;
-    left: 100%;
-    width: 200px;
-    height: 100%;
-    margin-left: 10px;
-    display: none;
-  }
-
-  .__phone-verify-code .phone-c .modify-phone-number a {
-    font-weight: 400;
-    font-size: 14px;
-    color: rgba(0, 102, 255, 1);
-  }
-
-  .__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: -5px;
-  }
-
-  .__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;
-    outline: none;
-  }
-</style>
-
+<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/_phoneverify.css?v={{MD5 AppVer}}" />
 <div class="__phone-verify-code">
   <div class="phone-c">
     <div class="phone-label _label-c required">
@@ -334,264 +60,16 @@
     </div>							
   </div>
 </div>
-
+<script src="{{StaticUrlPrefix}}/js/phoneverify.js?v={{MD5 AppVer}}" type="text/javascript"></script>
 <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 readonly = wrap.attr('readonly');
-        if (readonly) {
-          this.dom.find('.phone-area-c select').attr('disabled', true);
-          this.dom.find('.phone-num-c input').attr('disabled', true);
-          this.dom.find('.slide-bar-wrap').hide();
-          this.dom.find('.verify-code-c').hide();
-          this.dom.find('.modify-phone-number').show();
-        }
-        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 {
-                  if ($('.ui.negative.message').length) {
-                    $('.ui.negative.message').eq(0).show().find('p').text(res.Message);
-                  } else {
-                    $('body').toast({
-                      message: res.Message,
-                      showProgress: 'bottom',
-                      showIcon:'warning circle',
-                      class: 'warning',
-                      position: 'top right',
-                    });
-                  }
-                  self.refreshImages();
-                }
-              },
-              error: function(err) {
-                console.log(err);
-              }
-            });
-          }
-        });
-
-        this.dom.find('.modify-phone-number a').on('click', function() {
-          self.dom.find('.phone-area-c select').attr('disabled', false);
-          self.dom.find('.phone-num-c input').attr('disabled', false);
-          self.dom.find('.slide-bar-wrap').css('display', 'flex');
-          self.dom.find('.verify-code-c').css('display', 'flex');
-          self.dom.find('.modify-phone-number').hide();
-        });
-      };
-    
-      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;
-            self.refreshImages();
-          }
-        }, 1000);
-      };
-    
-      const phoneVerifyCode = new PhoneVerifyCode($('.__phone-verify-code'));
+ (function(){
+  window.addEventListener('load', function () {
+    var phoneVerifyCode = new PhoneVerifyCode($('.__phone-verify-code'), {
+      Lang: {
+        second_resend: {{.i18n.Tr "phone.second_resend"}},
+        get_verification_code: {{.i18n.Tr "phone.get_verification_code"}},
+      },
     });
-  })();
+  });
+ })();
 </script>

web_src/js/standalone/phoneverify.js

@@ -0,0 +1,256 @@
+; (function () {
+  function PhoneVerifyCode(dom, options) {
+    if (!dom) return;
+    this.countDownNumber = 120;
+    this.options = options;
+    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 readonly = wrap.attr('readonly');
+    if (readonly) {
+      this.dom.find('.phone-area-c select').attr('disabled', true);
+      this.dom.find('.phone-num-c input').attr('disabled', true);
+      this.dom.find('.slide-bar-wrap').hide();
+      this.dom.find('.verify-code-c').hide();
+      this.dom.find('.modify-phone-number').show();
+    }
+    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 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 {
+              if ($('.ui.negative.message').length) {
+                $('.ui.negative.message').eq(0).show().find('p').text(res.Message);
+              } else {
+                $('body').toast({
+                  message: res.Message,
+                  showProgress: 'bottom',
+                  showIcon: 'warning circle',
+                  class: 'warning',
+                  position: 'top right',
+                });
+              }
+              self.refreshImages();
+            }
+          },
+          error: function (err) {
+            console.log(err);
+          }
+        });
+      }
+    });
+
+    this.dom.find('.modify-phone-number a').on('click', function () {
+      self.dom.find('.phone-area-c select').attr('disabled', false);
+      self.dom.find('.phone-num-c input').attr('disabled', false);
+      self.dom.find('.slide-bar-wrap').css('display', 'flex');
+      self.dom.find('.verify-code-c').css('display', 'flex');
+      self.dom.find('.modify-phone-number').hide();
+    });
+  };
+
+  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 + (self.options && self.options.Lang && self.options.Lang.second_resend ? self.options.Lang.second_resend : 'S后重发'));
+    this.canSendCode = false;
+    this.countDownEnd = false;
+    var timer = setInterval(function () {
+      count--;
+      sendBtnEl.addClass('__disabled').text(count + (self.options && self.options.Lang && self.options.Lang.second_resend ? self.options.Lang.second_resend : 'S后重发'));
+      if (count <= 0) {
+        sendBtnEl.removeClass('__disabled').text(+ (self.options && self.options.Lang && self.options.Lang.get_verification_code ? self.options.Lang.get_verification_code : '获取验证码'));
+        clearInterval(timer);
+        self.canSendCode = true;
+        self.countDownEnd = true;
+        self.refreshImages();
+      }
+    }, 1000);
+  };
+
+  window.PhoneVerifyCode = PhoneVerifyCode;
+})();

web_src/less/standalone/_phoneverify.less

@@ -0,0 +1,274 @@
+.__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;
+  position: relative;
+}
+
+.__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 .phone-c .modify-phone-number {
+  position: absolute;
+  left: 100%;
+  width: 200px;
+  height: 100%;
+  margin-left: 10px;
+  display: none;
+}
+
+.__phone-verify-code .phone-c .modify-phone-number a {
+  font-weight: 400;
+  font-size: 14px;
+  color: rgba(0, 102, 255, 1);
+}
+
+.__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;
+  user-select: none;
+}
+
+.__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: -5px;
+  user-select: none;
+}
+
+.__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;
+  outline: none;
+}

webpack.config.js

@@ -20,6 +20,15 @@ for (const path of glob('web_src/less/themes/*.less')) {
   themes[parse(path).name] = [path];
 }
 
+const standalone = {};
+const stadalonePaths = [
+  ...glob('web_src/js/standalone/*.js'),
+  ...glob('web_src/less/standalone/*.less'),
+];
+for (const path of stadalonePaths) {
+  standalone[parse(path).name] = [path];
+}
+
 const isProduction = process.env.NODE_ENV !== 'development';
 
 module.exports = {
@@ -29,13 +38,11 @@ module.exports = {
       resolve(__dirname, 'web_src/js/index.js'),
       resolve(__dirname, 'web_src/less/index.less'),
     ],
-    swagger: [
-      resolve(__dirname, 'web_src/js/standalone/swagger.js'),
-    ],
     jquery: [
       resolve(__dirname, 'web_src/js/jquery.js'),
     ],
     icons: glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
+    ...standalone,
     ...themes,
   },
   devtool: false,

webpack_pro.config.js

@@ -20,6 +20,15 @@ for (const path of glob('web_src/less/themes/*.less')) {
   themes[parse(path).name] = [path];
 }
 
+const standalone = {};
+const stadalonePaths = [
+  ...glob('web_src/js/standalone/*.js'),
+  ...glob('web_src/less/standalone/*.less'),
+];
+for (const path of stadalonePaths) {
+  standalone[parse(path).name] = [path];
+}
+
 const isProduction = process.env.NODE_ENV !== 'development';
 
 module.exports = {
@@ -29,13 +38,11 @@ module.exports = {
       resolve(__dirname, 'web_src/js/index.js'),
       resolve(__dirname, 'web_src/less/index.less'),
     ],
-    swagger: [
-      resolve(__dirname, 'web_src/js/standalone/swagger.js'),
-    ],
     jquery: [
       resolve(__dirname, 'web_src/js/jquery.js'),
     ],
     icons: glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
+    ...standalone,
     ...themes,
   },
   devtool: false,