TEMP

src/api/user.js

@@ -10,14 +10,19 @@ function registerAPI(data) {
   return axios.post(`${prefix}/register`, data);
 }
 
-function getIDCodeAPI(data) {
+function sendMessageAPI(data) {
   return axios.post(`${prefix}/sendMessage`, data);
 }
 
+function resetAPI(data) {
+  return axios.post(`${prefix}/resetPassword`, data);
+}
+
 const userAPIs = {
   loginAPI,
   registerAPI,
-  getIDCodeAPI,
+  sendMessageAPI,
+  resetAPI,
 };
 
 export default userAPIs;

src/views/AuthPage/components/AuthCard.vue

@@ -75,7 +75,7 @@
 
       <div v-if="cardType==='reset'||cardType==='register'" id="auth-card-code-verifier">
         <el-form-item prop="identifyCode">
-          <el-input id="auth-card-code-verifier-code" v-model="cardForm.identifyCode" placeholder="请输入验证码" oninput="value=value.replace(/[^\d]/g,'')">
+          <el-input id="auth-card-code-verifier-code" v-model="cardForm.identifyCode" onchange="this.cardVerified=value.length===6" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入验证码">
             <template #prefix>
               <el-icon class="el-input__icon">
                 <key/>
@@ -83,7 +83,7 @@
             </template>
           </el-input>
         </el-form-item>
-        <el-button id="auth-card-code-verifier-button" :disabled="cardButtonDisabled" @click="getIDCode">{{ cardButtonText }}</el-button>
+        <el-button id="auth-card-code-verifier-button" :disabled="cardButtonDisabled" @click="handleSendMessage">{{ cardButtonText }}</el-button>
       </div>
 
       <div v-if="cardType==='login'" id="auth-card-login-password-options">
@@ -137,8 +137,7 @@ export default {
       }
     };
     return {
-      // cardType: "login",
-      cardType: "register",
+      cardType: "login",
       cardButtonDisabled: false,
       cardButtonText: "获取验证码",
       cardVerified: true,
@@ -227,7 +226,7 @@ export default {
       } else if (this.cardType === "reset") {
         return "重置密码";
       } else {
-        return "err";
+        return "errString";
       }
     },
     cardLink: function () {
@@ -238,7 +237,7 @@ export default {
       } else if (this.cardType === "reset") {
         return "记得密码? 前往登录";
       } else {
-        return "err";
+        return "errString";
       }
     },
 
@@ -248,11 +247,23 @@ export default {
       } else if (this.cardType === "register" || this.cardType === "reset") {
         return "请输入密码，需要包含英文和数字，长度为8-20个字符";
       } else {
-        return "err";
+        return "errString";
       }
     }
   },
 
+  mounted() {
+    if (localStorage.phone) {
+      this.cardForm.phone = localStorage.phone;
+    }
+    if (localStorage.password) {
+      this.cardForm.password = localStorage.password;
+    }
+    if (localStorage.rememberPassword) {
+      this.rememberPassword = true;
+    }
+  },
+
   methods: {
     onSubmit() {
       if (this.cardType === "login") {
@@ -260,7 +271,7 @@ export default {
       } else if (this.cardType === "register") {
         this.handleRegister();
       } else if (this.cardType === "reset") {
-        return "记得密码? 前往登录";
+        this.handleReset();
       }
     },
 
@@ -293,10 +304,38 @@ export default {
               };
               this.$apis.loginAPI(params)
                 .then((res) => {
-                  console.log(res);
+                  // if (res.data.code === 0) {
+                  if (res.data.code === -1) {
+                    localStorage.phone = this.cardForm.phone;
+                    if (this.rememberPassword) {
+                      localStorage.password = this.cardForm.password;
+                      localStorage.rememberPassword = this.rememberPassword;
+                    } else {
+                      localStorage.removeItem("password");
+                      localStorage.removeItem("rememberPassword");
+                    }
+                    this.$message({
+                      showClose: true,
+                      message: "登录成功",
+                      type: "success"
+                    });
+                    setTimeout(() => {
+                      this.$router.push("/portal");
+                    }, 1000);
+                  } else {
+                    this.$message({
+                      showClose: true,
+                      message: res.data.message,
+                      type: "warning"
+                    });
+                  }
                 })
                 .catch((e) => {
-                  console.warn(e);
+                  this.$message({
+                    showClose: true,
+                    message: e,
+                    type: "error"
+                  });
                 });
             } else {
               this.shakeElem("auth-card-slide-verifier");
@@ -314,27 +353,48 @@ export default {
             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.warn(e);
-                        });
-                    } else {
-                      this.shakeElem("auth-card-code-verifier");
+                  thatForm.validateField("identifyCode", v7 => {
+                    if (!v1 && !v2 && !v3 && !v4 && !v5 && !v6 && !v7) {
+                      if (this.cardVerified) {
+                        const params = {
+                          name: this.cardForm.name,
+                          username: this.cardForm.username,
+                          email: this.cardForm.email,
+                          password: this.cardForm.password,
+                          identifyCode: this.cardForm.identifyCode,
+                          phone: this.cardForm.phone,
+                        };
+                        this.$apis.registerAPI(params)
+                          .then((res) => {
+                            if (res.data.code === 0) {
+                              this.$message({
+                                showClose: true,
+                                message: "注册成功",
+                                type: "success"
+                              });
+                              setTimeout(() => {
+                                this.cardType = "login";
+                              }, 1000);
+                            } else {
+                              this.$message({
+                                showClose: true,
+                                message: res.data.message,
+                                type: "warning"
+                              });
+                            }
+                          })
+                          .catch((e) => {
+                            this.$message({
+                              showClose: true,
+                              message: e,
+                              type: "error"
+                            });
+                          });
+                      } else {
+                        this.shakeElem("auth-card-code-verifier");
+                      }
                     }
-                  }
+                  });
                 });
               });
             });
