From 0926c6978137883cef7cf3ece1b6f373dd782ba9 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Mon, 4 Aug 2025 12:53:45 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E3=80=90system=20=E7=B3=BB=E7=BB=9F?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=91=E4=BC=98=E5=8C=96=E9=AA=8C=E8=AF=81?= =?UTF-8?q?=E7=A0=81=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/Verify/VerifyPictureWord.vue | 166 +++++++++--------- src/views/Login/SocialLogin.vue | 2 +- .../Login/components/ForgetPasswordForm.vue | 2 +- src/views/Login/components/LoginForm.vue | 10 +- src/views/Login/components/RegisterForm.vue | 2 +- 5 files changed, 90 insertions(+), 92 deletions(-) diff --git a/src/components/Verifition/src/Verify/VerifyPictureWord.vue b/src/components/Verifition/src/Verify/VerifyPictureWord.vue index f996f648..e1725f89 100644 --- 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" >
{{ text }}
-
+
- +
@@ -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; } -}; - \ No newline at end of file + 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 + } +} + diff --git a/src/views/Login/SocialLogin.vue b/src/views/Login/SocialLogin.vue index e0caace8..961f4ddb 100644 --- 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) diff --git a/src/views/Login/components/ForgetPasswordForm.vue b/src/views/Login/components/ForgetPasswordForm.vue index 0c3b2e04..f47b2299 100644 --- 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 === '') { diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue index cb4dd429..1bb5173d 100644 --- a/src/views/Login/components/LoginForm.vue +++ b/src/views/Login/components/LoginForm.vue @@ -47,10 +47,7 @@ /> - + @@ -177,8 +174,7 @@ const permissionStore = usePermissionStore() const redirect = ref('') 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; } } - \ No newline at end of file + diff --git a/src/views/Login/components/RegisterForm.vue b/src/views/Login/components/RegisterForm.vue index 0636a1c8..eb1f75b6 100644 --- a/src/views/Login/components/RegisterForm.vue +++ b/src/views/Login/components/RegisterForm.vue @@ -119,7 +119,7 @@ const permissionStore = usePermissionStore() const redirect = ref('') 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)