Просмотр исходного кода

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

茫茫燃 4 лет назад
Родитель
Сommit
cbb940bdfb
3 измененных файлов с 71 добавлено и 22 удалено
  1. 6 1
      src/api/user.js
  2. 65 20
      src/views/AuthPage/components/AuthCard.vue
  3. 0 1
      src/views/PortalPage/PortalPage.vue

+ 6 - 1
src/api/user.js

@@ -6,8 +6,13 @@ function loginAPI(data) {
   return axios.post(`${prefix}/login`, data);
 }
 
+function registerAPI(data) {
+  return axios.post(`${prefix}/register`, data);
+}
+
 const userAPIs = {
-  loginAPI
+  loginAPI,
+  registerAPI,
 };
 
 export default userAPIs;

+ 65 - 20
src/views/AuthPage/components/AuthCard.vue

@@ -74,7 +74,8 @@
       </el-form-item>
 
       <el-form-item v-if="cardType==='reset'||cardType==='register'">
-        <el-input v-model="cardForm.identifyCode"></el-input>
+        <el-input id="auth-card-code-verifier" v-model="cardForm.identifyCode"></el-input>
+        <el-button :disabled="cardButtonDisabled">{{ cardText }}</el-button>
       </el-form-item>
 
       <div v-if="cardType==='login'" id="auth-card-login-password-options">
@@ -114,7 +115,12 @@ export default {
       }
     };
     return {
-      cardType: "login",
+      // cardType: "login",
+      cardType: "register",
+      cardButtonDisabled: false,
+      cardText: "获取验证码",
+      cardVerified: true,
+      rememberPassword: false,
       cardForm: {
         phone: "",
         name: "",
@@ -176,8 +182,9 @@ export default {
             trigger: "blur",
           },
           {
+            min: 8,
             max: 20,
-            message: "输入过多字符",
+            message: "密码长度应为8-20个字符",
             trigger: "20",
           }
         ],
@@ -189,10 +196,6 @@ export default {
           }
         ],
       },
-
-      cardVerified: false,
-
-      rememberPassword: false,
     };
   },
 
@@ -224,7 +227,7 @@ export default {
       if (this.cardType === "login") {
         return "请输入密码";
       } else if (this.cardType === "register" || this.cardType === "reset") {
-        return "请输入密码,只允许英文和数字,长度为8-20个字符";
+        return "请输入密码,需要包含英文和数字,长度为8-20个字符";
       } else {
         return "err";
       }
@@ -236,7 +239,7 @@ export default {
       if (this.cardType === "login") {
         this.handleLogin();
       } else if (this.cardType === "register") {
-        return "已有账号? 前往登录";
+        this.handleRegister();
       } else if (this.cardType === "reset") {
         return "记得密码? 前往登录";
       }
@@ -277,25 +280,67 @@ export default {
                   console.log(e);
                 });
             } else {
-              let elem = document.getElementById("auth-card-slide-verifier");
-              elem.classList.add("shake");
-              setTimeout(() => {
-                elem.classList.remove("shake");
-              }, 800);
+              this.shakeElem("auth-card-slide-verifier");
             }
           }
         });
       });
     },
-    // handleRegister() {
-    //
-    // },
-    // handleReset() {
-    //
-    // },
+    handleRegister() {
+      //傻子写法,有机会了重构一下
+      const thatForm = this.$refs.cardFormRef;
+      thatForm.validateField("name", v1 => {
+        thatForm.validateField("username", v2 => {
+          thatForm.validateField("email", v3 => {
+            thatForm.validateField("password", v4 => {
+              thatForm.validateField("passwordConfirm", v5 => {
+                thatForm.validateField("phone", v6 => {
+                  if (!v1 && !v2 && !v3 && !v4 && !v5 && !v6) {
+                    if (this.cardVerified) {
+                      const params = {
+                        name: this.cardForm.name,
+                        username: this.cardForm.username,
+                        email: this.cardForm.email,
+                        password: this.cardForm.password,
+                        passwordConfirm: this.cardForm.passwordConfirm,
+                        phone: this.cardForm.phone,
+                      };
+                      this.$apis.registerAPI(params)
+                        .then((res) => {
+                          console.log(res);
+                        })
+                        .catch((e) => {
+                          console.log(e);
+                        });
+                    } else {
+                      console.log(1);
+                      this.shakeElem("auth-card-code-verifier");
+                    }
+                  }
+                });
+              });
+            });
+          });
+        });
+      });
+    },
+    handleReset() {
+
+    },
 
     handleSlideVerifier(verifyStatus) {
       this.cardVerified = verifyStatus;
+    },
+    handleSendMessage() {
+
+    },
+
+    shakeElem(elemId) {
+      let elem = document.getElementById(elemId);
+      elem.classList.add("shake");
+      setTimeout(() => {
+        elem.classList.remove("shake");
+      }, 800);
     }
   }
 };

+ 0 - 1
src/views/PortalPage/PortalPage.vue

@@ -70,7 +70,6 @@ export default {
     },
     handleScroll() {
       let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-      console.log(scrollTop);
       if (scrollTop > 15) {
         this.extending = true;
       } else if (scrollTop < 5) {