注册功能

public/static/js/main_2020_show.js

@@ -6930,6 +6930,9 @@ window.Modernizr = function (n, e, t) {
           o(t, i)
         }),
           document.addEventListener("keydown", function (n) {
+            if (window.ifPreventKeyOperationInScene) {
+              return
+            }
             switch (J.updateInteraction(Se.InteractionKey),
             n.which) {
               case we.ZERO:

src/App.vue

@@ -144,4 +144,8 @@ export default {
 #popup {
   background: rgba(0, 0, 0, 0.7);
 }
+
+.el-message-box__wrapper {
+  z-index: 20003 !important;
+}
 </style>

src/api.js

@@ -21,5 +21,21 @@ export default {
       store.commit('setToken', res.data.data.token)
       store.commit('setUserInfo', res.data.data.user)
     }
-  }
+  },
+  async signUp(userName, password) {
+    const res = await axios({
+      method: 'post',
+      url: `${process.env.VUE_APP_API_PREFIX}/api/admin/register`,
+      data: {
+        userName: userName,
+        password: password,
+        verifyPassword: password,
+      },
+    })
+    if (res.data.code !== 0) {
+      throw (`注册失败：${res.data.msg}`)
+    } else {
+      return
+    }
+  },
 }

src/views/gui/Login.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="rule-desc">
+  <div
+    class="rule-desc"
+    @keydown.enter="submit"
+  >
     <div class="wrapper-1">
       <button
         class="close"
@@ -20,6 +23,7 @@
           draggable="false"
         >
         <input
+          ref="first-focus"
           v-model.trim="userName"
           type="text"
           placeholder="请输入账号..."
@@ -66,11 +70,6 @@
 export default {
   data() {
     return {
-      visitNum: 1939,
-      yingZaoZhuanJiaNum: 56,
-      liShiDaRen: 424,
-      huShuShiZhe: 32,
-
       userName: '',
       password: '',
 
@@ -79,6 +78,7 @@ export default {
     }
   },
   mounted() {
+    this.$refs['first-focus'].focus()
     window.ifPreventKeyOperationInScene = true
   },
   beforeDestroy() {
@@ -104,7 +104,7 @@ export default {
       globalApi.login(this.userName, this.password).then((res) => {
         this.$router.go(-1)
       }).catch(error => {
-        window.alert('登录失败')
+        window.alert(error)
       })
     }, 1500),
   }
@@ -225,15 +225,6 @@ export default {
         color: #955D4B;
       }
     }
-    > .statistics {
-      margin-top: 30px;
-      font-size: 16px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #693D2F;
-      line-height: 26px;
-      letter-spacing: 1px;
-    }
   }
 }
 </style>

src/views/gui/SignUp.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="rule-desc">
+  <div
+    class="rule-desc"
+    @keydown.enter="submit"
+  >
     <div class="wrapper-1">
       <button
         class="close"
@@ -11,42 +14,65 @@
 
       <div class="form-item">
         <img
-          class=""
+          :class="{
+            animate__animated: ifTipUserName,
+            animate__headShake: ifTipUserName
+          }"
           src="@/assets/images/username-icon.png"
           alt=""
           draggable="false"
         >
         <input
+          ref="first-focus"
+          v-model.trim="userName"
           type="text"
           placeholder="请输入账号..."
         >
       </div>
       <div class="form-item">
         <img
-          class=""
+          :class="{
+            animate__animated: ifTipPassword,
+            animate__headShake: ifTipPassword
+          }"
           src="@/assets/images/password-icon.png"
           alt=""
           draggable="false"
         >
         <input
-          type="text"
+          v-model="password"
+          type="password"
           placeholder="请输入密码..."
+          @keydown.stop
         >
       </div>
-      <div class="form-item">
+      <div class="form-item form-item-password-repeat">
         <img
-          class=""
+          :class="{
+            animate__animated: ifTipPasswordRepeat,
+            animate__headShake: ifTipPasswordRepeat
+          }"
           src="@/assets/images/password-icon.png"
           alt=""
           draggable="false"
         >
         <input
-          type="text"
-          placeholder="请输入密码..."
+          v-model="passwordRepeat"
+          type="password"
+          placeholder="请再次输入密码..."
+        >
+        <div
+          v-show="ifTipPasswordRepeatText"
+          class="tip-text"
         >
+          两次输入密码不一致！
+        </div>
       </div>
 
-      <button class="login">
+      <button
+        class="submit"
+        @click="submit"
+      >
         <div class="text-wrapper">
           立即注册
         </div>
@@ -67,18 +93,73 @@
 export default {
   data() {
     return {
-      visitNum: 1939,
-      yingZaoZhuanJiaNum: 56,
-      liShiDaRen: 424,
-      huShuShiZhe: 32,
+      userName: '',
+      password: '',
+      passwordRepeat: '',
+
+      ifTipUserName: false,
+      ifTipPassword: false,
+      ifTipPasswordRepeat: false,
+    }
+  },
+  computed: {
+    ifTipPasswordRepeatText() {
+      if (this.password && this.passwordRepeat && this.password !== this.passwordRepeat) {
+        return true
+      } else {
+        return false
+      }
     }
   },
   mounted() {
     window.ifPreventKeyOperationInScene = true
+    this.$refs['first-focus'].focus()
   },
   beforeDestroy() {
     window.ifPreventKeyOperationInScene = false
-  }
+  },
+  methods: {
+    submit: globalUtils.throttle(function() {
+      if (this.userName.length === 0) {
+        this.ifTipUserName = true
+        setTimeout(() => {
+          this.ifTipUserName = false
+        }, 1000)
+        return
+      }
+      if (this.password.length === 0) {
+        this.ifTipPassword = true
+        setTimeout(() => {
+          this.ifTipPassword = false
+        }, 1000)
+        return
+      }
+      if (this.passwordRepeat === 0 || this.ifTipPasswordRepeatText) {
+        this.ifTipPasswordRepeat = true
+        setTimeout(() => {
+          this.ifTipPasswordRepeat = false
+        }, 1000)
+        return
+      }
+
+      globalApi.signUp(this.userName, this.password).then((res) => {
+        this.$alert('即将为您自动登录...', '注册成功！', {
+          confirmButtonText: '确定',
+          callback: action => {
+            if (action === 'confirm') {
+              globalApi.login(this.userName, this.password).then((res) => {
+                this.$router.go(-1)
+              }).catch(error => {
+                window.alert(error)
+              })
+            }
+          }
+        })
+      }).catch(error => {
+        window.alert(error)
+      })
+    }, 1500),
+  },
 }
 </script>
 
@@ -149,8 +230,17 @@ export default {
         color: #9A2D0A;
       }
     }
+    > .form-item-password-repeat {
+      position: relative;
+      > .tip-text {
+        position: absolute;
+        top: calc(100% + 3px);
+        color: red;
+        font-size: 14px;
+      }
+    }
 
-    > button.login {
+    > button.submit {
       background-image: url(@/assets/images/button-border-long-transparent.png);
       background-size: contain;
       background-repeat: no-repeat;
@@ -196,15 +286,6 @@ export default {
         color: #955D4B;
       }
     }
-    > .statistics {
-      margin-top: 30px;
-      font-size: 16px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #693D2F;
-      line-height: 26px;
-      letter-spacing: 1px;
-    }
   }
 }
 </style>