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

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="{
+      <div
-        'line-height': barSize.height
+        :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 { resetSize } from '../utils/util'
-import { aesEncrypt } from '../utils/ase';
+import { aesEncrypt } from '../utils/ase'
-import { getCode, reqCheck } from '@/api/login';
+import { getCode, reqCheck } from '@/api/login'
-import { getCurrentInstance, nextTick, onMounted, reactive, ref, toRefs } from 'vue';
+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(''), // 后端获取到的背景图片
-  verificationCodeImg = ref(''), //后端获取到的背景图片
+  backToken = ref(''), // 后端返回的token值
-  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)
+  // bindingClick = ref(true)
-  checking = ref(false);
+  checking = ref(false)
 
 const init = () => {
-  //加载页面
+  // 加载页面
-  getPicture();
+  getPicture()
   nextTick(() => {
-    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);
+    let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy)
-    setSize.imgHeight = imgHeight;
+    setSize.imgHeight = imgHeight
-    setSize.imgWidth = imgWidth;
+    setSize.imgWidth = imgWidth
-    setSize.barHeight = barHeight;
+    setSize.barHeight = barHeight
-    setSize.barWidth = barWidth;
+    setSize.barWidth = barWidth
-    proxy.$parent.$emit('ready', proxy);
+    proxy.$parent.$emit('ready', proxy)
-  });
+  })
-};
+}
 onMounted(() => {
   // 禁止拖拽
-  init();
+  init()
-  proxy.$el.onselectstart = function() {
+  proxy.$el.onselectstart = function () {
-    return false;
+    return false
-  };
+  }
-});
+})
-const canvas = ref(null);
+const canvas = ref(null)
 
 const submit = () => {
-  checking.value = true;
+  checking.value = true
-  //发送后端请求
+  // 发送后端请求
-  var captchaVerification = secretKey.value
+  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') {
+    if (res.repCode === '0000') {
-      barAreaColor.value = '#4cae4c';
+      barAreaColor.value = '#4cae4c'
-      barAreaBorderColor.value = '#5cb85c';
+      barAreaBorderColor.value = '#5cb85c'
-      text.value = t('captcha.success');
+      text.value = t('captcha.success')
       // bindingClick.value = false
-      if (mode.value == 'pop') {
+      if (mode.value === 'pop') {
         setTimeout(() => {
-          proxy.$parent.clickShow = false;
+          proxy.$parent.clickShow = false
-          refresh();
+          refresh()
-        }, 1500);
+        }, 1500)
       }
-      proxy.$parent.$emit('success', { captchaVerification });
+      proxy.$parent.$emit('success', { captchaVerification })
     } else {
-      proxy.$parent.$emit('error', proxy);
+      proxy.$parent.$emit('error', proxy)
-      barAreaColor.value = '#d9534f';
+      barAreaColor.value = '#d9534f'
-      barAreaBorderColor.value = '#d9534f';
+      barAreaBorderColor.value = '#d9534f'
-      text.value = t('captcha.fail');
+      text.value = t('captcha.fail')
       setTimeout(() => {
-        refresh();
+        refresh()
-      }, 700);
+      }, 700)
     }
-    checking.value = false;
+    checking.value = false
-  });
+  })
-};
+}
 
-const refresh = async function() {
+const refresh = async function () {
-  barAreaColor.value = '#000';
+  barAreaColor.value = '#000'
-  barAreaBorderColor.value = '#ddd';
+  barAreaBorderColor.value = '#ddd'
-  checking.value = false;
+  checking.value = false
 
-  userCode.value = '';
+  userCode.value = ''
 
-  await getPicture();
+  await getPicture()
-  showRefresh.value = true;
+  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;
   }
-};
+  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>

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)
 

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 === '') {

src/views/Login/components/LoginForm.vue

@@ -47,10 +47,7 @@
           />
         </el-form-item>
       </el-col>
-      <el-col
+      <el-col :span="24" class="px-10px mt-[-20px] mb-[-20px]">
-        :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)
 

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)