dropdown

config/config.js

@@ -112,6 +112,30 @@ export default {
               name: '首页',
               component: './Welcome',
             },
+            {
+              path: '/building',
+              name: '项目管理',
+              component: '../layouts/BlankLayout',
+              routes: [
+                {
+                  path: '/building/list',
+                  name: '项目列表',
+                  component: './building/list/index',
+                },
+              ],
+            },
+            // {
+            //   path: '/welcome2',
+            //   name: '首页2',
+            //   component: '../layouts/BlankLayout',
+            //   routes:[
+            //     {
+            //       path: '/welcome3',
+            //       name: '首页3',
+            //       component: './Welcome',
+            //     },
+            //   ]
+            // },
             {
               path: '/integralMall',
               name: '积分商城',
@@ -124,6 +148,18 @@ export default {
                 },
               ],
             },
+            {
+              path: '/channel',
+              name: '渠道管理',
+              component: '../layouts/BlankLayout',
+              routes: [
+                {
+                  path: '/channel/channelList',
+                  name: '渠道管理',
+                  component: './channel/channelList',
+                },
+              ],
+            },
             {
               component: './404',
             },

package.json

@@ -26,14 +26,20 @@
     "test:component": "umi test ./src/components",
     "ui": "umi ui"
   },
-
   "lint-staged": {
     "**/*.less": "stylelint --syntax less",
-    "**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write", "git add"],
+    "**/*.{js,jsx,tsx,ts,less,md,json}": [
+      "prettier --write",
+      "git add"
+    ],
     "**/*.{js,jsx}": "npm run lint-staged:js",
     "**/*.{js,ts,tsx}": "npm run lint-staged:js"
   },
-  "browserslist": ["> 1%", "last 2 versions", "not ie <= 10"],
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
   "dependencies": {
     "@ant-design/pro-layout": "^4.5.9",
     "@antv/data-set": "^0.10.2",
@@ -94,8 +100,12 @@
     "umi-types": "^0.3.8",
     "webpack-theme-color-replacer": "^1.2.15"
   },
-  "optionalDependencies": { "puppeteer": "^1.17.0" },
-  "engines": { "node": ">=10.0.0" },
+  "optionalDependencies": {
+    "puppeteer": "^1.17.0"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  },
   "checkFiles": [
     "src/**/*.js*",
     "src/**/*.ts*",

src/pages/building/list/index.jsx

@@ -0,0 +1,168 @@
+import React from 'react';
+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) {
+  e.preventDefault();
+  props.form.validateFields((err, values) => {
+    if (!err) {
+      console.log('提交数据: ', values)
+    }
+  });
+}
+
+// Change 事件
+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>
+          {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: '400px', borderRadius: '12px', boxShadow: '0px 0px 20px #e7e7e7e7' }}
+        cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ width: '299px', height: '203px' }}></img>}
+        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" style={{ color: '#C0C4CC' }}/>
+        </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" style={{ color: '#C0C4CC' }} />
+        </Col>
+        <Col span={12}></Col>
+        <Col span={5}>
+          <span style={{ color: '#FF4A4A', fontWeight: 'bold' }}>
+            删除
+          </span>
+          <Icon type="rest" style={{ color: '#C0C4CC' }} />
+        </Col>
+      </Row>
+      </Card>
+
+      {/* 分页 */}
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={500} onChange={onChange} />
+      </div>
+    </>
+  );
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/building/list/style.css

@@ -0,0 +1,31 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  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

