处理手机端注册优化

components/mobile/registerEnterprise/index.vue

@@ -11,17 +11,14 @@
                     v-model="step1.mobile"
                     :state="state.mobile"
                     type="tel"
-                    @blur.native.capture="validateMobile"
           ></mt-field>
         </div>
         <div class="page-part">
           <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" v-if="state.mobile === 'success'">获取验证码</span>
-            <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
+                    :state="state.token">
+            <span class="token" @click="getCheckCode" v-text="tokenText">获取验证码</span>
           </mt-field>
         </div>
       </div>
@@ -38,20 +35,17 @@
           <mt-field placeholder="企业名称"
                     :attr="{ maxlength: 20 }"
                     v-model="step2.spaceName"
-                    :state="state.spaceName"
-                    @blur.native.capture="validateSpaceName"></mt-field>
+                    :state="state.spaceName"></mt-field>
         </div>
         <div class="page-part">
           <mt-field placeholder="营业执照号"
                     v-model="step2.businessCode"
-                    :state="state.businessCode"
-                    @blur.native.capture="validateBusinessCode"></mt-field>
+                    :state="state.businessCode"></mt-field>
         </div>
         <div class="page-part" v-if="!hasRegister">
           <mt-field placeholder="管理员姓名"
                     v-model="step2.vipName"
-                    :state="state.vipName"
-                    @blur.native.capture="validateVipName"></mt-field>
+                    :state="state.vipName"></mt-field>
         </div>
         <div class="page-part" v-if="!hasRegister">
           <mt-field placeholder="登录密码"
@@ -60,8 +54,7 @@
                     :state="state.password"
                     type="password"
                     auto-complete="new-password"
-                    @input.native="validatePassword"
-                    @blur.native.capture="validatePasswordTip"></mt-field>
+                    @input.native="validatePassword"></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>
@@ -72,8 +65,7 @@
                     v-model="step2.password"
                     :state="state.password"
                     type="password"
-                    auto-complete="new-password"
-                    @blur.native.capture="validatePasswordTipHas"></mt-field>
+                    auto-complete="new-password"></mt-field>
           <template v-if="!step2.password">
             <p class="pwd" style="text-align:right;"><a href="/reset/forgetPasswordValidationAccount">忘记密码?</a></p>
           </template>
@@ -86,15 +78,13 @@
                     v-model="step2.confirm"
                     :state="state.confirm"
                     type="password"
-                    auto-complete="new-password"
-                    @blur.native.capture="validateConfirm"></mt-field>
+                    auto-complete="new-password"></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>
+                    type="email"></mt-field>
         </div>
       </div>
       <div class="form-btn">
@@ -141,6 +131,16 @@
         progress: '弱'
       }
     },
+    watch: {
+      'step1.token': {
+        handler (newVal) {
+          if (newVal.length === 6) {
+            this.validateCode()
+          }
+        },
+        immediate: true
+      }
+    },
     methods: {
       // 注册
       goRegister () {
@@ -211,6 +211,7 @@
         if (this.tokenTime > 0 && this.tokenTime < 60) {
           this.downToast('请稍后再点击，我在倒计时')
         } else {
+          this.validateMobile()
           if (this.state.mobile === 'success') {
             this.$indicator.open('获取中...')
             let _this = this
@@ -234,15 +235,17 @@
                     }
                   }, 1000)
                 }
-              }).catch((err) => {
+              }).catch(() => {
                 this.$indicator.close()
-                this.downToast(err.errMsg)
+                this.downToast('获取失败，请检查网络')
               })
           }
         }
       },
       // 验证手机
       checkPhone () {
+        this.validateMobile()
+        this.validateCode()
         if (this.state.mobile !== 'success' || this.state.token !== 'success') {
           this.downToast('请确认填写部分是否有误')
         } else if (this.checked === false) {
@@ -465,6 +468,18 @@
       },
       // 企业注册
       sureRegister () {
+        this.validateSpaceName()
+        this.validateBusinessCode()
+        if (!this.hasRegister) {
+          this.validateVipName()
+          this.validatePasswordTip()
+          this.validateConfirm()
+        } else {
+          this.validatePasswordTipHas()
+        }
+        if (!this.hasEmail) {
+          this.validateEmail()
+        }
         if (!this.hasRegister) {
           if (this.state.spaceName !== 'success' ||
             this.state.businessCode !== 'success' ||

components/mobile/registerPersonal/index.vue

@@ -8,8 +8,7 @@
       <div class="page-part">
         <mt-field :state="state.vipName"
                   placeholder="会员名"
-                  v-model="vipName"
-                  @blur.native.capture="codeVipName" ></mt-field>
+                  v-model="vipName"></mt-field>
       </div>
       <div class="page-part">
         <mt-field :state="state.password"
@@ -17,8 +16,7 @@
                   :attr="{ maxlength: 20 }"
                   v-model="password"
                   @input.native="codePwd"
-                  type="password"
-                  @blur.native.capture="codePwdBlur"></mt-field>
+                  type="password"></mt-field>
         <template v-if="password">
           <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>
@@ -28,24 +26,20 @@
         <mt-field :state="state.confirm"
                   placeholder="确认密码"
                   v-model="confirm"
-                  type="password"
-                  @blur.native.capture="codePassword"></mt-field>
+                  type="password"></mt-field>
       </div>
       <div class="page-part">
         <mt-field :state="state.mobile"
                   placeholder="手机号码"
                   v-model="mobile"
-                  @blur.native.capture="codeMobile"
                   type="tel"></mt-field>
       </div>
       <div class="page-part">
         <mt-field :state="state.token"
                   placeholder="短信验证码"
                   v-model="token"
-                  @blur.native.capture="codeToken"
                   auto-complete="off">
-          <span class="token" v-text="tokenText" @click="getCheckCode" v-if="state.mobile === 'success'">获取验证码</span>
-          <span class="token-no" v-text="tokenText" v-if="state.mobile !== 'success'">获取验证码</span>
+          <span class="token" v-text="tokenText" @click="getCheckCode">获取验证码</span>
         </mt-field>
       </div>
     </div>
@@ -82,6 +76,16 @@
         checked: true
       }
     },
+    watch: {
+      'token': {
+        handler (newVal) {
+          if (newVal.length === 6) {
+            this.codeToken()
+          }
+        },
+        immediate: true
+      }
+    },
     methods: {
       // 注册
       goRegister () {
@@ -210,6 +214,7 @@
       },
       // 获取验证码
       loadCheckCode () {
+        this.codeMobile()
         if (this.state.mobile === 'success') {
           this.$indicator.open('获取中...')
           let _this = this
@@ -249,6 +254,11 @@
       },
       // 表单提交
       submit () {
+        this.codeVipName()
+        this.codePwdBlur()
+        this.codePassword()
+        this.codeMobile()
+        this.codeToken()
         if (this.state.vipName !== 'success' ||
           this.state.password !== 'success' ||
           this.state.confirm !== 'success' ||

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'https://sso.ubtob.com/' : 'http://10.1.51.50:8081/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'https://sso.ubtob.com/' : 'http://192.168.253.6:32323/')
 
 module.exports = {
   router: {