dialog

src/components/EchartsTest/index.jsx

@@ -3,15 +3,15 @@ import React, { Component } from 'react';
 // 引入 ECharts 主模块
 import echarts from 'echarts/lib/echarts';
 // 引入柱状图
-import  'echarts/lib/chart/bar';
+import 'echarts/lib/chart/bar';
 // 引入提示框和标题组件
 import 'echarts/lib/component/tooltip';
 import 'echarts/lib/component/title';
 class Chart extends Component {
 
-  render() { 
-    return ( <div></div> );
+  render() {
+    return (<div></div>);
   }
 }
- 
+
 export default Chart;

src/global.less

@@ -110,4 +110,14 @@ ol {
 }
 .ant-table{
   line-height: 3;
+}
+.ant-modal-header{
+  border-bottom: none;
+  .ant-modal-title{
+    font-size: 24px;
+    line-height: 50px;
+  }
+}
+.ant-modal-footer{
+  border-top:none;
 }

src/pages/integralMall/writeOff.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Form, Input, Button, Icon, Tabs, Row, Col, message } from 'antd';
+import { Form, Input, Button, Icon, Tabs, Row, Col, Modal, message } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import router from 'umi/router';
@@ -13,20 +13,67 @@ function callback(key) {
 }
 
 /**
- *
- *
  * @param {*} props
  * @returns
  */
+class Dialog extends React.Component {
+  state = {
+    visible: false,
+  };
+
+  showModal = () => {
+    this.setState({ visible: true, });
+  };
+
+  handleCancel = () => {
+    this.setState({ visible: false });
+  };
+
+  onKeyDown = (e) => {
+
+    if (e.keyCode == 13) {
+      this.setState({ visible: false });
+      this.props.onEnter();
+    }
+  }
+
+  render() {
+    const { visible, loading } = this.state;
+    return (
+      <div>
+        <Button type="primary" onClick={this.showModal} style={{ margin: '80px auto', display: 'block', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
+        <Modal
+          style={{ marginTop: '20vh' }}
+          visible={visible}
+          title="核销数据"
+          onCancel={this.handleCancel}
+          footer={[]}
+        >
+          <p>扫描二维码数据</p>
+          <Input placeholder="请用扫描枪扫描二维码" onKeyDown={this.onKeyDown} onChange={this.props.onChange} />
+        </Modal>
+      </div>
+    );
+  }
+}
+
 
 function header(props) {
   const [telValue, setTelValue] = useState('')
+
   const changeTel = (e) => {
     setTelValue(e.target.value)
   }
 
-  const verifyTel = () =>{
-    if(telValue === ""){
+  const [codeValue, setCodeValue] = useState('')
+  const changeCode = (e) => {
+
+    setCodeValue(e.target.value)
+
+  }
+
+  const verifyTel = () => {
+    if (telValue === "") {
       message.error("请输入手机号");
       return;
     }
@@ -38,6 +85,22 @@ function header(props) {
     });
   }
 
+
+  const handleEnter = (e) => {
+    if (codeValue === "") {
+      message.error("无二维码数据");
+      return;
+    } else {
+
+      router.push({
+        pathname: '/integralMall/verifyList',
+        query: {
+          codeValue
+        },
+      });
+    }
+  }
+
   const { getFieldDecorator } = props.form
   return (
     <>
@@ -62,7 +125,7 @@ function header(props) {
               <p style={{ margin: '44px auto' }}>根据提示进行核销操作</p>
             </Col>
           </Row>
-          <Button type="primary" style={{ margin: '80px auto', display: 'block', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
+          <Dialog onEnter={handleEnter} onChange={changeCode} />
         </TabPane>
         <TabPane tab="手机号核销" key="2">
           <Row>
@@ -77,15 +140,17 @@ function header(props) {
               <p>点击“立即核销”按钮</p>
             </Col>
           </Row>
-          <div style={{ margin: '110px auto', display: 'block',textAlign:'center' }}>
-            <Input placeholder="请输入手机号" style={{width:'200px'}} onChange={changeTel}/>
-            <Button type="primary" style={{marginLeft:'10px', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }} onClick={verifyTel}>立即核销</Button>
+          <div style={{ margin: '110px auto', display: 'block', textAlign: 'center' }}>
+            <Input placeholder="请输入手机号" style={{ width: '200px' }} onChange={changeTel} />
+            <Button type="primary" style={{ marginLeft: '10px', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }} onClick={verifyTel}>立即核销</Button>
           </div>
         </TabPane>
       </Tabs>,
     </>
   )
 }
+
 const WrappedHeader = Form.create({ name: 'header' })(header);
 
+
 export default WrappedHeader