index.js

import React, { Component } from 'react'
import './index.scss'
import listFrame from './../listFrame/index';
import { http, SendMessageToApp, getParam} from "src/utils"

class LevelTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      testNumber: '',
      number: 1,
      prizeListUrl: [
        {
          url:
            "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top1.png"
        },
        {
          url:
            "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top2.png"
        },
        {
          url:
            "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top3-4.png"
        },
        {
          url:
            "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top5-7.png"
        },
        {
          url:
            "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top8-10.png"
        },
        {
          url:
            "https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/AIExam/top11-20.png"
        }
      ],
    }
  }

  componentDidMount() {
    const {isLogin} = this.props;
    if(isLogin) {
      http.get(`${API.home}/sys/ai_test/get_user_testinfo`).then(res => {
        let {code, data: {user_test_total, user_residue_number}} = res.data;
        if(code === 200) {
          this.setState({
            testNumber: user_test_total,
            number: user_residue_number
          })
        }
      });
    }
  }

  startTest = () => {
    const {isLogin, toLogin} = this.props;
    if(isLogin) {
      var _czc = _czc || [];
      _czc.push(["_trackEvent", 'AI水平测试', 'm端双十一AI水平测试-点击测试']);

      if(getParam('version')) {
        window.location.href = `${API.m}/levelTest/test?version=${getParam('version')}`;
      }else{
        window.location.href = `${API.m}/levelTest/test`;
      }
    }else{
      toLogin();
    }
  }

  render() {
    let {
      testNumber,
      number,
      prizeListUrl,
    } = this.state;
    const {isLogin, testSum} = this.props;
    return (
      <>
      <div className="level__test_module">
        <div className='start__test' onClick={this.startTest}>
          <img className='test-img' src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/test_icon.png" />
          <div className="button__text">
            <p>点击测试</p>
          </div>
        </div>
        <div className='test__number'>
          已有
          <span className='number'>
            {testNumber || testSum}
          </span>
          人参加测试
        </div>
        <div className='prize__rules'>
          <div className="prize__title">— 活动奖品 —</div>
          <div className="prize__list">
            {
              prizeListUrl.map((item, index) => {
                return (
                  <div className='prize__container' key={index}>
                    <img src={item.url} />
                  </div>
                )
              })
            }
          </div>

          <div className="prize__title">— 活动规则 —</div>
          <div className="rules__text">
            <p>1. 11月5日至11月13日之间每人有一次测试机会，可通过“集福气”活动额外获得2次测试机会；</p>
            <p>2. 单次测试时间为一小时，超时自动提交试卷；</p>
            <p>3. 试卷内容为Python基础（8道题*3分）、机器学习（12道题*3分）、深度学习（10道题*4分），总分100分；</p>
            <p>4. 无固定试卷，参与测试时从试题库中随机抽题组卷；</p>
            <p>5. 排行榜实时更新，分数相同则用时短者排名更高，多次测试保留最高分；</p>
            <p>6. 如发现某账号有作弊嫌疑，七月在线有权清空账号测试成绩；</p>
            <p>7. 活动最终解释权归七月在线所有。</p>
          </div>
        </div>
      </div>
      </>
    )
  }
}

export default listFrame(LevelTest)