feat: \sendMessage OK

src/api/user.js

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

src/global/register-element.js

@@ -15,7 +15,7 @@ import {
   ElDialog,
   ElDatePicker,
   ElUpload,
-  ElDivider,
+  ElDivider, ElMessage,
 } from "element-plus";
 
 // NOTE 使用到的组件列表，请确保 import 和 component 的一致性
@@ -37,6 +37,7 @@ const components = [
   ElDatePicker,
   ElUpload,
   ElDivider,
+  ElMessage
 ];
 
 export default function (app) {

src/global/register-icon.js

@@ -1,6 +1,6 @@
-import { Avatar, Cherry, Lock, Message, Phone, Plus } from "@element-plus/icons";
+import { Avatar, Cherry, Key, Lock, Message, Phone, Plus } from "@element-plus/icons";
 
-const icons = [Phone, Lock, Plus, Avatar, Cherry, Message];
+const icons = [Phone, Lock, Plus, Avatar, Cherry, Message, Key];
 
 export default function (app) {
   Object.keys(icons).forEach((key) => {

src/main.js

@@ -4,7 +4,16 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import api from "@/api";
+import { ElMessage } from "element-plus";
 
 const app = createApp(App).use(store).use(router).use(globalComponentRegister);
+app.config.productionTip = false;
+app.directive("title", {
+  inserted: function (el) {
+    document.title = el.dataset.title;
+  }
+});
+
 app.config.globalProperties.$apis = api;
+app.config.globalProperties.$message = ElMessage;
 app.mount("#app");

src/views/AuthPage/components/AuthCard.css

@@ -43,6 +43,22 @@
     cursor: pointer;
 }
 
+#auth-card-code-verifier {
+    width: 80%;
+    display: flex;
+    justify-content: space-between;
+}
+
+#auth-card-code-verifier-code {
+
+}
+
+#auth-card-code-verifier-button {
+    height: 100%;
+    width: 150px;
+    /*margin-right: 10px;*/
+}
+
 #auth-card-submit-button {
     width: 100%;
     border-radius: 20px;

src/views/AuthPage/components/AuthCard.vue

@@ -73,10 +73,18 @@
         </el-input>
       </el-form-item>
 
-      <el-form-item v-if="cardType==='reset'||cardType==='register'">
-        <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==='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,'')">
+            <template #prefix>
+              <el-icon class="el-input__icon">
+                <key/>
+              </el-icon>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-button id="auth-card-code-verifier-button" :disabled="cardButtonDisabled" @click="getIDCode">{{ cardButtonText }}</el-button>
+      </div>
 
       <div v-if="cardType==='login'" id="auth-card-login-password-options">
         <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
@@ -100,12 +108,12 @@
 </template>
 
 <script>
-import { Avatar, Cherry, Lock, Message, Phone } from "@element-plus/icons";
+import { Avatar, Cherry, Key, Lock, Message, Phone } from "@element-plus/icons";
 import SlideVerifier from "@/views/AuthPage/components/SlideVerifier";
 
 export default {
   name: "AuthCard",
-  components: { Message, Cherry, Avatar, SlideVerifier, Lock, Phone, },
+  components: { Message, Cherry, Avatar, SlideVerifier, Lock, Phone, Key },
   data() {
     const passwordConfirmValidator = (rule, value, callback) => {
       if (value !== this.cardForm.password) {
@@ -114,11 +122,25 @@ export default {
         callback();
       }
     };
+    const phoneValidator = (rule, value, callback) => {
+      if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) === false) {
+        callback(new Error("请输入正确格式的手机号"));
+      } else {
+        callback();
+      }
+    };
+    const emailValidator = (rule, value, callback) => {
+      if (/^([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) === false) {
+        callback(new Error("请输入正确格式的邮箱"));
+      } else {
+        callback();
+      }
+    };
     return {
       // cardType: "login",
       cardType: "register",
       cardButtonDisabled: false,
-      cardText: "获取验证码",
+      cardButtonText: "获取验证码",
       cardVerified: true,
       rememberPassword: false,
       cardForm: {
@@ -134,13 +156,7 @@ export default {
         phone: [
           { required: true, message: "请输入手机号", trigger: "blur" },
           {
-            validator: function (rule, value, callback) {
-              if (/^(13[0-9]|14[0-9]|15[0-9]|16[6]|18[0-9]|19[6,9]|17[0-9])\d{8}$/i.test(value) === false) {
-                callback(new Error("请输入正确格式的手机号"));
-              } else {
-                callback();
-              }
-            },
+            validator: phoneValidator,
             trigger: "blur"
           }
         ],
@@ -165,13 +181,7 @@ export default {
         email: [
           { required: true, message: "请输入邮箱", trigger: "blur" },
           {
-            validator: function (rule, value, callback) {
-              if (/^([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value) === false) {
-                callback(new Error("请输入正确格式的邮箱"));
-              } else {
-                callback();
-              }
-            },
+            validator: emailValidator,
             trigger: "blur"
           }
         ],
@@ -185,7 +195,7 @@ export default {
             min: 8,
             max: 20,
             message: "密码长度应为8-20个字符",
-            trigger: "20",
+            trigger: "blur",
           }
         ],
         passwordConfirm: [
@@ -195,6 +205,15 @@ export default {
             trigger: "blur"
           }
         ],
+        identifyCode: [
+          { required: true, message: "请输入短信验证码", trigger: "blur" },
+          {
+            min: 6,
+            max: 6,
+            message: "短信验证码长度有误",
+            trigger: "blur",
+          }
+        ]
       },
     };
   },
@@ -277,7 +296,7 @@ export default {
                   console.log(res);
                 })
                 .catch((e) => {
-                  console.log(e);
+                  console.warn(e);
                 });
             } else {
               this.shakeElem("auth-card-slide-verifier");
@@ -287,7 +306,7 @@ export default {
       });
     },
     handleRegister() {
-      //傻子写法，有机会了重构一下
+      //傻子写法，有可能的话重构一下
       const thatForm = this.$refs.cardFormRef;
       thatForm.validateField("name", v1 => {
         thatForm.validateField("username", v2 => {
@@ -310,10 +329,9 @@ export default {
                           console.log(res);
                         })
                         .catch((e) => {
-                          console.log(e);
+                          console.warn(e);
                         });
                     } else {
-                      console.log(1);
                       this.shakeElem("auth-card-code-verifier");
                     }
                   }
@@ -341,7 +359,44 @@ export default {
       setTimeout(() => {
         elem.classList.remove("shake");
       }, 800);
-    }
+    },
+    getIDCode() {
+      const thatForm = this.$refs.cardFormRef;
+      thatForm.validateField("phone", v1 => {
+        if (!v1) {
+          this.cardButtonDisabled = true;
+          let time = 60;
+          const myScroll = setInterval(() => {
+            time--;
+            if (time >= 0) {
+              this.cardButtonText = time + "s后可重发";
+            } else {
+              this.cardButtonText = "获取验证码";
+              this.cardButtonDisabled = false;
+              clearTimeout(myScroll);
+              time = 60;
+            }
+          }, 1000);
+          const params = {
+            phone: this.cardForm.phone
+          };
+          this.$apis.getIDCodeAPI(params)
+            .then((res) => {
+              if (res.data.code === 0) {
+                this.$message({
+                  showClose: true,
+                  message: "发送成功，请注意查收验证码",
+                  type: "success"
+                });
+              }
+            })
+            .catch((e) => {
+              console.warn(e);
+            });
+        }
+      });
+    },
+
   }
 };
 </script>