新账号中心个人注册获取验证码接口对接

assets/js/zh_CN.js

@@ -0,0 +1,78 @@
+!function (n, e) {
+  'object' === typeof exports && 'undefined' != typeof module ? module.exports = e() : 'function' === typeof define && define.amd ? define(e) : (n.__vee_validate_locale__zh_CN = n.__vee_validate_locale__zh_CN || {}, n.__vee_validate_locale__zh_CN.js = e())
+} (this, function () {
+  "use strict";
+  var n = {
+    name: "zh_CN", messages: {
+      after: function (n, e) {
+        return " " + n + "必须在" + e[0] + "之后"
+      }, alpha_dash: function (n) {
+        return " " + n + "能够包含字母数字字符，包括破折号、下划线"
+      }, alpha_num: function (n) {
+        return n + " 只能包含字母数字字符."
+      }, alpha_spaces: function (n) {
+        return " " + n + " 只能包含字母字符，包括空格."
+      }, alpha: function (n) {
+        return " " + n + " 只能包含字母字符."
+      }, before: function (n, e) {
+        return " " + n + " 必须在" + e[0] + " 之前."
+      }, between: function (n, e) {
+        return " " + n + " 必须在" + e[0] + " " + e[1] + "之间."
+      }, confirmed: function (n, e) {
+        return " " + n + " 不能和" + e[0] + "匹配."
+      }, date_between: function (n, e) {
+        return " " + n + "必须在" + e[0] + "和" + e[1] + "之间."
+      }, date_format: function (n, e) {
+        return " " + n + "必须在在" + e[0] + "格式中."
+      }, decimal: function (n, e) {
+        void 0 === e && (e = []);
+        var t = e[0];
+        return void 0 === t && (t = "*"), " " + n + " 必须是数字的而且能够包含" + ("*" === t ? "" : t) + " 小数点."
+      }, digits: function (n, e) {
+        return " " + n + " 必须是数字，且精确到 " + e[0] + "数"
+      }, dimensions: function (n, e) {
+        return " " + n + "必须是 " + e[0] + " 像素到 " + e[1] + " 像素."
+      }, email: function (n) {
+        return " " + n + " 必须是有效的邮箱."
+      }, ext: function (n) {
+        return " " + n + " 必须是有效的文件."
+      }, image: function (n) {
+        return " " + n + " 必须是图片."
+      }, in: function (n) {
+        return " " + n + " 必须是一个有效值."
+      }, ip: function (n) {
+        return " " + n + " 必须是一个有效的地址."
+      }, max: function (n, e) {
+        return " " + n + " 不能大于" + e[0] + "字符."
+      }, max_value: function (n, e) {
+        return " " + n + " 必须小于或等于" + e[0] + "."
+      }, mimes: function (n) {
+        return " " + n + " 必须是有效的文件类型."
+      }, min: function (n, e) {
+        return " " + n + " 必须至少有 " + e[0] + " 字符."
+      }, min_value: function (n, e) {
+        return " " + n + " 必须大于或等于" + e[0] + "."
+      }, not_in: function (n) {
+        return " " + n + "必须是一个有效值."
+      }, numeric: function (n) {
+        return " " + n + " 只能包含数字字符."
+      }, regex: function (n) {
+        return " " + n + " 格式无效."
+      }, required: function (n) {
+        return n + " 是必须的."
+      }, size: function (n, e) {
+        return " " + n + " 必须小于 " + function (n) {
+            var e = 0 == (n = 1024 * Number(n)) ? 0 : Math.floor(Math.log(n) / Math.log(1024));
+            return 1 * (n / Math.pow(1024, e)).toFixed(2) + " " + ["Byte", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][e]
+          }(e[0]) + "."
+      }, url: function (n) {
+        return " " + n + "不是有效的url."
+      }
+    }, attributes: {}
+  };
+  if ("undefined" != typeof VeeValidate) {
+    VeeValidate.Validator.localize((e = {}, e[n.name] = n, e));
+    var e
+  }
+  return n
+});

components/change/ChangeManager.vue

