* 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend:
  1) 增加优惠券增加
  1) 增加消费卷table
This commit is contained in:
Apple 2022-08-25 18:07:16 +08:00
commit dad624a1bc
6 changed files with 344 additions and 136 deletions

View File

@ -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;

View File

@ -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;

View File

View File

@ -1,5 +1,7 @@
import React, { useRef, useEffect } from "react"; import React, { useRef, useEffect } from "react";
import { useHistory } from "react-router-dom";
import { useSetState } from "ahooks"; import { useSetState } from "ahooks";
import { Button, CombinedDateRangePicker } from "zent"; import { Button, CombinedDateRangePicker } from "zent";
import _ from "lodash"; import _ from "lodash";
import TabPage from "@/components/tabPage/main.js"; import TabPage from "@/components/tabPage/main.js";
@ -9,14 +11,98 @@ import "./style.less";
const tableColumn = [ const tableColumn = [
{ {
title: "table 示例 1", title: "优惠券-批次ID",
name: "key_code", name: "key_code",
prop: "key_code", prop: "key_code",
type: "normal", type: "normal",
width: "auto", 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", width: "auto",
type: "normal", type: "normal",
prop: "title", prop: "title",
@ -51,6 +137,7 @@ const UseCouponList = () => {
isQuery: false, isQuery: false,
}); });
const table_el = useRef(null); const table_el = useRef(null);
const history = useHistory();
/** /**
* *
@ -85,7 +172,26 @@ const UseCouponList = () => {
getTable(); getTable();
}, [state.isQuery]); }, [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 selectionFun = () => {};
const searchCallback = () => { const searchCallback = () => {
getTable(); getTable();
@ -149,7 +255,7 @@ const UseCouponList = () => {
value={state.key_word} value={state.key_word}
wordSearch={() => searchCallback()} wordSearch={() => searchCallback()}
icon="search" icon="search"
placeholder={"请输入xxxxx"} placeholder={"请输入批次号、名称、key批次名称、计划名称 进行搜索"}
countShow={false} countShow={false}
height={"36px"} height={"36px"}
width={"260px"} width={"260px"}

View File

@ -1,261 +1,267 @@
import Extension from '@/pages/extension/main/main' import Extension from "@/pages/extension/main/main";
import Overview from '@/pages/overview/main/main' import Overview from "@/pages/overview/main/main";
import Distributor from '@/pages/distributor/main/main' import Distributor from "@/pages/distributor/main/main";
import ExchangeCodeList from '@/pages/exchangecode/list/list' import ExchangeCodeList from "@/pages/exchangecode/list/list";
import ExchangeCodeAdd from '@/pages/exchangecode/add/add' import ExchangeCodeAdd from "@/pages/exchangecode/add/add";
import ExchangeCodeEdit from '@/pages/exchangecode/edit/edit' import ExchangeCodeEdit from "@/pages/exchangecode/edit/edit";
import ExchangeCommodity from '@/pages/exchangecode/commodity/commodity' import ExchangeCommodity from "@/pages/exchangecode/commodity/commodity";
import ProductEdit from '@/pages/exchangecode/commodity/goodedit.js' import ProductEdit from "@/pages/exchangecode/commodity/goodedit.js";
import ExchangePage from '@/pages/exchangepage/main/main' import ExchangePage from "@/pages/exchangepage/main/main";
import OrderList from '@/pages/order/list/list' import OrderList from "@/pages/order/list/list";
import OrderDetails from '@/pages/order/more/more' import OrderDetails from "@/pages/order/more/more";
import OrderAdd from '@/pages/order/add/add' import OrderAdd from "@/pages/order/add/add";
import Plan from '@/pages/plan/main/main' import Plan from "@/pages/plan/main/main";
import PlanList from '@/pages/plan/list/list' import PlanList from "@/pages/plan/list/list";
import PlanAdd from '@/pages/plan/add/add' import PlanAdd from "@/pages/plan/add/add";
import PlanEdit from '@/pages/plan/add/edit' import PlanEdit from "@/pages/plan/add/edit";
import PlanEditCopy from '@/pages/plan/add/plan-copy' import PlanEditCopy from "@/pages/plan/add/plan-copy";
import KeyList from '@/pages/plan/key/list' import KeyList from "@/pages/plan/key/list";
import KeysList from '@/pages/plan/keyList' import KeysList from "@/pages/plan/keyList";
import KeyOrderList from '@/pages/plan/keyorder/keyorder' import KeyOrderList from "@/pages/plan/keyorder/keyorder";
import KeyEdit from '@/pages/plan/key/edit.js' import KeyEdit from "@/pages/plan/key/edit.js";
import KeyDetail from '@/pages/plan/key/detail/list.js' import KeyDetail from "@/pages/plan/key/detail/list.js";
import KeyLog from '@/pages/plan/key/detail/log.js' import KeyLog from "@/pages/plan/key/detail/log.js";
import AccountList from '@/pages/system/account/list/list' import AccountList from "@/pages/system/account/list/list";
import AccountAdd from '@/pages/system/account/add/add' import AccountAdd from "@/pages/system/account/add/add";
import SubAccountList from '@/pages/system/subAccount/list/list' import SubAccountList from "@/pages/system/subAccount/list/list";
import SubAccountAdd from '@/pages/system/subAccount/add/add' import SubAccountAdd from "@/pages/system/subAccount/add/add";
import RoleList from '@/pages/system/role/list/list' import RoleList from "@/pages/system/role/list/list";
import RoleAdd from '@/pages/system/role/add/add' import RoleAdd from "@/pages/system/role/add/add";
import Station from '@/pages/system/station/main' import Station from "@/pages/system/station/main";
import Customize from '@/pages/system/customize/main.js' import Customize from "@/pages/system/customize/main.js";
import MyMould from '@/pages/system/systemMould/main.js' import MyMould from "@/pages/system/systemMould/main.js";
import Menu from '@/pages/system/menu/main/main' import Menu from "@/pages/system/menu/main/main";
import DistriButorList from '@/pages/distributor/list/list' import DistriButorList from "@/pages/distributor/list/list";
import DistriButorAdd from '@/pages/distributor/add/add' import DistriButorAdd from "@/pages/distributor/add/add";
import DistriButorEdit from '@/pages/distributor/add/add' import DistriButorEdit from "@/pages/distributor/add/add";
import MyTempMouldAdd from '@/pages/exchangepage/template/main.js' import MyTempMouldAdd from "@/pages/exchangepage/template/main.js";
import MyExChangeTemplate from '@/pages/exchangepage/mytemplate/main.js' import MyExChangeTemplate from "@/pages/exchangepage/mytemplate/main.js";
import CopyCode from '@/pages/exchangecode/copyCode/index' import CopyCode from "@/pages/exchangecode/copyCode/index";
import ExchangeCodeAdds from '@/pages/exchangecode/exchangecodeAdd' import ExchangeCodeAdds from "@/pages/exchangecode/exchangecodeAdd";
import CouponList from '@/pages/coupon/list' import CouponList from "@/pages/coupon/list";
import CouponAddEdit from "@/pages/coupon/addEdit";
/* 基础路由 */ /* 基础路由 */
const router = [ const router = [
{ {
path: '/home/extension', path: "/home/extension",
component: Extension, component: Extension,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/overview', path: "/home/overview",
component: Overview, component: Overview,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/distributor', path: "/home/distributor",
component: Distributor, component: Distributor,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/exchangepage', path: "/home/exchangepage",
component: ExchangePage, component: ExchangePage,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/mytempMould', path: "/home/mytempMould",
component: MyTempMouldAdd, component: MyTempMouldAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/myexchangetemplate', path: "/home/myexchangetemplate",
component: MyExChangeTemplate, component: MyExChangeTemplate,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/order-list', path: "/home/order-list",
component: OrderList, component: OrderList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/order-addetails', path: "/home/order-addetails",
component: OrderDetails, component: OrderDetails,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/order-add', path: "/home/order-add",
component: OrderAdd, component: OrderAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/plan', path: "/home/plan",
component: Plan, component: Plan,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/plan-list', path: "/home/plan-list",
component: PlanList, component: PlanList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/plan-create', path: "/home/plan-create",
component: PlanAdd, component: PlanAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/plan-edit', path: "/home/plan-edit",
component: PlanEdit, component: PlanEdit,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/plan-edit-copy', path: "/home/plan-edit-copy",
component: PlanEditCopy, component: PlanEditCopy,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/key-list', path: "/home/key-list",
component: KeyList, component: KeyList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/plan-keyList', path: "/home/plan-keyList",
component: KeysList, component: KeysList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/key-edit', path: "/home/key-edit",
component: KeyEdit, component: KeyEdit,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/key-detail', path: "/home/key-detail",
component: KeyDetail, component: KeyDetail,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/key-log', path: "/home/key-log",
component: KeyLog, component: KeyLog,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/addkeyorder', path: "/home/addkeyorder",
component: KeyOrderList, component: KeyOrderList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/account-add', path: "/home/system/account-add",
component: AccountAdd, component: AccountAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/subaccount-list', path: "/home/system/subaccount-list",
component: SubAccountList, component: SubAccountList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/subaccount-add', path: "/home/system/subaccount-add",
component: SubAccountAdd, component: SubAccountAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/role-list', path: "/home/system/role-list",
component: RoleList, component: RoleList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/role-add', path: "/home/system/role-add",
component: RoleAdd, component: RoleAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/station', path: "/home/system/station",
component: Station, component: Station,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/customize', path: "/home/system/customize",
component: Customize, component: Customize,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/menu', path: "/home/system/menu",
component: Menu, component: Menu,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/my-mould', path: "/home/system/my-mould",
component: MyMould, component: MyMould,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/distributor-list', path: "/home/distributor-list",
component: DistriButorList, component: DistriButorList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/distributor-add', path: "/home/distributor-add",
component: DistriButorAdd, component: DistriButorAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/distributor-edit', path: "/home/distributor-edit",
component: DistriButorEdit, component: DistriButorEdit,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/exchangecode-list', path: "/home/exchangecode-list",
component: ExchangeCodeList, component: ExchangeCodeList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/exchangecode-add', path: "/home/exchangecode-add",
component: ExchangeCodeAdd, component: ExchangeCodeAdd,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/exchangecode-edit', path: "/home/exchangecode-edit",
component: ExchangeCodeEdit, component: ExchangeCodeEdit,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/exchangecode-copyCode', path: "/home/exchangecode-copyCode",
component: CopyCode, component: CopyCode,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/exchange-addcommodity', path: "/home/exchange-addcommodity",
component: ExchangeCommodity, component: ExchangeCommodity,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/product-edit', path: "/home/product-edit",
component: ProductEdit, component: ProductEdit,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/system/account-list', path: "/home/system/account-list",
component: AccountList, component: AccountList,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/exchangecode-exchangecodeAdd', path: "/home/exchangecode-exchangecodeAdd",
component: ExchangeCodeAdds, component: ExchangeCodeAdds,
meta: { exact: true } meta: { exact: true },
}, },
{ {
path: '/home/coupon-list', path: "/home/coupon-list",
component: CouponList, component: CouponList,
meta: { exact: true } meta: { exact: true },
} },
] {
path: "/home/coupon-add-edit",
component: CouponAddEdit,
meta: { exact: true },
},
];
/* 不显示路由 */ /* 不显示路由 */
const noShowSubMenu = [ const noShowSubMenu = [
'/home/extension', "/home/extension",
'/home/overview', "/home/overview",
'/home/plan-create', "/home/plan-create",
'/home/mytempMould', "/home/mytempMould",
'/home/edittemplate' "/home/edittemplate",
] ];
export { router, noShowSubMenu } export { router, noShowSubMenu };