@@ -0,0 +1,37 @@
+// @import '~antd/es/style/themes/default.less';
+
+.SubmitButton {
+  background: rgba(58, 145, 213, 1);
+  border-radius: 7px;
+  border: 0px;
+}
+
+.SelectFrom {
+  width: 180px;
+  background: rgba(255, 255, 255, 1);
+  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

@@ -0,0 +1,31 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  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/channel/channelList.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import channels from './channelList.less';
+
+const { Option } = Select;
+function handleChange(value) {
+  console.log(`selected ${value}`);
+}
+const menu = (
+  <Menu onClick={handleMenuClick}>
+    <Menu.Item key="1">
+      <Icon type="user" />
+      1st menu item
+    </Menu.Item>
+    <Menu.Item key="2">
+      <Icon type="user" />
+      2nd menu item
+    </Menu.Item>
+    <Menu.Item key="3">
+      <Icon type="user" />
+      3rd item
+    </Menu.Item>
+  </Menu>
+);
+const dataSource = [
+  {
+    key: '1',
+    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
+    name: '123',
+    age: 32,
+    address: '西湖区湖底公园1号',
+  },
+  {
+    key: '2',
+    img: '',
+    age: 42,
+    address: '西湖区湖底公园1号',
+  },
+];
+
+const columns = [
+  // {
+  //   title: '商品图片',
+  //   dataIndex: 'img',
+  //   key: 'img',
+  //   align: 'center',
+
+  //   render: (text, record) => <img src={record.img} className={channels.touxiang} />,
+  // },
+  {
+    title: '渠道代码',
+    dataIndex: 'name',
+    key: 'name',
+    align: 'center',
+    render: text => <a>{text}</a>,
+  },
+  {
+    title: '渠道名称',
+    dataIndex: 'integral',
+    key: 'integral',
+    align: 'center',
+  },
+  {
+    title: '联系人',
+    dataIndex: 'total',
+    key: 'total',
+    align: 'center',
+  },
+  {
+    title: '联系电话',
+    dataIndex: 'exchanged',
+    key: 'exchanged',
+    align: 'center',
+  },
+  {
+    title: '经纪人',
+    dataIndex: 'rest',
+    key: 'rest',
+    align: 'center',
+  },
+  {
+    title: '推荐客户有效',
+    dataIndex: 'state',
+    key: 'state',
+    align: 'center',
+  },
+  {
+    title: '邀请经济人',
+    dataIndex: 'handle',
+    key: 'handle',
+    align: 'center',
+    render: () => <a>Delete</a>,
+  },
+];
+
+export default () => (
+  <>
+    <div className={channels.searchBox}>
+      <dvi>
+        <span className={channels.selectName}>渠道名称</span>
+        <Select defaultValue="lucy" style={{ width: 180 }} onChange={handleChange}>
+          <Option value="jack">Jack</Option>
+          <Option value="lucy">Lucy</Option>
+          <Option value="disabled" disabled>
+            Disabled
+          </Option>
+          <Option value="Yiminghe">yiminghe</Option>
+        </Select>
+      </dvi>
+      <Button className={channels.about}>查询</Button>
+    </div>
+    <Button className={channels.addBtn}>新增</Button>
+    <Table dataSource={dataSource} columns={columns} />
+  </>
+);
+
+function handleMenuClick(e) {
+  message.info('Click on menu item.');
+  console.log('click', e);
+}

src/pages/channel/channelList.less

@@ -0,0 +1,46 @@
+.searchBox {
+  font-size: 30px;
+  color: red;
+  display: flex;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .searchItem {
+    min-width: 20px;
+    margin-right: 20px;
+    text-align: left;
+    .anticon-down {
+      float: right !important;
+    }
+  }
+}
+.addBtn {
+  padding: 0 30px;
+  height: 36px;
+  background-color: #50be00;
+  color: #fff;
+  margin: 30px 0;
+}
+.touxiang {
+  width: 93px;
+  height: 93px;
+}
+.ant-table-column-title {
+  font-weight: 600;
+}
+
+.about {
+  padding: 0 30px;
+  height: 36px;
+  background-color: #00bfff;
+  color: #fff;
+  margin: 30px 0;
+}
+
+.selectName {
+  font-size: 17px;
+  padding: 0 10px;
+  height: 36px;
+  color: rgb(10, 10, 10);
+  margin: 30px 0;
+}