feat:【system 系统功能】优化验证码的代码

2025-08-04 12:53:45 +08:00
parent 5d11e8ea53
commit 0926c69781
5 changed files with 90 additions and 92 deletions
--- a/src/components/Verifition/src/Verify/VerifyPictureWord.vue
+++ b/src/components/Verifition/src/Verify/VerifyPictureWord.vue
@@ -26,18 +26,22 @@
      :style="{
        width: setSize.imgWidth,
        color: barAreaColor,
-        'border-color': barAreaBorderColor,
+        'border-color': barAreaBorderColor
        // 'line-height': barSize.height
      }"
      class="verify-bar-area"
    >
      <div class="verify-msg">{{ text }}</div>
-      <div :style="{
-        'line-height': barSize.height
-      }">
+      <div
+        :style="{
+          'line-height': barSize.height
+        }"
+      >
        <input class="verify-input" type="text" v-model="userCode" />
      </div>
-      <button type="button" class="verify-btn" @click="submit" :disabled="checking">{{ t('captcha.verify') }}</button>
+      <button type="button" class="verify-btn" @click="submit" :disabled="checking">{{
+        t('captcha.verify')
+      }}</button>
    </div>
  </div>
 </template>
@@ -46,13 +50,13 @@
 * VerifyPictureWord
 * @description 输入文字
 * */
-import { resetSize } from '../utils/util';
-import { aesEncrypt } from '../utils/ase';
-import { getCode, reqCheck } from '@/api/login';
-import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue';
+import { resetSize } from '../utils/util'
+import { aesEncrypt } from '../utils/ase'
+import { getCode, reqCheck } from '@/api/login'
+import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue'

 const props = defineProps({
-  //弹出式pop，固定fixed
+  // 弹出式 pop，固定 fixed
  mode: {
    type: String,
    default: 'fixed'
@@ -60,7 +64,7 @@ const props = defineProps({
  captchaType: {
    type: String
  },
-  //间隔
+  // 间隔
  vSpace: {
    type: Number,
    default: 5
@@ -71,7 +75,7 @@ const props = defineProps({
      return {
        width: '310px',
        height: '155px'
-      };
+      }
    }
  },
  barSize: {
@@ -80,20 +84,18 @@ const props = defineProps({
      return {
        width: '310px',
        height: '40px'
-      };
+      }
    }
  }
-});
-
-const { t } = useI18n();
-const { mode, captchaType } = toRefs(props);
-const { proxy } = getCurrentInstance();
-let secretKey = ref(''), //后端返回的ase加密秘钥
+})

+const { t } = useI18n()
+const { mode, captchaType } = toRefs(props)
+const { proxy } = getCurrentInstance()
+let secretKey = ref(''), // 后端返回的ase加密秘钥
  userCode = ref(''), // 用户输入的验证码 暂存至pointJson，无需加密
-
-  verificationCodeImg = ref(''), //后端获取到的背景图片
-  backToken = ref(''), //后端返回的token值
+  verificationCodeImg = ref(''), // 后端获取到的背景图片
+  backToken = ref(''), // 后端返回的token值
  setSize = reactive({
    imgHeight: 0,
    imgWidth: 0,
@@ -104,91 +106,91 @@ let secretKey = ref(''), //后端返回的ase加密秘钥
  barAreaColor = ref('#000'),
  barAreaBorderColor = ref('#ddd'),
  showRefresh = ref(true),
-// bindingClick = ref(true)
-  checking = ref(false);
+  // bindingClick = ref(true)
+  checking = ref(false)

 const init = () => {
-  //加载页面
-  getPicture();
+  // 加载页面
+  getPicture()
  nextTick(() => {
-    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);
-    setSize.imgHeight = imgHeight;
-    setSize.imgWidth = imgWidth;
-    setSize.barHeight = barHeight;
-    setSize.barWidth = barWidth;
-    proxy.$parent.$emit('ready', proxy);
-  });
-};
+    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
+    setSize.imgHeight = imgHeight
+    setSize.imgWidth = imgWidth
+    setSize.barHeight = barHeight
+    setSize.barWidth = barWidth
+    proxy.$parent.$emit('ready', proxy)
+  })
+}
 onMounted(() => {
  // 禁止拖拽
-  init();
-  proxy.$el.onselectstart = function() {
-    return false;
-  };
-});
-const canvas = ref(null);
+  init()
+  proxy.$el.onselectstart = function () {
+    return false
+  }
+})
+const canvas = ref(null)

 const submit = () => {
-  checking.value = true;
-  //发送后端请求
-  var captchaVerification = secretKey.value
+  checking.value = true
+  // 发送后端请求
+  const captchaVerification = secretKey.value
    ? aesEncrypt(backToken.value + '---' + userCode.value, secretKey.value)
-    : backToken.value + '---' + userCode.value;
+    : backToken.value + '---' + userCode.value
  let data = {
    captchaType: captchaType.value,
    pointJson: userCode.value,
    token: backToken.value
-  };
+  }
  reqCheck(data).then((res) => {
-    if (res.repCode == '0000') {
-      barAreaColor.value = '#4cae4c';
-      barAreaBorderColor.value = '#5cb85c';
-      text.value = t('captcha.success');
+    if (res.repCode === '0000') {
+      barAreaColor.value = '#4cae4c'
+      barAreaBorderColor.value = '#5cb85c'
+      text.value = t('captcha.success')
      // bindingClick.value = false
-      if (mode.value == 'pop') {
+      if (mode.value === 'pop') {
        setTimeout(() => {
-          proxy.$parent.clickShow = false;
-          refresh();
-        }, 1500);
+          proxy.$parent.clickShow = false
+          refresh()
+        }, 1500)
      }
-      proxy.$parent.$emit('success', { captchaVerification });
+      proxy.$parent.$emit('success', { captchaVerification })
    } else {
-      proxy.$parent.$emit('error', proxy);
-      barAreaColor.value = '#d9534f';
-      barAreaBorderColor.value = '#d9534f';
-      text.value = t('captcha.fail');
+      proxy.$parent.$emit('error', proxy)
+      barAreaColor.value = '#d9534f'
+      barAreaBorderColor.value = '#d9534f'
+      text.value = t('captcha.fail')
      setTimeout(() => {
-        refresh();
-      }, 700);
+        refresh()
+      }, 700)
    }
