ai测试

src/components/ai-test/exam/index.js

@@ -7,7 +7,8 @@ import storage from 'store2'
 import Navigation from "@components/ai-test/common/navigation"
 import { differenceInSeconds, differenceInMinutes, differenceInHours, differenceInDays, lightFormat } from "date-fns";
 import { isEmpty } from 'lodash'
-
+import { connect } from 'react-redux'
+import { matchPath } from 'react-router-dom'
 
 class Exam extends Component {
 
@@ -30,10 +31,23 @@ class Exam extends Component {
   }
 
   componentDidMount() {
+    const {user, history} = this.props
+    if (user.hasError) {
+      return history.push('/passport')
+    }
     if (this.store.get('submitted')) {
       this.store.remove('submitted')
       this.props.history.replace('/ai-test')
     }
+    this.unlisten = history.listen((location) => {
+      const match = matchPath(location.pathname, {
+        path: '/ai-test',
+      })
+      if (match.isExact) {
+        this.store.clearAll()
+      }
+      this.unlisten && this.unlisten()
+    })
     this.getQuestions()
   }
 
@@ -202,4 +216,7 @@ class Exam extends Component {
   }
 }
 
-export default Exam;
\ No newline at end of file
+export default connect(
+  ({user}) => ({user}),
+  null,
+)(Exam);
\ No newline at end of file

src/components/ai-test/index.js

@@ -8,8 +8,27 @@ import Analysis from "@components/ai-test/analysis"
 import Assist from "@components/ai-test/assist"
 import Help from '@components/ai-test/share'
 import Report from '@components/ai-test/report'
+import storage from 'store2'
 
 class AiTest extends Component {
+
+  examStore = storage.namespace('aiTestExam')
+
+
+  componentDidMount() {
+    window.addEventListener('beforeunload', this.handleBeforeUnload)
+  }
+
+  componentWillUnmount() {
+    this.handleBeforeUnload()
+    window.removeEventListener('beforeunload', this.handleBeforeUnload)
+  }
+
+  handleBeforeUnload = () => {
+    this.examStore.clearAll()
+  }
+
+
   render() {
     const {match} = this.props
     return (

src/components/ai-test/scores/index.js

@@ -12,15 +12,20 @@ class Scores extends Component {
 
   store = storage.namespace('aiTestEntry')
 
+
   state = {
-    tabs: [
+    selfTabs: [
       {title: '当前成绩'},
       {title: '今日最佳'},
       {title: '本月最佳'},
     ],
     rankList: [],
+    rankListTabs: [
+      {title: '日榜'},
+      {title: '周榜'},
+      {title: '总榜'},
+    ],
     isExpandRankList: false,
-    type: 2,
     icons: [
       require('./rank-1.png'),
       require('./rank-2.png'),
@@ -42,7 +47,7 @@ class Scores extends Component {
 
   componentDidMount() {
     this.getInitialData()
-    this.getRankList()
+    this.getRankList(null, 0)
     this.getUserScores(0)
     this.getUserAddress()
   }
@@ -73,8 +78,8 @@ class Scores extends Component {
       })
   }
 
-  getRankList = () => {
-    http.get(`${API.home}/sys/at/ranks/${this.state.type}`)
+  getRankList = (tab, type) => {
+    http.get(`${API.home}/sys/at/ranks/${type}`)
       .then(res => {
         const {code, msg, data} = res.data
         if (code === 200) {
@@ -151,8 +156,9 @@ class Scores extends Component {
 
   render() {
     const {
-      tabs,
+      selfTabs,
       rankList,
+      rankListTabs,
       icons,
       isExpandRankList,
       isShowRule,
@@ -178,13 +184,12 @@ class Scores extends Component {
           }}>规则</a>
         </div>
         {
-          userScore.rank !== '-' &&
           <div className="score-list">
-            <Tabs tabs={tabs} tabBarUnderlineStyle={{display: 'none'}} onChange={(tab, i) => {
+            <Tabs tabs={selfTabs} tabBarUnderlineStyle={{display: 'none'}} onChange={(tab, i) => {
               this.getUserScores(i)
             }}>
               {
-                tabs.map((tab, index) => {
+                selfTabs.map((tab, index) => {
                   return <div className={'tab-content'} key={index}>
                     <table>
                       <thead>
@@ -231,41 +236,47 @@ class Scores extends Component {
             </div>
           </div>
           <div className="list">
-            <table>
-              <thead>
-              <tr>
-                <th>名次</th>
-                <th>昵称</th>
-                <th>成绩</th>
-                <th>奖品</th>
-              </tr>
-              </thead>
-              <tbody>
+            <Tabs tabs={rankListTabs} tabBarUnderlineStyle={{display: 'none'}} onChange={this.getRankList}>
               {
-                !!_rankList.length && _rankList.map((item, index) => {
-                  return <tr key={index}>
-                    <td>
-                      {
-                        index < 3 ? <img src={icons[index]} alt=""/> : index + 1
-                      }
-                    </td>
-                    <td>
-                      <img src={item.avatar} className={'avatar'} alt=""/>
-                      {item.user_name}
-                    </td>
-                    <td>
-                      <span className={'score'}>{item.score}</span>/<span>{item.cost_time}</span>
-                    </td>
-                    <td>
-                      {
-                        item.prize_url ? <a href={item.prize_url}>{item.prize}</a> : item.prize
-                      }
-                    </td>
-                  </tr>
+                rankListTabs.map((item, index) => {
+                  return <table key={index}>
+                    <thead>
+                    <tr>
+                      <th>名次</th>
+                      <th>昵称</th>
+                      <th>成绩</th>
+                      <th>奖品</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {
+                      !!_rankList.length && _rankList.map((item, index) => {
+                        return <tr key={index}>
+                          <td>
+                            {
+                              index < 3 ? <img src={icons[index]} alt=""/> : index + 1
+                            }
+                          </td>
+                          <td>
+                            <img src={item.avatar} className={'avatar'} alt=""/>
+                            {item.user_name}
+                          </td>
+                          <td>
+                            <span className={'score'}>{item.score}</span>/<span>{item.cost_time}</span>
+                          </td>
+                          <td>
+                            {
+                              item.prize_url ? <a href={item.prize_url}>{item.prize}</a> : item.prize
+                            }
+                          </td>
+                        </tr>
+                      })
+                    }
+                    </tbody>
+                  </table>
                 })
               }
-              </tbody>
-            </table>
+            </Tabs>
             {
               !isExpandRankList ?
                 <div className="expand" onClick={() => {

src/components/ai-test/scores/index.scss

@@ -139,12 +139,13 @@
     .head {
       height: 68px;
       padding-top: 12px;
-      background-color: $blue-bg;
       text-align: center;
+      color: #fff;
+      margin-bottom: 15px;
+
 
       div:nth-child(1) {
         font-size: 18px;
-        color: #0E75E6;
         margin-bottom: 5px;
       }
 
@@ -152,7 +153,7 @@
         position: relative;
 
         span {
-          color: #666;
+          color: #E5F5FF;
           font-size: 12px;
         }
 
@@ -163,17 +164,17 @@
           transform: translateY(-50%);
           text-decoration: underline;
           font-size: 14px;
-          color: #077EE8;
+          color: #fff;
         }
       }
     }
 
     .list {
       background: #fff;
-      padding-top: 11px;
 
       table {
         width: 100%;
+        margin-top: 10px;
         border-collapse: collapse;
         border-spacing: 0;
         border: none;