record

config/config.js

@@ -139,6 +139,11 @@ export default {
                   name: '',
                   component: './integralMall/editGoods',
                 },
+                {
+                  path: '/integralMall/exchangeRecords',
+                  name: '兑换记录',
+                  component: './integralMall/exchangeRecords',
+                },
               ],
             },
             {

src/pages/integralMall/exchangeRecords.jsx

@@ -0,0 +1,242 @@
+import React from 'react';
+import { Form, Input, Button, Icon, Select, DatePicker } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../style/GoodsList.less';
+
+/**
+  @param {*} props
+  @returns
+ */
+const { Option } = Select;
+// 提交事件
+function handleSubmit(e, props) {
+  e.preventDefault();
+  props.form.validateFields((err, values) => {
+    if (!err) {
+      console.log('提交数据: ', values)
+    }
+  });
+}
+// Change 事件
+function handleSelectChange(props) {
+  console.log(props)
+}
+// 兑换时间 组件
+class DateRange extends React.Component {
+  state = {
+    startValue: null,
+    endValue: null,
+    endOpen: false,
+  };
+
+  disabledStartDate = startValue => {
+    const { endValue } = this.state;
+    if (!startValue || !endValue) {
+      return false;
+    }
+    return startValue.valueOf() > endValue.valueOf();
+  };
+
+  disabledEndDate = endValue => {
+    const { startValue } = this.state;
+    if (!endValue || !startValue) {
+      return false;
+    }
+    return endValue.valueOf() <= startValue.valueOf();
+  };
+
+  onChange = (field, value) => {
+    this.setState({
+      [field]: value,
+    });
+
+  };
+  onStartChange = value => {
+    this.onChange('startValue', value);
+    console.log(value, "startValue")
+  };
+
+  onEndChange = value => {
+    this.onChange('endValue', value);
+    console.log(value, "endValue")
+  };
+
+  handleStartOpenChange = open => {
+    if (!open) {
+      this.setState({ endOpen: true });
+    }
+  };
+  handleEndOpenChange = open => {
+    this.setState({ endOpen: open });
+  };
+  render() {
+    const { startValue, endValue, endOpen } = this.state;
+    return (
+      <div>
+        <span style={{ marginRight: '14px' }}>兑换时间</span>
+        <DatePicker
+          disabledDate={this.disabledStartDate}
+          format="YYYY-MM-DD"
+          value={startValue}
+          placeholder="开始时间"
+          onChange={this.onStartChange}
+          onOpenChange={this.handleStartOpenChange}
+          style={{ marginRight: '14px' }}
+        />
+        <DatePicker
+          disabledDate={this.disabledEndDate}
+          format="YYYY-MM-DD"
+          value={endValue}
+          placeholder="结束时间"
+          onChange={this.onEndChange}
+          open={endOpen}
+          onOpenChange={this.handleEndOpenChange}
+        />
+      </div>
+    );
+  }
+}
+// 兑换时间 组件  end
+// 领取时间 组件 
+class DateRange2 extends React.Component {
+  state = {
+    startValue2: null,
+    endValue2: null,
+    endOpen2: false,
+  };
+
+  disabledStartDate2 = startValue2 => {
+    const { endValue2 } = this.state;
+    if (!startValue2 || !endValue2) {
+      return false;
+    }
+    return startValue2.valueOf() > endValue2.valueOf();
+  };
+
+  disabledEndDate2 = endValue2 => {
+    const { startValue2 } = this.state;
+    if (!endValue2 || !startValue2) {
+      return false;
+    }
+    return endValue2.valueOf() <= startValue2.valueOf();
+  };
+
+  onChange = (field, value) => {
+    this.setState({
+      [field]: value,
+    });
+  };
+  onStartChange2 = value => {
+    this.onChange('startValue2', value);
+    console.log(value, "startValue2")
+  };
+
+  onEndChange2 = value => {
+    this.onChange('endValue2', value);
+    console.log(value, "endValue2")
+  };
+
+  handleStartOpenChange2 = open => {
+    if (!open) {
+      this.setState({ endOpen2: true });
+    }
+  };
+  handleEndOpenChange2 = open => {
+    this.setState({ endOpen2: open });
+  };
+  render() {
+    const { startValue2, endValue2, endOpen2 } = this.state;
+    return (
+      <div>
+        <span style={{ marginRight: '14px' }}>领取时间</span>
+        <DatePicker
+          disabledDate={this.disabledStartDate2}
+          format="YYYY-MM-DD"
+          value={startValue2}
+          placeholder="开始时间"
+          onChange={this.onStartChange2}
+          onOpenChange={this.handleStartOpenChange2}
+          style={{ marginRight: '14px' }}
+        />
+        <DatePicker
+          disabledDate={this.disabledEndDate2}
+          format="YYYY-MM-DD"
+          value={endValue2}
+          placeholder="结束时间"
+          onChange={this.onEndChange2}
+          open={endOpen2}
+          onOpenChange={this.handleEndOpenChange2}
+        />
+      </div>
+    );
+  }
+}
+// 领取时间 组件  end
+
+function record(props) {
+  const { getFieldDecorator } = props.form
+
+  return (
+
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('name')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="用户姓名"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('phone')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="手机号"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('goodName')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="商品名称"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('type')(
+            <Select style={{ width: '200px' }} placeholder="用户类型" onChange={handleSelectChange}>
+              <Option value="2">置业顾问</Option>
+              <Option value="1">销售主管</Option>
+              <Option value="0">经纪人</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('state')(
+            <Select style={{ width: '200px' }} placeholder="状态" onChange={handleSelectChange}>
+              <Option value="1">已领取</Option>
+              <Option value="0">未领取</Option>
+            </Select>,
+          )}
+        </Form.Item>
+
+        <Form.Item>
+          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+            搜索
+          </Button>
+        </Form.Item>
+        <Form.Item>
+          <DateRange />
+        </Form.Item>
+        <Form.Item>
+          <DateRange2 />
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'record' })(record);
+
+export default WrappedHeader