双录页面暂时先放几个加的按钮

src/Router.js

@@ -8,12 +8,8 @@ export default function Routers() {
   return (
     <Router>
       <Switch>
-        <Route exact path="/">
-          <InsuredInfo />
-        </Route>
-        <Route path="/doubleRecord">
-          <DoubleRecord />
-        </Route>
+        <Route exact path="/" component={InsuredInfo}></Route>
+        <Route path="/doubleRecord" component={DoubleRecord}></Route>
       </Switch>
     </Router>
   );

src/pages/Count.jsx

+import React from 'react';
+import { connect } from 'react-redux';
+
+const Count = (props) => {
+  return <div>count</div>;
+};
+
+const mapState = (state) => ({
+  count: state.count
+});
+const mapDispatch = ({ count: { add, double, addAsync, doubleAsync, addThenDoubleAsync } }) => ({
+  add: () => add(1),
+  double,
+  addAsync: () => addAsync(1),
+  doubleAsync,
+  addThenDoubleAsync: () => addThenDoubleAsync(1)
+});
+export default connect(mapState, mapDispatch)(Count);

src/pages/DoubleRecord.jsx

-import React from 'react';
-import { connect } from 'react-redux';
+import React, { useState } from 'react';
+import styles from './DoubleRecord.module.scss';
 
-const DoubleRecord = (props) => <div>双录页面</div>;
+import Logo from '../assets/img/aia-logo.jpg';
+import IconHome from '../assets/img/home.png';
 
-const mapState = (state) => ({
-  count: state.count
-});
-const mapDispatch = ({ count: { add, double, addAsync, doubleAsync, addThenDoubleAsync } }) => ({
-  add: () => add(1),
-  double,
-  addAsync: () => addAsync(1),
-  doubleAsync,
-  addThenDoubleAsync: () => addThenDoubleAsync(1)
-});
-export default connect(mapState, mapDispatch)(DoubleRecord);
+import TouchOpacity from '../components/TouchOpacity';
+
+export default function(props) {
+  const [imgSrc, setImgSrc] = useState('');
+
+  const showPDF = () => {
+    if (!window.aiaPDFPreView) {
+      alert('window.aiaPDFPreView is not a function');
+      return;
+    }
+    window.aiaPDFPreView('https://marsandheart.github.io/pdf/frontendKnowledge.pdf');
+  };
+
+  const showSign = () => {
+    if (!window.aiaShowSignView) {
+      alert('window.aiaShowSignView is not a function');
+      return;
+    }
+
+    window.aiaShowSignView();
+    window.aiaGetSignImage = (imgData) => {
+      const obj = {
+        method: 'aiaGetSignImage',
+        param: imgData
+      };
+      setImgSrc(imgData);
+      alert(JSON.stringify(obj));
+    };
+  };
+
+  return (
+    <div className={styles.page}>
+      <div className={styles.header}>
+        <img src={Logo} alt="logo" className={styles.aiaLogo}></img>
+        <div>双录指引</div>
+        <div className={styles.homeIcon}>
+          <img src={IconHome} alt="logo"></img>
+        </div>
+      </div>
+      <div className={styles.main}>
+        <TouchOpacity className={styles.btn} onClick={showPDF}>
+          PDF预览
+        </TouchOpacity>
+        <TouchOpacity className={styles.btn} onClick={showSign}>
+          呼出签名视图
+        </TouchOpacity>
+        <div style={{ clear: 'both' }}></div>
+        <div>签名图片展示:</div>
+        <div>
+          <img alt="签名图片" src={imgSrc}></img>
+        </div>
+      </div>
+      {/* <div className={styles.main}>
+        <div className={styles.stepArea}>steps</div>
+        <div className={styles.questionArea}>questions</div>
+      </div> */}
+      <div className={styles.footer}>
+        <div className={styles.footerBtn}>上一步</div>
+        <div className={styles.footerBtn}>下一步</div>
+      </div>
+    </div>
+  );
+}

src/pages/DoubleRecord.module.scss

+@import '../assets/css/common.scss';
+
+.page{
+  width: 100vw;
+  height: 100vh;
+  background-color: #E2E1E6;
+  display: flex;
+  flex-direction: column;
+}
+
+.header{
+  height: 60px;
+  background-color: $primaryColor;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: white;
+  font-size: 22px;
+
+  .aiaLogo{
+    width: 120px;
+  }
+
+  .homeIcon{
+    width: 120px;
+    margin-right: 20px;
+    img{
+      width: 20px;
+      height: 20px;
+      float: right;
+    }
+  }
+
+}
+
+.main{
+  height: 80%;
+  padding: 10px 20px;
+  .stepArea{
+    height: 10%;
+  }
+  .questionArea {
+    height: 90%;
+    border: 1px solid #333333;
+    border-radius: 5px;
+  }
+}
+
+
+.btn{
+  user-select:none;
+  background: #CE1F57;
+  min-width:10vw;
+  height:5vh;
+  line-height: 3.5vh;
+  text-align: center;
+  padding: 0.5vw 1vw;
+  color: #FFFFFF;
+  float: left;
+  margin: 0.5vw 2vw 0.5vw 0;
+  border-radius: 3px;
+}
+
+.footer{
+  height: 50px;
+  padding: 10px 20px;
+  display: flex;
+  justify-content: space-between;
+  .footerBtn{
+    width: 49%;
+    height: 40px;
+    background-color: $primaryColor;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
\ No newline at end of file

src/pages/InsuredInfo.jsx

@@ -71,14 +71,16 @@ const columns = [
   }
 ];
 
-export default function() {
+export default function(props) {
+  const { history } = props;
   const [selectedDataKey, setSelectedDataKey] = useState('');
   const [tableData, setTableData] = useState(initTableData);
   const [modalVisible, setModalVisible] = useState(false);
+
   const addPolicy = () => {
-    console.log(' add policy ');
     setModalVisible(!modalVisible);
   };
+
   const addTableData = (product) => {
     const key = String(tableData.length + 1);
     setSelectedDataKey(key);
@@ -99,6 +101,10 @@ export default function() {
     return record.key === selectedDataKey ? styles.highLightLine : '';
   };
 
+  const submit = () => {
+    history.push('/doubleRecord');
+  };
+
   return (
     <div className={styles.page}>
       <div className={styles.header}>
@@ -163,7 +169,9 @@ export default function() {
         </div>
       </div>
       <div className={styles.footer}>
-        <TouchOpacity className={styles.footerBtn}>提交</TouchOpacity>
+        <TouchOpacity className={styles.footerBtn} onClick={submit}>
+          提交
+        </TouchOpacity>
       </div>
 
       <ProductListModal