合并

config/config.js

       // },
       pwa: pwa
         ? {
-            workboxPluginMode: 'InjectManifest',
-            workboxOptions: {
-              importWorkboxFrom: 'local',
-            },
-          }
+          workboxPluginMode: 'InjectManifest',
+          workboxOptions: {
+            importWorkboxFrom: 'local',
+          },
+        }
         : false, // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665
       // dll features https://webpack.js.org/plugins/dll-plugin/
       // dll: {
                 },
               ],
             },
-            // {
-            //   path: '/welcome2',
-            //   name: '首页2',
-            //   component: '../layouts/BlankLayout',
-            //   routes:[
-            //     {
-            //       path: '/welcome3',
-            //       name: '首页3',
-            //       component: './Welcome',
-            //     },
-            //   ]
-            // },
             {
               path: '/integralMall',
               name: '积分商城',
                   name: '商品列表',
                   component: './integralMall/GoodsList',
                 },
+                {
+                  path: '/integralMall/editGoods',
+                  name: '',
+                  component: './integralMall/editGoods',
+                },
               ],
             },
             {
                 // },
               ],
             },
+            {
+              path: '/activity',
+              name: '活动管理',
+              component: '../layouts/BlankLayout',
+              routes: [
+                {
+                  path: '/activity/ActivityList',
+                  name: '活动列表',
+                  component: './activity/ActivityList',
+                },
+              ],
+            },
             {
               component: './404',
             },

src/pages/activity/ActivityList.jsx

+import React from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../style/GoodsList.less';
+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={styles.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={styles.searchBox}>
+      <Input placeholder="商品名称" className={styles.searchItem} />
+      <Dropdown overlay={menu} className={styles.searchItem}>
+        <Button>
+          Button <Icon type="down" />
+        </Button>
+      </Dropdown>
+      <Dropdown overlay={menu} className={styles.searchItem}>
+        <Button>
+          Button <Icon type="down" />
+        </Button>
+      </Dropdown>
+      <Input placeholder="商品名称" className={styles.searchItem} />
+      <Input placeholder="商品名称" className={styles.searchItem} />
+      <Button type="primary" size="small">
+        查询
+      </Button>
+    </div>
+    <Button className={styles.addBtn}>新增</Button>
+    <Table dataSource={dataSource} columns={columns} />
+  </>
+);
+
+function handleMenuClick(e) {
+  message.info('Click on menu item.');
+  console.log('click', e);
+}

src/pages/building/list/index.jsx

       </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' }}/>
+      <Row style={{ padding: ' 0 10px' }}>
+        <Col span={8}>
+          <Card
+            hoverable
+            style={{ minWidth: '400px', borderRadius: '12px',margin:'10px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)', }}
+            cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" style={{ borderRadius: '12px 12px 0 0', width: '100%', height: '14vw' }}></img>}
+            bodyStyle={{ padding: '10px 20px' }}
+          >
+            <p className={Styles.cardText}>
+              <span className={Styles.title}>楼盘编号</span>
+              <span >：S101</span>
+              <span className={Styles.ediText}>
+                编辑
+                <Icon type="form" style={{ color: '#C0C4CC', marginLeft: '10px' }} />
+              </span>
+            </p>
+            <p className={Styles.cardText}>
+              <span className={Styles.title}>楼盘名称</span>
+              <span >：城开花园</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>均价</span>
+              <span >
+                ：约<span style={{ color: '#FF0707', fontSize: '20px' }}> 111 </span>元/m
+        </span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>项目地址</span>
+              <span >：顾戴路1801弄</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>发布状态</span>
+              <span >：已发布</span>
+            </p>
+            <p className={Styles.cardItem}>
+              <span className={Styles.title}>录入时间</span>
+              <span >：2019-08-28 17</span>
+            </p>
+            <p style={{ margin: '15px 0', position: 'relative', fontSize: '18px' }}>
+              <span style={{ color: '#1990FF' }}>
+                取消发布
+                <Icon type="close-circle" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+              </span>
+              <span style={{
+                color: '#FF4A4A', position: 'absolute',
+                right: '0'
+              }} >
+                删除
+                <Icon type="rest" style={{ color: '#C0C4CC', marginLeft: '8px' }} />
+              </span>
+            </p>
+          </Card>
         </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} />

src/pages/building/list/style.css

-.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

-// @import '~antd/es/style/themes/default.less';
-
 .SubmitButton {
-  background: rgba(58, 145, 213, 1);
+  background: #3a91d5;
   border-radius: 7px;
   border: 0px;
 }
-
 .SelectFrom {
   width: 180px;
-  background: rgba(255, 255, 255, 1);
+  background: #ffffff;
   border-radius: 7px;
-  border: 1px solid rgba(219, 219, 219, 1);
+  border: 1px solid #dbdbdb;
 }
-
 .addButton {
-  background:rgba(80,190,0,1);
-  border-radius:4px;
+  background: #50be00;
+  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;
-}
+  font-size: 18px;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
 
