优化注册页面完成

WebService/src/main/java/com/java110/web/smo/impl/RegisterServiceSMOImpl.java

@@ -3,6 +3,7 @@ package com.java110.web.smo.impl;
 import com.alibaba.fastjson.JSON;
 import com.alibaba.fastjson.JSONObject;
 import com.java110.common.cache.CommonCache;
+import com.java110.common.cache.MappingCache;
 import com.java110.common.constant.ServiceConstant;
 import com.java110.common.util.Assert;
 import com.java110.common.util.StringUtil;
@@ -118,14 +119,18 @@ public class RegisterServiceSMOImpl extends BaseComponentSMO implements IRegiste
 
         String verifyCode = AliSendMessageFactory.generateMessageCode();
         ResponseEntity<String> sendMessageResult = null;
+        String verifyStr="演示环境验证码:"+verifyCode;
         try {
+            if("ON".equals(MappingCache.getValue("SMS_SEND_SWITCH"))){
             //开始发送验证码
             AliSendMessageFactory.sendMessage(telInfo.getString("tel"),verifyCode);
 
+                verifyStr ="验证码已下发至您的手机!";
+            }
             //将验证码存入Redis中
             CommonCache.setValue(telInfo.getString("tel")+"_validateTel",verifyCode.toLowerCase(),CommonCache.defaultExpireTime);
 
-            sendMessageResult = new ResponseEntity<>("成功", HttpStatus.OK);
+            sendMessageResult = new ResponseEntity<>(verifyStr, HttpStatus.OK);
 
         }catch (Exception e){
             logger.error("生成验证码失败，",e);

WebService/src/main/resources/components/pageFramePackage/body-top/bodyTop.html

@@ -1,2 +1,3 @@
 <vc:create name="loading"></vc:create>
-<vc:create name="message"></vc:create>
+<vc:create name="message"></vc:create>
+<vc:create name="messageTips"></vc:create>

WebService/src/main/resources/components/pageFramePackage/messageTips/messageTips.html

@@ -0,0 +1,11 @@
+<div id="messageTips" style="width: 100%;z-index: 1500;position: fixed; height:10%" v-bind:class="{no_display:messageTips.hide}" >
+    <!--<div class="spinner-border text-success" role="status">
+        <span class="sr-only">Loading...</span>
+    </div>-->
+    <div  style="width: 300px; margin: 250px auto; text-align: center;">
+        <div class="alert alert-info" role="alert" style="display: inline-block;width: auto; height: auto;color:#1c7430;padding: 0.5em 10px;">
+            <i class="glyphicon glyphicon-warning-sign"></i>
+            <span style="margin-left:10px">{{messageTips.errorInfo}}</span>
+        </div>
+    </div>
+</div>

WebService/src/main/resources/components/pageFramePackage/messageTips/messageTips.js

@@ -0,0 +1,46 @@
+(function(vc){
+
+    var vm = new Vue({
+        el:'#messageTips',
+        data:{
+            messageTips:{
+                hide:true,
+                errorInfo:'网络超时，请检查网络！'
+            }
+        },
+        mounted:function(){
+
+        },
+        methods:{
+            //验证码定时
+            messageTimer_Tips:function(){
+                  var num = 3;
+                var _timer = vc.createTimer(function(){
+                    num --;
+                    if(num === 1){
+                        vc.clearTimer(_timer);
+                        vm.messageTips.hide=true;
+                    }
+                },1000);
+            }
+        }
+    });
+
+    vm.$on('messageTips_openMessage',function(_msg){
+        //console.log("开始加载");
+        vm.messageTips.hide = false;
+        vm.messageTips.errorInfo = _msg.msg;
+    });
+    /**
+        加载遮罩层2
+        @param _msg 提示内容
+        @param _notAutoHide 是否需要自动隐藏
+    **/
+    vc.messageTips = function(_msg, _notAutoHide){
+       vm.$emit('messageTips_openMessage',{msg:_msg});
+       if(!_notAutoHide){
+            vm.messageTimer_Tips();
+       }
+
+    }
+})(window.vc)

WebService/src/main/resources/components/pageFramePackage/register/register.html

@@ -3,16 +3,17 @@
         <h1 class="logo-name">HC</h1>
     </div>
     <h3>请注册</h3>
+    <p style="color: #0e9aef;">{{registerInfo.validateInfo}}</p>
     <p style="color: red;">{{registerInfo.errorInfo}}</p>
     <div class="m-t" role="form">
         <div class="form-group">
-            <input type="text" v-model="registerInfo.username" class="form-control" placeholder="用户名" required=""/>
+            <input type="text" v-model="registerInfo.username" class="form-control" placeholder="用户名" required="" @focus="test('username')" />
         </div>
         <div class="form-group">
-            <input type="password" v-model="registerInfo.passwd" class="form-control" placeholder="密码" required=""/>
+            <input type="password" v-model="registerInfo.passwd" class="form-control" placeholder="密码" required="" @focus="test('passwd')" />
         </div>
         <div class="form-group">
-            <input  name="repasswd" v-model="registerInfo.repasswd" type="password" class="form-control" placeholder="确认密码" required="">
+            <input  name="repasswd" v-model="registerInfo.repasswd" type="password" class="form-control" placeholder="确认密码" required="" @focus="test('passwd')" />
         </div>
         <vc:create name="validate-tel"></vc:create>
         <button type="submit" v-on:click="doRegister()" class="btn btn-primary block full-width m-b">注册</button>

WebService/src/main/resources/components/pageFramePackage/register/register.js

@@ -5,7 +5,8 @@
                 username:'',
                 passwd:'',
                 repasswd:'',
-                errorInfo:''
+                errorInfo:'',
+                validateInfo:''
             }
         },
         _initMethod:function(){
@@ -25,7 +26,7 @@
                      });
         },
         methods:{
-            validate(){
+            validate:function(){
                 return vc.validate.validate({
                     registerInfo:vc.component.registerInfo
                 },{
@@ -80,7 +81,7 @@
 
                 });
             },
-            doRegister(){
+            doRegister:function(){
 
                 if(!vc.component.validate()){
                     vc.component.registerInfo.errorInfo = vc.validate.errInfo;
@@ -107,6 +108,15 @@
                                 vc.component.registerInfo.errorInfo = errInfo;
                              });
 
+            },
+            test:function(val){
+                if('username' == val){
+                    vc.messageTips("*用户名长度必须在4位至6位");
+
+                }else if('passwd' == val){
+                    vc.messageTips("*密码长度必须在6位至12位");
+
+                }
             }
         }
     });

WebService/src/main/resources/components/validatePackage/validate-tel/validate-tel.js

@@ -47,8 +47,9 @@
                                   },
                                  function(json,res){
                                     //vm.menus = vm.refreshMenuActive(JSON.parse(json),0);
+
                                     if(res.status == 200){
-                                        vc.component.errorInfo = json;
+                                        vc.component.registerInfo.validateInfo = json;
                                         return ;
                                     }
                                     vc.component.$emit('errorInfoEvent',json);

WebService/src/main/resources/views/register.html

@@ -15,8 +15,9 @@
 
 </head>
 
-<body class="gray-bg">
-<vc:create name="loading"></vc:create>
+<body class="gray-bg"><!--
+<vc:create name="loading"></vc:create>-->
+<vc:create name="bodyTop"></vc:create>
 <div id="component" class="middle-box text-center loginscreen animated fadeInDown">
     <vc:create name="register"></vc:create>