jifen

src/pages/integralMall/GoodsList.jsx

@@ -0,0 +1,120 @@
+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/style/GoodsList.less

@@ -0,0 +1,31 @@
+.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;
+}
+.touxiang {
+  width: 93px;
+  height: 93px;
+}
+.ant-table-column-title {
+  font-weight: 600;
+}