From 8a91713babb0f842b70d078356c1658c8b810043 Mon Sep 17 00:00:00 2001 From: liulujian Date: Wed, 15 Apr 2026 15:55:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor(mhzc):=20=E7=9F=AD=E4=BF=A1=E7=99=BB?= =?UTF-8?q?=E5=BD=95=E9=A1=B5=E6=BB=91=E5=9D=97=E9=AA=8C=E8=AF=81=E6=94=B9?= =?UTF-8?q?=E4=B8=BA=E5=9B=BE=E5=BD=A2=E9=AA=8C=E8=AF=81=E7=A0=81=EF=BC=88?= =?UTF-8?q?=E5=8E=9F=E4=BB=A3=E7=A0=81=E6=B3=A8=E9=87=8A=E4=BF=9D=E7=95=99?= =?UTF-8?q?=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/phonelogin.vue | 218 ++++++++---------- 1 file changed, 92 insertions(+), 126 deletions(-) diff --git a/txw-mhzc-web/src/pages/index/views/login/components/login/phonelogin.vue b/txw-mhzc-web/src/pages/index/views/login/components/login/phonelogin.vue index 1ba6bb1..bd3c0b3 100644 --- a/txw-mhzc-web/src/pages/index/views/login/components/login/phonelogin.vue +++ b/txw-mhzc-web/src/pages/index/views/login/components/login/phonelogin.vue @@ -26,28 +26,27 @@ {{ countDown === 0 ? '发送验证码' : `${countDown}秒后可重发` }} + + + + + +
+ 验证码 + + 刷新 +
@@ -67,7 +66,8 @@ import { removePassword, removeRememberMe, removeUsername } from '@/utils/auth'; import { UserIcon, LockOnIcon } from 'tdesign-icons-vue'; import { MessagePlugin } from 'tdesign-vue'; -import { getVerify,loginBySMS,sendMsg } from '@/pages/index/api/login'; +// import { getVerify, loginBySMS, sendMsg } from '@/pages/index/api/login'; // 滑块验证已注释 +import { getCaptcha, loginBySMS, sendMsg } from '@/pages/index/api/login'; const FORM_RULES = { sjhm: [{ required: true, message: '手机号必填', type: 'error' }], @@ -80,14 +80,23 @@ 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', + // isCounting: false, + // iscxhk: false, + // === 滑块验证相关数据 end === + + // 图形验证码相关 + captchaUuid: '', + captchaImage: '', + FORM_RULES, loginForm: { loginType: 'password', @@ -100,8 +109,6 @@ export default { }, countDown: 0, intervalTimer: null, - isCounting: false, // 新增：标记是否正在倒计时 - iscxhk:false, }; }, beforeDestroy() { @@ -143,18 +150,8 @@ export default { }) .catch((error) => { console.log('22222'); - // 登录失败时，如果正在倒计时，停止计时器并重置滑块 - // if (this.isCounting) { - // this.stopAndResetTimer(); - // this.reSetSlider(); - // } - if (this.isCounting) { - this.stopAndResetTimer(); - } - return; - // if (error === 1004003) { - // this.reSetSlider(); - // } + this.stopAndResetTimer(); + return; }); }, handleCounter() { @@ -165,9 +162,9 @@ handleCounter() { }); return; } - if (!this.confirmSuccess) { + if (!this.captchaUuid) { MessagePlugin.info({ - content: '请先完成滑块验证', + content: '请先获取验证码', duration: 1000, }); return; @@ -210,94 +207,38 @@ handleCounter() { // 新增：停止计时器并重置状态 stopAndResetTimer() { clearInterval(this.intervalTimer); - this.iscxhk = !this.iscxhk; this.intervalTimer = null; this.countDown = 0; - this.isCounting = false; - // 添加滑块重置逻辑 - this.reSetSlider(); }, - + + // === 滑块验证方法（已注释，保留以便回滚） === // mousedown 事件 - 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 = '验证通过'; + // mouseDown(e) { ... }, + // successFunction() { ... }, + // removeMouseListeners() { ... }, + // mouseMoveFn(e) { ... }, + // moseUpFn(e) { ... }, + // reSet() { ... }, + // reSetSlider() { ... }, + // addMouseListeners() { ... }, + // === 滑块验证方法 end === + + // 新增：刷新验证码 + refreshCaptcha() { + getCaptcha().then((res) => { + this.captchaUuid = res.data.uuid; + this.captchaImage = res.data.imageBase64; + this.loginForm.captchaVerification = res.data.uuid; }); - this.removeMouseListeners(); - }, - - // 新增：移除鼠标监听事件 - removeMouseListeners() { - 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(); - } - } - }, - // 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.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'; - - // 重新添加监听事件 - this.addMouseListeners(); - }, - - // 新增：添加鼠标监听事件 - addMouseListeners() { - document.getElementsByTagName('html')[0].addEventListener('mousemove', this.mouseMoveFn); - document.getElementsByTagName('html')[0].addEventListener('mouseup', this.moseUpFn); }, }, mounted() { - // 计算滑块滑动最大值 - this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; - // 添加监听事件 - this.addMouseListeners(); + // === 滑块初始化（已注释） === + // this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth; + // this.addMouseListeners(); + + // 新增：初始化图形验证码 + this.refreshCaptcha(); }, }; @@ -363,4 +304,29 @@ stopAndResetTimer() { .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; +}