From df25e1a40651e817abb177a31da2bea2bdb86982 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Mon, 29 Sep 2025 19:37:22 +0800 Subject: [PATCH] =?UTF-8?q?feat(passport):=20=E5=AE=9E=E7=8E=B0=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=91=98=E7=9F=AD=E4=BF=A1=E7=99=BB=E5=BD=95=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新登录页面标题为"管理员登录" - 移除账号密码登录方式，仅保留短信验证码登录 - 新增手机号格式验证逻辑 - 集成短信验证码发送与登录接口- 添加图形验证码验证流程 - 实现短信验证码倒计时功能 - 更新用户中心跳转链接指向新的登录页 - 优化登录页面UI布局与样式 --- src/pages/user/components/UserCell.tsx | 4 +- src/passport/login.config.ts | 2 +- src/passport/login.tsx | 415 +++++++++++++++++++++++-- 3 files changed, 388 insertions(+), 33 deletions(-) diff --git a/src/pages/user/components/UserCell.tsx b/src/pages/user/components/UserCell.tsx index d903be3..3fa0181 100644 --- a/src/pages/user/components/UserCell.tsx +++ b/src/pages/user/components/UserCell.tsx @@ -250,10 +250,10 @@ const UserCell = () => { /> } - onClick={() => navTo('/passport/sms-login', true)} + onClick={() => navTo('/passport/login', true)} /> { const [isAgree, setIsAgree] = useState(false) + // 只保留短信登录方式 + const [loginType, setLoginType] = useState('sms') + // const [username, setUsername] = useState('') + // const [password, setPassword] = useState('') + const [phone, setPhone] = useState('') + const [smsCode, setSmsCode] = useState('') + const [captchaImg, setCaptchaImg] = useState('') + const [captchaCode, setCaptchaCode] = useState('') + const [showCaptchaModal, setShowCaptchaModal] = useState(false) + const [countdown, setCountdown] = useState(0) // 短信验证码倒计时 + const [loading, setLoading] = useState(false) + const reload = () => { Taro.hideTabBar() } + // 获取图形验证码 + const fetchCaptcha = async () => { + try { + const res = await getCaptcha() + setCaptchaImg(res.base64) + } catch (error) { + Taro.showToast({ + title: '获取验证码失败', + icon: 'error' + }) + } + } + + // 发送短信验证码 + const handleSendSmsCode = async () => { + if (!phone) { + Taro.showToast({ + title: '请输入手机号', + icon: 'error' + }) + return + } + + // 验证手机号格式 + const phoneReg = /^1[3-9]\d{9}$/ + if (!phoneReg.test(phone)) { + Taro.showToast({ + title: '手机号格式不正确', + icon: 'error' + }) + return + } + + // 显示图形验证码弹窗 + fetchCaptcha() + setShowCaptchaModal(true) + } + + // 确认发送短信验证码 + const confirmSendSmsCode = async () => { + if (!captchaCode) { + Taro.showToast({ + title: '请输入图形验证码', + icon: 'error' + }) + return + } + + try { + setLoading(true) + // 发送短信验证码时需要传入手机号和图形验证码 + await sendSmsCaptcha({ phone, code: captchaCode }) + Taro.showToast({ + title: '短信验证码已发送', + icon: 'success' + }) + setShowCaptchaModal(false) + setCaptchaCode('') + + // 开始倒计时 + setCountdown(60) + } catch (error) { + Taro.showToast({ + title: error.message || '发送失败', + icon: 'error' + }) + } finally { + setLoading(false) + } + } + + // 短信验证码登录 + const handleSmsLogin = async () => { + if (!phone) { + Taro.showToast({ + title: '请输入手机号', + icon: 'error' + }) + return + } + + // 验证手机号格式 + const phoneReg = /^1[3-9]\d{9}$/ + if (!phoneReg.test(phone)) { + Taro.showToast({ + title: '手机号格式不正确', + icon: 'error' + }) + return + } + + if (!smsCode) { + Taro.showToast({ + title: '请输入短信验证码', + icon: 'error' + }) + return + } + + try { + setLoading(true) + // 短信登录时传入手机号和短信验证码 + const res = await loginBySms({ phone, code: smsCode }) + + console.log(res,'.......') + Taro.showToast({ + title: '登录成功', + icon: 'success' + }) + + // 跳转到首页 + setTimeout(() => { + Taro.switchTab({ url: '/pages/index/index' }) + }, 1500) + } catch (error) { + Taro.showToast({ + title: error.message || '登录失败', + icon: 'error' + }) + } finally { + setLoading(false) + } + } + + // 登录处理 + const onLogin = async () => { + if (!isAgree) { + Taro.showToast({ + title: '请先同意服务协议', + icon: 'error' + }) + return + } + + handleSmsLogin() + } + + // 倒计时处理 + useEffect(() => { + let timer: any + if (countdown > 0) { + timer = setTimeout(() => { + setCountdown(countdown - 1) + }, 1000) + } + return () => clearTimeout(timer) + }, [countdown]) + useEffect(() => { reload() }, []) return ( <> -
-
账号登录
+
+
管理员登录
- <> -
- + {/* 登录方式切换 - 隐藏账号登录 */} +
+
setLoginType('account')} + > + 账号登录
-
- +
setLoginType('sms')} + > + 短信登录
- -
- -
-
- -
- {/**/} - +
-
- setIsAgree(!isAgree)}> - setIsAgree(!isAgree)}>勾选表示您已阅读并同意 Taro.navigateTo({url: '/passport/agreement'})} - className={'text-blue-600'}>《服务协议及隐私政策》 + {/* 短信验证码登录 - 始终显示 */} +
+
+ setPhone(val)} + style={{ + backgroundColor: '#ffffff', + borderRadius: '8px', + width: '100%', + padding: '10px' + }} + /> +
+
+
+ setSmsCode(val)} + style={{ + flex: 1, + border: 'none', + padding: '10px' + }} + /> + +
+
+
+ +
+ +
+ +
+ setIsAgree(!isAgree)} + /> + setIsAgree(!isAgree)}>勾选表示您已阅读并同意 + Taro.navigateTo({url: '/passport/agreement'})} + style={{color: '#1890ff'}} + > + 《服务协议及隐私政策》 +
+ + {/* 图形验证码弹窗 */} + {showCaptchaModal && ( +
+
+
请输入图形验证码
+
+ {captchaImg && ( + 验证码 + )} +
+ setCaptchaCode(val)} + style={{ + marginBottom: '15px' + }} + /> +
+ + +
+
+
+ )} ) } + export default Login