diff --git a/libs/list/index.jsx b/libs/list/index.jsx
new file mode 100644
index 00000000..6b48414a
--- /dev/null
+++ b/libs/list/index.jsx
@@ -0,0 +1,194 @@
+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;
diff --git a/libs/list/style.less b/libs/list/style.less
new file mode 100644
index 00000000..e69de29b