activity

config/config.js

@@ -163,6 +163,11 @@ export default {
                   name: '活动列表',
                   component: './activity/ActivityList',
                 },
+                {
+                  path: '/activity/editActivity',
+                  name: '编辑活动',
+                  component: './activity/editActivity',
+                },
               ],
             },
             {

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