chore: 优化部分代码

src/apis/common/captcha.ts

@@ -19,11 +19,11 @@ export function getEmailCaptcha(query: { email: string }) {
 }
 
 /** @desc 获取行为验证码 */
-export function getBehaviorCaptcha(params: any) {
+export function getBehaviorCaptcha(req: any) {
-  return http.get<Common.BehaviorCaptchaRes>(`${BASE_URL}/behavior`, {params});
+  return http.get<Common.BehaviorCaptchaResp>(`${BASE_URL}/behavior`, req)
 }
 
 /** @desc 校验行为验证码 */
-export function checkBehaviorCaptcha(params: any) {
+export function checkBehaviorCaptcha(req: any) {
-  return http.post<Common.CheckBehaviorCaptchaRes>(`${BASE_URL}/behavior`, params);
+  return http.post<Common.CheckBehaviorCaptchaResp>(`${BASE_URL}/behavior`, req)
 }

src/apis/common/type.ts

@@ -20,13 +20,7 @@ export interface DashboardNoticeResp {
 }
 
 /* 行为验证码类型 */
-export interface BehaviorCaptchaReq {
+export interface BehaviorCaptchaResp {
-  captchaType?: string
-  captchaVerification?: string
-  clientUid?: string
-}
-
-export interface BehaviorCaptchaRes {
   originalImageBase64: string
   point: {
     x: number
@@ -38,7 +32,7 @@ export interface BehaviorCaptchaRes {
   wordList: string[]
 }
 
-export interface CheckBehaviorCaptchaRes {
+export interface CheckBehaviorCaptchaResp {
   repCode: string
   repMsg: string
 }

src/components/Verify/Verify/VerifyPoints.vue

@@ -77,7 +77,7 @@ import {
   getBehaviorCaptcha
 } from '@/apis/common/captcha'
 import { resetSize } from '@/utils/verify'
-import { aesEncrypt } from '@/utils/encrypt'
+import { encryptByAes } from '@/utils/encrypt'
 
 export default {
   name: 'VerifyPoints',
@@ -224,7 +224,7 @@ export default {
         setTimeout(() => {
           // 发送后端请求
           const captchaVerification = secretKey.value
-            ? aesEncrypt(
+            ? encryptByAes(
                   `${backToken.value}---${JSON.stringify(checkPosArr)}`,
                   secretKey.value
             )
@@ -232,7 +232,7 @@ export default {
           const data = {
             captchaType: captchaType.value,
             pointJson: secretKey.value
-              ? aesEncrypt(JSON.stringify(checkPosArr), secretKey.value)
+              ? encryptByAes(JSON.stringify(checkPosArr), secretKey.value)
               : JSON.stringify(checkPosArr),
             token: backToken.value
           }

src/components/Verify/Verify/VerifySlide.vue

@@ -108,7 +108,7 @@ import {
   checkBehaviorCaptcha,
   getBehaviorCaptcha
 } from '@/apis/common/captcha'
-import { aesEncrypt } from '@/utils/encrypt'
+import { encryptByAes } from '@/utils/encrypt'
 import { resetSize } from '@/utils/verify'
 
 export default {
@@ -283,7 +283,7 @@ export default {
         const data = {
           captchaType: captchaType.value,
           pointJson: secretKey.value
-            ? aesEncrypt(
+            ? encryptByAes(
               JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
               secretKey.value
             )
@@ -310,7 +310,7 @@ export default {
                 / 1000
             ).toFixed(2)}s验证成功`
             const captchaVerification = secretKey.value
-              ? aesEncrypt(
+              ? encryptByAes(
                     `${backToken.value}---${JSON.stringify({
                       x: moveLeftDistance,
                       y: 5.0

src/utils/encrypt.ts

@@ -28,7 +28,7 @@ export function encryptByRsa(txt: string) {
 
 const defaultKeyWork = 'XwKsGlMcdPMEhR1B'
 
-export function aesEncrypt(word, keyWord = defaultKeyWork) {
+export function encryptByAes(word, keyWord = defaultKeyWork) {
   const key = CryptoJS.enc.Utf8.parse(keyWord)
   const arcs = CryptoJS.enc.Utf8.parse(word)
   const encrypted = CryptoJS.AES.encrypt(arcs, key, {

src/views/login/components/phone/index.vue

@@ -18,7 +18,7 @@
         :loading="captchaLoading"
         :disabled="captchaDisable"
         size="large"
-        @click="handleOpenBehaviorCaptcha"
+        @click="onCaptcha"
       >
         {{ captchaBtnName }}
       </a-button>
@@ -31,12 +31,12 @@
     </a-form-item>
   </a-form>
   <Verify
-      ref="VerifyRef"
+    ref="VerifyRef"
-      :mode="captchaMode"
+    :captcha-type="captchaType"
-      :captcha-type="captchaType"
+    :mode="captchaMode"
-      :img-size="{ width: '330px', height: '155px' }"
+    :img-size="{ width: '330px', height: '155px' }"
-      @success="onCaptcha"
+    @success="getCaptcha"
-  ></Verify>
+  />
 </template>
 
 <script setup lang="ts">
@@ -64,9 +64,9 @@ const router = useRouter()
 const loading = ref(false)
 // 登录
 const handleLogin = async () => {
+  const isInvalid = await formRef.value?.validate()
+  if (isInvalid) return
   try {
-    const isInvalid = await formRef.value?.validate()
-    if (isInvalid) return
     loading.value = true
     await userStore.phoneLogin(form)
     const { redirect, ...othersQuery } = router.currentRoute.value.query
@@ -87,22 +87,19 @@ const handleLogin = async () => {
 const VerifyRef = ref<InstanceType<any>>()
 const captchaType = ref('blockPuzzle')
 const captchaMode = ref('pop')
+const captchaLoading = ref(false)
+// 弹出行为验证码
+const onCaptcha = async () => {
+  if (captchaLoading.value) return
+  const isInvalid = await formRef.value?.validateField('phone')
+  if (isInvalid) return
+  VerifyRef.value.show()
+}
+
 const captchaTimer = ref()
 const captchaTime = ref(60)
 const captchaBtnName = ref('获取验证码')
 const captchaDisable = ref(false)
-const captchaLoading = ref(false)
-
-// 弹出行为验证码
-const handleOpenBehaviorCaptcha = () => {
-  if (captchaLoading.value) return
-  formRef.value?.validateField('phone', (valid: any) => {
-    if (!valid) {
-      VerifyRef.value.show()
-    }
-  })
-}
-
 // 重置验证码
 const resetCaptcha = () => {
   window.clearInterval(captchaTimer.value)
@@ -112,10 +109,7 @@ const resetCaptcha = () => {
 }
 
 // 获取验证码
-const onCaptcha = async () => {
+const getCaptcha = async () => {
-  if (captchaLoading.value) return
-  const isInvalid = await formRef.value?.validateField('phone')
-  if (isInvalid) return
   try {
     captchaLoading.value = true
     captchaBtnName.value = '发送中...'

src/views/setting/components/VerifyModel.vue

@@ -16,19 +16,19 @@
           :loading="captchaLoading"
           :disabled="captchaDisable"
           size="large"
-          @click="handleOpenBehaviorCaptcha"
+          @click="onCaptcha"
         >
           {{ captchaBtnName }}
         </a-button>
       </template>
     </GiForm>
     <Verify
-        ref="VerifyRef"
+      ref="VerifyRef"
-        :mode="captchaMode"
+      :captcha-type="captchaType"
-        :captcha-type="captchaType"
+      :mode="captchaMode"
-        :img-size="{ width: '330px', height: '155px' }"
+      :img-size="{ width: '330px', height: '155px' }"
-        @success="onCaptcha"
+      @success="getCaptcha"
-    ></Verify>
+    />
   </a-modal>
 </template>
 
@@ -137,19 +137,19 @@ const { form, resetForm } = useForm({
 const VerifyRef = ref<InstanceType<any>>()
 const captchaType = ref('blockPuzzle')
 const captchaMode = ref('pop')
-const captchaTimer = ref()
-const captchaTime = ref(60)
-const captchaBtnName = ref('获取验证码')
-const captchaDisable = ref(false)
 const captchaLoading = ref(false)
-
 // 弹出行为验证码
-const handleOpenBehaviorCaptcha = async () => {
+const onCaptcha = async () => {
+  if (captchaLoading.value) return
   const isInvalid = await formRef.value?.formRef?.validateField(verifyType.value === 'phone' ? 'phone' : 'email')
   if (isInvalid) return
   VerifyRef.value.show()
 }
 
+const captchaTimer = ref()
+const captchaTime = ref(60)
+const captchaBtnName = ref('获取验证码')
+const captchaDisable = ref(false)
 // 重置验证码
 const resetCaptcha = () => {
   window.clearInterval(captchaTimer.value)
@@ -166,7 +166,7 @@ const reset = () => {
 }
 
 // 获取验证码
-const onCaptcha = async () => {
+const getCaptcha = async () => {
   // 发送验证码
   try {
     captchaLoading.value = true