fix

front/project/www/components/Calculator/index.js

@@ -5,44 +5,179 @@ import './index.less';
 export default class Calculator extends Component {
   constructor(props) {
     super(props);
-    this.state = { value: '' };
+    this.state = { value: '0' };
+    this.valueList = [];
+    this.typeList = [];
+    this.change = false;
+  }
+
+  clear() {
+    this.valueList = [];
+    this.typeList = [];
+    this.setState({ value: '0' });
+  }
+
+  del() {
+    const { value } = this.state;
+    if (value.length > 1) {
+      this.setState({ value: value.substr(0, value.length - 1) });
+    } else if (value !== '0') {
+      this.setState({ value: '0' });
+    }
+  }
+
+  f(a, b, c) {
+    switch (c) {
+      case '+':
+        return a + b;
+      case '-':
+        return a - b;
+      case '*':
+        return a * b;
+      case '/':
+        return a / b;
+      default:
+        return 0;
+    }
+  }
+
+  compute() {
+    let { value } = this.state;
+    for (let i = 0; i < this.typeList.length; i += 1) {
+      if (i === 0) {
+        value = this.f(this.valueList[0], this.valueList[1], this.typeList[0]);
+      } else if (this.valueList[i + 1] !== undefined) {
+        value = this.f(value, this.valueList[i + 1], this.typeList[i]);
+      }
+    }
+    return value;
+  }
+
+  input(text) {
+    const { value } = this.state;
+    switch (text) {
+      case '=':
+        if (this.change && this.typeList.length > 0) {
+          this.valueList.push(value);
+          this.setState({ value: this.compute() });
+          this.change = false;
+        }
+        break;
+      case '+':
+      case '-':
+      case '*':
+      case '/':
+        if (this.change) {
+          this.valueList.push(value);
+          this.typeList.push(text);
+          this.change = false;
+          if (this.valueList.length > 1) {
+            console.log(this);
+            this.setState({ value: this.compute() });
+          }
+        }
+        break;
+      case '.':
+        if (this.change && value[value.length - 1] !== '.') {
+          this.setState({ value: `${value}${text}` });
+        } else if (!this.change) {
+          this.change = true;
+        }
+        break;
+      case 0:
+        if (this.change && value !== '0') {
+          this.setState({ value: `${value}${text}` });
+        } else if (!this.change) {
+          this.change = true;
+          this.setState({ value: '0' });
+        }
+        break;
+      default:
+        if (this.change) {
+          if (value !== '0') {
+            this.setState({ value: `${value}${text}` });
+          } else {
+            this.setState({ value: text });
+          }
+        } else {
+          this.setState({ value: text });
+          this.change = true;
+        }
+        break;
+    }
   }
 
   render() {
+    const { show } = this.props;
+    const { value } = this.state;
     return (
-      <div className="calculator">
+      <div hidden={!show} className="calculator">
         <div className="line">
-          <div className="block block-1 value">{this.state.value}</div>
+          <div className="block block-1 value">{value}</div>
         </div>
         <div className="line">
-          <div className="block block-2 left">
+          <div className="block block-2 left" onClick={() => this.del()}>
             <Assets name="eliminate_icon" />
           </div>
-          <div className="block block-3 right">Clear</div>
+          <div className="block block-3 right" onClick={() => this.clear()}>
+            Clear
+          </div>
         </div>
         <div className="line">
-          <div className="block block-1 left">7</div>
-          <div className="block block-1 center">8</div>
-          <div className="block block-1 center">9</div>
-          <div className="block block-2 right">/</div>
+          <div className="block block-1 left" onClick={() => this.input(7)}>
+            7
+          </div>
+          <div className="block block-1 center" onClick={() => this.input(8)}>
+            8
+          </div>
+          <div className="block block-1 center" onClick={() => this.input(9)}>
+            9
+          </div>
+          <div className="block block-2 right" onClick={() => this.input('/')}>
+            /
+          </div>
         </div>
         <div className="line">
-          <div className="block block-1 left">4</div>
-          <div className="block block-1 center">5</div>
-          <div className="block block-1 center">6</div>
-          <div className="block block-2 right">*</div>
+          <div className="block block-1 left" onClick={() => this.input(4)}>
+            4
+          </div>
+          <div className="block block-1 center" onClick={() => this.input(5)}>
+            5
+          </div>
+          <div className="block block-1 center" onClick={() => this.input(6)}>
+            6
+          </div>
+          <div className="block block-2 right" onClick={() => this.input('*')}>
+            *
+          </div>
         </div>
         <div className="line">
-          <div className="block block-1 left">1</div>
-          <div className="block block-1 center">2</div>
-          <div className="block block-1 center">3</div>
-          <div className="block block-2 right">-</div>
+          <div className="block block-1 left" onClick={() => this.input(1)}>
+            1
+          </div>
+          <div className="block block-1 center" onClick={() => this.input(2)}>
+            2
+          </div>
+          <div className="block block-1 center" onClick={() => this.input(3)}>
+            3
+          </div>
+          <div className="block block-2 right" onClick={() => this.input('-')}>
+            -
+          </div>
         </div>
         <div className="line">
-          <div className="block block-1 left">0</div>
-          <div className="block block-1 center">.</div>
-          <div className="block block-1 center">=</div>
-          <div className="block block-2 right">+</div>
+          <div className="block block-1 left" onClick={() => this.input(0)}>
+            0
+          </div>
+          <div className="block block-1 center" onClick={() => this.input('.')}>
+            .
+          </div>
+          <div className="block block-1 center" onClick={() => this.input('=')}>
+            =
+          </div>
+          <div className="block block-2 right" onClick={() => this.input('+')}>
+            +
+          </div>
         </div>
       </div>
     );

front/project/www/components/Calculator/index.less

@@ -7,6 +7,7 @@
   padding: 15px 15px 0;
   display: inline-block;
   overflow: hidden;
+  user-select: none;
 
   .line {
     display: flex;
@@ -28,7 +29,7 @@
     .value {
       height: 50px;
       line-height: 50px;
-      text-align: left;
+      text-align: right;
       padding: 0 10px;
       cursor: text;
     }

front/project/www/routes/page/start/page.js

@@ -6,11 +6,15 @@ import Page from '@src/containers/Page';
 import Button from '../../../components/Button';
 import Navigation from '../../../components/Navigation';
 import Answer from '../../../components/Answer';
-// import Calculator from '../../../components/Calculator';
+import Calculator from '../../../components/Calculator';
 import AnswerSelect from '../../../components/AnswerSelect';
 import AnswerTable from '../../../components/AnswerTable';
 
 export default class extends Page {
+  initState() {
+    return { showCalculator: false };
+  }
+
   renderView() {
     return this.renderDetail();
   }
@@ -71,14 +75,19 @@ export default class extends Page {
   }
 
   renderDetail() {
+    const { showCalculator } = this.state;
     return (
       <div className="layout">
         <div className="fixed">
           Analytical Writing Assessment
-          <Assets className="calculator-icon" name="calculator_icon" />
+          <Assets
+            className="calculator-icon"
+            name="calculator_icon"
+            onClick={() => this.setState({ showCalculator: !showCalculator })}
+          />
           <Assets className="collect-icon" name="collect_icon" />
         </div>
-        {/* <Calculator /> */}
+        <Calculator show={showCalculator} />
         <div className="layout-header">
           <div className="title">OG18：1-20</div>
           <div className="right">