渠道管理页

config/config.js

@@ -124,6 +124,18 @@ export default {
                 },
               ],
             },
+            {
+              path: '/channel',
+              name: '渠道管理',
+              component: '../layouts/BlankLayout',
+              routes: [
+                {
+                  path: '/channel/channelList',
+                  name: '渠道管理',
+                  component: './channel/channelList',
+                },
+              ],
+            },
             {
               component: './404',
             },

package.json

@@ -26,14 +26,25 @@
     "test:component": "umi test ./src/components",
     "ui": "umi ui"
   },
-  "husky": { "hooks": { "pre-commit": "npm run lint-staged" } },
+  "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"],
+    "**/*.{js,jsx,tsx,ts,less,md,json}": [
+      "prettier --write",
+      "git add"
+    ],
     "**/*.{js,jsx}": "npm run lint-staged:js",
     "**/*.{js,ts,tsx}": "npm run lint-staged:js"
   },
-  "browserslist": ["> 1%", "last 2 versions", "not ie <= 10"],
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 10"
+  ],
   "dependencies": {
     "@ant-design/pro-layout": "^4.5.9",
     "@antv/data-set": "^0.10.2",
@@ -94,8 +105,12 @@
     "umi-types": "^0.3.8",
     "webpack-theme-color-replacer": "^1.2.15"
   },
-  "optionalDependencies": { "puppeteer": "^1.17.0" },
-  "engines": { "node": ">=10.0.0" },
+  "optionalDependencies": {
+    "puppeteer": "^1.17.0"
+  },
+  "engines": {
+    "node": ">=10.0.0"
+  },
   "checkFiles": [
     "src/**/*.js*",
     "src/**/*.ts*",

src/pages/channel/channelList.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import channels from './channelList.less';
+
+const { Option } = Select;
+function handleChange(value) {
+  console.log(`selected ${value}`);
+}
+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={channels.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={channels.searchBox}>
+      <dvi>
+        <span className={channels.selectName}>渠道名称</span>
+        <Select defaultValue="lucy" style={{ width: 180 }} onChange={handleChange}>
+          <Option value="jack">Jack</Option>
+          <Option value="lucy">Lucy</Option>
+          <Option value="disabled" disabled>
+            Disabled
+          </Option>
+          <Option value="Yiminghe">yiminghe</Option>
+        </Select>
+      </dvi>
+      <Button className={channels.about}>查询</Button>
+    </div>
+    <Button className={channels.addBtn}>新增</Button>
+    <Table dataSource={dataSource} columns={columns} />
+  </>
+);
+
+function handleMenuClick(e) {
+  message.info('Click on menu item.');
+  console.log('click', e);
+}

src/pages/channel/channelList.less

@@ -0,0 +1,46 @@
+.searchBox {
+  font-size: 30px;
+  color: red;
+  display: flex;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .searchItem {
+    min-width: 20px;
+    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;
+}
+
+.about {
+  padding: 0 30px;
+  height: 36px;
+  background-color: #00bfff;
+  color: #fff;
+  margin: 30px 0;
+}
+
+.selectName {
+  font-size: 17px;
+  padding: 0 10px;
+  height: 36px;
+  color: rgb(10, 10, 10);
+  margin: 30px 0;
+}