签名组件优化

one_stop_public/Signature/index.jsx

@@ -54,7 +54,8 @@ export default class Index extends Component {
     super(props);
     const value = props.value;
     this.state = {
-      url: value || getUserInfo().userSign,
+      // url: value || getUserInfo().userSign,
+      url: value,
       showModal: false,
     };
   }
@@ -208,6 +209,70 @@ export default class Index extends Component {
       </Modal>);
   };
 
+  WebModal = () => {
+    const { showModal } = this.state;
+    const height = 300;
+    const width = 600;
+    return (
+      showModal && <Modal className={styles.mobileModal}
+                          width={700}
+                          onCancel={this.changeShowModal}
+                          visible={true}
+                          onOk={this.trim}
+                          title={'签名'}
+                          bodyStyle={{
+                            minHeight: '350px',
+                            padding: '24px 12px',
+                          }}
+      >
+        <div className={styles.borderDiv}>
+          <SignatureCanvas
+            penColor='black'
+            ref={(ref) => {
+              this.sigCanvas = ref;
+            }}
+            canvasProps={{
+              width: width + 'px',
+              height: height + 'px',
+              className: 'sigCanvas',
+            }}
+          />
+        </div>
+      </Modal>);
+  };
+
+  WebSign = () => {
+    const {
+      width,
+      height,
+
+    } = this.props;
+    const { url } = this.state;
+    if (url) {
+      return <div className={styles.mobileSign}>
+        <Button type={'primary'}
+                onClick={this.changeShowModal}
+                className={styles.reSign}
+        >
+          重新签名
+        </Button>
+        <img src={config.httpServer + url} style={{
+          height,
+          width,
+        }}
+        />
+      </div>;
+    } else {
+      return <div className={styles.mobileSign2}>
+        <Button type={'primary'} onClick={this.changeShowModal}>
+          点击开始签名
+        </Button>
+      </div>;
+    }
+    return null;
+  };
+
+
   render() {
     // console.log('签名组件');
     const {
@@ -225,62 +290,67 @@ export default class Index extends Component {
         <this.MobileSign />
         <this.MobileModal />
       </>;
+    }else{
+      return <>
+        <this.WebSign />
+        <this.WebModal />
+      </>;
     }
 
-    return (
-      <div id='canvas_signature' style={{
-        width: '100%',
-        height: '100%',
-        marginLeft: 5,
-      }}>
-        <div
-          style={{
-            width: width,
-            textAlign: 'center',
-            height: height,
-            border: '1px  dashed gray',
-            position: 'relative',
-          }}>
-          {url ? (
-            <img src={config.httpServer + url} style={{
-              width: width,
-              height: height - 20,
-            }} />
-          ) : (
-            <SignatureCanvas
-              penColor='black'
-              ref={(ref) => {
-                this.sigCanvas = ref;
-              }}
-              canvasProps={{
-                width: width || 400,
-                height: height ? height - 20 : 200,
-                className: 'sigCanvas',
-              }}
-            />
-          )}
-          <div style={{
-            position: 'absolute',
-            left: 5,
-            bottom: 5,
-          }}>
-            {url ? (
-              <Button type='danger' size='small' onClick={this.delete}>
-                重写
-              </Button>
-            ) : (
-              <>
-                <Button style={{ marginLeft: 12 }} type='danger' size='small' onClick={this.clear}>
-                  清除
-                </Button>
-                <Button style={{ marginLeft: 12 }} onClick={this.trim} size='small' type='primary'>
-                  保存
-                </Button>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    );
+    // return (
+    //   <div id='canvas_signature' style={{
+    //     width: '100%',
+    //     height: '100%',
+    //     marginLeft: 5,
+    //   }}>
+    //     <div
+    //       style={{
+    //         width: width,
+    //         textAlign: 'center',
+    //         height: height,
+    //         border: '1px  dashed gray',
+    //         position: 'relative',
+    //       }}>
+    //       {url ? (
+    //         <img src={config.httpServer + url} style={{
+    //           width: width,
+    //           height: height - 20,
+    //         }} />
+    //       ) : (
+    //         <SignatureCanvas
+    //           penColor='black'
+    //           ref={(ref) => {
+    //             this.sigCanvas = ref;
+    //           }}
+    //           canvasProps={{
+    //             width: width || 400,
+    //             height: height ? height - 20 : 200,
+    //             className: 'sigCanvas',
+    //           }}
+    //         />
+    //       )}
+    //       <div style={{
+    //         position: 'absolute',
+    //         left: 5,
+    //         bottom: 5,
+    //       }}>
+    //         {url ? (
+    //           <Button type='danger' size='small' onClick={this.delete}>
+    //             重写
+    //           </Button>
+    //         ) : (
+    //           <>
+    //             <Button style={{ marginLeft: 12 }} type='danger' size='small' onClick={this.clear}>
+    //               清除
+    //             </Button>
+    //             <Button style={{ marginLeft: 12 }} onClick={this.trim} size='small' type='primary'>
+    //               保存
+    //             </Button>
+    //           </>
+    //         )}
+    //       </div>
+    //     </div>
+    //   </div>
+    // );
   }
 }