Merge pull request #21 from uglyspoon/master

登录模块bug & 冲突
sanyuan0704 · Sep 4, 2019 · 2745196 · 2745196
2 parents 82442bb + f6481fd
commit 2745196
Show file tree

Hide file tree

Showing 11 changed files with 401 additions and 102 deletions.
diff --git a/src/application/Singer/index.js b/src/application/Singer/index.js
@@ -1,17 +1,17 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Container } from './style';
-import Header from '../../baseUI/header/index'
+import React, { useState, useEffect, useRef } from "react";
+import { Container } from "./style";
+import Header from "../../baseUI/header/index";
 import { ImgWrapper, CollectButton, SongListWrapper, BgLayer } from "./style";
-import Scroll from '../../baseUI/scroll/index';
-import { HEADER_HEIGHT } from './../../api/config';
-import { getSingerInfo } from './store/actionCreators';
-import { connect } from 'react-redux';
-import Loading from './../../baseUI/loading/index';
-import { EnterLoading } from '../Singers/style';
-import {changeEnterLoading} from './store/actionCreators';
-import { CSSTransition } from 'react-transition-group';
-import SongsList from '../SongList/';
-import MusicNote from '../../baseUI/music-note/index';
+import Scroll from "../../baseUI/scroll/index";
+import { HEADER_HEIGHT } from "./../../api/config";
+import { getSingerInfo } from "./store/actionCreators";
+import { connect } from "react-redux";
+import Loading from "./../../baseUI/loading/index";
+import { EnterLoading } from "../Singers/style";
+import { changeEnterLoading } from "./store/actionCreators";
+import { CSSTransition } from "react-transition-group";
+import SongsList from "../SongList/";
+import MusicNote from "../../baseUI/music-note/index";
 
 function Singer(props) {
   const initialHeight = useRef(0);
@@ -32,71 +32,75 @@ function Singer(props) {
   const musicNoteRef = useRef();
 
   useEffect(() => {
-    const id = props.match.params.id; 
+    const id = props.match.params.id;
     getSingerDataDispatch(id);
     let h = imageWrapper.current.offsetHeight;
     initialHeight.current = h;
-    songScrollWrapper.current.style.top = `${h-OFFSET}px`;
+    songScrollWrapper.current.style.top = `${h - OFFSET}px`;
     //把遮罩先放在下面，以裹住歌曲列表
-    layer.current.style.top = `${h-OFFSET}px`;
+    layer.current.style.top = `${h - OFFSET}px`;
     songScroll.current.refresh();
     // eslint-disable-next-line
-  }, [])
+  }, []);
 
-  const handleScroll = (pos) => {
+  const handleScroll = pos => {
     let height = initialHeight.current;
     const newY = pos.y;
     const imageDOM = imageWrapper.current;
     const buttonDOM = collectButton.current;
     const headerDOM = header.current;
     const layerDOM = layer.current;
-    const minScrollY = -(height-OFFSET) + HEADER_HEIGHT;
+    const minScrollY = -(height - OFFSET) + HEADER_HEIGHT;
 
     const percent = Math.abs(newY / height);
     //说明: 在歌手页的布局中，歌单列表其实是没有自己的背景的，layerDOM其实是起一个遮罩的作用，给歌单内容提供白色背景
     //因此在处理的过程中，随着内容的滚动，遮罩也跟着移动
-    if(newY > 0) {
+    if (newY > 0) {
       //处理往下拉的情况,效果：图片放大，按钮跟着偏移
-      imageDOM.style["transform"] = `scale(${1+percent})`;
+      imageDOM.style["transform"] = `scale(${1 + percent})`;
       buttonDOM.style["transform"] = `translate3d(0, ${newY}px, 0)`;
-      layerDOM.style.top = `${height-OFFSET+newY}px`;
-    } else if(newY >= minScrollY){
+      layerDOM.style.top = `${height - OFFSET + newY}px`;
+    } else if (newY >= minScrollY) {
       //往上滑动，但是还没超过Header部分
-      layerDOM.style.top = `${height-OFFSET-Math.abs(newY)}px`;
+      layerDOM.style.top = `${height - OFFSET - Math.abs(newY)}px`;
       layerDOM.style.zIndex = 1;
-      imageDOM.style.paddingTop = '75%';
+      imageDOM.style.paddingTop = "75%";
       imageDOM.style.height = 0;
       imageDOM.style.zIndex = -1;
       buttonDOM.style["transform"] = `translate3d(0, ${newY}px, 0)`;
-      buttonDOM.style["opacity"] = `${1-percent*2}`;
-    } else if(newY < minScrollY){
+      buttonDOM.style["opacity"] = `${1 - percent * 2}`;
+    } else if (newY < minScrollY) {
       //往上滑动，但是超过Header部分
-      layerDOM.style.top = `${HEADER_HEIGHT-OFFSET}px`;
+      layerDOM.style.top = `${HEADER_HEIGHT - OFFSET}px`;
       layerDOM.style.zIndex = 1;
       //防止溢出的歌单内容遮住Header
       headerDOM.style.zIndex = 100;
       //此时图片高度与Header一致
-      imageDOM.style.height = `${HEADER_HEIGHT}px`
+      imageDOM.style.height = `${HEADER_HEIGHT}px`;
       imageDOM.style.paddingTop = 0;
       imageDOM.style.zIndex = 99;
     }
   };
 
   const musicAnimation = (x, y) => {
-    musicNoteRef.current.startAnimation({x, y});
-  }
-    
+    musicNoteRef.current.startAnimation({ x, y });
+  };
+
   return (
-    <CSSTransition 
-      in={showStatus}  
-      timeout={300} 
-      classNames="fly" 
+    <CSSTransition
+      in={showStatus}
+      timeout={300}
+      classNames="fly"
       appear={true}
       unmountOnExit
       onExited={() => props.history.goBack()}
     >
       <Container>
-        <Header handleClick={() => setShowStatus(false)} title={artist.name} ref={header}></Header>
+        <Header
+          handleClick={() => setShowStatus(false)}
+          title={artist.name}
+          ref={header}
+        ></Header>
         <ImgWrapper ref={imageWrapper} bgUrl={artist.picUrl}>
           <div className="filter"></div>
         </ImgWrapper>
@@ -111,34 +115,40 @@ function Singer(props) {
               songs={songs}
               showCollect={false}
               usePageSplit={false}
-              musicAnimation={(x,y) =>musicAnimation(x,y)}
-            >
-            </SongsList>
+              musicAnimation={(x, y) => musicAnimation(x, y)}
+            ></SongsList>
           </Scroll>
         </SongListWrapper>
-        {loading ? <EnterLoading style={{"zIndex": 100}}><Loading></Loading></EnterLoading> : null}
-        <MusicNote ref={musicNoteRef} ></MusicNote>
+        {loading ? (
+          <EnterLoading style={{ zIndex: 100 }}>
+            <Loading></Loading>
+          </EnterLoading>
+        ) : null}
+        <MusicNote ref={musicNoteRef}></MusicNote>
       </Container>
     </CSSTransition>
-  )
+  );
 }
 
 // 映射Redux全局的state到组件的props上
