注册功能开发完成 🤩

components/RegisterBar.vue

@@ -1,74 +1,3 @@
-<!--
- * @Description: 
- * @Author: 欧阳承珺
- * @LastEditors: 欧阳承珺
- * @Date: 2022-10-20 17:51:51
- * @LastEditTime: 2022-10-26 10:26:29
--->
-<!-- <script lang="ts" setup>
-import { ref,reactive, computed } from 'vue'
-import { userApi } from '@/api/user'
-
-const { registerUser } = userApi()
-
-const emit = defineEmits(['login'])
-const showVcode = ref(false)    // 展示验证码
-const errMsg = ref('')    // 点击注册反馈错误信息
-const form = reactive({
-  username: '',
-  password: '',
-  password_confirm:'',
-  code: ''
-  // phone_zone: '86'
-})
-
-const regPhone = /^1[3456789]\d{9}$/;
-const regEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
-
-// 输入账号和密码后才能登录
-const loginBtnDisabled = computed<boolean>(()=> !(form.username && form.password))
-
-// 输入为手机号格式失焦显示验证码校验
-const handlerUsernameBlur = (e:any)=> {
-  showVcode.value = regPhone.test(e.target.value)
-}
-
-// 点击注册前置校验
-const vailidate = ()=> {
-  if(!regPhone.test(form.username) && !regEmail.test(form.username)) {
-    errMsg.value = '手机号/邮箱格式不对'
-  }else if(form.password !== form.password_confirm) {
-    errMsg.value = '两次输入的密码不一致'
-  }else if(form.password.length < 6) {
-    errMsg.value = '密码位数不能少于6位'
-  }else if(form.password.length> 16){
-    errMsg.value = '密码位数不能大于16位'
-  }else {
-    errMsg.value = ''
-    handlerRegisterUser()
-  }
-}
-// 弹窗关闭，初始化注册面板
-const resetInterfaceStatus = () => {
-  errMsg.value = '';
-  form.username = ''
-  form.password = ''
-  form.password_confirm = ''
-  form.code = ''
-  showVcode.value = false
-}
-const handlerRegisterUser = async () => {
-  const res = await registerUser(form)
-}
-const handlerLogin = ()=> {
-  emit('login','login')
-}
-
-defineExpose({
-  resetInterfaceStatus
-});
-</script> -->
-
 <script>
 import qs from 'qs'
 export default {
@@ -79,11 +8,13 @@ export default {
       form: {
         username: '',
         password: '',
-        password_confirm:'',
-        code: ''
+        passwordConfirm:'',
+        verifyCode: '',
         // phone_zone: '86'
       },
       errMsg: '',
+      sending: false,
+      clock: 60,
       showVcode: false,
       regEmail,
       regPhone,
@@ -91,7 +22,7 @@ export default {
   },
   computed: {
     loginBtnDisabled() {
-      return !(this.form.username && this.form.password && this.form.password_confirm)
+      return !(this.form.username && this.form.password && this.form.passwordConfirm)
     }
   },
   methods: {
@@ -99,7 +30,7 @@ export default {
     vailidate() {
       if(!this.regPhone.test(this.form.username) && !this.regEmail.test(this.form.username)) {
         this.errMsg = '手机号/邮箱格式不对'
-      }else if(this.form.password !== this.form.password_confirm) {
+      }else if(this.form.password !== this.form.passwordConfirm) {
         this.errMsg = '两次输入的密码不一致'
       }else if(this.form.password.length < 6) {
         this.errMsg = '密码位数不能少于6位'
@@ -117,6 +48,31 @@ export default {
         }
       })
     },
+    handlePostCode() {
+      if(this.sending) return
+      const params = {
+        action: '0', // 注册用户
+        receiver: this.form.username
+      }
+      if(this.regPhone.test(this.form.username)) params.type = '1'
+      if(this.regEmail.test(this.form.username)) params.type = '0'
+      this.$axios.get('auth/getVerifyCode', {params}).then((res)=> {
+        if(res.code === 200) {
+          this.sending = true
+          let interval = setInterval(() => {
+            this.clock--
+            if(this.clock === 0) {
+              this.$once('hook:beforeDestroy',()=> {
+                clearInterval(interval)
+                interval = null
+              })
+              this.clock = 60
+              this.sending = false
+            }
+          }, 1000);
+        }
+      })
+    },
     handlerLogin() {
       this.$axios.post('login',qs.stringify(this.form)).then((res)=> {
         this.$store.dispatch('login',res.result).then((token)=> {
@@ -127,11 +83,12 @@ export default {
       })
     },
     getUserInfo()  {
-      const res = this.$axios.get('members/getMemberInfo')
-      if(res.code === 200) {
-        this.$store.commit('setUser',res.result)
-        // localStorage.setItem('userInfo',res.result)
-      }
+      this.$axios.get('members/getMemberInfo').then((res)=> {
+        if(res.code === 200) {
+          this.$store.commit('setUser',res.result)
+          localStorage.setItem('userInfo',JSON.stringify(res.result))
+        }
+      })
     },
     handlerUsernameBlur(e) {
       this.showVcode = this.regPhone.test(e.target.value)
@@ -141,8 +98,8 @@ export default {
       this.errMsg = '';
       this.form.username = ''
       this.form.password = ''
-      this.form.password_confirm = ''
-      this.form.code = ''
+      this.form.passwordConfirm = ''
+      this.form.verifyCode = ''
       this.showVcode = false
     },
     handlerChangeLogin() {
@@ -165,11 +122,11 @@ export default {
       <br />
       <input id="signup_pwd1" v-model="form.password" class="login_input_password" type="password" placeholder="密码（6-16个字符，区分大小写）">
       <br />
-      <input id="signup_pwd2" v-model="form.password_confirm" class="login_input_password" type="password" placeholder="确认密码">
+      <input id="signup_pwd2" v-model="form.passwordConfirm" class="login_input_password" type="password" placeholder="确认密码">
       <br />
       <div v-show="showVcode" class="vcode_content">
-        <input class="input_vcode_signup" placeholder="验证码">
-        <span class="sent-vcode sent-vcode-signup"><a>发送验证码</a></span>
+        <input v-model="form.verifyCode" class="input_vcode_signup" placeholder="验证码">
+        <span class="sent-vcode sent-vcode-signup" :class="{'sent-vcode-disabled': sending}" @click="handlePostCode"><a>{{sending ? clock+'秒' : '发送验证码'}}</a></span>
       </div>
       <div v-show="errMsg !== ''" class="error-mess error-mess-signup">
         <span id="error-message error-tip">{{errMsg}}</span>