From f30bf344323c56cea651bb1695a5d637d9f479fa Mon Sep 17 00:00:00 2001 From: amass <168062547@qq.com> Date: Wed, 21 Jun 2023 16:19:29 +0800 Subject: [PATCH] =?UTF-8?q?1.=E5=AE=9E=E7=8E=B0=E6=89=8B=E6=9C=BA=E5=8F=B7?= =?UTF-8?q?=E7=A0=81=E6=A0=A1=E9=AA=8C=E6=8F=90=E7=A4=BA=20=E5=92=8C?= =?UTF-8?q?=E7=99=BB=E5=BD=95=E8=BF=94=E5=9B=9E=E9=94=99=E8=AF=AF=E6=8F=90?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/LoginPage.js | 25 ++++++++++++------ src/business/request.js | 7 ++--- src/business/utilities.js | 16 ++++++++++- src/components/DynamicCodeForm.js | 28 +++++++++++++++----- src/components/PasswordForm.js | 28 +++++++++++++++----- src/components/ProgressBar.js | 44 +++++++++++++++++-------------- 6 files changed, 104 insertions(+), 44 deletions(-) diff --git a/src/LoginPage.js b/src/LoginPage.js index e9aa857..7bbc749 100644 --- a/src/LoginPage.js +++ b/src/LoginPage.js @@ -5,7 +5,7 @@ import styles from './LoginPage.module.css'; import { useSelector, useDispatch } from 'react-redux' import { setFlushToken, setAccessToken, setUserInfo, setAgreeAgreement } from "./business/userSlice.js" import logo from './assets/logo.png'; -import { Container, Tab, Box, Snackbar, Button } from '@mui/material'; +import { Container, Tab, Box, Snackbar, Alert, Button } from '@mui/material'; import TabPanel from '@mui/lab/TabPanel'; import { TabList } from '@mui/lab'; import TabContext from '@mui/lab/TabContext'; @@ -35,6 +35,8 @@ export default function () { const dispatch = useDispatch(); const [cookies, setCookie] = useCookies(['accessToken']); const [value, setValue] = useState("1"); + const [message, setMessage] = useState(""); + const [openTooltip, setOpenTooltip] = useState(false); const account = useSelector(state => state.user.account) const password = useSelector(state => state.user.password) const verificationCode = useSelector(state => state.user.verificationCode) @@ -44,6 +46,10 @@ export default function () { setValue(newValue); }; + const handleTooltipClose = () => { + setOpenTooltip(false); + }; + const onAgreeChange = (event) => { dispatch(setAgreeAgreement(!agreeAgreement)); } @@ -78,6 +84,8 @@ export default function () { }) }).catch(error => { console.log(error) + setMessage(error); + setOpenTooltip(true); }); }; @@ -123,12 +131,13 @@ export default function () { {/* */} - {/* */} + + {message} + } \ No newline at end of file diff --git a/src/business/request.js b/src/business/request.js index 43858f1..7c22f37 100644 --- a/src/business/request.js +++ b/src/business/request.js @@ -206,10 +206,11 @@ const yzs = { "Access-Control-Allow-Origin": "*", }, }).then(response => response.json()).then((json) => { - console.log("flushToken: ", json.result.flushToken); + if (json.returnCode != "uc_0000") { + throw json.message; + } + // console.log("flushToken: ", json.result.flushToken); return json.result.flushToken; - }).catch(error => { - console.log(error); }); }, send_phone_code: function (udid, userCell) { diff --git a/src/business/utilities.js b/src/business/utilities.js index 14f17d1..8ca6a83 100644 --- a/src/business/utilities.js +++ b/src/business/utilities.js @@ -33,4 +33,18 @@ function audioWaveData(url, interval) { }); } -export { sampleInterval, audioWaveData }; \ No newline at end of file +function validatePhoneNumber(phoneNumber) { + if (phoneNumber.length !== 11) { + return false; + } + let reg = /^1\d{10}$/; + return reg.test(phoneNumber); +} + +function textHintOfValidatePhoneNumber(phoneNumber) { + if (validatePhoneNumber(phoneNumber)) return ""; + if (phoneNumber.length === 0) return "请输入手机号码" + return "请输入正确的手机号码"; +} + +export { sampleInterval, audioWaveData, validatePhoneNumber, textHintOfValidatePhoneNumber }; \ No newline at end of file diff --git a/src/components/DynamicCodeForm.js b/src/components/DynamicCodeForm.js index df58df3..8501f32 100644 --- a/src/components/DynamicCodeForm.js +++ b/src/components/DynamicCodeForm.js @@ -6,10 +6,12 @@ import { useSelector, useDispatch } from 'react-redux' import { setAccount, setVerificationCode } from "../business/userSlice.js" import yzs from "../business/request.js"; import Agreement from "./Agreement.js"; +import { validatePhoneNumber, textHintOfValidatePhoneNumber } from "../business/utilities.js" export default function ({ udid, agreeAgreement, onAgreeChange }) { const dispatch = useDispatch(); const code = useRef(null); + const [firstEnter, setFirstEnter] = useState(true); const [seconds, setSeconds] = useState(0); // 倒计时 const account = useSelector(state => state.user.account) @@ -17,7 +19,10 @@ export default function ({ udid, agreeAgreement, onAgreeChange }) { const handleInputChange = (event) => { const { name, value } = event.target; - if (name === 'username') dispatch(setAccount(value)); + if (name === 'username') { + dispatch(setAccount(value)); + if (firstEnter) setFirstEnter(false); + } if (name === 'password') dispatch(setVerificationCode(value)); }; @@ -50,11 +55,15 @@ export default function ({ udid, agreeAgreement, onAgreeChange }) { ), }} + sx={{ + minHeight: 64, + }} /> state.user.account) const password = useSelector(state => state.user.password) + const [firstEnter, setFirstEnter] = useState(true); const handleInputChange = (event) => { const { name, value } = event.target; - if (name === 'username') dispatch(setAccount(value)); + if (name === 'username') { + dispatch(setAccount(value)); + if (firstEnter) setFirstEnter(false); + } if (name === 'password') dispatch(setPassword(value)); }; @@ -25,8 +30,12 @@ export default function ({ agreeAgreement, onAgreeChange }) { ), }} + sx={{ + minHeight: 64, + }} /> { // console.log("paintCanvas", duration, canvasHeight, canvas.width, scrollLeft); - const context = canvas.getContext('2d'); - context.save(); - context.clearRect(0, 0, canvas.width, canvas.height); - context.translate(leftPadding, 0);; + try { + const context = canvas.getContext('2d'); + context.save(); + context.clearRect(0, 0, canvas.width, canvas.height); + context.translate(leftPadding, 0);; - drawText(context, duration, interval); // 画刻度尺 + drawText(context, duration, interval); // 画刻度尺 - waveformData.forEach((p, i) => { - context.beginPath() - const coordinates = pointCoordinates({ - index: i, - pointWidth, - pointMargin, - canvasHeight, - maxAmplitude: canvasHeight - 30, // 留出空间画时间轴 - amplitude: p, - }) - context.rect(...coordinates) - context.fillStyle = (coordinates[0] <= scrollLeft) ? '#FF595A' : '#ABB5BC' - context.fill() - }); - context.restore(); + waveformData.forEach((p, i) => { + context.beginPath() + const coordinates = pointCoordinates({ + index: i, + pointWidth, + pointMargin, + canvasHeight, + maxAmplitude: canvasHeight - 30, // 留出空间画时间轴 + amplitude: p, + }) + context.rect(...coordinates) + context.fillStyle = (coordinates[0] <= scrollLeft) ? '#FF595A' : '#ABB5BC' + context.fill() + }); + context.restore(); + } catch (error) { + console.log(error); + } } // duration ms