diff --git a/src/components/UseCouponAddEdit/index.jsx b/src/components/UseCouponAddEdit/index.jsx
new file mode 100644
index 00000000..3059ea56
--- /dev/null
+++ b/src/components/UseCouponAddEdit/index.jsx
@@ -0,0 +1,82 @@
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { useSetState } from "ahooks";
+import { Card, DateRangePicker } from "zent";
+import moment from "moment";
+
+import Ipt from "@/components/input/main";
+import Form from "@/components/form/main";
+import FormItem from "@/components/form-item/main";
+
+const rules = {
+  name: [{ type: "required", message: "请输入批次名称" }],
+};
+
+const UseCouponAddEdit = forwardRef((props, ref) => {
+  const [state, setState] = useSetState({
+    title: "基本信息",
+    disabled: false,
+  });
+  const [model, setModel] = useSetState({
+    name: "",
+    time: "",
+  });
+
+  useImperativeHandle(ref, () => ({
+    submit: submit,
+  }));
+
+  const form_el = useRef(null);
+
+  const submit = () => {};
+  const onChangeCombinedDate = () => {};
+  const onDisabledRange = () => {};
+
+  return (
+    <div className="coupon-box">
+      <Card
+        style={{ width: "98%", height: "auto", margin: "10px auto" }}
+        title={state.title}
+      >
+        <Form model={model} rules={rules} ref={form_el}>
+          <FormItem labelname="批次名称" prop="name">
+            <Ipt
+              onChange={(e) => {
+                setModel({ name: e });
+              }}
+              onClearItem={(e) => {
+                setModel({ name: "" });
+              }}
+              value={model.name}
+              placeholder={"请输入"}
+              labelWidth={"0px"}
+              maxLength={20}
+              height={"36px"}
+              countShow={false}
+              width={"520px"}
+              alignment={"left"}
+            />
+          </FormItem>
+
+          <FormItem labelname="开始~结束时间" prop="date_time" id="date_time">
+            <DateRangePicker
+              className="zent-datepicker-plan"
+              showTime={{
+                format: "HH:mm:ss",
+                defaultTime: [moment().format("HH:mm:ss"), "23:59:59"],
+              }}
+              format="YYYY-MM-DD HH:mm:ss"
+              disabled={[state.disabled, false]}
+              value={model.date_time}
+              onChange={(e) => {
+                onChangeCombinedDate(e);
+              }}
+              disabledDate={onDisabledRange}
+            />
+          </FormItem>
+        </Form>
+      </Card>
+    </div>
+  );
+});
+
+export default UseCouponAddEdit;
diff --git a/src/components/UseCouponAddEdit/style.less b/src/components/UseCouponAddEdit/style.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/coupon/addEdit/index.jsx b/src/pages/coupon/addEdit/index.jsx
new file mode 100644
index 00000000..e3610a89
--- /dev/null
+++ b/src/pages/coupon/addEdit/index.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import "./style.less";
+
+import UseCouponAddEdit from "@/components/UseCouponAddEdit";
+
+const CouponAddEdit = () => {
+  return (
+    <div className="coupon-add-edit">
+      <UseCouponAddEdit></UseCouponAddEdit>
+    </div>
+  );
+};
+
+export default CouponAddEdit;
diff --git a/src/pages/coupon/addEdit/style.less b/src/pages/coupon/addEdit/style.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/coupon/list/index.jsx b/src/pages/coupon/list/index.jsx
index 6b48414a..e3db2844 100644
--- a/src/pages/coupon/list/index.jsx
+++ b/src/pages/coupon/list/index.jsx
@@ -1,5 +1,7 @@
 import React, { useRef, useEffect } from "react";
+import { useHistory } from "react-router-dom";
 import { useSetState } from "ahooks";
+
 import { Button, CombinedDateRangePicker } from "zent";
 import _ from "lodash";
 import TabPage from "@/components/tabPage/main.js";