+}
+.cardItem{
+  font-size: 18px;
+  font-weight: 400;
+  color: #666;
+  line-height: 24px;
+  display: flex;
+  align-items: center;  
+}
 .ediText {
-  font-size:14px;
-  font-family:'PingFangSC';
-  font-weight:400;
-  color:rgba(255,146,92,1);
-  line-height:25px;
+  font-size: 18px;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title{
+  display: inline-block;
+  width: 84px;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last:justify
 }

src/pages/building/list/style.wxss

-.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/integralMall/GoodsList.jsx

 import React from 'react';
-import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag } from 'antd';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
-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>
-);
+import router from 'umi/router';
+
+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)
+}
+
+// 分页
+function onChange(pageNumber) {
+  console.log('Page: ', pageNumber);
+}
+// 跳转到编辑商品
+function toEditGoods() {
+  router.push({
+    pathname: '/integralMall/editGoods',
+    query: {
+      a: 'b',
+    },
+  });
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+
 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号',
+    name: '华为P30 Pro',
   },
   {
     key: '2',
     img: '',
-    age: 42,
-    address: '西湖区湖底公园1号',
+    name: '大米',
   },
 ];
 
     dataIndex: 'img',
     key: 'img',
     align: 'center',
-
     render: (text, record) => <img src={record.img} className={styles.touxiang} />,
   },
   {
     dataIndex: 'name',
     key: 'name',
     align: 'center',
-    render: text => <a>{text}</a>,
+
   },
   {
     title: '所属积分',
     dataIndex: 'handle',
     key: 'handle',
     align: 'center',
-    render: () => <a>Delete</a>,
+    render: () => <><span style={{ color: '#1990FF', marginRight: '20px' }} onClick={confirm}>下架<Icon type="shopping-cart" className={styles.shoppingCart} /></span><span style={{ color: '#FF925C' }}>编辑<Icon type="form" className={styles.edit} /></span></>,
   },
 ];
+function confirm() {
+  Modal.confirm({
+    title: '确认下架该商品？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      console.log('OK');
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
 
-export default () => (
-  <>
-    <div className={styles.searchBox}>
-      <Input placeholder="商品名称" className={styles.searchItem} />
-      <Dropdown overlay={menu} className={styles.searchItem}>
-        <Button>
-          Button <Icon type="down" />
-        </Button>
-      </Dropdown>
-      <Dropdown overlay={menu} className={styles.searchItem}>
-        <Button>
-          Button <Icon type="down" />
-        </Button>
-      </Dropdown>
-      <Input placeholder="商品名称" className={styles.searchItem} />
-      <Input placeholder="商品名称" className={styles.searchItem} />
-      <Button type="primary" size="small">
-        查询
-      </Button>
-    </div>
-    <Button className={styles.addBtn}>新增</Button>
-    <Table dataSource={dataSource} columns={columns} />
-  </>
-);
+}
+function header(props) {
+  const { getFieldDecorator } = props.form
+  return (
 
-function handleMenuClick(e) {
-  message.info('Click on menu item.');
-  console.log('click', e);
+    <>
+      <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('goodState')(
+            <Select style={{ width: '180px' }} placeholder="状态" onChange={handleSelectChange}>
+              <Option value="1">上架</Option>
+              <Option value="0">下架</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>
+          {getFieldDecorator('min')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="最小积分"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('max')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="最大积分"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+            搜索
+          </Button>
+        </Form.Item>
+      </Form>
+      <Button type="primary" className={styles.addBtn} onClick={toEditGoods}>新增</Button>
+      <Table dataSource={dataSource} columns={columns} />
+      {/* 分页 */
+      /* <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/integralMall/editGoods.jsx

+import React from 'react';
+import { Form, Input, Button, Icon, Select } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../style/GoodsList.less';
+
+
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+
+
+function header(props) {
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+     <div>编辑商品</div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/style/GoodsList.less

-.searchBox {
-  font-size: 30px;
-  color: red;
-  display: flex;
-  display: flex;
-  justify-items: center;
-  align-items: center;
-  justify-content: space-between;
-  .searchItem {
-    min-width: 200px;
-    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;
+  border-color: #50be00;
+}
+.addBtn:focus {
+  color: #fff;
+  background-color: #50be00;
+  border-color: #50be00;
+}
+.searchBtn{
+ background-color: #3A91D5;
+ border-color: #3A91D5;
+}
+.searchBtn:focus {
+  color: #fff;
+  background-color: #3A91D5;
+  border-color: #3A91D5;
 }
 .touxiang {
   width: 93px;
 .ant-table-column-title {
   font-weight: 600;
 }
+.shoppingCart{
+  color: #dcdcdc;
+  margin-left: 6px;
+  font-size: 16px;
+}
+.edit{
+  color: #dcdcdc;
+  margin-left: 6px;
+  font-size: 15px;
+}