-    checking.value = false;
-  });
-};
+    checking.value = false
+  })
+}

-const refresh = async function() {
-  barAreaColor.value = '#000';
-  barAreaBorderColor.value = '#ddd';
-  checking.value = false;
+const refresh = async function () {
+  barAreaColor.value = '#000'
+  barAreaBorderColor.value = '#ddd'
+  checking.value = false

-  userCode.value = '';
+  userCode.value = ''

-  await getPicture();
-  showRefresh.value = true;
-};
+  await getPicture()
+  showRefresh.value = true
+}

 // 请求背景图片和验证图片
 const getPicture = async () => {
  let data = {
    captchaType: captchaType.value
-  };
-  const res = await getCode(data);
-  if (res.repCode == '0000') {
-    verificationCodeImg.value = res.repData.originalImageBase64;
-    backToken.value = res.repData.token;
-    secretKey.value = res.repData.secretKey;
-    text.value = t('captcha.code');
-  } else {
-    text.value = res.repMsg;
  }
-};
-</script>
+  const res = await getCode(data)
+  if (res.repCode === '0000') {
+    verificationCodeImg.value = res.repData.originalImageBase64
+    backToken.value = res.repData.token
+    secretKey.value = res.repData.secretKey
+    text.value = t('captcha.code')
+  } else {
+    text.value = res.repMsg
+  }
+}
+</script>
--- a/src/views/Login/SocialLogin.vue
+++ b/src/views/Login/SocialLogin.vue
@@ -185,7 +185,7 @@ const { push } = useRouter()
 const permissionStore = usePermissionStore()
 const loginLoading = ref(false)
 const verify = ref()
-const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 pictureWord 文字验证码

 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)

--- a/src/views/Login/components/ForgetPasswordForm.vue
+++ b/src/views/Login/components/ForgetPasswordForm.vue
@@ -143,7 +143,7 @@ const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
 const { validForm } = useFormValid(formSmsResetPassword)
 const { handleBackLogin, getLoginState, setLoginState } = useLoginState()
 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD)
-const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 pictureWord 文字验证码

 const validatePass2 = (_rule, value, callback) => {
  if (value === '') {
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -47,10 +47,7 @@
          />
        </el-form-item>
      </el-col>
-      <el-col
-        :span="24"
-        class="px-10px mt-[-20px] mb-[-20px]"
-      >
+      <el-col :span="24" class="px-10px mt-[-20px] mb-[-20px]">
        <el-form-item>
          <el-row justify="space-between" style="width: 100%">
            <el-col :span="6">
@@ -177,8 +174,7 @@ const permissionStore = usePermissionStore()
 const redirect = ref<string>('')
 const loginLoading = ref(false)
 const verify = ref()
-const captchaType = ref('pictureWord') // blockPuzzle 滑块 clickWord 点击文字 pictureWord 文字验证码
-// const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 pictureWord 文字验证码
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 pictureWord 文字验证码

 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)

@@ -361,4 +357,4 @@ onMounted(() => {
    cursor: pointer;
  }
 }
-</style>
+</style>
--- a/src/views/Login/components/RegisterForm.vue
+++ b/src/views/Login/components/RegisterForm.vue
@@ -119,7 +119,7 @@ const permissionStore = usePermissionStore()
 const redirect = ref<string>('')
 const loginLoading = ref(false)
 const verify = ref()
-const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字 pictureWord 文字验证码

 const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER)