index.js

import React, { Component } from 'react';
import './index.scss'
import { Tabs, Toast } from "antd-mobile";
import { http } from "@/utils"
import storage from 'store2'
import { html } from '@/utils'
import { compareDesc } from "date-fns";
import { Link } from "react-router-dom";
import { connect } from "react-redux";


class Scores extends Component {

  store = storage.namespace('aiTestEntry')


  state = {
    selfTabs: [
      {title: '当前成绩'},
      {title: '今日最佳'},
      {title: '本月最佳'},
    ],
    rankList: [],
    rankListTabs: [
      {title: '日榜'},
      {title: '总榜'},
    ],
/*
    rankListTabs: [
      {title: '日榜'},
      {title: '周榜'},
      {title: '总榜'},
    ],
*/
    isExpandRankList: false,
    icons: [
      require('./rank-1.png'),
      require('./rank-2.png'),
      require('./rank-3.png'),
    ],
    isShowRule: false,
    isNeverShow: this.store.get('isNeverShow'),
    pageState: {},
    availableTestNum: 0,
    userScore: {},
    userAddress: {
      name: '',
      phone: '',
      address: '',
    },
    isShowUserAddress: false,
    entryButtonInRule: false,
  }

  componentDidMount() {
    this.getInitialData()
    this.getRankList(null, 0)
    if (!this.props.user.hasError) {
      this.getUserScores(0)
      this.getUserAddress()
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.user.hasError !== prevProps.user.hasError) {
      this.getUserScores(0)
      this.getUserAddress()
    }
  }


  handleChange = (e) => {
    const isNeverSHow = e.target.checked
    this.setState({
      isNeverSHow,
    })
    this.store.set('isNeverShow', isNeverSHow)
  }

  startTest = () => {
    this.props.history.push('/ai-test/exam')
  }