@@ -0,0 +1,465 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content" v-if="activeTab == 0">
+        <div class="content-top">
+          <h3>更换管理员</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></div>
+            <!--<a href="" class="return"><img src="/images/all/return.png" alt=""/></a>-->
+          </div>
+        </div>
+        <div class="choose">
+          <div><img src="/images/all/icon01.png" alt="" class="first mob"/><span>通过验证手机</span><i class="fa fa-angle-right second"></i></div>
+          <div><img src="/images/all/icon02.png" alt="" class="first"/><span>通过验证邮箱</span><i class="fa fa-angle-right second"></i></div>
+          <div class="active"><img src="/images/all/icon03.png" alt="" class="first"/><span>通过验证密保</span><i class="fa fa-angle-right second"></i></div>
+          <div><img src="/images/all/icon04.png" alt="" class="first"/><span>通过人工申诉</span><i class="fa fa-angle-right second"></i></div>
+        </div>
+      </div>
+      <div class="content" v-if="activeTab == 1">
+        <div class="content-top">
+          <h3>更换管理员</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <span class="use">使用手机号<em>183******08</em>接收验证码</span>
+          <div class="form-group">
+            <input type="text" class="form-control msg" placeholder="短信验证码"/>
+            <span class="msg">获取验证码</span>
+            <!--<span class="msg send">已发送(54s)</span>-->
+          </div>
+          <button class="btn">下一步</button>
+        </div>
+      </div>
+      <div class="content" v-if="activeTab == 2">
+        <div class="content-top">
+          <h3>更换管理员</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <span class="use">使用电子邮箱<em>183****08@qq.com</em>进行验证，有效期7天</span>
+          <div class="warp"><button class="btn">发送验证请求</button></div>
+        </div>
+      </div>
+      <div class="content" v-if="activeTab == 3">
+        <div class="content-top">
+          <h3>更换管理员</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active step01">账号验证</span><span class="step02">输入管理员信息</span><span>更换完成</span></div>
+          </div>
+        </div>
+        <form action="">
+          <div class="form-group">
+            <input type="text" value="密保问题一？" class="answer form-control"/>
+            <ul>
+              <li>您的母亲的生日是几月几日？</li>
+              <li>您最喜欢的宠物叫什么名字？</li>
+              <li>您最喜欢的电影片名是什么？</li>
+              <li>您的学号是？</li>
+            </ul>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="答案一"/>
+          </div>
+          <div class="form-group">
+            <input type="text" value="密保问题二？" class="answer form-control"/>
+            <ul>
+              <li>您的爷爷叫什么名字？</li>
+              <li>您的配偶的生日是几月几日？</li>
+              <li>您最喜欢的歌手是谁？</li>
+              <li>您就读的小学学校全称是？</li>
+            </ul>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="答案二"/>
+          </div>
+          <button class="btn">下一步</button>
+        </form>
+      </div>
+      <div class="content" v-if="activeTab == 4">
+        <div class="content-top">
+          <h3>更换管理员</h3>
+          <div class="step">
+            <img src="/images/all/step02.png" alt=""/>
+            <div class="step-item"><span class="active step01">账号验证</span><span class="active step02">输入管理员信息</span><span>更换完成</span></div>
+          </div>
+        </div>
+        <form action="">
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="新管理员手机号"/>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control msg" placeholder="短信验证码"/>
+            <span class="msg">获取验证码</span>
+            <!--<span class="msg send">已发送(54s)</span>-->
+          </div>
+          <div class="form-group">
+            <textarea type="text" class="form-control describe" placeholder="申诉说明"></textarea>
+            <span class="describe">请描述您申诉的原因，并尽可能多地列举出证明此企业账号为您所有的证据</span>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="姓名"/>
+          </div>
+          <button class="btn" style="margin-top: 95px;">提交</button>
+        </form>
+      </div>
+      <div class="content" v-if="activeTab == 5">
+        <div class="content-top">
+          <h3>更换管理员</h3>
+          <div class="step">
+            <img src="/images/all/step03.png" alt=""/>
+            <div class="step-item"><span class="active step01">账号验证</span><span class="active step02">输入管理员信息</span><span class="active">更换完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
+          <span>恭喜您，企业管理员已更换完毕！</span>
+          <div class="close-btn">关闭</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'change',
+    data () {
+      return {
+        activeTab: 4
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    padding-bottom: 145px;
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+  .container{
+    padding-top: 50px;
+    margin: 0 auto;
+    width: 980px;
+    text-align: center;
+  .content{
+    padding: 0 50px;
+    margin: 50px auto 0;
+    width: 100%;
+    /*height: 540px;*/
+    text-align: center;
+    background: #fff;
+  .content-top{
+    height: 80px;
+    line-height: 80px;
+  h3{
+    margin-bottom: 0;
+    font-size: 24px;
+    color: #000;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .step{
+    position: relative;
+    margin-top: 10px;
+  img{
+    width: 315px;
+    height: 46px;
+  }
+  .step-item{
+    position: absolute;
+    top: 45px;
+    left: 265px;
+  span{
+    margin-right: 85px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  span.step01{
+    margin-right: 65px;
+  }
+  span.step02{
+    margin-right: 65px;
+  }
+  }
+  }
+  }
+  form {
+    padding-bottom: 44px;
+    margin-top: 152px;
+  .form-group{
+    position: relative;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    color: #5a5a5a;
+    background: #f4f4f4;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  span.msg.send{
+    background: #d2d2d2;
+    color: #fff;
+  }
+  textarea.describe {
+    float: left;
+    padding: 10px 0 0 18px;
+    margin-bottom: 16px;
+    height: 120px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.describe {
+    position: absolute;
+    top: 10px;
+    right: -250px;
+    width: 240px;
+    line-height: 21px;
+    text-align: left;
+    font-size: 13px;
+    color: #8c8c8c;
+  }
+  img.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  input.answer {
+    background: url("/images/all/more.png") no-repeat 325px center;
+    cursor: pointer;
+  }
+  ul{
+    display: none;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    width: 360px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    z-index: 10;
+  li{
+    padding-left: 18px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+  &:hover{
+     background: #0076ad;
+     color: #fff;
+   }
+  }
+  }
+  span.tip{
+    position: absolute;
+    top: 0;
+    right: -238px;
+    font-size: 13px;
+    color: #8c8c8c;
+  a{
+    font-size: 13px;
+    color: #0076ad;
+  }
+  }
+  i{
+    position: absolute;
+    top: 13px;
+    left: 20px;
+    font-size: 20px;
+    color: #a0a0a0;
+  }
+  }
+  .btn {
+    margin: 34px 0 16px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 4px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .forms{
+    margin-top: 37px;
+  }
+  .content-bottom{
+    margin: 155px auto 0;
+    padding-bottom: 50px;
+    width: 360px;
+  div.warp{
+    padding-bottom: 65px;
+  }
+  p{
+    font-size: 24px;
+    color: #323232;
+  img{
+    margin-right: 20px;
+    width: 30px;
+    height: 28px;
+  }
+  }
+  p.pass{
+    font-size: 24px;
+    color: #e77405;
+  img{
+    height: 30px;
+  }
+  }
+  p.passed {
+    color: #2ab300;
+  img{
+    height: 30px;
+  }
+  }
+  span{
+    display: inline-block;
+    margin: 15px 0 140px 0;
+    font-size: 14px;
+    color: #8b8b8b;
+  }
+  .close-btn{
+    margin: 0 auto;
+    width: 200px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    text-align: center;
+    color: #323232;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    cursor: pointer ;
+  }
+  span.use{
+    display: inline-block;
+    margin-bottom: 30px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    text-align: left;
+  em{
+    font-size: 14px;
+    font-style: normal;
+    color: #000;
+  }
+  }
+  .btn {
+    margin: 34px 0 10px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 4px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .choose{
+    margin: 155px auto 0;
+    padding-bottom: 44px;
+  div{
+    padding: 0 15px;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    overflow: hidden;
+    border: 1px solid #d2d2d2;
+    cursor: pointer;
+  &:hover,&.active{
+             border-color: #0076ad;
+  span{
+    color: #0076ad;
+  }
+  i.second {
+    color: #0076ad;
+  }
+  }
+  img.first{
+    float: left;
+    margin: 24px 20px 0 0;
+    font-size: 20px;
+    color: #323232;
+  }
+  img.first.mob{
+    margin: 22px 20px 0 5px;
+    font-size: 28px;
+  }
+  i.second {
+    float: right;
+    margin: 20px 0 0 5px;
+    font-size: 20px;
+    color: #323232;
+  }
+  span{
+    float: left;
+    font-size: 14px;
+    color: #323232;
+  }
+  }
+  }
+  a.return{
+    position: absolute;
+    left: 0;
+    top: -15px;
+  img{
+    width: 34px !important;
+    height: 34px !important;
+  }
+  }
+  }
+  }
+  }
+</style>

components/default/LoginHeader.vue

@@ -0,0 +1,60 @@
+<template>
+  <nav class="x-navbar">
+    <div class="container">
+      <div class="navbar-header">
+        <input type="hidden" name="iconUrl" value="/static/img/icon_mall_index.png">
+
+        <a class="navbar-brand" href="https://www.usoftmall.com/">
+          欢迎登录
+        </a>
+
+      </div>
+      <div class="collapse navbar-collapse navbar-right">
+        <a href="http://www.ubtob.com">优软云首页</a> <a href="http://uas.ubtob.com/serve#/">帮助</a>
+      </div>
+    </div>
+  </nav>
+</template>
+<script>
+  export default {
+    name: 'LoginHeader',
+    data () {
+      return {}
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/mixins';
+  @import '~assets/scss/variables';
+  .x-navbar{
+    height: 80px;
+    line-height: 80px;
+    margin: 0;
+    .container{
+      position: relative;
+      width: 990px!important;
+      a.navbar-brand{
+        padding: 0 0 0 85px;
+        height: inherit;
+        line-height: inherit;
+        font-family: "\5FAE\8F6F\96C5\9ED1";
+        font-size: 24px;
+        font-weight: 400;
+        color: #888;
+        background: url(/images/all/icon_brand.png) left center no-repeat;
+      }
+      .collapse{
+        a{
+          padding-left: 12px;
+          margin-right: 10px;
+          color: #666;
+          outline: 0;
+          border-left: 1px solid #ddd;
+          &:first-child{
+             border-width: 0;
+           }
+        }
+      }
+    }
+  }
+</style>

components/login/Footer.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="navbar navbar-static-bottom x-footer">
+    <div class="container">
+      <div class="x-about text-center">
+        <ul class="list-inline">
+          <li><a href="#">关于优软</a></li>
+          <li><a href="#">法律声明</a></li>
+          <li><a href="#">服务条款 </a></li>
+        </ul>
+        <ul class="list-inline">
+          <li><a href="http://www.ubtob.com">优软云首页 </a></li>
+          <li><a href="http://mall.ubtob.com">优软商城 </a></li>
+          <li><a href="http://finance.ubtob.com">金融服务 </a></li>
+          <li><a href="http://public.ubtob.com">公共服务 </a></li>
+          <li><a href="http://open.ubtob.com">开放平台 </a></li>
+          <li><a href="http://help.ubtob.com">客服中心 </a></li>
+        </ul>
+        <p class="x-text-muted x-copyright">©&nbsp;2015&nbsp;深圳市优软科技有限公司&nbsp;版权所有&nbsp;粤ICP备15112126号-1</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'footer'
+  }
+</script>
+<style lang="scss" scoped>
+.navbar{
+  padding: 30px 0;
+  .container{
+    position: relative;
+    width: 990px!important;
+    a{
+      color: #666;
+      outline: 0;
+    }
+    .x-text-muted {
+      color: #b9b9b7;
+    }
+  }
+}
+</style>

components/login/Login.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="x-container">
+    <!-- background slider -->
+    <div class="x-banner-wrap">
+      <div class="x-banner">
+        <ul class="list-unstyled">
+          <li>
+            <a>
+              <div class="inner">
+                <div class="x-title x-text-0"></div>
+                <div class="x-subtitle x-text-0"></div>
+                <div class="x-btn-group">
+                </div>
+              </div>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="x-login-wrap">
+      <div class="x-login">
+        <!-- user & pwd login wrap -->
+        <div id="form-wrap" class="x-login-form" autocomplete="on">
+          <form name="loginForm">
+            <input type="hidden" name="appId" value="home">
+            <input type="hidden" name="returnUrl" value="https%3A%2F%2Fwww.ubtob.com%2F">
+            <input type="hidden" name="spaceId" value="">
+            <input type="hidden" name="baseUrl" value="">
+            <div class="form-group">
+              <div class="x-has-feedback-left">
+                <input type="text" class="form-control x-input" autocomplete="on" placeholder="手机号/邮箱/账号ID" name="username" required="">
+                <i class="fa fa-user"></i>
+              </div>
+            </div>
+            <div class="form-group" style="position: relative">
+              <div class="x-has-feedback-left">
+                <input type="password" class="form-control x-input" id="password" placeholder="密码" name="password" required="">
+                <i class="fa fa-lock"></i>
+              </div>
+              <i class="fa fa-keyboard-o" aria-hidden="true"></i>
+            </div>
+            <div class="form-group" id="captchaForm" style="display: none">
+              <input type="text" id="captcha" name="captcha" class="text" maxlength="10" required="">
+              <img id="captchaImage" src="sso/checkcode/login">
+              <a id="changeCode" href="javascript:void(0)">看不清换一张</a>
+            </div>
+            <div class="form-group">
+              <div class="x-has-feedback-left" style="display: inline-block"></div>
+              <div class="x-has-feedback-right">
+                <a href="user/pwd?appId=home&amp;returnURL=https%3A%2F%2Fwww.ubtob.com%2F">忘记密码？</a>
+              </div>
+            </div>
+            <button class="btn x-btn x-btn-primary btn-block x-btn-submit" type="button">登录</button>
+          </form>
+          <div class="warn-text-area">
+            为确保您账户的安全及正常使用，依《网络安全法》相关要求，6月1日起会员账户需绑定手机、设置密码保护。感谢您的理解和支持！
+          </div>
+          <div style="text-align: right;">
+            <a style="color: #5078cb;" href="sso/register_mall?appId=home&amp;returnURL=https%3A%2F%2Fwww.ubtob.com%2F">
+              <i class="fa fa-arrow-circle-o-right"></i>免费注册</a>
+          </div>
+        </div>
+        <!-- qrcode login wrap -->
+        <div id="qrcode-wrap" class="x-login-qrcode">
+          <div class="x-qrcode-help">
+            <span>打开手机客户端，扫描下面的二维码</span>
+          </div>
+          <div class="x-qrcode-img">
+            <img src="static/img/demo/qrcode.jpg?_v=1515216523548">
+          </div>
+          <div class="x-qrcode-ex">
+            <ul class="list-unstyled list-inline">
+              <li><i class="iconfont icon-left icon-input"></i><span>免输入</span></li>
+              <li><i class="iconfont icon-left icon-fast"></i><span>更快捷</span></li>
+              <li><i class="iconfont icon-left icon-safe"></i><span>更安全</span></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'login'
+  }
+</script>
+<style lang="scss" scoped>
+  .x-container{
+    position: relative;
+    height: 475px;
+    .x-banner-wrap {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 475px;
+      .x-banner {
+        position: relative;
+        overflow: auto;
+        height: 475px;
+        text-align: center;
+        li{
+          width: 100%;
+          height: 475px;
+          background: url(/images/all/banner.jpg) center center / auto 100% no-repeat rgb(202, 202, 214);
+        }
+      }
+    }
+    .x-login-wrap{
+      position: absolute;
+      top: 10px;
+      right: 50%;
+      margin-right: -495px;
+      height: 475px;
+      z-index: 5;
+      .x-login {
+        position: relative;
+        top: 40px;
+        width: 346px;
+        background: #fff;
+        overflow: visible;
+        z-index: 4;
+        .x-login-form, .x-login-qrcode {
+          padding: 20px;
+          .btn{
+            background: #5078cb;
+            color: #fff;
+            font-weight: 700;
+            letter-spacing: 4px;
+            border-radius: 0;
+          }
+          .x-has-feedback-right {
+            float: right;
+            display: inline-block;
+            a{
+              color: #5078cb;
+            }
+          }
+          .x-has-feedback-left {
+            position: relative;
+            .x-input {
+              padding-left: 30px;
+              line-height: 18px;
+              color: #555;
+              border-color: #ccc;
+              border-radius: 0;
+              box-shadow: none;
+            }
+            i.fa{
+              position: absolute;
+              top: 2px;
+              left: 0;
+              z-index: 2;
+              display: block;
+              width: 30px;
+              height: 34px;
+              line-height: 34px;
+              text-align: center;
+              pointer-events: none;
+              color: #999;
+              font-size: 18px;
+            }
+          }
+          i.fa-keyboard-o{
+            position: absolute;
+            right: 10px;
+            top: 10px;
+          }
+          i.fa-arrow-circle-o-right{
+            margin-right: 5px;
+            font-size: 14px;
+            color: #5078cb;
+          }
+          .warn-text-area{
+            margin-top: 5px;
+            font-size: 13px;
+            color: #000;
+          }
+        }
+        .x-login-qrcode{
+          display: none;
+        }
+      }
+    }
+  }
+</style>

components/login/index.js

@@ -0,0 +1,4 @@
+import Login from './Login.vue'
+import Footer from './Footer.vue'
+
+export { Login, Footer }

components/register/PersonalRegistration.vue

@@ -8,14 +8,14 @@
         <form action="" @submit.prevent="validateBeforeSubmit">
           <div class="form-group">
             <input type="text" name="vipName"
-                   v-validate="'required|vipName'"
-                   :class="{'input': true, 'is-danger': errors.has('name') }"
-                   v-model="item.vipName" class="form-control" placeholder="会员名" />
-            <i v-show="errors.has('vipName')" class="fa fa-warning"></i>
+                  v-validate="'required|vipName'"
+                  :class="{'input': true, 'is-danger': errors.has('name') }"
+                  v-model="item.vipName" class="form-control" placeholder="会员名" />
             <span v-show="errors.has('vipName')" class="help is-danger">{{errors.first('vipName')}}</span>
           </div>
           <div class="form-group">
-            <input type="password" class="form-control" placeholder="登录密码" v-model="item.password" />
+            <input type="password" name="password"
+                   v-model="item.password" class="form-control" placeholder="登录密码" />
             <!--<i class="fa fa-keyboard-o" aria-hidden="true"></i>-->
             <!--<div class="pwd sm">密码强度 <em></em><em></em><em></em><span>弱</span></div>-->
             <!--<div class="pwd md">密码强度 <em></em><em></em><em></em><span>中</span></div>-->
@@ -31,10 +31,11 @@
           </div>
           <div class="form-group">
             <input type="text" class="form-control msg" placeholder="短信验证码" v-model="item.code"/>
-            <span class="msg">获取验证码</span>
-            <!--<span class="msg send">已发送(54s)</span>-->
+            <button class="msg" v-show="sendPersonalCode" @click="getCheckCode" :disabled="!item.mobile">获取验证码</button>
+            <span class="msg send" v-show="!sendPersonalCode" >已发送({{personal_time}}s)</span>
           </div>
-          <a class="submitBtn"  @click="registerNow(true, $event)" type="submit">完成注册</a>
+          <button @click="registerNow(true, $event)" class="submitBtn" type="submit"
+                  :disabled="!item.vipName || !item.password || !item.confirm || !item.mobile || !item.code">完成注册</button>
           <div class="form-group agree">
             <input type="checkbox"/>
             <span class="agree">我已阅读并同意 <a href="">《优软云服务条款》</a></span>
@@ -53,18 +54,24 @@
       return {
         item: {
           vipName: '',
+          msgName: '',
           password: '',
           confirm: '',
           mobile: ''
-        }
+        },
+        btnDisabled: false,
+        sendPersonalCode: true,
+        personal_time: 0
       }
+    },
+    computed: {
+
     },
     methods: {
       validateBeforeSubmit () {
         this.$validator.validateAll().then((result) => {
           if (result) {
-            // eslint-disable-next-line
-            alert('From Submitted!')
+            console.log(result)
             return
           }
           alert('Correct them errors!')
@@ -83,6 +90,25 @@
             token: this.item.token
           }])
         }
+      },
+//      获取验证码
+      async getCode (params) {
+        let { data } = await this.$http.get(`/sso/personal/register/checkCode`, { params })
+        console.log(data)
+        this.$store.commit('register/checkPersonalCode/GET_PERSONAL_CODE_SUCCESS', data)
+      },
+      getCheckCode () {
+        this.getCode()
+        this.$message.info('验证码已经发送到您的手机，请注意查收')
+        this.sendPersonalCode = false
+        this.personal_time = 60
+        var personalTime = setInterval(() => {
+          this.personal_time--
+          if (this.personal_time <= 0) {
+            this.sendPersonalCode = true
+            clearInterval(personalTime)
+          }
+        }, 1000)
       }
     }
   }
@@ -132,6 +158,13 @@
               color: #000;
               border-radius: 0;
             }
