add visti_time and finish_time

public/react/src/modules/page/main/LeftView.js

@@ -26,6 +26,7 @@ import './leftView.css'
 
 import CodeEvaluateMultiLevelAnswerUnlock from './CodeEvaluateMultiLevelAnswerUnlock'
 import MUIDialogStyleUtil from '../component/MUIDialogStyleUtil'
+import moment from 'moment';
 // http://danilowoz.com/create-react-content-loader/
 const MyLoader = () => (
 	<ContentLoader
@@ -283,8 +284,10 @@ class LeftView extends Component {
 												}
 												.multiLevelAnswer .status{
 													color: #CDCDCD;
-													flex: 0 0 45px;
-												}
+                        }
+                        .multiLevelAnswer .lock-time{
+                          margin-right: 15px;
+                        }
 												.markdown-body ol, .markdown-body ul {
 													padding-left: 2.5em;
 												}
@@ -292,13 +295,17 @@ class LeftView extends Component {
 
 											<div className="multiLevelAnswer">
 												{ unlockedAnswers && unlockedAnswers.map((item, index) => {
+                          const {name, contents, view_time} = item;
 													return <div className="anwserSection">
 														<div className="df">
 															<div className="level">级别{index + 1}：</div>
-															<div className="name">{item.name}</div>
-															<div className="status">已解锁</div>
+															<div className="name">{name}</div>
+                              <div className="status">
+                                <span className="lock-time">{view_time ? moment(view_time).format('YYYY-MM-DD HH:mm') : ''}</span>
+                                已解锁
+                              </div>
 														</div>
-														<div className="contents markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(item.contents)}}>
+														<div className="contents markdown-body" dangerouslySetInnerHTML={{__html: markdownToHTML(contents)}}>
 														</div>
 													</div>
 												})}

public/react/src/modules/page/taskList/TaskList.css

@@ -88,5 +88,36 @@
 	}
 	.rateRow .rc-rate-star-half .rc-rate-star-first, .rateRow .rc-rate-star-full .rc-rate-star-second {
 	    color: #FFA800;
-	}
+  }
+
+  .tip-info-wrap{
+    background-color: #111C24;
+    padding: 20px 0px;
+  }
+  .tip-info-wrap .tip-info{
+    display: flex;
+    background: #707070;
+    border: 1px solid rgba(112,112,112,1);
+    border-radius: 100px;
+    width: 375px;
+    height: 52px;
+    font-size: 12px;
+    align-items: center;
+    align-items: space-around;
+    margin: 0 auto;
+    padding: 0 20px;
+  }
+
+  .finish-wrap{
+    display: flex;
+    padding: 0 0px 0 20px;
+    margin-top: 10px;
+  }
+  .finish-wrap .finish-time{
+    flex: 1;
+  }
+  .finish-time .time-title{
+    color: #747A7F;
+    margin-right: 5px;
+  }
 /*------------------------------- TaskList End */

public/react/src/modules/page/taskList/TaskList.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { BrowserRouter as Router, Route, Link } from "react-router-dom";
 import { CircularProgress } from 'material-ui/Progress';
-
+import moment from 'moment';
 import Rate from 'rc-rate';
 
 import 'rc-rate/assets/index.css';
@@ -16,12 +16,12 @@ class TaskList extends Component {
   	}
   	renderTasks() {
   		const { challenges, challenge, shixun, onChallengesDrawerClose, myshixun_manager } = this.props;
-  		const currentChallenge = challenge;
+      const currentChallenge = challenge;
   		const taskArray = challenges.map( (challenge, index) => {
   			challenge.experience = challenge.get_experience
   			challenge.gold = challenge.get_gold
   			challenge.subject = challenge.name
-
+        const {finished_time, view_answer_time} = challenge;
   			const showExp = (challenge.experience > 0 && challenge.status === 2) ? '+' + challenge.experience : challenge.experience
   			const showGold = (challenge.gold > 0 && challenge.status === 2) ? '+' + challenge.gold : challenge.gold
   			return (
@@ -70,6 +70,15 @@ class TaskList extends Component {
 		                    </span>
 			            </div>
 
+                  <div className="finish-wrap">
+                    <p class="finish-time font-12">
+                      <span class="time-title">完成时间</span>
+                      { finished_time ? moment(finished_time).format('YYYY-MM-DD HH:mm') : '--' }
+                    </p>
+                    <p class="finish-time font-12">
+                      <span class="time-title">查看答案时间</span>
+                      { view_answer_time ? moment(view_answer_time).format('YYYY-MM-DD HH:mm') : '--' }                    </p>
+                  </div>
 			            { shixun.status >= 2 && <div className="rateRow">
 			            	{/* 已完成、未评分 */}
 			            	{challenge.status === 2 && challenge.star === 0?
@@ -103,8 +112,15 @@ class TaskList extends Component {
   	render() {
   		const { taskListLoading } = this.props;
 	    return (
-	    	<div className="page--over">
-			    <div className="col-width-3 -scroll" style={{height: '100%'}} id="all_task_index">
+        <div className="page--over" style={{ width: '420px'}}>
+          {/** 增加提示信息 */}
+          <div className="tip-info-wrap">
+            <p className="tip-info">
+              <span><span style={{ color: '#FFBD4C'}}>温馨提示: </span> 若查看答案时间早于关卡任务完成时间，将影响课堂实训作业的成绩。</span>
+            </p>
+          </div>
+
+			    <div className="col-width-3 -scroll" style={{height: 'calc( 100% - 100px )', width: '420px'}} id="all_task_index">
 				    { taskListLoading ?
 				    	<CircularProgress size={40} thickness={3} style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '40%', display: 'block' }}/> :
 			    		this.renderTasks()