campTest.js

import React, {Component} from 'react';
import {getParam, http, browser} from "@/utils";
import './camp.scss';
import {connect} from "react-redux";
import {Header, CampTitle, TestItem, ChangeQuestion} from './common/common';
import { Toast } from 'antd-mobile';

class CampTest extends Component {
    constructor(props) {
        super(props);
        this.state = {
            examList: [], // 问题列表
            currentExam: {}, // 当前要展示的问题
            currentQuestionOption: {}, // 切换题目时 用来存储当前问题的选项
            questionIndex: 1, // 第几个问题
            numberList: [],// 答题的题号
            qtitle: "",
            useTime: '00:00',
            showCard: false,
        }
    }
    componentDidMount() {
        this.keshi_id = getParam('keshi_id');
        this.qidP = getParam('qid');
        let _this = this;
        // 获取问题列表
        http.get(`${API.home}/m/aist/get_questions/${this.keshi_id}/${this.qidP}`).then(res => {
            if(res.data.code === 4040) {
                Toast.info(res.data.msg, 2, () => {
                    this.props.history.push('/passport');
                });
                return;
            }else if(res.data.code !== 200){
                Toast.info(res.data.msg, 2, () => {
                    this.props.history.push('/');
                });
                return;
            }
            let data = res.data.data;
            this.qid = data.id;
            this.course_id = data.course_id;
            this.setState({
                examList: data.list,
                qtitle: data.qtitle,
                currentExam: data.list[0],
            });
            _this.answerList = [];
            data.list.map(item => {
                let obj = {};
                obj.questionId = item.id;
                obj.answerId = 0;
                _this.answerList.push(obj);
            });
            _this.time = 0;
            _this.useTimeInterval = setInterval(function () {
                _this.time += 1;
                // _this.useTime = _this.getUseTime(_this.time);
                _this.setState({
                    useTime: _this.getUseTime(_this.time)
                })
            }, 1000);
        });
    };
    // 关闭按钮
    close = () => {
        let isShow = this.state.showCard;
        if(isShow) {
            this.setState({
                showCard: false
            });
            this.body = document.getElementsByTagName('body')[0];
            this.body.style.position = 'static';
        } else {
            const { history, location: { state={} } } = this.props;
            let to = '';
            if(state.from && state.from.indexOf('video') !== -1) {
                to='detail'
            }
            if(state.from && state.from.indexOf('detail') !== -1) {
                to='classify'
            }
            // console.log(this.props);
            history.push(
                `${state.from}`,
                {
                    to
                }
            );
        }
    };
    // 选择答案
    checkOption = (checkItem) => {
        let list = this.state.numberList;
        this.answerList.map(function (item) {
            if (Number(item.questionId) === Number(checkItem.ques_id)) {
                item.answerId = checkItem.opt_id;
            }
            return item;
        });
        list.push(checkItem.ques_id);
        this.setState({
            currentQuestionOption: checkItem.opt_id,
            numberList: list
        });
    };
    // 上一题
    preQuestion = () => {
        let index = this.state.questionIndex;
        if(index === 1) {
            return;
        }
        this.setState({
            questionIndex: index - 1,
            currentExam: this.state.examList[index - 2],
            currentQuestionOption: this.answerList[index - 2].answerId,
        });
    };
    // 下一题
    nextQuestion = () => {
        let index = this.state.questionIndex;
        if(index === this.state.examList.length) {
            this.setState({
                showCard: true
            });
            return;
        }
        this.setState({
            questionIndex: index + 1,
            currentExam: this.state.examList[index],
            currentQuestionOption: this.answerList[index].answerId,
        });
    };
    // 通过答题卡的卡号跳转到对应的题目
    jumpItem = (item, index) => {
        this.setState({
            showCard: false,
            questionIndex: index + 1,
            currentExam: this.state.examList[index],
            currentQuestionOption: this.answerList[index].answerId,
        })
    };
    // 提交
    commit = () => {
        let data = {};
        data.video_id = this.keshi_id;
        data.qid = this.qid;
        data.cost_time = this.time;
        data.uid = this.props.user.data.uid;
        data.answer_record = this.answerList;
        http.post(`${API.home}/m/aist/submit`, data).then((res) => {
            if(res.data.code === 200) {
                this.body = document.getElementsByTagName('body')[0];
                this.body.style.position = 'static';
                this.props.history.push(`/campResolve?keshi_id=${this.keshi_id}&qid=${this.qid}`, {from: this.props.location.state.from})
            }else{
                Toast.info(res.data.msg, 2);
            }
        });
    };
    // 显示答题卡
    showCard = () => {
        this.setState({
            showCard: true
        });
        this.body = document.getElementsByTagName('body')[0];
        this.body.style.position = 'fixed';
    };
    // 答题用时的格式化
    getUseTime = (date) => {
        let hours = 0,
            minutes = 0,
            seconds = 0;
        hours = `${parseInt(date / (60 * 60))}`.padStart(2, 0);
        minutes = `${parseInt((date - hours * 3600) / 60)}`.padStart(2, 0);
        seconds = `${parseInt((date - hours * 3600 - minutes * 60))}`.padStart(2, 0);
        if (date === 3600 * 24) {
            clearInterval(this.useTimeInterval);
            this.useTimeInterval = null;
        } else {
            if (date < 3600) {
                return `${minutes}:${seconds}`
            } else {
                return `${hours}:${minutes}:${seconds}`
            }
        }
    };


    render() {
        let {qtitle, currentExam, currentQuestionOption, questionIndex, examList, useTime, showCard, numberList} = this.state;
        return (
            <div className='camp-test-container'>
                <div className={'fixed_container'}>
                    {/*关闭按钮 时间 答题卡*/}
                    <Header time={useTime} showCardEve={this.showCard} close={this.close} showCard={showCard} />

                    {/*课后练习题 当前题目 题目总数*/}
                    <CampTitle qtitle={qtitle} questionIndex={questionIndex} examList={examList}/>
                </div>

                {/*题目*/}
                <TestItem questionIndex={questionIndex} checkOption={this.checkOption}  currentExam={currentExam} currentQuestionOption={currentQuestionOption} />
                {/*切换题目*/}
                <ChangeQuestion preQuestion={this.preQuestion} nextQuestion={this.nextQuestion} questionIndex={questionIndex} />
                {/* 答题卡 */}
                {
                    showCard && (
                        <div className='test-card-container' >
                            <p>{`课后练习：${qtitle}`}</p>
                            <ul className={'test-item'}>
                                {
                                    examList.map((item, index) => {
                                        return <li key={item.id} onClick={() => {this.jumpItem(item, index)}} className={`layout-flex-center ${numberList.includes(item.id) ? 'answered' : ''}`}>{index + 1}</li>
                                    })
                                }
                            </ul>
                            <div className={'bottom_commit'}>
                                <div onClick={this.commit} className={'commit_answer layout-flex-center'}>提交并查看结果</div>
                            </div>
                        </div>
                    )
                }

            </div>
        );
    }
}

export default connect(
    state => ({user: state.user}),
    null
)(CampTest)