添加解绑键盘设备功能

src/api/index.js

@@ -79,3 +79,14 @@ export const getWxConfig = entity =>
     url: '/richScan',
     params: entity,
   });
+export const unbindKeyboard = entity =>
+  fetch({
+    url: `/devices/${entity.deviceCode}/keyboard/unbinding`,
+    method: 'post',
+    data: entity,
+  });
+export const getUnbindKeyboardResult = entity =>
+  fetch({
+    url: `/devices/${entity.deviceCode}/keyboard/unbinding`,
+    params: entity,
+  });

src/containers/Equipment/EquipmentTest.js

@@ -5,11 +5,15 @@ import eqIcon from '../../images/Equipment/equip_number_icon@2x.png';
 import testIcon from '../../images/Equipment/test_water_icon@2x.png';
 import scanImg from '../../images/Equipment/scan.png';
 import WxWrap from '../../HOC/wx';
+import { unbindKeyboard, getUnbindKeyboardResult } from '../../api';
+import rateIcon from '../../images/Equipment/rate_active_icon@2x.png';
 
 let DeviceCode = '';
 class EquipmentTest extends Component {
   state = {
     deviceCode: DeviceCode,
+    getTime: 0,
+    timer: null,
   };
 
   componentWillMount() {
@@ -72,6 +76,66 @@ class EquipmentTest extends Component {
       },
     });
   };
+
+  clickHandle = () => {
+    const { deviceCode } = this.state;
+    if (!deviceCode) {
+      Toast.fail('请输入设备编号或扫设备二维码');
+      return;
+    }
+    Toast.loading('', 99);
+    return unbindKeyboard({
+      deviceCode: deviceCode,
+    })
+      .then(() => {
+        this.loopUntilGetResult();
+      })
+      .catch(err => {
+        Toast.fail(err.msg || '请求解除键盘失败');
+      });
+  };
+
+  loopUntilGetResult = () => {
+    let timer = setInterval(() => {
+      this.getResult();
+    }, 1000);
+    this.setState({ timer });
+  };
+
+  getResult = () => {
+    const { deviceCode } = this.state;
+    const { getTime } = this.state;
+    if (getTime === 10) {
+      return;
+    }
+    this.setState(({ getTime }) => ({
+      getTime: getTime + 1,
+    }));
+    return getUnbindKeyboardResult({
+      deviceCode: deviceCode,
+    })
+      .then(() => {
+        const { timer } = this.state;
+        clearInterval(timer);
+        Toast.success('解除键盘设备');
+        this.setState({
+          timer: null,
+          getTime: 0,
+        });
+      })
+      .catch(err => {
+        const { getTime, timer } = this.state;
+        if (getTime === 10) {
+          clearInterval(timer);
+          Toast.fail(err.msg || '解除键盘设备失败');
+          this.setState({
+            timer: null,
+            getTime: 0,
+          });
+        }
+        console.error(err);
+      });
+  };
   render() {
     const { deviceCode } = this.state;
     return (
@@ -108,6 +172,12 @@ class EquipmentTest extends Component {
             <span>测试吹风</span>
           </div>
         </div>
+        <div className='linkItem' onClick={this.clickHandle}>
+          <i className='linkIcon'>
+            <img src={rateIcon} alt='' />
+          </i>
+          <span>解绑键盘设备</span>
+        </div>
       </div>
     );
   }

src/containers/Equipment/index.js

@@ -7,16 +7,89 @@ import bindIcon from '../../images/Equipment/link_position_icon@2x.png';
 import testIcon from '../../images/Equipment/test_water_icon@2x.png';
 import rateIcon from '../../images/Equipment/rate_active_icon@2x.png';
 import UserInfoContext from '../../context/userinfo-context';
+import { unbindKeyboard, getUnbindKeyboardResult } from '../../api';
+import { Toast } from 'antd-mobile';
 
 export class Index extends React.Component {
   static propTypes = {
     name: PropTypes.string,
   };
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      getTime: 0,
+      timer: null,
+    };
+  }
+
   componentWillMount() {
     const { setTitle } = this.props;
     setTitle('功能页');
   }
+  componentWillUnmount() {
+    const { timer } = this.state;
+    if (timer) {
+      clearInterval(timer);
+    }
+  }
+
+  clickHandle = () => {
+    Toast.loading('', 99);
+    const { deviceCode } = this.props.match.params;
+    return unbindKeyboard({
+      deviceCode: deviceCode,
+    })
+      .then(() => {
+        this.loopUntilGetResult();
+      })
+      .catch(err => {
+        Toast.fail(err.msg || '请求解除键盘失败');
+      });
+  };
+
+  loopUntilGetResult = () => {
+    let timer = setInterval(() => {
+      this.getResult();
+    }, 1000);
+    this.setState({ timer });
+  };
+
+  getResult = () => {
+    const { deviceCode } = this.props.match.params;
+    const { getTime } = this.state;
+    if (getTime === 10) {
+      return;
+    }
+    this.setState(({ getTime }) => ({
+      getTime: getTime + 1,
+    }));
+    return getUnbindKeyboardResult({
+      deviceCode: deviceCode,
+    })
+      .then(() => {
+        const { timer } = this.state;
+        clearInterval(timer);
+        Toast.success('解除键盘设备');
+        this.setState({
+          timer: null,
+          getTime: 0,
+        });
+      })
+      .catch(err => {
+        const { getTime, timer } = this.state;
+        if (getTime === 10) {
+          clearInterval(timer);
+          Toast.fail(err.msg || '解除键盘设备失败');
+          this.setState({
+            timer: null,
+            getTime: 0,
+          });
+        }
+        console.error(err);
+      });
+  };
+
   render() {
     const { deviceCode } = this.props.match.params;
 
@@ -32,8 +105,8 @@ export class Index extends React.Component {
           </span>
         </div>
         <div className='br8 btnBox'>
-          <div className='boxB boxBs' />
-          <div className='boxBv' />
+          {/* <div className='boxB boxBs' />
+          <div className='boxBv' /> */}
           <Link
             className='linkItem'
             to={'/Equipment/' + deviceCode + '/SelectEquipment'}>
@@ -58,6 +131,12 @@ export class Index extends React.Component {
             </i>
             <span>费率激活</span>
           </Link>
+          <div className='linkItem' onClick={this.clickHandle}>
+            <i className='linkIcon'>
+              <img src={rateIcon} alt='' />
+            </i>
+            <span>解绑键盘设备</span>
+          </div>
         </div>
       </div>
     );

src/containers/Equipment/style.scss

@@ -3,7 +3,7 @@
   background: #ebebeb url('../../images/Login/login_bg@2x.png') no-repeat;
   background-size: contain;
   background-position-y: -624px;
-
+  overflow-y: auto;
   .inputBox {
     display: flex;
     width: 500px;
@@ -28,7 +28,6 @@
   }
   .btnBox {
     width: 500px;
-    height: 500px;
     margin: 86px auto 0;
     background-color: #fff;
     box-shadow: 0 0 5px rgba(43, 43, 43, 0.3);
@@ -63,6 +62,7 @@
     top: 249px;
   }
   .linkItem {
+    box-sizing: border-box;
     width: 250px;
     height: 250px;
     display: flex;
@@ -73,6 +73,14 @@
     font-size: 26px;
     position: relative;
   }
+  .linkItem:nth-child(odd),
+  .linkItem:nth-child(even) {
+    border-bottom: 1px solid #ebebeb;
+  }
+  .linkItem:nth-child(odd) {
+    border-right: 1px solid #ebebeb;
+  }
+
   .linkIcon {
     width: 60px;
     height: 60px;