项目首页

src/pages/building/list/index.jsx

@@ -1,13 +1,19 @@
 import React from 'react';
-import { Form, Icon, Input, Button, DatePicker, Select } from 'antd';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination } from 'antd';
 import Styles from './style.less';
 
 const { Option } = Select;
+const { Meta } = Card;
+
 
 // 提交事件
 function handleSubmit(e, props) {
-  console.log(props)
   e.preventDefault();
+  props.form.validateFields((err, values) => {
+    if (!err) {
+      console.log('提交数据: ', values)
+    }
+  });
 }
 
 // Change 事件
@@ -15,69 +21,148 @@ function handleSelectChange(props) {
   console.log(props)
 }
 
-// 搜索
+// 分页
+function onChange(pageNumber) {
+  console.log('Page: ', pageNumber);
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
 function header(props) {
+  const { getFieldDecorator } = props.form
+
   return (
-    <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
-      <Form.Item>
-        {
-          <Input
-            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-            placeholder="楼盘编号"
-          />
-        }
-      </Form.Item>
-      <Form.Item>
-        {
-          <Input
-            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
-            type="password"
-            placeholder="楼盘名称"
-          />
-        }
-      </Form.Item>
-      <Form.Item>{<DatePicker placeholder="开盘时间" />}</Form.Item>
-      <Form.Item>
-        {
-          <Select style={{ width: '180px' }} placeholder="楼盘状态" onChange={handleSelectChange}>
-            <Option value="1">发布</Option>
-            <Option value="0">未发布</Option>
-          </Select>
-        }
-      </Form.Item>
-      <Form.Item>
-        {
-          <Select style={{ width: '180px' }} placeholder="销售状态" onChange={handleSelectChange}>
-            <Option value="1">已销售</Option>
-            <Option value="0">未销售</Option>
-          </Select>
-        }
-      </Form.Item>
-      <Form.Item>
-        {
-          <Select style={{ width: '180px' }} placeholder="城市" onChange={handleSelectChange}>
-            <Option value="male">male</Option>
-            <Option value="female">female</Option>
-          </Select>
-        }
-      </Form.Item>
-      <Form.Item>
-        {
-          <Select style={{ width: '180px' }} placeholder="首页推荐" onChange={handleSelectChange}>
-            <Option value="1">首页推荐</Option>
-            <Option value="0">首页未推荐</Option>
-          </Select>
-        }
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary" htmlType="submit" className={Styles.SubmitButton}>
-          搜索
-        </Button>
-      </Form.Item>
-    </Form>
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('code')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="楼盘编号"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('name')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              type="password"
+              placeholder="楼盘名称"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('startDate')(
+            <DatePicker placeholder="开盘时间" />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('buildingStatus')(
+            <Select style={{ width: '180px' }} placeholder="楼盘状态" onChange={handleSelectChange}>
+              <Option value="1">发布</Option>
+              <Option value="0">未发布</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('marketStatus')(
+            <Select style={{ width: '180px' }} placeholder="销售状态" onChange={handleSelectChange}>
+              <Option value="1">已销售</Option>
+              <Option value="0">未销售</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('cityId')(
+            <Select style={{ width: '180px' }} placeholder="城市" onChange={handleSelectChange}>
+              <Option value="male">male</Option>
+              <Option value="female">female</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('isMain')(
+            <Select style={{ width: '180px' }} placeholder="首页推荐" onChange={handleSelectChange}>
+              <Option value="1">首页推荐</Option>
+              <Option value="0">首页未推荐</Option>
+            </Select>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit" className={Styles.SubmitButton}>
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+      <Button type="primary" className={Styles.addButton}>
+        新增楼盘
+      </Button>
+
+      {/* 卡片内容，显示楼盘项目  */}
+      <Card
+        hoverable
+        style={{ width: '300px', height: '500px' }}
+        cover={<img alt="example" width="459" height="303" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
+        bodyStyle={{ padding: '10px' }}
+      >
+       <Row className={ Styles.cardText }>
+        <Col span={7}>楼盘编号：</Col>
+        <Col span={12}>S101</Col>
+        <Col span={5}>
+          <span className={ Styles.ediText }>编辑</span>
+          <Icon type="form" />
+        </Col>
+      </Row>
+      <Row>
+        <Col span={7}>楼盘名称：</Col>
+        <Col span={17}>城开花园</Col>
+      </Row>
+      <Row>
+        <Col span={7}>均&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：</Col>
+        <Col span={17}>
+          约<span style={{ color: '#FF0707', fontWeight: 'bold' }}>111</span>元/m
+        </Col>
+      </Row>
+      <Row>
+        <Col span={7}>项目地址：</Col>
+        <Col span={17}>顾戴路1801弄</Col>
+      </Row>
+      <Row>
+        <Col span={7}>发布状态：</Col>
+        <Col span={17}>已发布</Col>
+      </Row>
+      <Row>
+        <Col span={7}>录入时间：</Col>
+        <Col span={17}>2019-08-28 17</Col>
+      </Row>
+      <Row style={{ marginTop: '15px' }}>
+        <Col span={7}>
+          <span style={{ color: '#1990FF', fontWeight: 'bold' }}>
+            取消发布
+          </span>
+          <Icon type="close-circle" />
+        </Col>
+        <Col span={12}></Col>
+        <Col span={5}>
+          <span style={{ color: '#FF4A4A', fontWeight: 'bold' }}>
+            删除
+          </span>
+          <Icon type="rest" />
+        </Col>
+      </Row>
+      </Card>
+
+      {/* 分页 */}
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
+      </div>
+    </>
   );
 }
+const WrappedHeader = Form.create({ name: 'header' })(header);
 
-const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(header);
-
-export default WrappedHorizontalLoginForm;
+export default WrappedHeader

src/pages/building/list/style.css

@@ -9,3 +9,23 @@
   border-radius: 7px;
   border: 1px solid #dbdbdb;
 }
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 14px;
+  font-family: 'PingFangSC';
+  font-weight: 400;
+  color: #666666;
+  line-height: 25px;
+}
+.ediText {
+  font-size: 14px;
+  font-family: 'PingFangSC';
+  font-weight: 400;
+  color: #ff925c;
+  line-height: 25px;
+}

src/pages/building/list/style.less

@@ -12,3 +12,26 @@
   border-radius: 7px;
   border: 1px solid rgba(219, 219, 219, 1);
 }
+
+.addButton {
+  background:rgba(80,190,0,1);
+  border-radius:4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+
+.cardText {
+  font-size:14px;
+  font-family:'PingFangSC';
+  font-weight:400;
+  color:rgba(102,102,102,1);
+  line-height:25px;
+}
+
+.ediText {
+  font-size:14px;
+  font-family:'PingFangSC';
+  font-weight:400;
+  color:rgba(255,146,92,1);
+  line-height:25px;
+}

src/pages/building/list/style.wxss

@@ -9,3 +9,23 @@
   border-radius: 7px;
   border: 1px solid #dbdbdb;
 }
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 14px;
+  font-family: 'PingFangSC';
+  font-weight: 400;
+  color: #666666;
+  line-height: 25px;
+}
+.ediText {
+  font-size: 14px;
+  font-family: 'PingFangSC';
+  font-weight: 400;
+  color: #ff925c;
+  line-height: 25px;
+}