jifen

package.json

@@ -26,7 +26,7 @@
     "test:component": "umi test ./src/components",
     "ui": "umi ui"
   },
-  "husky": { "hooks": { "pre-commit": "npm run lint-staged" } },
+
   "lint-staged": {
     "**/*.less": "stylelint --syntax less",
     "**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write", "git add"],

src/pages/integralMall/GoodsList.jsx

@@ -1,36 +1,82 @@
 import React from 'react';
-import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag } from 'antd';
+import { Input, Menu, Dropdown, Button, Icon, 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>
-);
+
+class StateDropdown extends React.Component {
+  state = {
+    goodState: '状态',
+  }
+
+  render() {
+
+    const menu = (
+      <Menu onClick={this.handleMenuClick}>
+        <Menu.Item key="1">
+          上架
+        </Menu.Item>
+        <Menu.Item key="2">
+          下架
+        </Menu.Item>
+      </Menu>
+    );
+    return (
+      < Dropdown overlay={menu} className={styles.searchItem} >
+        <Button>
+          {this.state.goodState} <Icon type="down" />
+        </Button>
+      </Dropdown>
+    )
+  }
+  handleMenuClick = e => {
+    this.setState({
+      goodState: e.item.props.children,
+    });
+
+  }
+};
+class App extends React.Component {
+  state = {
+    good: '请选择',
+  }
+
+  render() {
+
+    const menu = (
+      <Menu onClick={this.handleMenuClick}>
+        <Menu.Item key="1">
+          上架2
+        </Menu.Item>
+        <Menu.Item key="2">
+          下架2
+        </Menu.Item>
+      </Menu>
+    );
+    return (
+      < Dropdown overlay={menu} className={styles.searchItem} >
+        <Button>
+          {this.state.good} <Icon type="down" />
+        </Button>
+      </Dropdown>
+    )
+  }
+  handleMenuClick = e => {
+    this.setState({
+      good: e.item.props.children,
+    });
+
+  }
+};
 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 +86,6 @@ const columns = [
     dataIndex: 'img',
     key: 'img',
     align: 'center',
-
     render: (text, record) => <img src={record.img} className={styles.touxiang} />,
   },
   {
@@ -48,7 +93,7 @@ const columns = [
     dataIndex: 'name',
     key: 'name',
     align: 'center',
-    render: text => <a>{text}</a>,
+
   },
   {
     title: '所属积分',
@@ -85,36 +130,37 @@ 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></>,
   },
 ];
+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} />
+      <StateDropdown />
+      <App />
+      <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

@@ -29,3 +29,13 @@
 .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;
+}