移动端签名组件重构

one_stop_public/Signature/index.jsx

@@ -21,8 +21,8 @@ function saveSign(url) {
   const userInfo = getUserInfo();
   uaaRequest('/UserApi/saveMySysBackgroundImage', {
     username: userInfo.stuNo,
-    backgroundImageUrl: userInfo.backgroundImageUrl,
-    isUseBackImage: userInfo.isUseBackImage,
+    backgroundImageUrl: userInfo.backgroundImageUrl || 'fakeBackgroundImageUrl', // 假数据
+    isUseBackImage: userInfo.isUseBackImage || false,
     userSign: url,
   })
     .then((g) => {
@@ -69,9 +69,8 @@ export default class Index extends Component {
 
   componentWillReceiveProps(nextProps) {
     // Should be a controlled component.
-    if ('value' in nextProps) {
+    if ('value' in nextProps && nextProps.value) {
       const value = nextProps.value;
-
       this.setState({ url: value });
 
       //
@@ -96,6 +95,7 @@ export default class Index extends Component {
     this.triggerChange(null);
   };
   trim = () => {
+    message.info('正在保存签名，请等待');
     const formData = new FormData();
     const xx = dataURLtoBlob(this.sigCanvas.toDataURL('image/png'));
     const file = blobToFile(xx, 'sign.png');
@@ -131,6 +131,7 @@ export default class Index extends Component {
           if (!('value' in this.props)) {
             this.setState({ url: e.response });
           }
+          this.changeShowModal();
           this.triggerChange(e.response);
         } else {
           message.error('保存失败');
@@ -156,7 +157,14 @@ export default class Index extends Component {
     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={{}}
+        />
       </div>;
     } else {
       return <div className={styles.mobileSign2}>
@@ -177,8 +185,12 @@ export default class Index extends Component {
                           width={'100vw'}
                           onCancel={this.changeShowModal}
                           visible={true}
+                          onOk={this.trim}
                           title={'签名'}
-                          bodyStyle={{minHeight: '350px'}}
+                          bodyStyle={{
+                            minHeight: '350px',
+                            padding: '24px 12px',
+                          }}
       >
       <div className={styles.borderDiv}>
         <SignatureCanvas
@@ -207,11 +219,11 @@ export default class Index extends Component {
     const { url } = this.state;
 
     if (get === 'mobile') {
-      const MobileSign = this.MobileSign;
-      const MobileModal = this.MobileModal;
+      // const MobileSign = this.MobileSign;
+      // const MobileModal = this.MobileModal;
       return <>
-        <MobileSign />
-        <MobileModal />
+        <this.MobileSign />
+        <this.MobileModal />
       </>;
     }
 

one_stop_public/Signature/mobileSign.less

@@ -10,3 +10,13 @@
   border: 1px solid #555;
   margin-top: 20px;
 }
+.mobileSign{
+  position: relative;
+  text-align: center;
+  img{
+    max-width: 85%;
+    max-height: 300px;
+  }
+  .reSign{
+  }
+}