@@ -9,14 +11,98 @@ import "./style.less";
 
 const tableColumn = [
   {
-    title: "table 示例 1",
+    title: "优惠券-批次ID",
     name: "key_code",
     prop: "key_code",
     type: "normal",
     width: "auto",
   },
   {
-    title: "table 示例 2",
+    title: "优惠券批次名称",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "有效期",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "归属营销计划名称",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "归属key批次名称",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "卷总数(已发放)",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "已领取",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "已使用",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "剩余数",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "已失效",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "已作废",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "状态",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "启用/暂停",
+    width: "auto",
+    type: "normal",
+    prop: "title",
+    name: "title",
+  },
+  {
+    title: "操作",
     width: "auto",
     type: "normal",
     prop: "title",
@@ -51,6 +137,7 @@ const UseCouponList = () => {
     isQuery: false,
   });
   const table_el = useRef(null);
+  const history = useHistory();
 
   /**
    *
@@ -85,7 +172,26 @@ const UseCouponList = () => {
     getTable();
   }, [state.isQuery]);
 
-  const addCouponBtn = () => {};
+  const addCouponBtn = () => {
+    let activerou = [
+      {
+        pagetitle: "新建优惠券",
+        items: [
+          {
+            path: "/home/coupon-list",
+            name: "优惠券管理",
+          },
+          {
+            path: "/home/coupon-add-edit",
+            name: "新建优惠券",
+          },
+        ],
+      },
+    ];
+
+    sessionStorage.setItem("breaknav", JSON.stringify(activerou));
+    history.push("/home/coupon-add-edit");
+  };
   const selectionFun = () => {};
   const searchCallback = () => {
     getTable();
@@ -149,7 +255,7 @@ const UseCouponList = () => {
           value={state.key_word}
           wordSearch={() => searchCallback()}
           icon="search"
-          placeholder={"请输入xxxxx"}
+          placeholder={"请输入批次号、名称、key批次名称、计划名称 进行搜索"}
           countShow={false}
           height={"36px"}
           width={"260px"}
diff --git a/src/router/index.js b/src/router/index.js
index 2db1d989..5356f83e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,261 +1,267 @@
-import Extension from '@/pages/extension/main/main'
-import Overview from '@/pages/overview/main/main'
-import Distributor from '@/pages/distributor/main/main'
-import ExchangeCodeList from '@/pages/exchangecode/list/list'
-import ExchangeCodeAdd from '@/pages/exchangecode/add/add'
-import ExchangeCodeEdit from '@/pages/exchangecode/edit/edit'
-import ExchangeCommodity from '@/pages/exchangecode/commodity/commodity'
-import ProductEdit from '@/pages/exchangecode/commodity/goodedit.js'
-import ExchangePage from '@/pages/exchangepage/main/main'
-import OrderList from '@/pages/order/list/list'
-import OrderDetails from '@/pages/order/more/more'
-import OrderAdd from '@/pages/order/add/add'
-import Plan from '@/pages/plan/main/main'
-import PlanList from '@/pages/plan/list/list'
-import PlanAdd from '@/pages/plan/add/add'
-import PlanEdit from '@/pages/plan/add/edit'
-import PlanEditCopy from '@/pages/plan/add/plan-copy'
-import KeyList from '@/pages/plan/key/list'
-import KeysList from '@/pages/plan/keyList'
-import KeyOrderList from '@/pages/plan/keyorder/keyorder'
-import KeyEdit from '@/pages/plan/key/edit.js'
-import KeyDetail from '@/pages/plan/key/detail/list.js'
-import KeyLog from '@/pages/plan/key/detail/log.js'
-import AccountList from '@/pages/system/account/list/list'
-import AccountAdd from '@/pages/system/account/add/add'
-import SubAccountList from '@/pages/system/subAccount/list/list'
-import SubAccountAdd from '@/pages/system/subAccount/add/add'
-import RoleList from '@/pages/system/role/list/list'
-import RoleAdd from '@/pages/system/role/add/add'
-import Station from '@/pages/system/station/main'
-import Customize from '@/pages/system/customize/main.js'
-import MyMould from '@/pages/system/systemMould/main.js'
-import Menu from '@/pages/system/menu/main/main'
-import DistriButorList from '@/pages/distributor/list/list'
-import DistriButorAdd from '@/pages/distributor/add/add'
-import DistriButorEdit from '@/pages/distributor/add/add'
-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'
+import Extension from "@/pages/extension/main/main";
+import Overview from "@/pages/overview/main/main";
+import Distributor from "@/pages/distributor/main/main";
+import ExchangeCodeList from "@/pages/exchangecode/list/list";
+import ExchangeCodeAdd from "@/pages/exchangecode/add/add";
+import ExchangeCodeEdit from "@/pages/exchangecode/edit/edit";
+import ExchangeCommodity from "@/pages/exchangecode/commodity/commodity";
+import ProductEdit from "@/pages/exchangecode/commodity/goodedit.js";
+import ExchangePage from "@/pages/exchangepage/main/main";
+import OrderList from "@/pages/order/list/list";
+import OrderDetails from "@/pages/order/more/more";
+import OrderAdd from "@/pages/order/add/add";
+import Plan from "@/pages/plan/main/main";
+import PlanList from "@/pages/plan/list/list";
+import PlanAdd from "@/pages/plan/add/add";
+import PlanEdit from "@/pages/plan/add/edit";
+import PlanEditCopy from "@/pages/plan/add/plan-copy";
+import KeyList from "@/pages/plan/key/list";
+import KeysList from "@/pages/plan/keyList";
+import KeyOrderList from "@/pages/plan/keyorder/keyorder";
+import KeyEdit from "@/pages/plan/key/edit.js";
+import KeyDetail from "@/pages/plan/key/detail/list.js";
+import KeyLog from "@/pages/plan/key/detail/log.js";
+import AccountList from "@/pages/system/account/list/list";
+import AccountAdd from "@/pages/system/account/add/add";
+import SubAccountList from "@/pages/system/subAccount/list/list";
+import SubAccountAdd from "@/pages/system/subAccount/add/add";
+import RoleList from "@/pages/system/role/list/list";
+import RoleAdd from "@/pages/system/role/add/add";
+import Station from "@/pages/system/station/main";
+import Customize from "@/pages/system/customize/main.js";
+import MyMould from "@/pages/system/systemMould/main.js";
+import Menu from "@/pages/system/menu/main/main";
+import DistriButorList from "@/pages/distributor/list/list";
+import DistriButorAdd from "@/pages/distributor/add/add";
+import DistriButorEdit from "@/pages/distributor/add/add";
+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";
+import CouponAddEdit from "@/pages/coupon/addEdit";
 
 /* 基础路由 */
 const router = [
   {
-    path: '/home/extension',
+    path: "/home/extension",
     component: Extension,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/overview',
+    path: "/home/overview",
     component: Overview,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/distributor',
+    path: "/home/distributor",
     component: Distributor,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/exchangepage',
+    path: "/home/exchangepage",
     component: ExchangePage,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/mytempMould',
+    path: "/home/mytempMould",
     component: MyTempMouldAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/myexchangetemplate',
+    path: "/home/myexchangetemplate",
     component: MyExChangeTemplate,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/order-list',
+    path: "/home/order-list",
     component: OrderList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/order-addetails',
+    path: "/home/order-addetails",
     component: OrderDetails,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/order-add',
+    path: "/home/order-add",
     component: OrderAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/plan',
+    path: "/home/plan",
     component: Plan,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/plan-list',
+    path: "/home/plan-list",
     component: PlanList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/plan-create',
+    path: "/home/plan-create",
     component: PlanAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/plan-edit',
+    path: "/home/plan-edit",
     component: PlanEdit,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/plan-edit-copy',
+    path: "/home/plan-edit-copy",
     component: PlanEditCopy,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/key-list',
+    path: "/home/key-list",
     component: KeyList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/plan-keyList',
+    path: "/home/plan-keyList",
     component: KeysList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/key-edit',
+    path: "/home/key-edit",
     component: KeyEdit,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/key-detail',
+    path: "/home/key-detail",
     component: KeyDetail,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/key-log',
+    path: "/home/key-log",
     component: KeyLog,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/addkeyorder',
+    path: "/home/addkeyorder",
     component: KeyOrderList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/account-add',
+    path: "/home/system/account-add",
     component: AccountAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/subaccount-list',
+    path: "/home/system/subaccount-list",
     component: SubAccountList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/subaccount-add',
+    path: "/home/system/subaccount-add",
     component: SubAccountAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/role-list',
+    path: "/home/system/role-list",
     component: RoleList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/role-add',
+    path: "/home/system/role-add",
     component: RoleAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/station',
+    path: "/home/system/station",
     component: Station,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/customize',
+    path: "/home/system/customize",
     component: Customize,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/menu',
+    path: "/home/system/menu",
     component: Menu,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/my-mould',
+    path: "/home/system/my-mould",
     component: MyMould,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/distributor-list',
+    path: "/home/distributor-list",
     component: DistriButorList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/distributor-add',
+    path: "/home/distributor-add",
     component: DistriButorAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/distributor-edit',
+    path: "/home/distributor-edit",
     component: DistriButorEdit,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/exchangecode-list',
+    path: "/home/exchangecode-list",
     component: ExchangeCodeList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/exchangecode-add',
+    path: "/home/exchangecode-add",
     component: ExchangeCodeAdd,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/exchangecode-edit',
+    path: "/home/exchangecode-edit",
     component: ExchangeCodeEdit,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/exchangecode-copyCode',
+    path: "/home/exchangecode-copyCode",
     component: CopyCode,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/exchange-addcommodity',
+    path: "/home/exchange-addcommodity",
     component: ExchangeCommodity,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/product-edit',
+    path: "/home/product-edit",
     component: ProductEdit,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/system/account-list',
+    path: "/home/system/account-list",
     component: AccountList,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/exchangecode-exchangecodeAdd',
+    path: "/home/exchangecode-exchangecodeAdd",
     component: ExchangeCodeAdds,
-    meta: { exact: true }
+    meta: { exact: true },
   },
   {
-    path: '/home/coupon-list',
+    path: "/home/coupon-list",
     component: CouponList,
-    meta: { exact: true }
-  }
-]
+    meta: { exact: true },
+  },
+  {
+    path: "/home/coupon-add-edit",
+    component: CouponAddEdit,
+    meta: { exact: true },
+  },
+];
 
 /* 不显示路由 */
 const noShowSubMenu = [
-  '/home/extension',
-  '/home/overview',
-  '/home/plan-create',
-  '/home/mytempMould',
-  '/home/edittemplate'
-]
+  "/home/extension",
+  "/home/overview",
+  "/home/plan-create",
+  "/home/mytempMould",
+  "/home/edittemplate",
+];
 
-export { router, noShowSubMenu }
+export { router, noShowSubMenu };