完成手机端个人注册和企业注册

assets/scss/mobileCommon.scss

@@ -16,3 +16,9 @@
     color:#666;
   }
 }
+.page-part a.rgba{
+  color:#2d8cf0;
+  &:hover{
+    color:#f44336;
+  }
+}

components/mobile/loginMobile.vue

@@ -4,7 +4,7 @@
     <mt-field auto-complete="off" placeholder="手机号/邮箱/账号ID" v-model="login.username" @blur.native.capture="codeCount"></mt-field>
   </div>
   <div class="page-part">
-    <mt-field placeholder="密码" v-model="login.password"></mt-field>
+    <mt-field placeholder="密码" v-model="login.password" type="password"></mt-field>
   </div>
   <template v-if="showCheckCode">
     <div class="page-part">
@@ -104,19 +104,27 @@
               let count = response.data.content || ''
               if (count >= 3 && count < 5) {
                 this.showCheckCode = true
-                let _this = this
-                setTimeout(function () {
-                  _this.getCode()
-                }, 100)
                 this.$toast({
                   message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
                   iconClass: 'el-icon-warning'
                 })
+              } else if (count === 5) {
+                this.$toast({
+                  message: '密码错误次数已达上限，今日无法登陆',
+                  iconClass: 'el-icon-warning'
+                })
               }
+            } else {
+              this.$toast({
+                message: response.data.errMsg,
+                iconClass: 'el-icon-warning'
+              })
             }
-            return Promise.reject(response.data)
-          }).catch(() => {
-            this.$indicator.close()
+          }).catch(err => {
+            this.$toast({
+              message: err.errMsg,
+              iconClass: 'el-icon-warning'
+            })
           })
       },
       toLogin (flag) {
@@ -149,8 +157,25 @@
                 }
                 window.location.href = response.data.content.returnUrl || 'http://www.ubtob.com'
               }
+            } else {
+              this.login.password = ''
+              this.$toast({
+                message: response.data.errMsg,
+                iconClass: 'el-icon-error'
+              })
+              let count = response.data.errorCount
+              if (count >= 3 && count < 5) {
+                this.showCheckCode = true
+                let _this = this
+                setTimeout(function () {
+                  _this.getCode()
+                }, 100)
+                this.$toast({
+                  message: '当前已输错密码' + count + '次，若达到5次今日将无法登陆',
+                  iconClass: 'el-icon-warning'
+                })
+              }
             }
