add needLogin

front/project/www/app.js

@@ -19,13 +19,15 @@ export default class extends Component {
         {config.hideHeader ? (
           <div id="full-page">
             {children}
-            <Login />
+            <Login {...this.props} />
           </div>
-        ) : (<div className={`${config.tab}`} id="page">
-          <Header tabs={project.tabs} active={config.tab} />
-          {children}
-          <Login />
-        </div>)}
+        ) : (
+          <div className={`${config.tab}`} id="page">
+            <Header tabs={project.tabs} active={config.tab} />
+            {children}
+            <Login {...this.props} />
+          </div>
+        )}
       </LocaleProvider>
     );
   }

front/project/www/components/Login/index.js

@@ -4,6 +4,7 @@ import { Modal, Icon, Button, Tooltip } from 'antd';
 import Assets from '@src/components/Assets';
 import { Icon as GIcon } from '../Icon';
 import { Button as GButton } from '../Button';
+import { User } from '../../stores/user';
 
 const LOGIN_PHONE = 'LOGIN_PHONE';
 const REGISTER_PHONE = 'REGISTER_PHONE';
@@ -15,15 +16,20 @@ const BIND_WX_ERROR = 'BIND_WX_ERROR';
 export default class Login extends Component {
   constructor(props) {
     super(props);
-    this.state = { show: false, type: BIND_WX_ERROR };
+    this.state = { type: LOGIN_PHONE };
+  }
+
+  close() {
+    User.closeLogin();
   }
 
   render() {
-    const { show, type } = this.state;
+    const { type } = this.state;
+    const { user } = this.props;
     return (
-      <Modal wrapClassName={`login-modal ${type}`} visible={show} footer={null} closable={false} width={470}>
+      <Modal wrapClassName={`login-modal ${type}`} visible={user.needLogin} footer={null} closable={false} width={470}>
         {this.renderBody(type)}
-        <GIcon name="close" />
+        <GIcon name="close" onClick={() => this.close()} />
       </Modal>
     );
   }

front/project/www/routes/page/home/page.js

@@ -7,6 +7,7 @@ import { formatDate } from '@src/services/Tools';
 import Button from '../../../components/Button';
 import Footer from '../../../components/Footer';
 import { Main } from '../../../stores/main';
+import { User } from '../../../stores/user';
 
 const courseIconList = ['grammar', 'read', 'logic', 'math'];
 
@@ -36,6 +37,12 @@ export default class extends Page {
     window.location.href = url;
   }
 
+  test() {
+    User.needLogin().then(() => {
+      console.log('loginCB test');
+    });
+  }
+
   renderView() {
     const { prepare = {}, user = {}, course = [], activity = [], evaluation = [], contact = {} } = this.state;
     return (
@@ -52,7 +59,7 @@ export default class extends Page {
           <div className="body">
             <div className="title">完善备考信息，赢VIP权限</div>
             <div className="desc">知己知彼，百战不殆！</div>
-            <Button theme="white" className="btn">
+            <Button theme="white" className="btn" onClick={() => this.test()}>
               立即填写
             </Button>
           </div>
@@ -74,14 +81,23 @@ export default class extends Page {
                       自学指南<span className="sub">Self-guided</span>
                     </div>
                     <div className="btn">
-                      <Button className="btn-shadow" size="lager" onClick={() => {
-                        this.location(prepare.first);
-                      }}>
+                      <Button
+                        className="btn-shadow"
+                        size="lager"
+                        onClick={() => {
+                          this.location(prepare.first);
+                        }}
+                      >
                         从零开始
                       </Button>
-                      <Button className="btn-shadow" theme="white" size="lager" onClick={() => {
-                        this.location(prepare.continue);
-                      }}>
+                      <Button
+                        className="btn-shadow"
+                        theme="white"
+                        size="lager"
+                        onClick={() => {
+                          this.location(prepare.continue);
+                        }}
+                      >
                         继续学习
                       </Button>
                     </div>
@@ -91,14 +107,24 @@ export default class extends Page {
                       参与课程<span className="sub">With DUKB24</span>
                     </div>
                     <div className="btn">
-                      <Button theme="error" size="lager" radius onClick={() => {
-                        this.location(prepare.classJunior);
-                      }}>
+                      <Button
+                        theme="error"
+                        size="lager"
+                        radius
+                        onClick={() => {
+                          this.location(prepare.classJunior);
+                        }}
+                      >
                         从零开始
                       </Button>
-                      <Button theme="warn" size="lager" radius onClick={() => {
-                        this.location(prepare.classMiddle);
-                      }}>
+                      <Button
+                        theme="warn"
+                        size="lager"
+                        radius
+                        onClick={() => {
+                          this.location(prepare.classMiddle);
+                        }}
+                      >
                         继续学习
                       </Button>
                     </div>
@@ -166,22 +192,28 @@ export default class extends Page {
                 </div>
                 <div className="box">
                   <div className="detail">
-                    {course[this.state.courseIndex] && <a href={course[this.state.courseIndex].link} target='_blank'><Assets src={course[this.state.courseIndex].image} /></a>}
+                    {course[this.state.courseIndex] && (
+                      <a href={course[this.state.courseIndex].link} target="_blank">
+                        <Assets src={course[this.state.courseIndex].image} />
+                      </a>
+                    )}
                   </div>
                   <div className="list">
                     {course.map((row, index) => {
                       if (index >= 4) return null;
-                      return <div
-                        className={`tab ${this.state.courseIndex === index ? 'active' : ''}`}
-                        onMouseEnter={() => this.setState({ courseIndex: index })}
-                      >
-                        <Assets name={courseIconList[index]} />
-                        {row.title}
-                        <div className={`place place-${index + 1}`}>
-                          <span className="right-arrow" />
+                      return (
+                        <div
+                          className={`tab ${this.state.courseIndex === index ? 'active' : ''}`}
+                          onMouseEnter={() => this.setState({ courseIndex: index })}
+                        >
+                          <Assets name={courseIconList[index]} />
+                          {row.title}
+                          <div className={`place place-${index + 1}`}>
+                            <span className="right-arrow" />
+                          </div>
+                          <i className="left-arrow" />
                         </div>
-                        <i className="left-arrow" />
-                      </div>;
+                      );
                     })}
                   </div>
                 </div>
@@ -222,27 +254,33 @@ export default class extends Page {
           </div>
         </div>
         <Carousel autoplay>
-          {activity.map((row) => {
-            return <div className="block block-4" style={{ backgroundImage: row.image }} onClick={() => {
-              this.location(row.link);
-            }} />;
+          {activity.map(row => {
+            return (
+              <div
+                className="block block-4"
+                style={{ backgroundImage: row.image }}
+                onClick={() => {
+                  this.location(row.link);
+                }}
+              />
+            );
           })}
         </Carousel>
         <div className="block block-5">
           <div className="grid">
-            {evaluation.map((row) => {
-              return <div className="grid-item">
-                <div className="item">
-                  <div className="item-header">
-                    <Assets src={row.avatar} />
-                    <div className="name">{row.nickname}</div>
-                    <div className="date">{formatDate(row.date, 'yyyy年mm月dd日')}</div>
-                  </div>
-                  <div className="item-body">
-                    {row.content}
+            {evaluation.map(row => {
+              return (
+                <div className="grid-item">
+                  <div className="item">
+                    <div className="item-header">
+                      <Assets src={row.avatar} />
+                      <div className="name">{row.nickname}</div>
+                      <div className="date">{formatDate(row.date, 'yyyy年mm月dd日')}</div>
+                    </div>
+                    <div className="item-body">{row.content}</div>
                   </div>
                 </div>
-              </div>;
+              );
             })}
           </div>
         </div>

front/project/www/stores/user.js

@@ -26,6 +26,21 @@ export default class UserStore extends BaseStore {
     }
   }
 
+  needLogin() {
+    if (this.state.login) {
+      return Promise.resolve();
+    }
+    return new Promise(resolve => {
+      this.loginCB = resolve;
+      this.setState({ needLogin: true });
+    });
+  }
+
+  closeLogin() {
+    this.setState({ needLogin: false });
+    this.loginCB = null;
+  }
+
   refreshToken() {
     return this.apiPost('/auth/token')
       .then(result => {
@@ -38,7 +53,9 @@ export default class UserStore extends BaseStore {
 
   infoHandle(result) {
     this.setToken(result.token);
-    this.setState({ login: true, info: result, username: result.username });
+    this.setState({ login: true, needLogin: false, info: result, username: result.username });
+    if (this.loginCB) this.loginCB();
+    this.loginCB = null;
   }
 
   originInviteCode(inviteCode) {

front/src/stores/user.js

@@ -27,6 +27,16 @@ export default class UserStore extends BaseStore {
       });
   }
 
+  needLogin() {
+    if (this.state.login) {
+      return Promise.resolve();
+    }
+    return new Promise(resolve => {
+      this.loginCB = resolve;
+      this.setState({ needLogin: true });
+    });
+  }
+
   login({ username, password }) {
     return this.apiPost('/auth/login', { username, password }).then(result => {
       this.infoHandle(result);
@@ -41,7 +51,9 @@ export default class UserStore extends BaseStore {
 
   infoHandle(result) {
     this.setToken(result.token);
-    this.setState({ login: true, info: result, username: result.username });
+    this.setState({ login: true, needLogin: false, info: result, username: result.username });
+    if (this.loginCB) this.loginCB();
+    this.loginCB = null;
   }
 
   editPassword(params) {