注册页面动画效果调整完成

components/en-from/en-input/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="en-box">
-    <input  class="en-input sys-size-32 text-color-12 sys-weight-600 "
+    <input  class="en-input sys-size-32 text-color-12 sys-weight-600"
             placeholder-class="sys-size-28 text-color-999 sys-weight-400"
             :maxlength="maxlength"
             :type="type"
@@ -40,6 +40,7 @@ export default {
   data() {
     return {
       inputValue: '',
+      showShake:false
     };
   },
   watch: {

pages/login/register.vue

@@ -2,24 +2,24 @@
   <view class="page-box login-box">
     <view class="login-form sys-radius-50 sys-background-fff">
       <view class="from-box animate__animated animate__fadeIn">
-        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.nickname==='' && isShake)}" >
-          <en-input type="text" class="login-input" placeholder="请输入昵称"  v-model="accountData.nickname" ></en-input>
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===1}" >
+          <en-input type="text" class="login-input" placeholder="请输入昵称"  v-model="accountData.nickname"  ></en-input>
         </view>
-        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.name==='' && isShake)}" >
-          <en-input type="text" class="login-input" placeholder="请输入姓名"  v-model="accountData.name" ></en-input>
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated"  :class="{'animate__shakeX':shakeNum===2}">
+          <en-input type="text" class="login-input" placeholder="请输入姓名"  v-model="accountData.name"  ></en-input>
         </view>
-        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.phone==='' && isShake)}" >
-          <en-input type="number" class="login-input" placeholder="请输入手机号"  v-model="accountData.phone" ></en-input>
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===3}" >
+          <en-input type="number" class="login-input" placeholder="请输入手机号"  v-model="accountData.phone"  ></en-input>
         </view>
-        <view class="input-item  input-send sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.code==='' && isShake)}">
+        <view class="input-item  input-send sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':shakeNum===4}">
           <en-input type="number" class="login-input" placeholder="请输入验证码"  v-model="accountData.code" maxlength="6"></en-input>
           <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
           <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
         </view>
-        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.password==='' && isShake)}" >
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===5 || shakeNum===7)}" >
           <en-input type="password" class="login-input" placeholder="请输入密码"  v-model="accountData.password" ></en-input>
         </view>
-        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.passwordTwo==='' && isShake)}">
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(shakeNum===6 || shakeNum===7)}">
           <en-input type="password" class="login-input" placeholder="请再次输入密码"  v-model="accountData.passwordTwo" ></en-input>
         </view>
       </view>
@@ -69,7 +69,7 @@ export default {
       isAJAX:false,
       isConsent: false,
       isRegister: false,
-      isShake: false,
+      shakeNum: 0,
     };
   },
   watch:{
@@ -88,63 +88,64 @@ export default {
     },
     verifyData(type){
       let isRegister=true;
+
       if(!this.accountData.nickname){
         isRegister=false
         if(type){
-          this.isShake=true
+          this.shakeNum=1
           tools.error('请输入昵称');
         }
-      }
-      if(!this.accountData.name){
+      }else if(!this.accountData.name){
         isRegister=false
         if(type){
-          this.isShake=true
+          this.shakeNum=2
           tools.error('请输入姓名');
         }
-      }
-      if(!this.accountData.password){
+      }else if(!this.accountData.phone){
+        isRegister=false
+        if(type){
+          this.shakeNum=3
+          tools.error('请输入手机号码');
+        }
+      }else if(!this.accountData.password){
         isRegister=false
         if(type){
-          this.isShake=true
+          this.shakeNum=5
           tools.error('请输入密码');
         }
-      }
-      if(!this.accountData.passwordTwo){
+      }else if(!this.accountData.passwordTwo){
         isRegister=false
         if(type){
-          this.isShake=true
+          this.shakeNum=6
           tools.error('请确认密码');
         }
-      }
-      if(this.accountData.password!==this.accountData.passwordTwo){
+      }else if(this.accountData.password!==this.accountData.passwordTwo){
         isRegister=false
         if(type){
-          this.isShake=true
+          this.shakeNum=7
           tools.error('密码输入不一致');
         }
-      }
-      if(!this.accountData.code){
+      }else if(!this.accountData.code){
         isRegister=false
         if(type){
-          this.isShake=true
+          this.shakeNum=4
           tools.error('请输入验证码');
         }
-      }
-      console.log(this.isConsent)
-      if(!this.isConsent){
+      }else if(!this.isConsent){
         isRegister=false
         if(type){
-          this.isShake=true
+          this.shakeNum=8
           tools.error('请阅读并同意协议');
           this.$refs.agreement.setConsentShake()
         }
       }
-      if(this.isShake){
+      if(!isRegister){
         setTimeout(()=>{
-          this.isShake=false
+          if(this.shakeNum>0)this.shakeNum=0
         },500)
       }
       this.isRegister=isRegister
+
     },
     register(){
       this.verifyData(true)