+            span.help{
+              position: absolute;
+              right: -230px;
+              top:0;
+              font-size: 12px;
+              color: #f00;
+            }
             i.fa{
               position: absolute;
               top: 10px;
@@ -203,7 +236,7 @@
               float: left;
               width: 210px;
             }
-            span.msg{
+            button.msg{
               float: right;
               width: 130px;
               height: 44px;
@@ -213,10 +246,20 @@
               background: #f4f4f4;
               border: 1px solid #dcdcdc;
               cursor: pointer;
+              &:disabled{
+                cursor: not-allowed ;
+                opacity: .7;
+               }
             }
             span.msg.send{
+              float: right;
+              width: 130px;
+              height: 44px;
+              line-height: 44px;
+              font-size: 14px;
               background: #d2d2d2;
               color: #fff;
+              border: 1px solid #dcdcdc;
             }
             input[type='checkbox']{
               margin: 0 14px 0 55px;
@@ -247,6 +290,11 @@
             color: #fff;
             background: #0076AD;
             border-radius: 3px;
+            border: none;
+            &:disabled{
+              cursor: not-allowed ;
+              opacity: .7;
+             }
           }
         }
       }

components/reset/ResetPassword.vue

@@ -0,0 +1,490 @@
+<template>
+  <div class="validation">
+    <div class="container">
+      <div class="content" v-if="activeTab == 0">
+        <div class="content-top">
+          <h3>密码重置</h3>
+        </div>
+        <form action="" class="forms">
+          <div class="form-group">
+            <input type="text"  class="form-control" placeholder="原手机号"/>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control msg" placeholder="验证码"/>
+            <img src="/images/all/ide.png" class="msg"/>
+          </div>
+          <button class="btn">下一步</button>
+        </form>
+      </div>
+      <div class="content" v-if="activeTab == 1">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span>密码设置</span><span>设置完成</span></div>
+            <!--<a href="" class="return"><img src="/images/all/return.png" alt=""/></a>-->
+          </div>
+        </div>
+        <div class="choose">
+          <div class="active"><img src="/images/all/icon03.png" alt="" class="first"/><span>通过登录密码</span><i class="fa fa-angle-right second"></i></div>
+          <div><img src="/images/all/icon01.png" alt="" class="first mob"/><span>通过验证手机</span><i class="fa fa-angle-right second"></i></div>
+          <div><img src="/images/all/icon02.png" alt="" class="first"/><span>通过验证邮箱</span><i class="fa fa-angle-right second"></i></div>
+          <div><img src="/images/all/icon04.png" alt="" class="first"/><span>通过人工申诉</span><i class="fa fa-angle-right second"></i></div>
+        </div>
+      </div>
+      <div class="content" v-if="activeTab == 2">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span>密码设置</span><span>设置完成</span></div>
+            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
+          </div>
+        </div>
+        <form action="">
+          <div class="form-group">
+            <input type="text"  class="form-control" placeholder="请输入当前密码"/>
+          </div>
+          <button class="btn">下一步</button>
+        </form>
+      </div>
+      <div class="content" v-if="activeTab == 3">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span>密码设置</span><span>设置完成</span></div>
+            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <span class="use">使用手机号<em>183******08</em>接收验证码</span>
+          <div class="form-group">
+            <input type="text" class="form-control msg" placeholder="短信验证码"/>
+            <span class="msg">获取验证码</span>
+            <!--<span class="msg send">已发送(54s)</span>-->
+          </div>
+          <button class="btn">下一步</button>
+        </div>
+      </div>
+      <div class="content" v-if="activeTab == 4">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span class="active">密码设置</span><span>设置完成</span></div>
+            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <span class="use">使用电子邮箱<em>183****08@qq.com</em>进行验证，有效期7天</span>
+          <div class="warp"><button class="btn">发送验证请求</button></div>
+        </div>
+      </div>
+      <div class="content" v-if="activeTab == 5">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step01.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span>密码设置</span><span>设置完成</span></div>
+            <a href="" class="return"><img src="/images/all/return.png" alt=""/></a>
+          </div>
+        </div>
+        <form action="">
+          <div class="form-group">
+            <input type="text" value="问题一" class="answer form-control"/>
+            <ul>
+              <li>您的母亲的生日是几月几日？</li>
+              <li>您最喜欢的宠物叫什么名字？</li>
+              <li>您最喜欢的电影片名是什么？</li>
+              <li>您的学号是？</li>
+            </ul>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="答案一"/>
+          </div>
+          <div class="form-group">
+            <input type="text" value="问题一" class="answer form-control"/>
+            <ul>
+              <li>您的爷爷叫什么名字？</li>
+              <li>您的配偶的生日是几月几日？</li>
+              <li>您最喜欢的歌手是谁？</li>
+              <li>您就读的小学学校全称是？</li>
+            </ul>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="答案二"/>
+          </div>
+          <button class="btn">提交</button>
+        </form>
+      </div>
+      <div class="content" v-if="activeTab == 6">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step02.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span class="active">密码设置</span><span>设置完成</span></div>
+          </div>
+        </div>
+        <form action="">
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="新密码"/>
+          </div>
+          <div class="form-group">
+            <input type="text" class="form-control" placeholder="确认密码"/>
+          </div>
+          <button class="btn">下一步</button>
+        </form>
+      </div>
+      <div class="content" v-if="activeTab == 7">
+        <div class="content-top">
+          <h3>密码重置</h3>
+          <div class="step">
+            <img src="/images/all/step03.png" alt=""/>
+            <div class="step-item"><span class="active">账号验证</span><span class="active">密码设置</span><span class="active">设置完成</span></div>
+          </div>
+        </div>
+        <div class="content-bottom">
+          <p class="passed"><img src="/images/all/pass.png" alt=""/>设置成功</p>
+          <span>请妥善保管好自己的密码，保障自身的利益！</span>
+          <div class="close-btn">关闭</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'reset',
+    data () {
+      return {
+        activeTab: 1
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .validation {
+    padding-bottom: 145px;
+    margin: 0 auto;
+    width: 100%;
+    background: #eee;
+  .container{
+    padding-top: 50px;
+    margin: 0 auto;
+    width: 980px;
+    text-align: center;
+  .content{
+    padding: 0 50px;
+    margin: 50px auto 0;
+    width: 100%;
+    /*height: 540px;*/
+    text-align: center;
+    background: #fff;
+  .content-top{
+    height: 80px;
+    line-height: 80px;
+  h3{
+    margin-bottom: 0;
+    font-size: 24px;
+    color: #000;
+    border-bottom: 1px solid #dcdcdc;
+  }
+  .step{
+    position: relative;
+    margin-top: 10px;
+  img{
+    width: 315px;
+    height: 46px;
+  }
+  .step-item{
+    position: absolute;
+    top: 45px;
+    left: 265px;
+  span{
+    margin-right: 85px;
+    font-size: 14px;
+    color: #b4b4b4;
+  }
+  span.active {
+    color: #0076ad;
+  }
+  }
+  }
+  }
+  form {
+    padding-bottom: 44px;
+    margin-top: 152px;
+  .form-group{
+    position: relative;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  img.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  input.answer {
+    background: url("/images/all/more.png") no-repeat 325px center;
+    cursor: pointer;
+  }
+  ul{
+    display: none;
+    position: absolute;
+    top: 44px;
+    left: 0;
+    width: 360px;
+    background: #fff;
+    box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -moz-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -o-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.5);
+    z-index: 10;
+  li{
+    padding-left: 18px;
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+    text-align: left;
+    font-size: 14px;
+    color: #000;
+    cursor: pointer;
+  &:hover{
+     background: #0076ad;
+     color: #fff;
+   }
+  }
+  }
+  span.tip{
+    position: absolute;
+    top: 0;
+    right: -238px;
+    font-size: 13px;
+    color: #8c8c8c;
+  a{
+    font-size: 13px;
+    color: #0076ad;
+  }
+  }
+  i{
+    position: absolute;
+    top: 13px;
+    left: 20px;
+    font-size: 20px;
+    color: #a0a0a0;
+  }
+  }
+  .btn {
+    margin: 34px 0 16px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 4px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .forms{
+    margin-top: 37px;
+  }
+  .content-bottom{
+    margin: 155px auto 0;
+    padding-bottom: 50px;
+    width: 360px;
+  div.warp{
+    padding-bottom: 65px;
+  }
+  p{
+    font-size: 24px;
+    color: #323232;
+  img{
+    margin-right: 20px;
+    width: 30px;
+    height: 28px;
+  }
+  }
+  p.pass{
+    font-size: 24px;
+    color: #e77405;
+  img{
+    height: 30px;
+  }
+  }
+  p.passed {
+    color: #2ab300;
+  img{
+    height: 30px;
+  }
+  }
+  span{
+    display: inline-block;
+    margin: 15px 0 140px 0;
+    font-size: 14px;
+    color: #8b8b8b;
+  }
+  .close-btn{
+    margin: 0 auto;
+    width: 200px;
+    height: 36px;
+    line-height: 36px;
+    font-size: 14px;
+    text-align: center;
+    color: #323232;
+    border: 1px solid #d2d2d2;
+    border-radius: 3px;
+    cursor: pointer ;
+  }
+  span.use{
+    display: inline-block;
+    margin-bottom: 30px;
+    width: 360px;
+    font-size: 14px;
+    color: #000;
+    text-align: left;
+  em{
+    font-size: 14px;
+    font-style: normal;
+    color: #000;
+  }
+  }
+  .form-group {
+    margin: 0 auto 16px;
+    position: relative;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+  input{
+    padding: 0 0 0 18px;
+    width: 360px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  input.msg{
+    float: left;
+    width: 210px;
+    padding: 0 0 0 18px;
+    height: 44px;
+    line-height: 44px;
+    font-size: 14px;
+    color: #000;
+    border-radius: 0;
+  }
+  span.msg{
+    float: right;
+    margin: 0;
+    width: 130px;
+    height: 44px;
+    line-height: 44px;
+    text-align: center ;
+    font-size: 14px;
+    color: #5a5a5a;
+    background: #f4f4f4;
+    border: 1px solid #dcdcdc;
+    cursor: pointer;
+  }
+  span.msg.send{
+    background: #d2d2d2;
+    color: #fff;
+  }
+  }
+  .btn {
+    margin: 34px 0 10px 0;
+    width: 360px;
+    height: 44px;
+    line-height: 4px;
+    font-size: 16px;
+    color: #fff;
+    background: #0076AD;
+    border-radius: 3px;
+  }
+  }
+  .choose{
+    margin: 155px auto 0;
+    padding-bottom: 44px;
+  div{
+    padding: 0 15px;
+    margin: 0 auto 16px;
+    width: 360px;
+    height: 60px;
+    line-height: 60px;
+    text-align: left;
+    overflow: hidden;
+    border: 1px solid #d2d2d2;
+    cursor: pointer;
+  &:hover,&.active{
+             border-color: #0076ad;
+  span{
+    color: #0076ad;
+  }
+  i.second {
+    color: #0076ad;
+  }
+  }
+  img.first{
+    float: left;
+    margin: 24px 20px 0 0;
+    font-size: 20px;
+    color: #323232;
+  }
+  img.first.mob{
+    margin: 22px 20px 0 5px;
+    font-size: 28px;
+  }
+  i.second {
+    float: right;
+    margin: 20px 0 0 5px;
+    font-size: 20px;
+    color: #323232;
+  }
+  span{
+    float: left;
+    font-size: 14px;
+    color: #323232;
+  }
+  }
+  }
+  a.return{
+    position: absolute;
+    left: 0;
+    top: -15px;
+  img{
+    width: 34px !important;
+    height: 34px !important;
+  }
+  }
+  }
+  }
+  }
+</style>

components/reset/index.js

@@ -0,0 +1,3 @@
+import ResetPassword from './ResetPassword.vue'
+
+export { ResetPassword }

nuxt.config.js

@@ -95,7 +95,7 @@ module.exports = {
     ssr: false
   }, {
     src: '~plugins/vee-validate.js',
-    ssr: false
+    ssr: true
   }],
   /* TODO 暂时代理到商城测试版，之后再做出调整 */
   proxyTable: ['/api/**', '/login/**', '/user**', '/logout**', '/sso/**']

package.json

@@ -19,6 +19,7 @@
     "v-vuerify-next": "^0.2.0",
     "vee-validate": "^2.0.0",
     "vue-awesome-swiper": "^2.5.4",
+    "vue-i18n": "^7.3.4",
     "vue2-filters": "^0.1.9",
     "vuerify": "^0.4.0"
   },

pages/change/changeManager.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <accountCenter-header/>
+    <change-manager/>
+  </div>
+</template>
+<script>
+  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
+  import ChangeManager from '~components/change/ChangeManager.vue'
+  export default {
+    layout: 'default',
+    components: {
+      AccountCenterHeader,
+      ChangeManager
+    }
+  }
+</script>

pages/index.vue

@@ -1,12 +1,20 @@
 <template>
-  <div class="index">
-    111
+  <div>
+    <login-header/>
+    <login/>
+    <footer/>
   </div>
 </template>
-
 <script>
-  export default{
-    name: 'index',
-    layout: 'default'
+  import LoginHeader from '~components/default/LoginHeader.vue'
+  import Login from '~components/login/Login.vue'
+  import Footer from '~components/login/Footer.vue'
+  export default {
+    layout: 'default',
+    components: {
+      LoginHeader,
+      Login,
+      Footer
+    }
   }
 </script>

pages/register/personalRegistration.vue

@@ -12,6 +12,11 @@
     components: {
       AccountCenterHeader,
       PersonalRegistration
+    },
+    fetch ({store, route}) {
+      return Promise.all([
+
+      ])
     }
   }
 </script>

pages/reset/resetPassword.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <accountCenter-header/>
+    <reset-password/>
+  </div>
+</template>
+<script>
+  import AccountCenterHeader from '~components/default/AccountCenterHeader.vue'
+  import ResetPassword from '~components/reset/ResetPassword.vue'
+  export default {
+    layout: 'default',
+    components: {
+      AccountCenterHeader,
+      ResetPassword
+    }
+  }
+</script>

plugins/element-ui.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Message, Breadcrumb, BreadcrumbItem, Tree, Pagination, Upload, Dialog } from 'element-ui'
+import { Message, Breadcrumb, BreadcrumbItem, Tree, Pagination, Upload, Dialog, Form } from 'element-ui'
 
 Vue.use(Breadcrumb)
 Vue.use(BreadcrumbItem)
@@ -7,5 +7,6 @@ Vue.use(Tree)
 Vue.use(Pagination)
 Vue.use(Upload)
 Vue.use(Dialog)
+Vue.use(Form)
 
 Vue.prototype.$message = Message

plugins/vee-validate.js

@@ -1,4 +1,59 @@
 import Vue from 'vue'
-import VeeValidate from 'vee-validate'
+import VeeValidate, {Validator} from 'vee-validate'
+import zh from 'vee-validate/dist/locale/zh_CN'
+import VueI18n from 'vue-i18n'
 
-Vue.use(VeeValidate)
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: 'zh_CN'
+})
+
+Vue.use(VeeValidate, {
+  i18n,
+  i18nRootKey: 'validation',
+  dictionary: {
+    zh
+  }
+})
+
+// 配置中文
+// Validator.addLocale(zh)
+
+const config = {
+  locale: 'zh_CN'
+}
+
+Vue.use(VeeValidate, config)
+
+// 自定义validate
+const dictionary = {
+  zh_CN: {
+    messages: {
+      vipName: () => '用户名不能为空',
+      required: (field) => '请输入' + field
+    },
+    attributes: {
+      vipName: '会员名'
+    }
+  }
+}
+console.log('1', dictionary)
+console.log(Validator)
+
+Validator.localize('zh_CN', dictionary)
+
+// 自定义会员名验证
+Validator.extend('vipName', {
+  getMessage: field => field + '会员名不能为空',
+  validate: value => {
+    return value.length === ''
+  }
+})
+// 自定义手机验证
+Validator.extend('phone', {
+  getMessage: field => field + '必须是11位手机号码',
+  validate: value => {
+    return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
+  }
+})