@@ -343,16 +403,57 @@ export default {
       });
     },
     handleReset() {
-
+      const thatForm = this.$refs.cardFormRef;
+      thatForm.validateField("password", v1 => {
+        thatForm.validateField("passwordConfirm", v2 => {
+          thatForm.validateField("phone", v3 => {
+            thatForm.validateField("identifyCode", v4 => {
+              if (!v1 && !v2 && !v3 && !v4) {
+                if (this.cardVerified) {
+                  const params = {
+                    password: this.cardForm.password,
+                    identifyCode: this.cardForm.identifyCode,
+                    phone: this.cardForm.phone,
+                  };
+                  this.$apis.resetAPI(params)
+                    .then((res) => {
+                      if (res.data.code === 0) {
+                        this.$message({
+                          showClose: true,
+                          message: "重置成功",
+                          type: "success"
+                        });
+                        setTimeout(() => {
+                          this.cardType = "login";
+                        }, 1000);
+                      } else {
+                        this.$message({
+                          showClose: true,
+                          message: res.data.message,
+                          type: "warning"
+                        });
+                      }
+                    })
+                    .catch((e) => {
+                      this.$message({
+                        showClose: true,
+                        message: e,
+                        type: "error"
+                      });
+                    });
+                } else {
+                  this.shakeElem("auth-card-code-verifier");
+                }
+              }
+            });
+          });
+        });
+      });
     },
 
     handleSlideVerifier(verifyStatus) {
       this.cardVerified = verifyStatus;
     },
-    handleSendMessage() {
-
-    },
-
     shakeElem(elemId) {
       let elem = document.getElementById(elemId);
       elem.classList.add("shake");
@@ -360,7 +461,7 @@ export default {
         elem.classList.remove("shake");
       }, 800);
     },
-    getIDCode() {
+    handleSendMessage() {
       const thatForm = this.$refs.cardFormRef;
       thatForm.validateField("phone", v1 => {
         if (!v1) {
@@ -380,7 +481,7 @@ export default {
           const params = {
             phone: this.cardForm.phone
           };
-          this.$apis.getIDCodeAPI(params)
+          this.$apis.sendMessageAPI(params)
             .then((res) => {
               if (res.data.code === 0) {
                 this.$message({
@@ -388,15 +489,24 @@ export default {
                   message: "发送成功，请注意查收验证码",
                   type: "success"
                 });
+              } else {
+                this.$message({
+                  showClose: true,
+                  message: res.data.message,
+                  type: "warning"
+                });
               }
             })
             .catch((e) => {
-              console.warn(e);
+              this.$message({
+                showClose: true,
+                message: e,
+                type: "error"
+              });
             });
         }
       });
     },
-
   }
 };
 </script>