Merge branch 'couponV1.5' of codeup.aliyun.com:5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5
This commit is contained in:
许红梅
commit
deadaed2dc
|
|
@ -48,7 +48,6 @@
|
|||
"less": "^3.9.0",
|
||||
"less-loader": "^4.1.0",
|
||||
"lodash": "^4.17.21",
|
||||
"mathjs": "^11.1.0",
|
||||
"mini-css-extract-plugin": "0.11.3",
|
||||
"moment": "^2.29.1",
|
||||
"optimize-css-assets-webpack-plugin": "5.0.4",
|
||||
|
|
|
|||
|
|
@ -1,435 +0,0 @@
|
|||
import React, { forwardRef, useImperativeHandle, useRef } from "react";
|
||||
import { useSetState } from "ahooks";
|
||||
import { FixedSizeList } from "react-window";
|
||||
import {
|
||||
Card,
|
||||
DateRangePicker,
|
||||
Button,
|
||||
LayoutRow as Row,
|
||||
LayoutCol as Col,
|
||||
LayoutGrid as Grids,
|
||||
Select,
|
||||
} 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";
|
||||
import Grid from "@/components/gird/main.js";
|
||||
|
||||
import "./style.less";
|
||||
|
||||
const tableColumn = [
|
||||
{
|
||||
title: "商品编号",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "商品名称",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "官方价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "合同单价",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "库存数量",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "批次号",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "总预算",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "有效时间段",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "上游平台",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
name: "key_code",
|
||||
prop: "key_code",
|
||||
type: "normal",
|
||||
width: "auto",
|
||||
},
|
||||
];
|
||||
|
||||
const rules = {
|
||||
name: [{ type: "required", message: "请输入批次名称" }],
|
||||
};
|
||||
|
||||
const UseCouponAddEdit = forwardRef((props, ref) => {
|
||||
/**
|
||||
* type 入口类型 0优惠券新增 1计划、key批次 (是否显示两个字段)
|
||||
*/
|
||||
const { type = 0 } = props;
|
||||
const [state, setState] = useSetState({
|
||||
setup1_title: "基本信息",
|
||||
setup2_title: "发放规则",
|
||||
setup3_title: "商品范围",
|
||||
disabled: false,
|
||||
model: {
|
||||
name: "",
|
||||
date_time: "",
|
||||
},
|
||||
tableData: [],
|
||||
tableHeight: 500,
|
||||
page: 1,
|
||||
dataCount: 0,
|
||||
rankoptions: [],
|
||||
rank: [],
|
||||
newGoodsBtnLoading: false,
|
||||
newGoldLoading: false,
|
||||
lodgingTable: true,
|
||||
plan_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `plan 1`,
|
||||
},
|
||||
],
|
||||
key_OPTIONS: [
|
||||
{
|
||||
key: "1",
|
||||
text: `key 1`,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
submit: submit,
|
||||
}));
|
||||
|
||||
const form_el = useRef(null);
|
||||
const table_el = useRef(null);
|
||||
|
||||
const submit = () => {
|
||||
let el = form_el.current.validator();
|
||||
console.log("el =>", el);
|
||||
};
|
||||
|
||||
const onReturn = () => {};
|
||||
const onChangeCombinedDate = () => {};
|
||||
const onDisabledRange = (date, type) => {
|
||||
let disabled = false;
|
||||
if (type == "end") {
|
||||
disabled = moment(date.getTime()).add(1, "days") <= new Date().getTime();
|
||||
}
|
||||
if (type == "start") {
|
||||
disabled = date.getTime() <= new Date().getTime();
|
||||
}
|
||||
return disabled;
|
||||
};
|
||||
const onPageChange = () => {};
|
||||
const onCountChange = () => {};
|
||||
const selectionFun = () => {};
|
||||
const onRankChange = () => {};
|
||||
const addProduct = () => {};
|
||||
const renderOptionList = (options, renderOption) => {
|
||||
return (
|
||||
<FixedSizeList
|
||||
height={8.5 * 32}
|
||||
itemCount={options.length}
|
||||
itemSize={32}
|
||||
width={240}
|
||||
>
|
||||
{({ index, style }) => (
|
||||
<div style={style}>{renderOption(options[index], index)}</div>
|
||||
)}
|
||||
</FixedSizeList>
|
||||
);
|
||||
};
|
||||
const plan_key_formEl = () => {
|
||||
return (
|
||||
<>
|
||||
<FormItem labelname="归属计划" prop="gs_plan">
|
||||
<Select
|
||||
clearable
|
||||
options={state.plan_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="归属key" prop="gs_key">
|
||||
<Select
|
||||
clearable
|
||||
options={state.key_OPTIONS}
|
||||
placeholder="选择一项"
|
||||
renderOptionList={renderOptionList}
|
||||
/>
|
||||
</FormItem>
|
||||
</>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<div className="coupon-box">
|
||||
<Form model={state.model} rules={rules} ref={form_el}>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup1_title}>
|
||||
{/* 是否显示两个字段 */}
|
||||
{type === 1 ? plan_key_formEl() : null}
|
||||
|
||||
<FormItem labelname="批次名称" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={true}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="生效时间段" prop="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={state.model.date_time}
|
||||
onChange={(e) => {
|
||||
onChangeCombinedDate(e);
|
||||
}}
|
||||
disabledDate={onDisabledRange}
|
||||
/>
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup2_title}>
|
||||
<Grids>
|
||||
<Row>
|
||||
<Col span={3}>
|
||||
<p>
|
||||
面额 <span className="mustwrite">*</span>
|
||||
</p>
|
||||
</Col>
|
||||
<Col span={2}>
|
||||
<div className="justify-box">
|
||||
<span>满</span>
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"130px"}
|
||||
alignment={"left"}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
|
||||
<Col span={3}>
|
||||
<div className="justify-box">
|
||||
<span style={{ paddingRight: "10px" }}>减</span>
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"130px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Grids>
|
||||
|
||||
<FormItem labelname="发放总量" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="个"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="总预算" prop="name">
|
||||
<Ipt
|
||||
onChange={(e) => {
|
||||
setState({ model: { name: e } });
|
||||
}}
|
||||
onClearItem={() => {
|
||||
setState({ model: { name: "" } });
|
||||
}}
|
||||
value={state.model.name}
|
||||
placeholder={"请输入"}
|
||||
labelWidth={"0px"}
|
||||
maxLength={20}
|
||||
height={"36px"}
|
||||
countShow={false}
|
||||
width={"520px"}
|
||||
alignment={"left"}
|
||||
unit="元"
|
||||
/>
|
||||
</FormItem>
|
||||
</Card>
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup3_title}>
|
||||
<FormItem labelname="商品范围" prop="rank" id="rank">
|
||||
<div className="goods-boxs">
|
||||
<Select
|
||||
options={state.rankoptions}
|
||||
multiple
|
||||
value={state.rank}
|
||||
placeholder="选择一项"
|
||||
width={405}
|
||||
onChange={(e) => {
|
||||
onRankChange(e);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoodsBtnLoading}
|
||||
onClick={() => {
|
||||
addProduct("addProduct");
|
||||
}}
|
||||
>
|
||||
新建商品
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoldLoading}
|
||||
onClick={() => {
|
||||
addProduct("addKnockGold");
|
||||
}}
|
||||
disabled={
|
||||
!JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
|
||||
}
|
||||
>
|
||||
新建立减金
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Form>
|
||||
|
||||
<div className="step-btn-group">
|
||||
<Button type="primary" onClick={() => submit()}>
|
||||
提交审核
|
||||
</Button>
|
||||
<Button type="normal" onClick={() => onReturn()}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default UseCouponAddEdit;
|
||||
|
|
@ -1,17 +1,8 @@
|
|||
import React, { forwardRef, useImperativeHandle, useRef } from "react";
|
||||
import { useSetState } from "ahooks";
|
||||
import { FixedSizeList } from "react-window";
|
||||
import * as math from "mathjs"; // https://github.com/josdejong/mathjs
|
||||
import { isAmount, isPosIntNumber } from "@/tools/validate";
|
||||
import {
|
||||
Card,
|
||||
DateRangePicker,
|
||||
Button,
|
||||
LayoutRow as Row,
|
||||
LayoutCol as Col,
|
||||
LayoutGrid as Grids,
|
||||
Select,
|
||||
} from "zent";
|
||||
import { isAmount } from "@/tools/validate";
|
||||
import { Card, DateRangePicker, Button, Select } from "zent";
|
||||
import moment from "moment";
|
||||
|
||||
import Ipt from "@/components/input/main";
|
||||
|
|
@ -211,6 +202,8 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
setQuantity();
|
||||
}, [form_rule_data.reduce, form_rule_data.restrict]);
|
||||
|
||||
const table_el = useRef(null);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
submit: submit,
|
||||
}));
|
||||
|
|
@ -257,11 +250,6 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
);
|
||||
};
|
||||
|
||||
function print(value) {
|
||||
const precision = 14;
|
||||
console.log(math.format(value, precision));
|
||||
}
|
||||
|
||||
// 判断是否可用
|
||||
const setIsRestrict = () => {
|
||||
if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.full)) {
|
||||
|
|
@ -273,17 +261,19 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
|
||||
// 计算总预算
|
||||
const setQuantity = () => {
|
||||
print(math.multiply(math.bignumber(10), math.bignumber(10000000)));
|
||||
|
||||
// subtract减法 multiply乘法
|
||||
let num = math.multiply(
|
||||
Number(form_rule_data.restrict),
|
||||
Number(form_rule_data.reduce)
|
||||
);
|
||||
num = math.format(num, { precision: 14 });
|
||||
setForm_rule_data({
|
||||
quantity: num,
|
||||
});
|
||||
if (isAmount(form_rule_data.reduce) && isAmount(form_rule_data.restrict)) {
|
||||
let num = Math.mulNum(
|
||||
Number(form_rule_data.reduce),
|
||||
Number(form_rule_data.restrict)
|
||||
);
|
||||
setForm_rule_data({
|
||||
quantity: num,
|
||||
});
|
||||
} else {
|
||||
setForm_rule_data({
|
||||
quantity: "",
|
||||
});
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="coupon-box">
|
||||
|
|
@ -438,6 +428,75 @@ const UseCouponAddEdit = forwardRef((props, ref) => {
|
|||
</Form>
|
||||
</Card>
|
||||
|
||||
<Card style={{ margin: "10px auto" }} title={state.setup3_title}>
|
||||
<FormItem labelname="商品范围" prop="rank" id="rank">
|
||||
<div className="goods-boxs">
|
||||
<Select
|
||||
options={state.rankoptions}
|
||||
multiple
|
||||
value={state.rank}
|
||||
placeholder="选择一项"
|
||||
width={405}
|
||||
onChange={(e) => {
|
||||
onRankChange(e);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoodsBtnLoading}
|
||||
onClick={() => {
|
||||
addProduct("addProduct");
|
||||
}}
|
||||
>
|
||||
新建商品
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
style={{ marginLeft: "20px" }}
|
||||
loading={state.newGoldLoading}
|
||||
onClick={() => {
|
||||
addProduct("addKnockGold");
|
||||
}}
|
||||
disabled={
|
||||
!JSON.parse(sessionStorage.getItem("isEarlyWarningMan"))
|
||||
}
|
||||
>
|
||||
新建立减金
|
||||
</Button>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<div className="step-btn-group">
|
||||
<Button type="primary" onClick={() => submit()}>
|
||||
提交审核
|
||||
|
|
|
|||
|
|
@ -0,0 +1,88 @@
|
|||
/**
|
||||
* 加法运算
|
||||
* @param {Number} a
|
||||
* @param {Number} b
|
||||
* @example Math.addNum(0.3 , 0.6) // => 0.9
|
||||
*/
|
||||
const addNum = (a, b) => {
|
||||
var c, d, e
|
||||
try {
|
||||
c = a.toString().split('.')[1].length
|
||||
} catch (f) {
|
||||
c = 0
|
||||
}
|
||||
try {
|
||||
d = b.toString().split('.')[1].length
|
||||
} catch (f) {
|
||||
d = 0
|
||||
}
|
||||
return (e = Math.pow(10, Math.max(c, d))), (mulNum(a, e) + mulNum(b, e)) / e
|
||||
}
|
||||
|
||||
/**
|
||||
* 减法运算
|
||||
* @param {Number} a
|
||||
* @param {Number} b
|
||||
* @example Math.subNum(0.3 , 0.2) // => 0.1
|
||||
*/
|
||||
const subNum = (a, b) => {
|
||||
var c, d, e
|
||||
try {
|
||||
c = a.toString().split('.')[1].length
|
||||
} catch (f) {
|
||||
c = 0
|
||||
}
|
||||
try {
|
||||
d = b.toString().split('.')[1].length
|
||||
} catch (f) {
|
||||
d = 0
|
||||
}
|
||||
return (e = Math.pow(10, Math.max(c, d))), (mulNum(a, e) - mulNum(b, e)) / e
|
||||
}
|
||||
|
||||
/**
|
||||
* 乘法运算
|
||||
* @param {Number} a
|
||||
* @param {Number} b
|
||||
* @example Math.mulNum(0.3 , 1.5) // => 0.45
|
||||
*/
|
||||
const mulNum = (a, b) => {
|
||||
var c = 0,
|
||||
d = a.toString(),
|
||||
e = b.toString()
|
||||
try {
|
||||
c += d.split('.')[1].length
|
||||
} catch (f) {}
|
||||
try {
|
||||
c += e.split('.')[1].length
|
||||
} catch (f) {}
|
||||
return (Number(d.replace('.', '')) * Number(e.replace('.', ''))) / Math.pow(10, c)
|
||||
}
|
||||
|
||||
/**
|
||||
* 除法运算
|
||||
* @param {Number} a
|
||||
* @param {Number} b
|
||||
* @example Math.divNum(0.3 , 0.1) // => 3
|
||||
*/
|
||||
const divNum = (a, b) => {
|
||||
var c,
|
||||
d,
|
||||
e = 0,
|
||||
f = 0
|
||||
try {
|
||||
e = a.toString().split('.')[1].length
|
||||
} catch (g) {}
|
||||
try {
|
||||
f = b.toString().split('.')[1].length
|
||||
} catch (g) {}
|
||||
return (
|
||||
(c = Number(a.toString().replace('.', ''))),
|
||||
(d = Number(b.toString().replace('.', ''))),
|
||||
mulNum(c / d, Math.pow(10, f - e))
|
||||
)
|
||||
}
|
||||
Math.divNum = divNum
|
||||
Math.addNum = addNum
|
||||
Math.subNum = subNum
|
||||
Math.mulNum = mulNum
|
||||
Loading…
Reference in New Issue