server.js

@@ -3,7 +3,7 @@ const app = require('express')()
 const proxy = require('http-proxy-middleware')
 const cookiejar = require('cookiejar')
 const host = process.env.HOST || '127.0.0.1'
-const port = process.env.PORT || 3000
+const port = process.env.PORT || 3001
 process.noDeprecation = true
 
 app.set('port', port)

store/register.js

@@ -3,12 +3,22 @@ import axios from '~plugins/axios'
 export const actions = {
   // 个人注册
   PersonalRegister ({ commit }, params = {}) {
-    commit('PersonalRegister/REQUEST_PERSONAL', params)
+    commit('personalRegister/REQUEST_PERSONAL', params)
     return axios.post(`/sso/personal/register`, {params})
       .then(response => {
-        commit('PersonalRegister/GET_PERSONAL_SUCCESS', response.data)
+        commit('personalRegister/GET_PERSONAL_SUCCESS', response.data)
       }, err => {
-        commit('PersonalRegister/GET_PERSONAL_FAILURE', err)
+        commit('personalRegister/GET_PERSONAL_FAILURE', err)
+      })
+  },
+  // 获取校验码
+  getCheckCode ({ commit }, params = {}) {
+    commit('checkCode/REQUEST_CHECK_CODE', params)
+    return axios.get(`/sso/personal/register/checkCode`, {params})
+      .then(response => {
+        commit('checkCode/GET_CHECK_CODE_SUCCESS', response.data)
+      }, err => {
+        commit('checkCode/GET_CHECK_CODE_FAILURE', err)
       })
   }
 }

