错误提示抖动及震动功能完成

pages/login/forgetPass.vue

@@ -7,10 +7,10 @@
           <text class="title-item sys-color-black sys-weight-600">验证登录</text>
         </view>
         <view class="login-from">
-          <view class="from-text">
+          <view class="from-text"  :class="{'apply-shake':phoneShake}">
             <input type="tel" class="from-input sys-color-gray-3" max="11" v-model="phone" placeholder="请输入手机号"></input>
           </view>
-          <view class="from-code">
+          <view class="from-code" :class="{'apply-shake':codeShake}">
             <view class="from-text">
               <input type="tel" class="from-input sys-color-gray-3" v-model="code" placeholder="请输入验证码"></input>
             </view>
@@ -19,11 +19,11 @@
               <text class="sys-color-gray-3" v-else>{{time}} s</text>
             </view>
           </view>
-          <view class="from-text from-item">
+          <view class="from-text from-item" :class="{'apply-shake':passwordShake}">
             <input type="password" class="from-input sys-color-gray-3" v-model="password" placeholder="请输入密码"></input>
           </view>
         </view>
-        <view class="login-but sys-color-white sys-background-black sys-selected-but" :class="{'sys-unselected-but':!isLogin}">提交</view>
+        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="setPass" :class="{'sys-unselected-but':!isLogin}">提交</view>
 
       </view>
     </view>
@@ -42,6 +42,9 @@ export default {
     return {
       navHeight:40,
       isLogin:false,
+      phoneShake:false,
+      codeShake:false,
+      passwordShake:false,
       phone:'',
       code:'',
       password:'',
@@ -60,6 +63,40 @@ export default {
     },
   },
   methods: {
+    setPass(){
+      if(this.phone.length !== 11){
+        tools.error('请输入手机号码')
+        this.setShake(1)
+        tools.vibrate()
+        return false
+      }
+      if(this.code ===''){
+        tools.error('请输入验证码')
+        this.setShake(2)
+        tools.vibrate()
+        return false
+      }
+      if(this.password ===''){
+        tools.error('请输入密码')
+        this.setShake(3)
+        tools.vibrate()
+        return false
+      }
+    },
+    setShake(type){
+      if(type===1){
+        this.phoneShake=true
+      }else if(type===3){
+        this.passwordShake=true
+      }else {
+        this.codeShake=true
+      }
+      setTimeout(()=>{
+        this.phoneShake=false
+        this.passwordShake=false
+        this.codeShake=false
+      },500)
+    },
     setNavHeight(navHeight){
       this.navHeight=navHeight
     },
@@ -69,6 +106,8 @@ export default {
     senCode(){
       if(this.phone.length !== 11){
         tools.error('请输入手机号码')
+        this.setShake(2)
+        tools.vibrate()
         return false
       }
       this.time=60

pages/login/otherPhoneLogin.vue

@@ -7,10 +7,10 @@
           <text class="title-item sys-color-black sys-weight-600">验证登录</text>
         </view>
         <view class="login-from">
-          <view class="from-text">
+          <view class="from-text" :class="{'apply-shake':phoneShake}">
             <input type="tel" class="from-input sys-color-gray-3" max="11" v-model="phone" placeholder="请输入手机号"></input>
           </view>
-          <view class="from-code">
+          <view class="from-code" :class="{'apply-shake':codeShake}">
             <view class="from-text">
               <input type="tel" class="from-input sys-color-gray-3" v-model="code" placeholder="请输入验证码"></input>
             </view>
@@ -20,7 +20,7 @@
             </view>
           </view>
         </view>
-        <view class="login-but sys-color-white sys-background-black sys-selected-but" :class="{'sys-unselected-but':!isLogin}">登录</view>
+        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="login" :class="{'sys-unselected-but':!isLogin}">登录</view>
         <view  class="local-txt sys-color-gray-9">若长时间未收到验证码，请使用以下方式快速登录</view>
       </view>
     </view>
@@ -58,6 +58,31 @@ export default {
     },
   },
   methods: {
+    login(){
+      if(this.phone.length !== 11){
+        tools.error('请输入手机号码')
+        this.setShake(1)
+        tools.vibrate()
+        return false
+      }
+      if(this.code ===''){
+        tools.error('请输入验证码')
+        this.setShake(2)
+        tools.vibrate()
+        return false
+      }
+    },
+    setShake(type){
+      if(type===1){
+        this.phoneShake=true
+      }else {
+        this.codeShake=true
+      }
+      setTimeout(()=>{
+        this.phoneShake=false
+        this.codeShake=false
+      },500)
+    },
     setNavHeight(navHeight){
       this.navHeight=navHeight
     },
@@ -67,6 +92,7 @@ export default {
     senCode(){
       if(this.phone.length !== 11){
         tools.error('请输入手机号码')
+        this.setShake(1)
         tools.vibrate()
         return false
       }

pages/login/passLogin.vue

@@ -7,14 +7,14 @@
           <text class="title-item sys-color-black sys-weight-600">账号登录</text>
         </view>
         <view class="login-from">
-          <view class="from-text">
+          <view class="from-text" :class="{'apply-shake':phoneShake}">
             <input type="tel" class="from-input sys-color-gray-3" max="11" v-model="phone" placeholder="请输入手机号"></input>
           </view>
-          <view class="from-text from-item">
+          <view class="from-text from-item" :class="{'apply-shake':passwordShake}">
             <input type="password" class="from-input sys-color-gray-3" v-model="password" placeholder="请输入密码"></input>
           </view>
         </view>
-        <view class="login-but sys-color-white sys-background-black sys-selected-but" :class="{'sys-unselected-but':!isLogin}">登录</view>
+        <view class="login-but sys-color-white sys-background-black sys-selected-but" @click="login" :class="{'sys-unselected-but':!isLogin}">登录</view>
       </view>
     </view>
   </view>
@@ -23,11 +23,14 @@
 
 <script>
 import EnNav from "@/components/en-utils/en-nav/en-nav";
+import tools from "@/service/tools";
 export default {
   components: {EnNav},
   data() {
     return {
       isLogin:false,
+      phoneShake:false,
+      passwordShake:false,
       phone:'',
       password:'',
     }
@@ -41,6 +44,31 @@ export default {
     },
   },
   methods: {
+    login(){
+      if(this.phone.length !== 11){
+        tools.error('请输入手机号码')
+        this.setShake(1)
+        tools.vibrate()
+        return false
+      }
+      if(this.password ===''){
+        tools.error('请输入密码')
+        this.setShake(2)
+        tools.vibrate()
+        return false
+      }
+    },
+    setShake(type){
+      if(type===1){
+        this.phoneShake=true
+      }else {
+        this.passwordShake=true
+      }
+      setTimeout(()=>{
+        this.phoneShake=false
+        this.passwordShake=false
+      },500)
+    },
     verifyIsLogin(){
       this.isLogin = this.phone.length === 11 && this.password.length>=6;
     },