  getInitialData = () => {
    http.get(`${API.home}/sys/activity_data`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            pageState: data,
          })
        } else if (code === 3009) {
          this.props.history.push('/')
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  getRankList = (tab, type) => {
    http.get(`${API.home}/sys/at/ranks/${type === 0 ? 0 : 2}`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            rankList: data,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  getUserScores = (type) => {
    http.get(`${API.home}/sys/at/user_score/${type}/0`)
      .then(res => {
        const {code, msg, data} = res.data

        if (code === 200) {
          this.setState({
            userScore: data,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  getUserAddress = () => {
    http.get(`${API.home}/sys/user_address_info`)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          this.setState({
            userAddress: data,
          })
        }
      })
  }

  inputText = e => {
    const key = e.target.name
    const value = e.target.value
    this.setState(state => {
      return {
        userAddress: {
          ...state.userAddress, ...{
            [key]: value,
          },
        },
      }
    })
  }

  submitForm = (e) => {
    e.preventDefault()
    const {userAddress} = this.state
    if (!Object.values(userAddress).every(item => !!item)) {
      Toast.info('请填写完整')
      return
    }
    http.post(`${API.home}/sys/update_address`, userAddress)
      .then(res => {
        const {code, msg, data} = res.data
        if (code === 200) {
          Toast.success('提交成功', 2, null, false)
          this.setState({
            isShowUserAddress: false,
          })
        } else {
          Toast.fail(msg, 2, null, false)
        }
      })
  }

  render() {
    const {
      selfTabs,
      rankList,
      rankListTabs,
      icons,
      isExpandRankList,
      isShowRule,
      isNeverShow,
      pageState,
      userScore,
      isShowUserAddress,
      userAddress,
      entryButtonInRule,
    } = this.state
    const {user, history} = this.props
    const _rankList = Array.isArray(rankList) ? isExpandRankList ? rankList : rankList.slice(0, 10) : []
    return (
      <div className={'scores'}>
        <div className="banner">
          <img src={pageState.h5_banner} alt=""/>
        </div>
        <div className="info">
          <span>已有{pageState.join_num}人参加测试</span>
          <a href="javascript:void(0);" onClick={() => {
            this.setState({
              isShowRule: true,
            })
          }}>规则</a>
        </div>
        {
          <div className="score-list">
            <Tabs tabs={selfTabs} tabBarUnderlineStyle={{display: 'none'}} onChange={(tab, i) => {
              this.getUserScores(i)
            }}>
              {
                selfTabs.map((tab, index) => {
                  return <div className={'tab-content'} key={index}>
                    <table>
                      <thead>
                      <tr>
                        <th>分数</th>
                        <th>用时</th>
                        <th>{index === 0 && '最终'}排名</th>
                      </tr>
                      </thead>
                      <tbody>
                      {
                        user.hasError
                          ? <tr>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                          </tr>
                          : <tr>
                            {
                              userScore.score === '-' ? <td>'-'</td> :
                                <td>{userScore.score} <Link to={`/ai-test/analysis/${userScore.r_id}`}>解析</Link></td>
                            }
                            <td>{userScore.cost_time}</td>
                            {
                              userScore.rank === '-' ? <td>'-'</td> : <td>{userScore.rank}名</td>
                            }
                          </tr>
                      }
                      </tbody>
                    </table>
                  </div>
                })
              }
            </Tabs>
            <div className="share">
              <Link to={'/ai-test/report'}>分享</Link>
            </div>
          </div>
        }
        <div className="rank-list">
          <div className="head">
            <div>
              测试排行榜
            </div>
            <div>
              <span>仅显示前50名</span>
              <a href="javascript:void(0);" onClick={() => {
                if (user.hasError) {
                  history.push('/passport')
                } else {
                  this.setState({
                    isShowUserAddress: true,
                  })
                }
              }}>收货地址</a>
            </div>
          </div>
          <div className="list">
            <Tabs tabs={rankListTabs} tabBarUnderlineStyle={{display: 'none'}} onChange={this.getRankList}>
              {
                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>
                           <div>
                             {
                               item.prize_url ? <a href={`${item.prize_url}#goback`}>{item.prize}</a> : item.prize
                             }
                           </div>

                          </td>
                        </tr>
                      })
                    }
                    </tbody>
                  </table>
                })
              }
            </Tabs>
            {
              rankList.length > 10 && (!isExpandRankList ?
                  <div className="expand" onClick={() => {
                    this.setState({
                      isExpandRankList: true,
                    })
                  }}>
                  <span>
                    展开更多
                    <i className={'iconfont iconiconfront-69'}></i>
                  </span>
                  </div>
                  :
                  <div className="expand" onClick={() => {
                    this.setState({
                      isExpandRankList: false,
                    })
                  }}>
                  <span>
                    收起
                    <i className={'iconfont iconiconfront-71'}></i>
                  </span>
                  </div>
              )
            }
          </div>
        </div>
        <div className="qrcode">
          <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/ai-test/qr.png" alt=""/>
          <div>得100分，请长按/扫码，免费领课！</div>
        </div>
        <div className="btn">
          {
            compareDesc(new Date(), pageState.stop_time * 1000) > 0 ?
              pageState.daily_test_num > 0
                ? <button className={'available'} onClick={() => {
                  isNeverShow ? this.startTest() : this.setState({
                    entryButtonInRule: true,
                    isShowRule: true,
                  })
                }}>开始测试<span>（今日可测试{pageState.daily_test_num}次）</span></button>
                : <Link to={`/ai-test/share?shareCode=${pageState.code}`}>
                  <button className={'get-chance'}>获取测试机会<span>（今日可测试0次）</span></button>
                </Link>
              : <button className={'unavailable'}>活动已结束</button>
          }
        </div>
        {
          isShowRule &&
          <Rule rule={pageState.rule} startTest={this.startTest} neverShow={this.handleChange} isNeverShow={isNeverShow}
                close={() => {
                  this.setState({
                    isShowRule: false,
                    entryButtonInRule: false,
                  })
                }} entryButtonInRule={entryButtonInRule}/>
        }
        {
          isShowUserAddress &&
          <div className="user-address-wrapper">
            <div className="user-address">
              <div className="title">收货信息</div>
              <div className="tip">获奖用户（以最终榜单为准）请及时填写收货信息</div>
              <form action="" onSubmit={this.submitForm}>
                <input type="text" placeholder={'收件人'} name={'name'} onChange={this.inputText}
                       value={userAddress.name}/>
                <input type="tel" placeholder={'联系方式'} name={'phone'} onChange={this.inputText}
                       value={userAddress.phone}/>
                <input type="text" placeholder={'收货地址'} name={'address'} onChange={this.inputText}
                       value={userAddress.address}/>
                <button type={'submit'}
                        className={Object.values(userAddress).every(value => !!value) ? 'available' : ''}>提交
                </button>
              </form>
              <i className={'close iconfont iconiconfront-2'} onClick={() => {
                this.setState({
                  isShowUserAddress: false,
                })
              }}/>
            </div>
          </div>
        }
      </div>
    );
  }
}

function Rule({neverShow, isNeverShow, rule, close, startTest, entryButtonInRule}) {
  return <div className="rule-mask">
    <div className="rule">
      <div>测试规则</div>
      <div dangerouslySetInnerHTML={html(rule)}></div>
      {
        entryButtonInRule && <>
          <div className="option">
            <input id={'never-show'} type="checkbox" onChange={neverShow} checked={isNeverShow}/>
            <label htmlFor="never-show">不再提示</label>
          </div>
          <button onClick={startTest}>进入测试</button>
        </>
      }
      <i className={'close iconfont iconiconfront-2'} onClick={close}/>
    </div>
  </div>
}


export default connect(
  ({user}) => ({user}),
  null,
)(Scores);