注册验证码

src/store/api/login.js

@@ -44,5 +44,15 @@ export const LoginStore = defineStore('login', () => {
     const result = await axios.$post(`/login/pwd/reset`, payload)
     return result
   }
-  return { login, rp, rpNoNewPassword, loginSmsCode, loginBySms, pwdCode, pwdCheck, pwdReset }
+  /**注册-1.获取验证码 */
+  const regCode = async (payload) => {
+    const result = await axios.$post(`/login/reg/code`, payload)
+    return result
+  }
+  /**注册-2.验证码验证 */
+  const regCheck = async (payload) => {
+    const result = await axios.$post(`/login/reg/check`, payload)
+    return result
+  }
+  return { login, rp, rpNoNewPassword, loginSmsCode, loginBySms, pwdCode, pwdCheck, pwdReset, regCode, regCheck }
 })

src/views/center/findPassword.vue

@@ -238,7 +238,15 @@ const verify = reactive({
   buttonText: '获取验证码'
 })
 const disabledVerify = computed(() => {
-  return !form.value.phone || verify.count <= 10
+  // 1.手机号验证 需要输入手机号; 邮箱验证 需要输入邮箱
+  // 2.如果验证码正在倒计时,则直接禁用
+  if (verify.count < 60) return true
+  else {
+    const type = select.value === '1' ? 'phone' : 'email'
+    const val = get(form,`value.${type}`)
+    if(val) return false;
+    else return true;
+  }
 })
 const getVerifyCode = async () => {
   const data = cloneDeep(form.value)

src/views/login/parts/register.vue

@@ -93,9 +93,12 @@
   </el-dialog>
 </template>
 <script setup>
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, get } from 'lodash-es'
+const $checkRes = inject('$checkRes')
 // 路由
 const router = useRouter()
+import { LoginStore } from '@/store/api/login'
+const loginStore = LoginStore()
 // 接口
 import { UsersStore } from '@/store/api/user/user'
 const store = UsersStore()
@@ -146,20 +149,27 @@ const verify = reactive({
 const disabledVerify = computed(() => {
   return !form.value.phone || verify.count <= 10
 })
-const getVerifyCode = () => {
-  ElMessage.success('验证码发送成功，请查看')
-  verify.count--
-  verify.buttonText = verify.count + ' 秒后重新获取验证码'
-  timer = window.setInterval(() => {
-    if (verify.count <= 1) {
-      resetCount()
-      verify.buttonText = '重新发送验证码'
-      verify.count = 60
-      return
-    }
+const getVerifyCode = async () => {
+  const phone = get(form, 'value.phone')
+  if (!phone) {
+    ElMessage.error('请填写手机号码')
+    return
+  }
+  const result = await loginStore.regCode({ phone })
+  if ($checkRes(result, '验证码发送成功，请查看', result.errmsg)) {
     verify.count--
     verify.buttonText = verify.count + ' 秒后重新获取验证码'
-  }, 1000)
+    timer = window.setInterval(() => {
+      if (verify.count <= 1) {
+        resetCount()
+        verify.buttonText = '重新发送验证码'
+        verify.count = 60
+        return
+      }
+      verify.count--
+      verify.buttonText = verify.count + ' 秒后重新获取验证码'
+    }, 1000)
+  }
 }
 // 注册
 const submitForm = async (formEl) => {
@@ -174,30 +184,35 @@ const submitForm = async (formEl) => {
   await formEl.validate(async (valid, fields) => {
     if (valid) {
       const data = cloneDeep(form.value)
-      const user = await store.query({ account: data.nick_name })
-      if (user.total === 0) {
-        data.account = data.nick_name
-        data.gender = '0'
-        delete data.refpassword
-        delete data.checkCode
-        delete data.type
-        const res = await store.create(data)
-        if (res.errcode === 0) {
+      // 检查验证码
+      const checkObj = { phone: get(data, 'phone'), checkCode: get(data, 'checkCode') }
+      const checkCodeResult = await loginStore.regCheck(checkObj)
+      if ($checkRes(checkCodeResult, null, checkCodeResult.errmsg)) {
+        const user = await store.query({ account: data.nick_name })
+        if (user.total === 0) {
+          data.account = data.nick_name
+          data.gender = '0'
+          delete data.refpassword
+          delete data.checkCode
+          delete data.type
+          const res = await store.create(data)
+          if (res.errcode === 0) {
+            ElMessage({
+              message: '注册用户成功，审核中请稍后登录',
+              type: 'success'
+            })
+            form.value = { role: ['User'] }
+            router.push({ path: '/login' })
+          } else ElMessage({ message: res.errmsg, type: 'warning' })
+        } else {
           ElMessage({
-            message: '注册用户成功，审核中请稍后登录',
-            type: 'success'
+            message: '已有相同账号 请重新输入！',
+            type: 'warning'
           })
-          form.value = { role: ['User'] }
-          router.push({ path: '/login' })
-        } else ElMessage({ message: res.errmsg, type: 'warning' })
+        }
       } else {
-        ElMessage({
-          message: '已有相同姓名或实验室名称 请重新输入！',
-          type: 'warning'
-        })
+        console.log('error submit!', fields)
       }
-    } else {
-      console.log('error submit!', fields)
     }
   })
 }