store/register/checkPersonalCode.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  checkPersonalCode: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_PERSONAL_CODE (state) {
+    state.checkPersonalCode.fetching = true
+  },
+  GET_PERSONAL_CODE_FAILURE (state) {
+    state.checkPersonalCode.fetching = false
+  },
+  GET_PERSONAL_CODE_SUCCESS (state, result) {
+    state.checkPersonalCode.fetching = false
+    state.checkPersonalCode.data = result
+  }
+}

store/register/personalRegister.js

@@ -1,23 +1,19 @@
 export const state = () => ({
-  personal: {
-    fetching: false,
-    data: []
-  },
-  detail: {
+  code: {
     fetching: false,
     data: []
   }
 })
 
 export const mutations = {
-  REQUEST_PERSONAL (state) {
-    state.personal.fetching = true
+  REQUEST_CHECK_CODE (state) {
+    state.code.fetching = true
   },
-  GET_PERSONAL_FAILURE (state) {
-    state.personal.fetching = false
+  GET_CHECK_CODE_FAILURE (state) {
+    state.code.fetching = false
   },
-  GET_PERSONAL_SUCCESS (state, result) {
-    state.personal.fetching = false
-    state.personal.data = result
+  GET_CHECK_CODE_SUCCESS (state, result) {
+    state.code.fetching = false
+    state.code.data = result
   }
 }