文件整理

src/assets/css/common.scss

+$pramyColor: #CE1F57;
\ No newline at end of file

src/components/PolicyListModal.jsx

+import React from 'react';
+import styles from './PolicyListModal.module.scss';
+
+class PolicyListModal extends React.Component {
+  render() {
+    // if (!this.props.visible) {
+    //   return <div></div>;
+    // }
+    return (
+      <div className={styles.mask} onClick={this.props.close}>
+        <div className={styles.main} >
+          <div className={styles.title}>title</div>
+          <div>list</div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PolicyListModal;

src/components/PolicyListModal.module.scss

+@import '../assets/css/common.scss';
+
+.mask {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: rgba($color: #999999, $alpha: 0.3);
+}
+
+.main {
+  width: 80vw;
+  height: 80vh;
+  margin-left: 10vw;
+  margin-top: 10vh;
+  border-radius: 3px;
+  background-color: #999999;
+  box-shadow: rgba($color: #000000, $alpha: 0.3) 1px 1px 2px;
+}
+
+.title {
+  height: 8vh;
+  background-color: $pramyColor;
+}

src/pages/InsuredInfo.jsx

-import React from 'react';
+import React, { useState } from 'react';
 import { Table, Divider } from 'antd';
 import 'antd/dist/antd.css';
 
 import styles from './InsuredInfo.module.scss';
 import TabTitle from '../components/TabTItle';
-import IconAIA from '../assets/aia-icon.jpg';
+import IconAIA from '../assets/img/aia-icon.jpg';
 
-import TouchOpacity from '../components/TouchOpacity'
+import TouchOpacity from '../components/TouchOpacity';
+import PolicyListModal from '../components/PolicyListModal';
 
 const data = [
   {
@@ -68,6 +69,11 @@ const columns = [
 ];
 
 export default function() {
+  const [modalVisible, setModalVisible] = useState(false);
+  const addPolicy = () => {
+    console.log(' add policy ');
+    setModalVisible(!modalVisible);
+  };
   return (
     <div className={styles.page}>
       <div className={styles.header}>
@@ -90,7 +96,9 @@ export default function() {
             <span className={styles.descText}>支付方式:月付</span>
           </div>
           <div className={styles.btns}>
-            <TouchOpacity className={styles.btn}>增加附加合同</TouchOpacity>
+            <TouchOpacity onClick={addPolicy} className={styles.btn}>
+              增加附加合同
+            </TouchOpacity>
             <TouchOpacity className={styles.btn}>变更支付方式</TouchOpacity>
             <TouchOpacity className={styles.btn}>复效/垫缴不足一期还款</TouchOpacity>
             <TouchOpacity className={styles.btn}>智选康康产品转换</TouchOpacity>
@@ -108,6 +116,13 @@ export default function() {
       <div className={styles.footer}>
         <TouchOpacity className={styles.footerBtn}>提交</TouchOpacity>
       </div>
+
+      <PolicyListModal
+        visible={modalVisible}
+        close={() => {
+          setModalVisible(false);
+        }}
+      />
     </div>
   );
 }

src/pages/PolicyList.jsx

-import React from 'react';
-import { connect } from 'react-redux';
-
-const PolicyList = (props) => <div>保单信息</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)(PolicyList);