1) 增加优惠券

src/App.css

@@ -189,3 +189,25 @@
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 6;
 }
+
+.table-box-app{
+  width: 98%;
+  margin: 0 auto;
+  background-color: #fff;
+  padding-bottom: 24px;
+  border-left: 1px solid #E6E8ED;
+  border-bottom: 1px solid #E6E8ED;
+  border-right: 1px solid #E6E8ED;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+
+.query-box{
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
+}
+
+.table-box-app .tabpage{
+  border: none;
+}

src/pages/coupon/list/index.jsx

@@ -0,0 +1,193 @@
+import React, { useRef, useEffect } from 'react'
+import { useSetState } from 'ahooks'
+import { Button, CombinedDateRangePicker } from 'zent'
+import _ from 'lodash'
+import TabPage from '@/components/tabPage/main.js'
+import Ipt from '@/components/input/main'
+import Grid from '@/components/gird/main.js'
+import './style.less'
+
+const tableColumn = [
+  {
+    title: 'table 示例 1',
+    name: 'key_code',
+    prop: 'key_code',
+    type: 'normal',
+    width: 'auto'
+  },
+  {
+    title: 'table 示例 2',
+    width: 'auto',
+    type: 'normal',
+    prop: 'title',
+    name: 'title'
+  }
+]
+
+const UseCouponList = () => {
+  const [state, setState] = useSetState({
+    tabList: [
+      { title: '全部', index: 0 },
+      { title: '创建中', index: -1 },
+      { title: '未开始', index: 3 },
+      { title: '审核中', index: 6 },
+      { title: '审核驳回', index: 7 },
+      { title: '进行中', index: 1 },
+      { title: '暂停中', index: 2 },
+      { title: '已结束', index: 4 },
+      { title: '已作废', index: 5 }
+    ],
+    tableData: [],
+    tableHeight: 500,
+    dataCount: 0,
+    lodgingTable: true,
+    combinedValue: [],
+    key_word: '',
+    begin_time: '',
+    end_time: '',
+    status: '',
+    page: 1,
+    limit: 10,
+    isQuery: false
+  })
+  const table_el = useRef(null)
+
+  /**
+   *
+   * @returns 返回参数
+   */
+  const getParam = () => {
+    let param = {
+      key_word: state.key_word || null,
+      begin_time: state.begin_time || null,
+      end_time: state.end_time || null,
+      status: state.status !== 999 && state.status !== '' ? state.status : null,
+      page: state.page,
+      limit: state.limit
+    }
+    param = _.omitBy(
+      {
+        ...param
+      },
+      (value) => {
+        return _.isNaN(value) || _.isNil(value)
+      }
+    )
+    return param
+  }
+
+  const getTable = () => {
+    let param = getParam()
+    console.log('调用接口 ...', param)
+  }
+
+  useEffect(() => {
+    getTable()
+  }, [state.isQuery])
+
+  const addCouponBtn = () => {}
+  const selectionFun = () => {}
+  const searchCallback = () => {
+    getTable()
+  }
+  const onPageChange = (data) => {
+    setState({ page: data, isQuery: !state.isQuery })
+  }
+  const onCountChange = (data) => {
+    setState({ limit: data, isQuery: !state.isQuery })
+  }
+  const onChangeCombinedDate = (data) => {
+    setState({ combinedValue: data })
+    if (data[0]) {
+      setState({
+        begin_time: data[0],
+        end_time: data[1],
+        isQuery: !state.isQuery
+      })
+    } else {
+      setState({
+        combinedValue: data,
+        begin_time: '',
+        end_time: '',
+        isQuery: !state.isQuery
+      })
+    }
+  }
+  const tabChange = (data) => {
+    setState({ page: 1, limit: 10, status: data, isQuery: !state.isQuery })
+  }
+
+  /**
+   * 日期
+   */
+  const dateEl = (
+    <CombinedDateRangePicker
+      className='zent-datepicker-demo'
+      value={state.combinedValue}
+      showTime={{
+        format: 'HH:mm:ss',
+        defaultTime: ['00:00:00', '23:59:59']
+      }}
+      format='YYYY-MM-DD HH:mm:ss'
+      onChange={(data) => onChangeCombinedDate(data)}
+    />
+  )
+  return (
+    <div className='table-box-app'>
+      <TabPage
+        tabs={state.tabList}
+        tabChange={(data) => tabChange(data)}
+        width={130}
+        slot={dateEl}></TabPage>
+      <div className='query-box'>
+        <Button type='primary' icon='plus' onClick={() => addCouponBtn()}>
+          新增优惠券
+        </Button>
+        <Ipt
+          onChange={(e) => setState({ key_word: e })}
+          value={state.key_word}
+          wordSearch={() => searchCallback()}
+          icon='search'
+          placeholder={'请输入xxxxx'}
+          countShow={false}
+          height={'36px'}
+          width={'260px'}
+          onClearItem={(e) =>
+            setState({ key_word: '', isQuery: !state.isQuery })
+          }
+          alignment={'left'}
+        />
+      </div>
+      <Grid
+        spliteColor={'#fff'}
+        tableData={state.tableData}
+        Column={tableColumn}
+        countbarVisible={false}
+        maxheight={state.tableHeight}
+        isSwitch={false}
+        page={state.page}
+        ref={table_el}
+        dataCount={state.dataCount}
+        pageChange={(e) => onPageChange(e)}
+        emptyText={
+          state.lodgingTable
+            ? '抱歉，暂无相关数据记录'
+            : '查询 请输入【分销商】或【计划名称】或【key】进行查询'
+        }
+        countChange={(e) => onCountChange(e)}
+        checkChange={(data) => selectionFun(data)}
+        ComponentHandler={(com, rowData) => {
+          if (com == 'dates') {
+            return (
+              <span>
+                {rowData.begin_time} 至 {rowData.end_time}
+              </span>
+            )
+          }
+        }}
+      />
+    </div>
+  )
+}
+
+export default UseCouponList

src/router/index.js

@@ -39,6 +39,7 @@ import MyTempMouldAdd from '@/pages/exchangepage/template/main.js'
 import MyExChangeTemplate from '@/pages/exchangepage/mytemplate/main.js'
 import CopyCode from '@/pages/exchangecode/copyCode/index'
 import ExchangeCodeAdds from '@/pages/exchangecode/exchangecodeAdd'
+import CouponList from '@/pages/coupon/list'
 
 /* 基础路由 */
 const router = [
@@ -246,6 +247,11 @@ const router = [
     path: '/home/exchangecode-exchangecodeAdd',
     component: ExchangeCodeAdds,
     meta: { exact: true }
+  },
+  {
+    path: '/home/coupon-list',
+    component: CouponList,
+    meta: { exact: true }
   }
 ]