From eef27d2aeb73916363eec1ababf2bdd46135b975 Mon Sep 17 00:00:00 2001 From: liulujian Date: Wed, 15 Apr 2026 15:53:38 +0800 Subject: [PATCH] =?UTF-8?q?refactor(mhzc):=20=E7=99=BB=E5=BD=95=E9=A1=B5?= =?UTF-8?q?=E6=BB=91=E5=9D=97=E9=AA=8C=E8=AF=81=E6=94=B9=E4=B8=BA=E5=9B=BE?= =?UTF-8?q?=E5=BD=A2=E9=AA=8C=E8=AF=81=E7=A0=81=EF=BC=88=E5=8E=9F=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E6=B3=A8=E9=87=8A=E4=BF=9D=E7=95=99=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.6 --- .../login/components/login/passwordlogin.vue | 234 ++++++++++++------ 1 file changed, 161 insertions(+), 73 deletions(-) diff --git a/txw-mhzc-web/src/pages/index/views/login/components/login/passwordlogin.vue b/txw-mhzc-web/src/pages/index/views/login/components/login/passwordlogin.vue index 9c2242d..cbf8f85 100644 --- a/txw-mhzc-web/src/pages/index/views/login/components/login/passwordlogin.vue +++ b/txw-mhzc-web/src/pages/index/views/login/components/login/passwordlogin.vue @@ -33,6 +33,8 @@ + + + + + +
+ 验证码 + + 刷新 +
+ @@ -65,7 +89,8 @@ import { removePassword, removeRememberMe, removeUsername } from '@/utils/auth'; import { UserIcon, LockOnIcon } from 'tdesign-icons-vue'; import { MessagePlugin } from 'tdesign-vue'; -import { getVerify } from '@/pages/index/api/login'; +// import { getVerify } from '@/pages/index/api/login'; // 滑块验证已注释 +import { getCaptcha } from '@/pages/index/api/login'; const FORM_RULES = { mobile: [{ required: true, message: '手机号必填', type: 'error' }], @@ -80,14 +105,22 @@ export default { }, data() { return { - beginClientX: 0 /* 距离屏幕左端距离 */, - mouseMoveState: false /* 触发拖动状态 判断 */, - maxWidth: '' /* 拖动最大宽度，依据滑块宽度算出来的 */, - confirmWords: '请按住滑块，拖动到最右边' /* 滑块文字 */, - confirmSuccess: false /* 验证成功判断 */, - width: 350, - height: 42, - textSize: '18px', + // === 滑块验证相关数据（已注释，保留以便回滚） === + // beginClientX: 0, + // mouseMoveState: false, + // maxWidth: '', + // confirmWords: '请按住滑块，拖动到最右边', + // confirmSuccess: false, + // width: 350, + // height: 42, + // textSize: '18px', + // === 滑块验证相关数据 end === + + // 图形验证码相关 + captchaUuid: '', + captchaImage: '', + captchaCode: '', + FORM_RULES, loginForm: { loginType: 'password', @@ -122,9 +155,16 @@ export default { }); return; } - if (!this.confirmSuccess) { + if (!this.captchaUuid) { MessagePlugin.info({ - content: '请先完成滑块验证', + content: '请先获取验证码', + duration: 1000, + }); + return; + } + if (!this.loginForm.captchaCode || this.loginForm.captchaCode.length !== 4) { + MessagePlugin.info({ + content: '请输入4位验证码', duration: 1000, }); return; @@ -212,75 +252,89 @@ export default { }); }) }, + // === 滑块验证方法（已注释，保留以便回滚） === // mousedown 事件 - mouseDown(e) { - if (!this.confirmSuccess) { - e.preventDefault && e.preventDefault(); // 阻止文字选中等 浏览器默认事件 - this.mouseMoveState = true; - this.beginClientX = e.clientX; - } - }, + // mouseDown(e) { + // if (!this.confirmSuccess) { + // e.preventDefault && e.preventDefault(); + // this.mouseMoveState = true; + // this.beginClientX = e.clientX; + // } + // }, // 验证成功函数 - successFunction() { - getVerify().then((res) => { - this.loginForm.captchaVerification = res.data; - this.confirmSuccess = true; - this.confirmWords = '验证通过'; - }); - if (window.addEventListener) { - document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn); - document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn); - } else { - document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {}); - } - document.getElementsByClassName('drag_text')[0].style.color = '#fff'; - document.getElementsByClassName('handler')[0].style.left = `${this.maxWidth}px`; - document.getElementsByClassName('drag_bg')[0].style.width = `${this.maxWidth}px`; - }, + // successFunction() { + // getVerify().then((res) => { + // this.loginForm.captchaVerification = res.data; + // this.confirmSuccess = true; + // this.confirmWords = '验证通过'; + // }); + // if (window.addEventListener) { + // document.getElementsByTagName('html')[0].removeEventListener('mousemove', this.mouseMoveFn); + // document.getElementsByTagName('html')[0].removeEventListener('mouseup', this.moseUpFn); + // } else { + // document.getElementsByTagName('html')[0].removeEventListener('mouseup', () => {}); + // } + // document.getElementsByClassName('drag_text')[0].style.color = '#fff'; + // document.getElementsByClassName('handler')[0].style.left = `${this.maxWidth}px`; + // document.getElementsByClassName('drag_bg')[0].style.width = `${this.maxWidth}px`; + // }, // mousemove事件 - mouseMoveFn(e) { - if (this.mouseMoveState) { - const width = e.clientX - this.beginClientX; - if (width > 0 && width <= this.maxWidth) { - document.getElementsByClassName('handler')[0].style.left = `${width}px`; - document.getElementsByClassName('drag_bg')[0].style.width = `${width}px`; - } else if (width > this.maxWidth) { - this.successFunction(); - } - } - }, + // mouseMoveFn(e) { + // if (this.mouseMoveState) { + // const width = e.clientX - this.beginClientX; + // if (width > 0 && width <= this.maxWidth) { + // document.getElementsByClassName('handler')[0].style.left = `${width}px`; + // document.getElementsByClassName('drag_bg')[0].style.width = `${width}px`; + // } else if (width > this.maxWidth) { + // this.successFunction(); + // } + // } + // }, // mouseup事件 - moseUpFn(e) { - this.mouseMoveState = false; - const width = e.clientX - this.beginClientX; - if (width < this.maxWidth) { - document.getElementsByClassName('handler')[0].style.left = `${0}px`; - document.getElementsByClassName('drag_bg')[0].style.width = `${0}px`; - } - }, - reSet() { - this.formData.sfzhm = ''; - this.formData.xm = ''; - this.reSetSlider(); - }, - reSetSlider() { - this.confirmSuccess = false; - this.mouseMoveState = false; - this.cxBtnDisabled = true; - this.confirmWords = '请按住滑块，拖动到最右边'; - document.getElementsByClassName('handler')[0].style.left = `${0}px`; - document.getElementsByClassName('drag_bg')[0].style.width = `${0}px`; - document.getElementsByClassName('drag_text')[0].style.color = 'black'; - document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn); - document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn); + // moseUpFn(e) { + // this.mouseMoveState = false; + // const width = e.clientX - this.beginClientX; + // if (width < this.maxWidth) { + // document.getElementsByClassName('handler')[0].style.left = `${0}px`; + // document.getElementsByClassName('drag_bg')[0].style.width = `${0}px`; + // } + // }, + // reSet() { + // this.formData.sfzhm = ''; + // this.formData.xm = ''; + // this.reSetSlider(); + // }, + // reSetSlider() { + // this.confirmSuccess = false; + // this.mouseMoveState = false; + // this.cxBtnDisabled = true; + // this.confirmWords = '请按住滑块，拖动到最右边'; + // document.getElementsByClassName('handler')[0].style.left = `${0}px`; + // document.getElementsByClassName('drag_bg')[0].style.width = `${0}px`; + // document.getElementsByClassName('drag_text')[0].style.color = 'black'; + // document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn); + // document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn); + // }, + // === 滑块验证方法 end === + + // 新增：刷新验证码 + refreshCaptcha() { + getCaptcha().then((res) => { + this.captchaUuid = res.data.uuid; + this.captchaImage = res.data.imageBase64; + this.loginForm.captchaVerification = res.data.uuid; + this.loginForm.captchaCode = ''; + }); }, }, mounted() { - // 计算滑块滑动最大值 - this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; - // 添加监听事件 - document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn); - document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn); + // === 滑块初始化（已注释） === + // this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; + // document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn); + // document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn); + + // 新增：初始化图形验证码 + this.refreshCaptcha(); }, }; @@ -346,4 +400,38 @@ export default { .btn-container { margin-top: 16px; } + +/* === 滑块验证样式（已注释，保留以便回滚） === +.drag { ... } +.handler { ... } +.handler_bg { ... } +.handler_ok_bg { ... } +.drag_bg { ... } +.drag_text { ... } +*/ + +/* 新增：图形验证码样式 */ +.captcha-wrapper { + display: flex; + align-items: center; + gap: 12px; + width: 350px; + height: 40px; +} +.captcha-img { + width: 120px; + height: 40px; + cursor: pointer; + border-radius: 4px; + border: 1px solid #ccc; +} +.captcha-refresh { + color: #0052d9; + cursor: pointer; + font-size: 14px; + user-select: none; +} +.captcha-refresh:hover { + text-decoration: underline; +}