-            return Promise.reject(response.data)
           }).catch(err => {
             this.$toast({
               message: err.errMsg,

components/mobile/registerEnterprise/index.vue

@@ -4,51 +4,93 @@
       <p>企业注册</p>
       <a class="go" href="/register/personalRegistration"><i class="fa fa-long-arrow-right"></i>个人注册</a>
     </div>
-    <template v-if="step === 2">
+    <template v-if="step === 1">
       <div class="f-form">
         <div class="page-part">
-          <mt-field placeholder="手机号码" v-model="mobile"></mt-field>
+          <mt-field placeholder="手机号码"
+                    v-model="step1.mobile"
+                    :state="state.mobile"
+                    type="tel"
+                    @blur.native.capture="validateMobile"
+          ></mt-field>
         </div>
         <div class="page-part">
-          <mt-field placeholder="短信验证码" v-model="token">
-            <span class="token">获取验证码</span>
+          <mt-field auto-complete="off"
+                    placeholder="短信验证码"
+                    v-model="step1.token"
+                    :state="state.token"
+                    @blur.native.capture="validateCode">
+            <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
           </mt-field>
         </div>
       </div>
       <div class="form-btn">
         <div class="page-part">
-          <el-checkbox v-model="checked">我已阅读并同意 <a href="#">《优软云服务条款》</a></el-checkbox>
+          <el-checkbox v-model="checked">我已阅读并同意 <a href="/common/agreement" class="rgba">《优软云服务条款》</a></el-checkbox>
         </div>
-        <mt-button type="primary" size="large">验证手机</mt-button>
+        <mt-button type="primary" size="large" @click.native="checkPhone">验证手机</mt-button>
       </div>
     </template>
-    <template v-if="step === 1">
+    <template v-if="step === 2">
       <div class="f-form">
         <div class="page-part">
-          <mt-field placeholder="企业名称" v-model="step2.spaceName"></mt-field>
+          <mt-field placeholder="企业名称"
+                    v-model="step2.spaceName"
+                    :state="state.spaceName"
+                    @blur.native.capture="validateSpaceName"></mt-field>
         </div>
         <div class="page-part">
-          <mt-field placeholder="营业护照号" v-model="step2.businessCode"></mt-field>
+          <mt-field placeholder="营业护照号"
+                    v-model="step2.businessCode"
+                    :state="state.businessCode"
+                    @blur.native.capture="validateBusinessCode"></mt-field>
         </div>
-        <div class="page-part">
-          <mt-field placeholder="管理员号码" v-model="step2.vipName"></mt-field>
+        <div class="page-part" v-if="!hasRegister">
+          <mt-field placeholder="管理员号码"
+                    v-model="step2.vipName"
+                    :state="state.vipName"
+                    @blur.native.capture="validateVipName"></mt-field>
         </div>
-        <div class="page-part">
-          <mt-field placeholder="登录密码" v-model="step2.password"></mt-field>
-          <template v-if="password">
-            <p class="pwd">密码强度 <em class="sm"></em> <em class="md"></em> <em class="ld"></em> <span class="sm-span">强</span></p>
+        <div class="page-part" v-if="!hasRegister">
+          <mt-field placeholder="登录密码"
+                    :attr="{ maxlength: 20 }"
+                    v-model="step2.password"
+                    :state="state.password"
+                    type="password"
+                    @input.native="validatePassword"
+                    @blur.native.capture="validatePasswordTip"></mt-field>
+          <template v-if="step2.password">
+            <p class="pwd">密码强度 <em :class="{sm:progress === '弱', md: progress === '中', ld:progress === '强'}"></em> <em :class="{md: progress === '中', ld:progress === '强'}"></em> <em :class="{ld:progress === '强'}"></em> <span :class="{smstep:progress === '弱', mdstep: progress === '中', ldstep:progress === '强'}" v-text="progress">强</span></p>
             <p class="pwd">密码须为8-20字符的英文、数字混合</p>
           </template>
         </div>
-        <div class="page-part">
-          <mt-field placeholder="密码确认" v-model="step2.password"></mt-field>
+        <div class="page-part" v-if="hasRegister">
+          <mt-field placeholder="登录密码"
+                    v-model="step2.password"
+                    :state="state.password"
+                    type="password"
+                    @blur.native.capture="validatePasswordTipHas"></mt-field>
+          <template v-if="step2.password">
+            <p class="pwd">手机号已注册，请输入原密码</p>
+          </template>
         </div>
-        <div class="page-part">
-          <mt-field placeholder="联系邮箱" v-model="step2.email"></mt-field>
+        <div class="page-part" v-if="!hasRegister">
+          <mt-field placeholder="密码确认"
+                    v-model="step2.confirm"
+                    :state="state.confirm"
+                    type="password"
+                    @blur.native.capture="validateConfirm"></mt-field>
+        </div>
+        <div class="page-part" v-if="!hasEmail">
+          <mt-field placeholder="联系邮箱"
+                    v-model="step2.email"
+                    :state="state.email"
+                    type="email"
+                    @blur.native.capture="validateEmail"></mt-field>
         </div>
       </div>
       <div class="form-btn">
-        <mt-button type="primary" size="large">完成注册</mt-button>
+        <mt-button type="primary" size="large" @click.native="sureRegister">完成注册</mt-button>
       </div>
     </template>
   </div>
@@ -60,6 +102,16 @@
     data () {
       return {
         step: 1,
+        state: {
+          mobile: 'error',
+          token: 'error',
+          spaceName: 'error',
+          businessCode: 'error',
+          vipName: 'error',
+          password: 'error',
+          confirm: 'error',
+          email: 'error'
+        },
         step1: {
           mobile: '',
           token: ''
@@ -69,9 +121,345 @@
           businessCode: '',
           vipName: '',
           password: '',
+          confirm: '',
           email: ''
         },
-        checked: ''
+        checked: true,
+        tokenCode: '',
+        tokenTime: 60,
+        tokenText: '获取验证码',
+        hasRegister: false,
+        hasEmail: false,
+        progress: '弱'
+      }
+    },
+    methods: {
+      // 弹窗处理
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证手机号
+      validateMobile () {
+        let reg = /^1[0-9]{10}$/
+        if (!this.step1.mobile) {
+          this.downToast('请先填写手机号')
+        } else {
+          if (!reg.test(this.step1.mobile)) {
+            this.downToast('请填写正确的手机号')
+            this.state.mobile = 'warning'
+          } else {
+            this.state.mobile = 'success'
+          }
+        }
+      },
+      // 验证正确的验证码
+      validateCode () {
+        if (!this.step1.token) {
+          this.downToast('请先填写验证码')
+        } else {
+          if (!this.step1.mobile) {
+            this.downToast('请先填写正确的手机号码')
+            this.state.token = 'warning'
+          } else {
+            if (this.tokenCode) {
+              let param = new FormData()
+              param.append('mobile', this.step1.mobile)
+              param.append('token', this.tokenCode)
+              param.append('code', this.step1.token)
+              let config = {
+                headers: {'Content-Type': 'multipart/form-data'}
+              }
+              this.$http.post('/sso/personal/register/checkCode', param, config)
+                .then(response => {
+                  if (response.data.success) {
+                    this.state.token = 'success'
+                  } else {
+                    this.$toast({
+                      message: response.data.errMsg,
+                      iconClass: 'el-icon-error'
+                    })
+                  }
+                }).catch(() => {
+                  this.downToast('请检查网络是否正常或联系服务商')
+                })
+            } else {
+              this.downToast('请点击先获取验证码信息')
+              this.state.token = 'warning'
+            }
+          }
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          if (this.state.mobile !== 'success') {
+            this.downToast('请先输入正确的手机号')
+          } else {
+            this.$indicator.open('获取中...')
+            let _this = this
+            this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.step1.mobile}})
+              .then(response => {
+                this.$indicator.close()
+                if (response.data) {
+                  this.tokenCode = response.data.token
+                  this.$toast({
+                    message: '验证码已经发送到您的手机，请注意查收',
+                    iconClass: 'el-icon-success'
+                  })
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  let setTime = setInterval(() => {
+                    _this.tokenTime--
+                    this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                    if (this.tokenTime <= 0) {
+                      clearInterval(setTime)
+                      _this.tokenText = '获取验证码'
+                      _this.tokenTime = 60
+                    }
+                  }, 1000)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        }
+      },
+      // 验证手机
+      checkPhone () {
+        if (!this.state.mobile === 'success' && !this.state.token === 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else if (this.checked === false) {
+          this.downToast('您对阅读条款未做勾选')
+        } else {
+          this.$indicator.open('验证手机中...')
+          let url = window.location.search
+          let request = {}
+          if (url.indexOf('?' !== -1)) {
+            let str = url.substr(1)
+            let strs = str.split('&')
+            for (let i = 0; i < strs.length; i++) {
+              request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
+            }
+          }
+          let appId = request['appId'] || ''
+          let param = new FormData()
+          param.append('mobile', this.step1.mobile)
+          param.append('code', this.step1.token)
+          param.append('appId', appId)
+          param.append('token', this.tokenCode)
+          let config = {
+            headers: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/userspace/register/checkAdminTel', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                response.data.content.hasEmail ? this.hasEmail = true : this.hasEmail = false
+                response.data.content.hasRegister ? this.hasRegister = true : this.hasRegister = false
+                this.step = 2
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      },
+      // 验证企业名
+      validateSpaceName () {
+        if (!this.step2.spaceName) {
+          this.downToast('请填写企业名称')
+        } else {
+          if (this.step2.spaceName.length > 20) {
+            this.downToast('输入长度过长，限定20个字符以内')
+            this.state.spaceName = 'warning'
+          } else {
+            this.$http.get(`/api/userspace/checkSpaceName`, {params: {spaceName: this.step2.spaceName}})
+              .then(response => {
+                if (response.data.success) {
+                  this.state.spaceName = 'success'
+                } else {
+                  this.state.spaceName = 'warning'
+                  this.downToast(response.data.errMsg)
+                }
+              })
+          }
+        }
+      },
+      // 验证营业号
+      validateBusinessCode () {
+        let reg = /^[A-Za-z0-9]+$/
+        if (!this.step2.businessCode) {
+          this.downToast('请填写营业执照号')
+        } else {
+          if (!reg.test(this.step2.businessCode)) {
+            this.downToast('请填写正确的营业执照号')
+            this.state.businessCode = 'warning'
+          } else {
+            this.$http.get(`/api/userspace/checkBusinessCode`, {params: {businessCode: this.step2.businessCode}})
+              .then(response => {
+                if (response.data.success) {
+                  this.state.businessCode = 'success'
+                } else {
+                  this.state.businessCode = 'warning'
+                  this.downToast(response.data.errMsg)
+                }
+              })
+          }
+        }
+      },
+      // 验证管理员名
+      validateVipName () {
+        if (!this.step2.vipName) {
+          this.downToast('请填写管理员姓名')
+        } else {
+          if (this.step2.vipName.length > 20) {
+            this.downToast('输入长度请限制在20个字符以内')
+            this.state.vipName = 'warning'
+          } else {
+            this.state.vipName = 'success'
+          }
+        }
+      },
+      // 验证密码强度
+      validatePassword () {
+        let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
+        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+        let count = this.step2.password.length
+        if (count >= 20) {
+          this.downToast('密码须为8-20字符的英文、数字混合')
+        } else {
+          if (reg1.test(this.step2.password)) {
+            this.progress = '强'
+          } else if (reg2.test(this.step2.password)) {
+            this.progress = '中'
+          } else {
+            this.progress = '弱'
+          }
+        }
+      },
+      // 验证密码
+      validatePasswordTip () {
+        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+        if (!this.step2.password) {
+          this.downToast('请输入密码')
+        } else {
+          if (!reg2.test(this.step2.password)) {
+            this.downToast('密码须为8-20字符的英文、数字混合')
+            this.state.password = 'warning'
+          } else {
+            this.state.password = 'success'
+          }
+        }
+      },
+      // 验证密码
+      validatePasswordTipHas () {
+        if (!this.step2.password) {
+          this.downToast('请输入密码')
+        } else {
+          this.state.password = 'success'
+        }
+      },
+      // 验证二次密码
+      validateConfirm () {
+        if (!this.step2.confirm) {
+          this.downToast('请再次输入密码')
+        } else {
+          if (this.step2.confirm === this.step2.password) {
+            this.state.confirm = 'success'
+          } else {
+            this.state.confirm = 'warning'
+            this.downToast('两次输入密码不一致，请重新输入')
+          }
+        }
+      },
+      // 验证邮箱
+      validateEmail () {
+        let reg = /^([\w-])+(\.\w+)*@([\w-])+((\.\w{2,3}){1,3})$/
+        if (!this.step2.email) {
+          this.downToast('请填写联系邮箱信息')
+        } else {
+          if (!reg.test(this.step2.email)) {
+            this.downToast('请输入正确的邮箱地址格式')
+            this.state.email = 'warning'
+          } else {
+            this.state.email = 'success'
+          }
+        }
+      },
+      // 注册请求方法
+      sbmitRegister () {
+        this.$indicator.open('注册中...')
+        let url = window.location.search
+        let request = {}
+        if (url.indexOf('?' !== -1)) {
+          let str = url.substr(1)
+          let strs = str.split('&')
+          for (let i = 0; i < strs.length; i++) {
+            request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
+          }
+        }
+        let appId = request['appId'] || ''
+        let param = new FormData()
+        param.append('spaceName', this.step2.spaceName)
+        param.append('businessCode', this.step2.businessCode)
+        param.append('vipName', this.step2.vipName || '')
+        param.append('password', this.step2.password)
+        param.append('email', this.step2.email || '')
+        param.append('appId', appId)
+        let config = {
+          headers: {'Content-Type': 'multipart/form-data'}
+        }
+        this.$http.post('/sso/userspace/register', param, config)
+          .then(response => {
+            this.$indicator.close()
+            if (response.data.success) {
+              window.location.href = '/overRegister/overEnterprise'
+            } else {
+              this.downToast(response.data.errMsg)
+            }
+          }).catch(() => {
+            this.$indicator.close()
+            this.downToast('请检查网络是否正常或联系服务商')
+          })
+      },
+      // 企业注册
+      sureRegister () {
+        if (!this.hasRegister) {
+          if (!this.state.spaceName === 'success' &&
+            !this.state.businessCode === 'success' &&
+            !this.state.vipName === 'success' &&
+            !this.state.password === 'success' &&
+            !this.state.confirm === 'success' &&
+            !this.state.email === 'success') {
+            this.downToast('请确认填写部分是否有误')
+          } else {
+            this.sbmitRegister()
+          }
+        } else {
+          if (!this.hasEmail) {
+            if (!this.state.spaceName === 'success' &&
+              !this.state.businessCode === 'success' &&
+              !this.state.password === 'success' &&
+              !this.state.email === 'success') {
+              this.downToast('请确认填写部分是否有误')
+            } else {
+              this.sbmitRegister()
+            }
+          } else {
+            if (!this.state.spaceName === 'success' &&
+              !this.state.businessCode === 'success' &&
+              !this.state.password === 'success') {
+              this.downToast('请确认填写部分是否有误')
+            } else {
+              this.sbmitRegister()
+            }
+          }
+        }
       }
     }
   }
@@ -115,15 +503,17 @@
         .sm{background:#ff4e00}
         .md{background: #22ac38}
         .ld{background: #00a0e9}
-        .sm-span{color:#ff4e00}
-        .md-span{color: #22ac38}
-        .ld-span{color: #00a0e9}
+        .smstep{color:#ff4e00}
+        .mdstep{color: #22ac38}
+        .ldstep{color: #00a0e9}
       }
       .token{
         display:inline-block;
         padding: 0 .5rem;
         text-align: center;
         border-left:1px solid #b5b5b5;
+        color:#2d8cf0;
+        margin-left: .1rem;
       }
     }
   }

components/mobile/registerPersonal/index.vue

@@ -6,32 +6,52 @@
     </div>
     <div class="f-form">
       <div class="page-part">
-        <mt-field placeholder="会员名" v-model="vipName"></mt-field>
+        <mt-field :state="state.vipName"
+                  placeholder="会员名"
+                  v-model="vipName"
+                  @blur.native.capture="codeVipName" ></mt-field>
       </div>
       <div class="page-part">
-        <mt-field placeholder="密码" v-model="password"></mt-field>
+        <mt-field :state="state.password"
+                  placeholder="密码"
+                  v-model="password"
+                  @input.native="codePwd"
+                  type="password"
+                  @blur.native.capture="codePwdBlur"></mt-field>
         <template v-if="password">
-          <p class="pwd">密码强度 <em class="sm"></em> <em class="md"></em> <em class="ld"></em> <span class="sm-span">强</span></p>
+          <p class="pwd">密码强度 <em :class="{sm:step === '弱', md: step === '中', ld:step === '强'}"></em> <em :class="{md: step === '中', ld:step === '强'}"></em> <em :class="{ld:step === '强'}"></em> <span :class="{smstep:step === '弱', mdstep: step === '中', ldstep:step === '强'}" v-text="step">强</span></p>
           <p class="pwd">密码须为8-20字符的英文、数字混合</p>
         </template>
       </div>
       <div class="page-part">
-        <mt-field placeholder="确认密码" v-model="password"></mt-field>
+        <mt-field :state="state.confirm"
+                  placeholder="确认密码"
+                  v-model="confirm"
+                  type="password"
+                  @blur.native.capture="codePassword"></mt-field>
       </div>
       <div class="page-part">
-        <mt-field placeholder="手机号码" v-model="mobile"></mt-field>
+        <mt-field :state="state.mobile"
+                  placeholder="手机号码"
+                  v-model="mobile"
+                  type="tel"
+                  @blur.native.capture="codeMobile"></mt-field>
       </div>
       <div class="page-part">
-        <mt-field placeholder="短信验证码" v-model="token">
-          <span class="token">获取验证码</span>
+        <mt-field :state="state.token"
+                  placeholder="短信验证码"
+                  v-model="token"
+                  @blur.native.capture="codeToken"
+                  auto-complete="off">
+          <span class="token" v-text="tokenText" @click="getCheckCode">获取验证码</span>
         </mt-field>
       </div>
     </div>
     <div class="form-btn">
       <div class="page-part">
-        <el-checkbox v-model="checked">我已阅读并同意 <a href="#">《优软云服务条款》</a></el-checkbox>
+        <el-checkbox v-model="checked">我已阅读并同意 <a class="rgba" href="/common/agreement">《优软云服务条款》</a></el-checkbox>
       </div>
-      <mt-button type="primary" size="large">完成注册</mt-button>
+      <mt-button type="primary" size="large" @click.native="submit">完成注册</mt-button>
     </div>
   </div>
 </template>
@@ -41,11 +61,226 @@
     name: 'registerPerson',
     data () {
       return {
+        step: 1,
+        state: {
+          vipName: 'error',
+          password: 'error',
+          confirm: 'error',
+          mobile: 'error',
+          token: 'error'
+        },
         vipName: '',
         password: '',
+        confirm: '',
         mobile: '',
         token: '',
-        checked: ''
+        tokenCode: '',
+        tokenText: '获取验证码',
+        tokenTime: '60',
+        checked: true
+      }
+    },
+    methods: {
+      // 验证弹窗
+      downToast (type) {
+        this.$toast({
+          message: type,
+          iconClass: 'el-icon-warning'
+        })
+      },
+      // 验证会员名
+      codeVipName () {
+        let count = this.vipName.length
+        if (count === 0) {
+          this.downToast('会员名不能为空')
+        } else if (count < 2 || count > 20) {
+          this.downToast('请填写合适的会员名称，2~20个字符')
+          this.state.vipName = 'warning'
+        } else {
+          this.state.vipName = 'success'
+        }
+      },
+      // 验证密码强度
+      codePwd () {
+        let reg1 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]))|((?=.*[0-9])((?=.*[a-zA-Z]))(?=.*[^a-zA-Z0-9]))).*$/
+        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+        if (reg1.test(this.password)) {
+          this.step = '强'
+        } else if (reg2.test(this.password)) {
+          this.step = '中'
+        } else {
+          this.step = '弱'
+        }
+      },
+      // 验证密码格式
+      codePwdBlur () {
+        let reg2 = /^(?=.{8,20})(((?=.*[0-9])(?=.*[a-z]))|((?=.*[0-9])(?=.*[A-Z]))).*$/
+        if (!this.password) {
+          this.downToast('请输入密码')
+        } else if (!reg2.test(this.password)) {
+          this.downToast('密码须为8-20字符的英文、数字混合')
+          this.state.password = 'warning'
+        } else {
+          this.state.password = 'success'
+        }
+      },
+      // 验证密码的确认信息
+      codePassword () {
+        if (!this.confirm) {
+          this.downToast('请再次输入密码')
+        } else if (this.confirm !== this.password) {
+          this.downToast('两次输入密码不一致!')
+          this.state.confirm = 'warning'
+        } else {
+          this.state.confirm = 'success'
+        }
+      },
+      // 验证手机号
+      codeMobile () {
+        let reg = /^1([0-9]{10})$/
+        if (!this.mobile) {
+          this.downToast('请输入手机号')
+        } else if (!reg.test(this.mobile)) {
+          this.downToast('请填写正确的手机号码')
+          this.state.mobile = 'warning'
+        } else {
+          this.$http.get(`/api/user/checkMobile`, {params: {mobile: this.mobile, mobileArea: ''}})
+            .then(response => {
+              if (response.data.hasRegister) {
+                this.downToast('该手机号已被注册,可直接登录')
+                this.state.mobile = 'warning'
+              } else {
+                this.state.mobile = 'success'
+              }
+            }).catch(() => {
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
+      },
+      // 验证-验证码信息
+      codeToken () {
+        if (!this.token) {
+          this.downToast('请先填写验证码')
+        } else {
+          if (!this.mobile) {
+            this.downToast('请先填写正确的手机号码')
+            this.state.token = 'warning'
+          } else {
+            if (this.tokenCode) {
+              let param = new FormData()
+              param.append('mobile', this.mobile)
+              param.append('token', this.tokenCode)
+              param.append('code', this.token)
+              let config = {
+                headers: {'Content-Type': 'multipart/form-data'}
+              }
+              this.$http.post('/sso/personal/register/checkCode', param, config)
+                .then(response => {
+                  if (response.data.success) {
+                    this.state.token = 'success'
+                  } else {
+                    this.$toast({
+                      message: response.data.errMsg,
+                      iconClass: 'el-icon-error'
+                    })
+                  }
+                }).catch(() => {
+                  this.downToast('请检查网络是否正常或联系服务商')
+                })
+            } else {
+              this.downToast('请点击先获取验证码信息')
+              this.state.token = 'warning'
+            }
+          }
+        }
+      },
+      // 获取验证码
+      getCheckCode () {
+        if (this.tokenTime > 0 && this.tokenTime < 60) {
+          this.downToast('请稍后再点击，我在倒计时')
+        } else {
+          if (this.state.mobile !== 'success') {
+            this.downToast('请先输入正确的手机号')
+          } else {
+            this.$indicator.open('获取中...')
+            let _this = this
+            this.$http.get('/sso/personal/register/checkCode', {params: {mobile: this.mobile}})
+              .then(response => {
+                this.$indicator.close()
+                if (response.data) {
+                  this.tokenCode = response.data.token
+                  this.$toast({
+                    message: '验证码已经发送到您的手机，请注意查收',
+                    iconClass: 'el-icon-success'
+                  })
+                  this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                  let setTime = setInterval(() => {
+                    _this.tokenTime--
+                    this.tokenText = '已发送(' + this.tokenTime + 'S)'
+                    if (this.tokenTime <= 0) {
+                      clearInterval(setTime)
+                      _this.tokenText = '获取验证码'
+                      _this.tokenTime = 60
+                    }
+                  }, 1000)
+                }
+              }).catch(() => {
+                this.$indicator.close()
+                this.downToast('请检查网络是否正常或联系服务商')
+              })
+          }
+        }
+      },
+      // 表单提交
+      submit () {
+        if (!this.state.vipName === 'success' &&
+          !this.state.password === 'success' &&
+          !this.state.confirm === 'success' &&
+          !this.state.mobile === 'success' &&
+          !this.state.token === 'success') {
+          this.downToast('请确认填写部分是否有误')
+        } else if (this.checked === false) {
+          this.downToast('您对阅读条款未做勾选')
+        } else {
+          this.$indicator.open('注册中...')
+          let url = window.location.search
+          let request = {}
+          if (url.indexOf('?' !== -1)) {
+            let str = url.substr(1)
+            let strs = str.split('&')
+            for (let i = 0; i < strs.length; i++) {
+              request[strs[i].split('=')[0]] = decodeURI(strs[i].split('=')[1])
+            }
+          }
+          let appId = request['appId'] || ''
+          let param = new FormData()
+          param.append('vipName', this.vipName)
+          param.append('password', this.password)
+          param.append('mobile', this.mobile)
+          // param.append('mobileArea', '')
+          param.append('appId', appId)
+          param.append('code', this.token)
+          param.append('token', this.tokenCode)
+          let config = {
+            header: {'Content-Type': 'multipart/form-data'}
+          }
+          this.$http.post('/sso/personal/register', param, config)
+            .then(response => {
+              this.$indicator.close()
+              if (response.data.success) {
+                let userUU = response.data.content.userUU
+                window.location.href = `/overRegister/${userUU}`
+              } else if (response.data.error) {
+                this.$toast({
+                  message: response.data.errMsg,
+                  iconClass: 'el-icon-error'
+                })
+              }
+            }).catch(() => {
+              this.$indicator.close()
+              this.downToast('请检查网络是否正常或联系服务商')
+            })
+        }
       }
     }
   }
@@ -85,19 +320,22 @@
           margin:.05rem .2rem;
           width: .45rem;
           height: .1rem;
+          background: #999;
         }
         .sm{background:#ff4e00}
         .md{background: #22ac38}
         .ld{background: #00a0e9}
-        .sm-span{color:#ff4e00}
-        .md-span{color: #22ac38}
-        .ld-span{color: #00a0e9}
+        .smstep{color:#ff4e00}
+        .mdstep{color: #22ac38}
+        .ldstep{color: #00a0e9}
       }
       .token{
         display:inline-block;
         padding: 0 .5rem;
         text-align: center;
         border-left:1px solid #b5b5b5;
+        margin-left: .1rem;
+        color:#2d8cf0;
       }
     }
   }

pages/bindEnterPrise/_uuid.vue

@@ -130,7 +130,7 @@
             .then(res => {
               if (res.data.success) {
                 this.$message({
-                  message: '您成功绑定企业',
+                  message: '申请成功，请耐心等待管理员审批',
                   type: 'success'
                 })
               }