合并

config/config.js

@@ -173,6 +173,23 @@ export default {
                 },
               ],
             },
+            {
+              path: '/news',
+              name: '资讯管理',
+              component: '../layouts/BlankLayout',
+              routes: [
+                {
+                  path: '/news/NewTypeList',
+                  name: '资讯列表',
+                  component: './news/NewTypeList',
+                },
+                {
+                  path: '/activity/editActivity',
+                  name: '',
+                  component: './activity/editActivity',
+                },
+              ],
+            },
             {
               path: '/activity',
               name: '活动管理',
@@ -183,6 +200,11 @@ export default {
                   name: '活动列表',
                   component: './activity/ActivityList',
                 },
+                {
+                  path: '/activity/editActivity',
+                  name: '',
+                  component: './activity/editActivity',
+                },
               ],
             },
             {

src/global.less

@@ -12,6 +12,7 @@ body,
 
 .ant-layout {
   min-height: 100vh;
+  background-color: #f8f8f8;
 }
 
 canvas {

src/layouts/BlankLayout.jsx

@@ -1,16 +1,19 @@
 import React from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 const Layout = ({ children }) => (
-  <div
-    style={{
-      backgroundColor: '#fff',
-      padding: '32PX 28px',
-      boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
-      borderRadius: '12px',
-    }}
-  >
-    {children}
-  </div>
+  <PageHeaderWrapper style={{height:'49px',background:'rgba(240,240,240,1)',paddingTop:'15px'}}>
+    <div
+      style={{
+        backgroundColor: '#fff',
+        padding: '32PX 28px',
+        boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)',
+        borderRadius: '12px',
+      }}
+    >
+      {children}
+    </div>
+  </PageHeaderWrapper>
 );
 
 export default Layout;

src/pages/activity/ActivityList.jsx

@@ -1,36 +1,55 @@
 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: '/activity/editActivity',
+    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: '大米',
   },
 ];
 
@@ -40,7 +59,6 @@ const columns = [
     dataIndex: 'img',
     key: 'img',
     align: 'center',
-
     render: (text, record) => <img src={record.img} className={styles.touxiang} />,
   },
   {
@@ -48,7 +66,7 @@ const columns = [
     dataIndex: 'name',
     key: 'name',
     align: 'center',
-    render: text => <a>{text}</a>,
+
   },
   {
     title: '所属积分',
@@ -85,36 +103,85 @@ const columns = [
     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></>,
   },
 ];
+const 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} />
-  </>
-);
+}
+
+const 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/activity/editActivity.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Form, Input, Button, Icon, Select, Tabs, Radio } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import styles from '../style/GoodsList.less';
+
+
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+
+
+ const Basic = (props) => {
+   return <div>Basic</div>
+ }
+ 
+ const Poster = (props) => {
+  return <div>Poster</div>
+}
+
+const Share = (props) => {
+  return <div>Share</div>
+}
+
+ const Edit = (props) => {
+   const [ tab, changeTab ] = useState('a');
+
+
+  return (
+    <div>
+      <div>
+        <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
+          <Radio.Button value="a">基本信息</Radio.Button>
+          <Radio.Button value="b">海报图片</Radio.Button>
+          <Radio.Button value="c">分享设置</Radio.Button>
+        </Radio.Group>
+      </div>
+      <div>
+        { tab === 'a' && <Basic /> }
+        { tab === 'b' && <Poster /> }
+        { tab === 'c' && <Share /> }
+      </div>
+    </div>
+  );
+ }
+
+
+
+export default Edit

src/pages/integralMall/GoodsList.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal } from 'antd';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal,Breadcrumb } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import router from 'umi/router';
@@ -103,7 +103,7 @@ const columns = [
     dataIndex: 'handle',
     key: 'handle',
     align: 'center',
-    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></>,
+    render: () => <><span style={{ color: '#1990FF', marginRight: '20px' }} onClick={confirm}>下架<Icon type="shopping-cart" className={styles.shoppingCart} /></span><span style={{ color: '#FF925C' }} onClick={toEditGoods}>编辑<Icon type="form" className={styles.edit} /></span></>,
   },
 ];
 function confirm() {

src/pages/news/NewTypeList.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+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';
+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: '/activity/editActivity',
+    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: '华为P30 Pro',
+  },
+  {
+    key: '2',
+    img: '',
+    name: '大米',
+  },
+];
+
+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',
+
+  },
+
+  {
+    title: '操作',
+    dataIndex: 'handle',
+    key: 'handle',
+    align: 'center',
+    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></>,
+  },
+];
+const confirm = () => {
+  Modal.confirm({
+    title: '确认删除该商品？',
+    okText: '确认',
+    cancelText: '取消',
+    onOk() {
+      console.log('OK');
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
+
+}
+
+const header = (props) => {
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('goodState')(
+            <Select style={{ width: '180px' }} placeholder="请选择" onChange={handleSelectChange}>
+              <Option value="1">上架</Option>
+              <Option value="0">下架</Option>
+            </Select>,
+          )}
+        </Form.Item>
+      </Form>
+      <Button type="primary" className={styles.addBtn} onClick={toEditGoods}>新增</Button>
+      <Table dataSource={dataSource} columns={columns} />
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/style/News.less

@@ -0,0 +1,56 @@
+.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;
+    height: 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;
+  }