许静 5 years ago
parent
commit
23aa3935ce
3 changed files with 88 additions and 13 deletions
  1. 4
    4
      src/components/EchartsTest/index.jsx
  2. 10
    0
      src/global.less
  3. 74
    9
      src/pages/integralMall/writeOff.jsx

+ 4
- 4
src/components/EchartsTest/index.jsx View File

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

+ 10
- 0
src/global.less View File

@@ -110,4 +110,14 @@ ol {
110 110
 }
111 111
 .ant-table{
112 112
   line-height: 3;
113
+}
114
+.ant-modal-header{
115
+  border-bottom: none;
116
+  .ant-modal-title{
117
+    font-size: 24px;
118
+    line-height: 50px;
119
+  }
120
+}
121
+.ant-modal-footer{
122
+  border-top:none;
113 123
 }

+ 74
- 9
src/pages/integralMall/writeOff.jsx View File

@@ -1,5 +1,5 @@
1 1
 import React, { useState, useEffect } from 'react';
2
-import { Form, Input, Button, Icon, Tabs, Row, Col, message } from 'antd';
2
+import { Form, Input, Button, Icon, Tabs, Row, Col, Modal, message } from 'antd';
3 3
 import { FormattedMessage } from 'umi-plugin-react/locale';
4 4
 import styles from '../style/GoodsList.less';
5 5
 import router from 'umi/router';
@@ -13,20 +13,67 @@ function callback(key) {
13 13
 }
14 14
 
15 15
 /**
16
- *
17
- *
18 16
  * @param {*} props
19 17
  * @returns
20 18
  */
19
+class Dialog extends React.Component {
20
+  state = {
21
+    visible: false,
22
+  };
23
+
24
+  showModal = () => {
25
+    this.setState({ visible: true, });
26
+  };
27
+
28
+  handleCancel = () => {
29
+    this.setState({ visible: false });
30
+  };
31
+
32
+  onKeyDown = (e) => {
33
+
34
+    if (e.keyCode == 13) {
35
+      this.setState({ visible: false });
36
+      this.props.onEnter();
37
+    }
38
+  }
39
+
40
+  render() {
41
+    const { visible, loading } = this.state;
42
+    return (
43
+      <div>
44
+        <Button type="primary" onClick={this.showModal} style={{ margin: '80px auto', display: 'block', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
45
+        <Modal
46
+          style={{ marginTop: '20vh' }}
47
+          visible={visible}
48
+          title="核销数据"
49
+          onCancel={this.handleCancel}
50
+          footer={[]}
51
+        >
52
+          <p>扫描二维码数据</p>
53
+          <Input placeholder="请用扫描枪扫描二维码" onKeyDown={this.onKeyDown} onChange={this.props.onChange} />
54
+        </Modal>
55
+      </div>
56
+    );
57
+  }
58
+}
59
+
21 60
 
22 61
 function header(props) {
23 62
   const [telValue, setTelValue] = useState('')
63
+
24 64
   const changeTel = (e) => {
25 65
     setTelValue(e.target.value)
26 66
   }
27 67
 
28
-  const verifyTel = () =>{
29
-    if(telValue === ""){
68
+  const [codeValue, setCodeValue] = useState('')
69
+  const changeCode = (e) => {
70
+
71
+    setCodeValue(e.target.value)
72
+
73
+  }
74
+
75
+  const verifyTel = () => {
76
+    if (telValue === "") {
30 77
       message.error("请输入手机号");
31 78
       return;
32 79
     }
@@ -38,6 +85,22 @@ function header(props) {
38 85
     });
39 86
   }
40 87
 
88
+
89
+  const handleEnter = (e) => {
90
+    if (codeValue === "") {
91
+      message.error("无二维码数据");
92
+      return;
93
+    } else {
94
+
95
+      router.push({
96
+        pathname: '/integralMall/verifyList',
97
+        query: {
98
+          codeValue
99
+        },
100
+      });
101
+    }
102
+  }
103
+
41 104
   const { getFieldDecorator } = props.form
42 105
   return (
43 106
     <>
@@ -62,7 +125,7 @@ function header(props) {
62 125
               <p style={{ margin: '44px auto' }}>根据提示进行核销操作</p>
63 126
             </Col>
64 127
           </Row>
65
-          <Button type="primary" style={{ margin: '80px auto', display: 'block', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }}>立即核销</Button>
128
+          <Dialog onEnter={handleEnter} onChange={changeCode} />
66 129
         </TabPane>
67 130
         <TabPane tab="手机号核销" key="2">
68 131
           <Row>
@@ -77,15 +140,17 @@ function header(props) {
77 140
               <p>点击“立即核销”按钮</p>
78 141
             </Col>
79 142
           </Row>
80
-          <div style={{ margin: '110px auto', display: 'block',textAlign:'center' }}>
81
-            <Input placeholder="请输入手机号" style={{width:'200px'}} onChange={changeTel}/>
82
-            <Button type="primary" style={{marginLeft:'10px', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }} onClick={verifyTel}>立即核销</Button>
143
+          <div style={{ margin: '110px auto', display: 'block', textAlign: 'center' }}>
144
+            <Input placeholder="请输入手机号" style={{ width: '200px' }} onChange={changeTel} />
145
+            <Button type="primary" style={{ marginLeft: '10px', padding: '6px 46px', backgroundColor: '#EA2323', border: 'none' }} onClick={verifyTel}>立即核销</Button>
83 146
           </div>
84 147
         </TabPane>
85 148
       </Tabs>,
86 149
     </>
87 150
   )
88 151
 }
152
+
89 153
 const WrappedHeader = Form.create({ name: 'header' })(header);
90 154
 
155
+
91 156
 export default WrappedHeader