Merge remote-tracking branch 'origin/seec' into seec

src/global/register-element.js

@@ -9,7 +9,7 @@ import {
   ElRadio,
   ElTabPane,
   ElTabs,
-  ElSelect,
+  ElSelect, ElIcon,
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -25,6 +25,7 @@ const components = [
   ElCheckbox,
   ElLink,
   ElSelect,
+  ElIcon
 ];
 
 export default function (app) {

src/views/AuthPage/components/AuthCard.css

@@ -56,4 +56,26 @@
     align-items: center;
     color: #409eff;
     cursor: pointer;
+}
+
+.shake {
+    animation: shake 800ms ease-in-out;
+}
+
+@keyframes shake {
+    10%, 90% {
+        transform: translateY(-1px);
+    }
+    20%, 80% {
+        transform: translateY(+2px);
+    }
+    30%, 70% {
+        transform: translateY(-4px);
+    }
+    40%, 60% {
+        transform: translateY(+4px);
+    }
+    50% {
+        transform: translateY(-4px);
+    }
 }

src/views/AuthPage/components/AuthCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="auth-card-body">
     <h2 id="auth-card-title">{{ cardTitle }} </h2>
-    <el-form id="auth-card-form" :model="cardForm" :rules="cardRuleForm">
+    <el-form id="auth-card-form" :model="cardForm" :rules="cardRuleForm" ref="cardFormRef">
 
       <el-form-item v-if="cardType==='login'" class="auth-card-form-item" prop="phone">
         <el-input v-model="cardForm.phone" autofocus clearable oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入手机号">
@@ -53,7 +53,7 @@
       </div>
 
       <el-form-item v-if="cardType==='login'" class="auth-card-form-item">
-        <SlideVerifier is-lock @change="handleSlideVerifier"/>
+        <SlideVerifier id="auth-card-slide-verifier" is-lock @change="handleSlideVerifier"/>
       </el-form-item>
 
       <el-form-item class="auth-card-form-item">
@@ -74,7 +74,7 @@ import SlideVerifier from "@/views/AuthPage/components/SlideVerifier";
 
 export default {
   name: "AuthCard",
-  components: { SlideVerifier, Lock, Phone },
+  components: { SlideVerifier, Lock, Phone, },
   data() {
     return {
       cardType: "login",
@@ -157,9 +157,11 @@ export default {
     },
 
     toResetType() {
+      this.$refs.cardFormRef.resetFields();
       this.cardType = "reset";
     },
     toOtherType() {
+      this.$refs.cardFormRef.resetFields();
       if (this.cardType === "login") {
         this.cardType = "register";
       } else if (this.cardType === "register") {
@@ -170,21 +172,32 @@ export default {
     },
 
     handleLogin() {
-      if (this.cardVerified) {
-        const params = {
-          phone: this.phone,
-          password: this.password
-        };
-        this.$apis.loginAPI(params)
-          .then((res) => {
-            console.log(res);
-          })
-          .catch((e) => {
-            console.log(e);
-          });
-      } else {
-
-      }
+      const thatForm = this.$refs.cardFormRef;
+      thatForm.validateField("phone", v1 => {
+        thatForm.validateField("password", v2 => {
+          if (!v1 && !v2) {
+            if (this.cardVerified) {
+              const params = {
+                phone: this.cardForm.phone,
+                password: this.cardForm.password
+              };
+              this.$apis.loginAPI(params)
+                .then((res) => {
+                  console.log(res);
+                })
+                .catch((e) => {
+                  console.log(e);
+                });
+            } else {
+              let elem = document.getElementById("auth-card-slide-verifier");
+              elem.classList.add("shake");
+              setTimeout(() => {
+                elem.classList.remove("shake");
+              }, 800);
+            }
+          }
+        });
+      });
     },
     handleRegister() {