-const mapStateToProps = (state) => ({
-  artist: state.getIn(['singerInfo', 'artist']).toJS(),
-  songs: state.getIn(['singerInfo', 'songsOfArtist']).toJS(),
-  loading: state.getIn(['singerInfo', 'loading']),
-  songsCount: state.getIn(['player', 'playList']).size
+const mapStateToProps = state => ({
+  artist: state.getIn(["singerInfo", "artist"]).toJS(),
+  songs: state.getIn(["singerInfo", "songsOfArtist"]).toJS(),
+  loading: state.getIn(["singerInfo", "loading"]),
+  songsCount: state.getIn(["player", "playList"]).size
 });
 // 映射dispatch到props上
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = dispatch => {
   return {
     getSingerDataDispatch(id) {
       dispatch(changeEnterLoading(true));
       dispatch(getSingerInfo(id));
     }
-  }
+  };
 };
 
 // 将ui组件包装成容器组件
-export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Singer));
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(React.memo(Singer));
diff --git a/src/application/User/Login/components/LoginForm/index.js b/src/application/User/Login/components/LoginForm/index.js
@@ -1,13 +1,13 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import React from "react";
-import { withRouter } from "react-router-dom";
+import React, { forwardRef } from "react";
 import { Button, BeautyCheckBox, OtherLoginLink, FormContainer } from "./style";
 
 const noEffect = e => e.preventDefault();
 
-const LoginForm = ({ history, jumpToLogin }) => {
-  const jumpToIndex = () => {
-    history.push("/recommend");
+const LoginForm = forwardRef((props, ref) => {
+  const { jumpToLogin, setAgreed, jumpToIndex } = props;
+  const onChangeChecked = e => {
+    setAgreed(e.target.checked);
   };
   const loginViaThirdApi = () => {
     alert("第三方登录待开发....");
@@ -26,9 +26,15 @@ const LoginForm = ({ history, jumpToLogin }) => {
       <Button color="#fff" onClick={jumpToIndex}>
         立即体验
       </Button>
-      <BeautyCheckBox>
+      <BeautyCheckBox ref={ref}>
         <li>
-          <input type="radio" id="tiaokuan" hidden />
+          <input
+            type="checkbox"
+            id="tiaokuan"
+            hidden
+            onChange={onChangeChecked}
+            // onClick={onChangeChecked}
+          />
           <label htmlFor="tiaokuan"></label>
           <span>
             同意<a onClick={noEffect}>{"<<服务条款>>"}</a>和
@@ -55,6 +61,6 @@ const LoginForm = ({ history, jumpToLogin }) => {
       </OtherLoginLink>
     </FormContainer>
   );
-};
+});
 
-export default withRouter(LoginForm);
+export default LoginForm;