1.实现短信登录

src/LoginPage.js

@@ -33,10 +33,12 @@ const theme = createTheme({
 
 export default function () {
     const navigate = useNavigate();
+    const dispatch = useDispatch();
     const [cookies, setCookie] = useCookies(['accessToken']);
     const [value, setValue] = useState("1");
     const account = useSelector(state => state.user.account)
     const password = useSelector(state => state.user.password)
+    const verificationCode = useSelector(state => state.user.verificationCode)
 
     const handleChange = (event, newValue) => {
         setValue(newValue);
@@ -46,19 +48,20 @@ export default function () {
     const flushToken = useSelector(state => state.user.flushToken)
     const udid = useSelector(state => state.user.udid)
 
-
-    const dispatch = useDispatch()
-
-
-
     const debug_test = () => {
         console.log("accessToken", accessToken);
     }
     const handleSubmit = (event) => {
         event.preventDefault();
-        console.log(`account: ${account}\nPassword: ${password}  udid: ${udid}`);
+        console.log(`account: ${account}\nPassword: ${password}  udid: ${udid}`, value);
 
-        yzs.login(udid, account, password).then(token => {
+        let result = null;
+        if (value === "1") {
+            result = yzs.dynamic_code_login(udid, account, verificationCode);
+        } else if (value === "2") {
+            result = yzs.login(udid, account, password);
+        }
+        result.then(token => {
             dispatch(setFlushToken(token));
             yzs.get_access_token(udid, token).then(token => {
                 // yzs.update_access_token(ip.payload, token);
@@ -73,8 +76,6 @@ export default function () {
                 });
             })
         });
-
-
     };
 
     return (
@@ -102,9 +103,7 @@ export default function () {
                     >
                         <TabContext value={value}>
                             <Box>
-
                                 <TabList
-
                                     aria-label="basic tabs example" value={value} onChange={handleChange} >
                                     <Tab label="手机动态码登录" value="1" />
                                     <Tab label="账号密码登录" value="2" />
@@ -112,7 +111,7 @@ export default function () {
                             </Box>
 
                             <TabPanel value="1" >
-                                <DynamicCodeForm />
+                                <DynamicCodeForm udid={udid} />
                             </TabPanel>
                             <TabPanel value="2" >
                                 <PasswordForm />

src/PlayerBar.js

@@ -61,6 +61,10 @@ export default function ({ currentTime }) {
         player.current.currentTime = second;
     }
 
+    const onChange = (event) => {
+        player.current.playbackRate = event.target.value;
+    };
+
     return <Stack sx={{
         position: "sticky",
         top: 48,
@@ -82,13 +86,14 @@ export default function ({ currentTime }) {
                 <img src={pause ? pauseIcon : playIcon} />
             </IconButton>
 
-            <audio autoPlay ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
+            <audio ref={player} src={currentBlob} onDurationChange={onDurationChange} onTimeUpdate={onTimeUpdate} />
             <ProgressBar width={isNaN(canvasWidth) ? 0 : canvasWidth} duration={Math.ceil(duration * 1000)}
                 currentTime={currentTime} playing={!pause} seek={seekRecord}
                 waveData={currentWaveData}
             />
             <Select
                 defaultValue={1.0}
+                onChange={onChange}
                 sx={{
                     flexGrow: 1,
                     width: 90

src/RecordList.js

@@ -23,7 +23,7 @@ export default function () {
         yzs.download(accessToken, recordList.at(index).transResultUrl).then(
             blob => blob.text()
         ).then(text => {
-            console.log(text);
+            console.log("type", recordList.at(index).type, text);
             let payload = recordList.at(index).type === 1 ? JSON.parse(text) : text;
             dispatch(setCurrentLyric(payload));
         });
@@ -35,13 +35,11 @@ export default function () {
                 context.decodeAudioData(arrayBuffer).then(audioBuffer => {
                     let interval = audioBuffer.sampleRate / 1000 * 100;
                     let waveData = audioBuffer.getChannelData(0);
-
                     let wave = [];
                     let amplitude = 0;
                     for (let i = 0; i < waveData.length; i++) {
                         amplitude += Math.abs(waveData[i]);
                         if (i % interval == 0) {
-                            console.log(amplitude / interval)
                             wave.push(Math.floor(amplitude * 500 / interval));
                             amplitude = 0;
                         }

src/RecordLyrics.js

@@ -23,6 +23,6 @@ export default function ({ currentTime }) {
             return <div className={styles.lyricItem}>
                 <Typography align="left" color={isHighlight(currentTime, lyric) ? "red" : "black"}>{lyric.text}</Typography>
             </div>
-        }) : <React.Fragment />) : <div> {typeof currentLyric === "string" ? currentLyric : ""}</div>}
+        }) : <React.Fragment />) : <div style={{ whiteSpace: "pre-wrap" }}>{typeof currentLyric === "string" ? currentLyric : ""}</div>}
     </Paper>
 }

src/business/request.js

@@ -170,7 +170,7 @@ const yzs = {
         let body = {};
         body.subsystemId = 16;
         body.clientId = udid;
-        body.timestamp = parseInt(new Date().getTime() / 1000);
+        body.timestamp = Math.round(new Date().getTime() / 1000);
         body.account = account;
         body.password = md5(password);
 
@@ -188,6 +188,49 @@ const yzs = {
         }).catch(error => {
             console.log(error);
         });
+    },
+    dynamic_code_login: function (udid, userCell, phoneCode) {
+        let body = {};
+        body.subsystemId = 16;
+        body.clientId = udid;
+        body.timestamp = Math.round(new Date().getTime() / 1000);
+        body.userCell = userCell;
+        body.phoneCode = phoneCode;
+        return fetch(`${accessServer}/rest/v2/phone/login`, {
+            method: "POST",
+            body: constructParameter(body),
+            // mode: "no-cors",
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
+                "Access-Control-Allow-Origin": "*",
+            },
+        }).then(response => response.json()).then((json) => {
+            console.log("flushToken: ", json.result.flushToken);
+            return json.result.flushToken;
+        }).catch(error => {
+            console.log(error);
+        });
+    },
+    send_phone_code: function (udid, userCell) {
+        let body = {};
+        body.subsystemId = 16;
+        body.clientId = udid;
+        body.timestamp = Math.round(new Date().getTime() / 1000);
+        body.userCell = userCell;
+        return fetch(`${accessServer}/rest/v2/phone/send_phone_code`, {
+            method: "POST",
+            body: constructParameter(body),
+            // mode: "no-cors",
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
+                "Access-Control-Allow-Origin": "*",
+            },
+        }).then(response => response.json()).then((json) => {
+            console.log("send_phone_code: ", json);
+            return json;
+        }).catch(error => {
+            console.log(error);
+        });
     }
 };
 

src/components/DynamicCodeForm.js

@@ -1,13 +1,17 @@
 import { Container, TextField, InputAdornment, Link, Button, Stack, Typography } from "@mui/material";
 import { CheckBox } from '@mui/icons-material';
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PhoneIphoneIcon from '@mui/icons-material/PhoneIphone';
 import LockIcon from '@mui/icons-material/Lock';
 import { useSelector, useDispatch } from 'react-redux'
 import { setAccount, setVerificationCode } from "../business/userSlice.js"
+import yzs from "../business/request.js";
 
-export default function () {
+export default function ({ udid }) {
     const dispatch = useDispatch();
+    const code = useRef(null);
+    const [seconds, setSeconds] = useState(0);   // 倒计时
+
     const account = useSelector(state => state.user.account)
     const verificationCode = useSelector(state => state.user.verificationCode)
 
@@ -17,13 +21,32 @@ export default function () {
         if (name === 'password') dispatch(setVerificationCode(value));
     };
 
+    useEffect(() => {
+        const timer = window.setInterval(() => {
+            if (seconds > 0) {
+                setSeconds(seconds - 1);
+            } else {
+                code.current.disabled = false;
+            }
+        }, 1000);
+        return () => {
+            window.clearInterval(timer);
+        };
+    }, [seconds]);
+
+    const onClick = (event) => {
+        event.preventDefault();
+        code.current.disabled = true;
+        yzs.send_phone_code(udid, account)
+        setSeconds(60);
+    };
+
     return <Container disableGutters={true}
         sx={{
             width: 300,
             height: 200,
         }}
     >
-
         <TextField
             name="username"
             label="请输入手机号码"
@@ -58,7 +81,9 @@ export default function () {
                 ),
 
                 endAdornment: <InputAdornment position="end">
-                    <Link>发送动态码</Link>
+                    <Link ref={code}
+                        color={seconds > 0 ? "#FFB3B3" : "red"}
+                        component="button" underline="none" onClick={onClick}>{seconds > 0 ? `重新发送(${seconds})` : "发送动态码"}</Link>
                 </InputAdornment>
             }}
         />

src/components/ProgressBar.js

@@ -106,13 +106,9 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
 
     const onMouseUp = (event) => {
         setMouseDown(false);
-        console.log("onMouseUp");
-        // onMouseLeave(event);
         seek(scrollLeft * interval / (pointWidth + pointMargin) / 1000);
     }
 
-
-
     const onMouseMove = (event) => {
         event.preventDefault();
         if (!mouseDown) return;
@@ -122,8 +118,7 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
     }
 
     const onScroll = () => {
-        setScrollLeft(container.current.scrollLeft);
+        setScrollLeft(Math.round(container.current.scrollLeft));
-        // console.log("onScroll", container.current.scrollLeft, duration);
     };
     const paintWaveform = useCallback(() => {
         paintCanvas({
@@ -144,9 +139,8 @@ export default function ({ width, duration, currentTime, playing, seek, waveData
     }, [canvas, width, duration, scrollLeft, waveData])
 
     useEffect(() => {
-        console.log("mouseDown", mouseDown);
         if (!mouseDown)
-            container.current.scrollLeft = currentTime * 1000 / interval * (pointWidth + pointMargin);
+            container.current.scrollLeft = Math.round(currentTime * 1000 / interval * (pointWidth + pointMargin));
     }, [currentTime]);
 
     return <div ref={container}

src/setupProxy.js

@@ -37,7 +37,7 @@ module.exports = function (app) {
             changeOrigin: true,
             logger: console,
             onProxyReq: (proxyReq, req, res) => {
-                proxyReq.setHeader('appKey', 'k5hfiei5eevouvjohkapjaudpk2gakpaxha22fiy');
+                proxyReq.setHeader('appKey', appKey);
             },
         })
     );