移动端签名组件重构

one_stop_public/Signature/index.jsx

@@ -5,16 +5,17 @@
  */
 import React, { Component } from 'react';
 import SignatureCanvas from 'react-signature-canvas';
-import { message, Button } from 'antd';
+import { message, Button, Modal } from 'antd';
 import config from '@/webPublic/one_stop_public/config';
 import reqwest from 'reqwest';
 import { getToken, getUserInfo } from '@/webPublic/one_stop_public/utils/token';
 import { uaaRequest } from '@/webPublic/one_stop_public/utils/request';
 import { getOneStopMyInfo } from '@/webPublic/one_stop_public/utils/utils';
+import styles from './mobileSign.less';
 
 // 保存签名 到用户基础信息上
-function saveSign(url){
-  if(typeof url !== 'string' || url.length < 15){
+function saveSign(url) {
+  if (typeof url !== 'string' || url.length < 15) {
     return true;
   }
   const userInfo = getUserInfo();
@@ -23,7 +24,8 @@ function saveSign(url){
     backgroundImageUrl: userInfo.backgroundImageUrl,
     isUseBackImage: userInfo.isUseBackImage,
     userSign: url,
-  }).then((g) => {
+  })
+    .then((g) => {
       getOneStopMyInfo();
       return true;
     });
@@ -53,6 +55,7 @@ export default class Index extends Component {
     const value = props.value;
     this.state = {
       url: value || getUserInfo().userSign,
+      showModal: false,
     };
   }
 
@@ -137,20 +140,83 @@ export default class Index extends Component {
   };
 
   componentDidMount() {
-    if(!this.props.value && this.state.value){
+    if (!this.props.value && this.state.value) {
       this.triggerChange(this.state.value);
     }
   }
 
+  changeShowModal = () => {
+    this.setState({
+      showModal: !this.state.showModal,
+    });
+  };
+
+  // 移动端签名组件
+  MobileSign = () => {
+    const { url } = this.state;
+    if (url) {
+      return <div className={styles.mobileSign}>
+
+      </div>;
+    } else {
+      return <div className={styles.mobileSign2}>
+        <Button type={'primary'} onClick={this.changeShowModal}>
+          点击开始签名
+        </Button>
+      </div>;
+    }
+    return null;
+  };
+
+  MobileModal = () => {
+    const { showModal } = this.state;
+    const height = 300;
+    const width = window.screen.width - 50;
+    return (
+      showModal && <Modal className={styles.mobileModal}
+                          width={'100vw'}
+                          onCancel={this.changeShowModal}
+                          visible={true}
+                          title={'签名'}
+                          bodyStyle={{minHeight: '350px'}}
+      >
+      <div className={styles.borderDiv}>
+        <SignatureCanvas
+          penColor='black'
+          ref={(ref) => {
+            this.sigCanvas = ref;
+          }}
+          canvasProps={{
+            width: width + 'px',
+            height: height + 'px',
+            className: 'sigCanvas',
+          }}
+        />
+      </div>
+      </Modal>);
+  };
+
   render() {
     // console.log('签名组件');
     const {
       width,
       height,
+      get,
+
     } = this.props;
     const { url } = this.state;
+
+    if (get === 'mobile') {
+      const MobileSign = this.MobileSign;
+      const MobileModal = this.MobileModal;
+      return <>
+        <MobileSign />
+        <MobileModal />
+      </>;
+    }
+
     return (
-      <div id="canvas_signature" style={{
+      <div id='canvas_signature' style={{
         width: '100%',
         height: '100%',
         marginLeft: 5,
@@ -167,10 +233,10 @@ export default class Index extends Component {
             <img src={config.httpServer + url} style={{
               width: width,
               height: height - 20,
-            }}/>
+            }} />
           ) : (
             <SignatureCanvas
-              penColor="black"
+              penColor='black'
               ref={(ref) => {
                 this.sigCanvas = ref;
               }}
@@ -187,15 +253,15 @@ export default class Index extends Component {
             bottom: 5,
           }}>
             {url ? (
-              <Button type="danger" size="small" onClick={this.delete}>
+              <Button type='danger' size='small' onClick={this.delete}>
                 重写
               </Button>
             ) : (
               <>
-                <Button style={{ marginLeft: 12 }} type="danger" size="small" onClick={this.clear}>
+                <Button style={{ marginLeft: 12 }} type='danger' size='small' onClick={this.clear}>
                   清除
                 </Button>
-                <Button style={{ marginLeft: 12 }} onClick={this.trim} size="small" type="primary">
+                <Button style={{ marginLeft: 12 }} onClick={this.trim} size='small' type='primary'>
                   保存
                 </Button>
               </>

one_stop_public/Signature/mobileSign.less

+.mobileSign2{
+  text-align: center;
+}
+.mobileModal{
+  //width: 100vw;
+  min-height: 70vh;
+}
+
+.borderDiv{
+  border: 1px solid #555;
+  margin-top: 20px;
+}