bpa
/
BPA.KitChen.Web
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

完善 送券活动

tags/小炒逻辑变更前
yangwenhua 2 years ago
parent
a8134171f8
commit
f08d387bbc
2 changed files with 485 additions and 10 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +434
    -10
      src/pages/activity/activityStart/components/CouponDelivery/index.jsx
  2. +51
    -0
      src/pages/activity/activityStart/service.js

+ 434
- 10
src/pages/activity/activityStart/components/CouponDelivery/index.jsx View File

@@ -1,16 +1,71 @@
import React, { useState, useEffect } from "react";
import { Form, Button, Input, Select, InputNumber, DatePicker, Upload, message } from 'antd';
import { Form, Button, Input, Select, InputNumber, DatePicker, Upload, message, Modal, Checkbox, Row, Col } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined, PlusCircleOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';
import moment from "moment";

const CouponDelivery = () => {
/**
* （送券）活动
* @returns
*/
const key = 'coupon';
const activityConfigArray = [
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "3718AB6C-F4ED-4FAD-8462-6608FF87799C",
"configurationName": "新人注册",
"configurationRule": "没有领取过优惠券",
"valueType": 1,
"configurationValueCount": 0
},
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "58cbe72f-5022-48bd-8ed0-7ebb091e884a",
"configurationName": "限制领券",
"configurationRule": "不存在此优惠券",
"valueType": 1,
"configurationValueCount": 0
},
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "E432268C-7140-4519-B29F-892764486232",
"configurationName": "每日领券",
"configurationRule": "每日只可领取一次",
"valueType": 1,
"configurationValueCount": 0
},
]

const CouponDelivery = () => {
const [form] = Form.useForm();
const [couponInfo, SetCouponInfo] = useState([]);
const [couponForm] = Form.useForm();
const [imgurl, setimgUrl] = useState(null);
const [canUseCount, setCanUseCount] = useState([]);
/** 新建/更新窗口的弹窗 */
const [createModalVisible, handleModalVisible] = useState(false);
/** 优惠券类型 */
const [couponType, setcouponType] = useState([]);
/** 适用门店范围 */
const [applicableStore, setApplicableStore] = useState([]);
/** 适用商品类型范围 */
const [applyGoodType, setApplyGoodType] = useState([]);
/** 适用商品范围 */
const [applyGood, setApplyGood] = useState([]);

/**
* 获取优惠券列表
@@ -81,8 +136,163 @@ const CouponDelivery = () => {
},
};

const formItemLayout = {
labelCol: {
sm: { span: 4 },
},
wrapperCol: {},
};

const tailFormItemLayout = {
wrapperCol: {
sm: {
span: 500,
offset: 1,
},
},
};

/**
* 获取消费券类型
*/
const GetCouponStatusOrType = async () => {
await startAPI.GetCouponStatusOrType(2).then((r) => {
if (r.succeeded) {
setcouponType(r.data);
}
});
}

/**
* 获取适用店铺
*/
const GetStores = async () => {
const response = await startAPI.GetStores();
if (response.statusCode === 200) {
setApplicableStore(response.data);
}
}

/**
* 适用商品范围
*/
const onFetchGoodsType = async () => {
const response = await startAPI.GetGoodsType();
if (response.statusCode === 200) {
const array = [];
Object.keys(response.data).forEach(item => {
array.push({
id: item,
name: response.data[item]
})
})
setApplyGoodType(array);
}
}

/**
* 获取商品
*/
const onFetchGoods = async (goodsType = -1) => {
const response = await startAPI.GetGoodsById(goodsType);
if (response.statusCode === 200) {
const array = [];
Object.keys(response.data).forEach(item => {
array.push({
id: item,
name: response.data[item]
})
});
setApplyGood(array)
}
}


//新增
const handleAddCoupon = async (fields) => {
fields.RangeType = 1;
message.loading('正在添加...', key);
try {
if (fields.validEndTime < fields.validStartTime) {
message.error('开始时间不能大于结束时间');
}
await startAPI.Addcoupon(JSON.stringify(fields)).then((r) => {
message.destroy(key);
if (r.data) {
message.success('添加成功');
onFetchCouponList();
handleModalVisible(false);
} else {
message.error('添加失败请重试！');
}
});
} catch (error) {
message.destroy(key);
message.error('添加失败请重试！');
}
};

const hander = async (value) => {
var res = (await startAPI.GetSelectedConfig(value)).data;
var arr = [];
for (let k in res) {
arr.push({
id: k.toString(),
name: res[k.toString()],
});
}
setApplicableStore(data);
form.setFieldsValue({ Relation: [] });
};

/**
* 提交活动
*/
const onSubmitActivity = async (values) => {
if (!values.activityRewards) {
message.error('请至少添加一种优惠券');
return;
}
values.activityType = 1;
values.activityRewards.forEach(item => {
item.id = "";
item.activityInfo_Id = "";
})
values.activityStartTime = moment(values.activityStartAndEndTime[0]).format('YYYY-MM-DD');
values.activityEndTime = moment(values.activityStartAndEndTime[1]).format('YYYY-MM-DD');
values.status = 0;
values.isShow = 1;
values.isDeleted = 0;
values.consumptionType = 0;
values.isGiftGoodsParticipate = 0;
const activityConfiguration = [];
values.activityConfig.forEach(valueItem => {
const findConfig = activityConfigArray.find(item => item.configuration_Id === valueItem);
if (findConfig) {
activityConfiguration.push({
...findConfig,
configId: [valueItem]
});
}
});
delete values.activityConfig;
delete values.activityStartAndEndTime;
values.activityConfiguration = activityConfiguration;
const response = await startAPI.FastAddActivity(values);
if (response.statusCode === 200) {
message.success('新建活动成功！');
couponForm.resetFields();
} else {
message.error(response.errors || '创建失败 请重试！');
}
}

useEffect(() => {
onFetchCouponList();
GetCouponStatusOrType();
GetStores();
onFetchGoodsType();
onFetchGoods();
}, []);

return <div className={styles.activity_form_container} >
@@ -96,11 +306,7 @@ const CouponDelivery = () => {
remember: true,
}}
onFinish={(values) => {
console.log('values>>>', values);
if (!values.activityRewards) {
message.error('请至少添加一种优惠券');
return;
}
onSubmitActivity(values);
}}
layout="vertical"
autoComplete="off"
@@ -159,7 +365,7 @@ const CouponDelivery = () => {
</Select>
</Form.Item>

<PlusCircleOutlined style={{ margin: '0 10px', flexShrink: 0, marginBottom: '24px', fontSize: '25px', color: '#F84352' }} />
<PlusCircleOutlined onClick={() => handleModalVisible(true)} style={{ margin: '0 10px', flexShrink: 0, marginBottom: '24px', fontSize: '25px', color: '#F84352' }} />

<div style={{ margin: '0 20px', flexShrink: 0, marginBottom: '24px', fontSize: '16px', width: '120px' }}>可领取数量: {canUseCount[key]?.canUseCount}</div>

@@ -201,7 +407,7 @@ const CouponDelivery = () => {
</Form.Item>

<Form.Item
name="activityStartTime"
name="activityStartAndEndTime"
label="起止时间"
rules={[{ required: true }]}
>
@@ -226,6 +432,29 @@ const CouponDelivery = () => {
</Upload>
</Form.Item>

<Form.Item name="isAutoSend" label="参与方式" rules={[{ required: true }]}>
<Select placeholder="请选择参与方式">
<Select.Option value="0">点击参与（需要用户主动点击）</Select.Option>
<Select.Option value="1">自动参与（满足特定条件自动参与）</Select.Option>
</Select>
</Form.Item>

<Form.Item name="activityConfig" label="活动配置" rules={[{ required: true, message: '请至少选择一个活动配置！' }]}>
<Checkbox.Group style={{
width: '100%',
}}>
<Row>
{
activityConfigArray.map((config, index) => {
return <Col key={index} span={24} style={{ marginBottom: '10px' }}>
<Checkbox value={config.configuration_Id}>{config.configurationName}：{config.configurationRule}！</Checkbox>
</Col>
})
}
</Row>
</Checkbox.Group>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
@@ -237,8 +466,203 @@ const CouponDelivery = () => {
重置
</Button>
</Form.Item>

</Form>

<Modal
maskClosable={false}
title="新建优惠卷"
width={700}
visible={createModalVisible}
footer={null} //底部内容
//取消
onCancel={() => {
handleModalVisible(false);
}}
//关闭时销毁 Modal 里的子元素
destroyOnClose
>
<Form
form={form}
{...formItemLayout}
layout="Horizontal"
preserve={false}
onFinish={(values) => {
handleAddCoupon(values)
}}
>
<Form.Item name="id" hidden={true}>
<Input />
</Form.Item>
<Form.Item name="couponTitle" label="优惠卷标题" rules={[{ required: true, max: 200 }]}>
<Input placeholder="请输入优惠卷标题" />
</Form.Item>
<Form.Item
name="couponType"
label="优惠卷类型"
rules={[{ required: true }]}
>
<Select placeholder="请选择优惠卷类型">
{
couponType.map(item => {
return <Select.Option key={item.key} value={item.key} >
{item.value}
</Select.Option>
})
}
</Select>
</Form.Item>
<Form.Item {...tailFormItemLayout} style={{ height: 32 }}>
<Form.Item label="优惠金额" style={{ float: 'left' }} rules={[{ required: true }]}>
<Form.Item name="couponValue" noStyle>
<InputNumber placeholder="金额" min={0} precision={2} />
</Form.Item>
</Form.Item>
<Form.Item
label="使用条件"
style={{ float: 'left', marginLeft: 10 }}
rules={[{ required: true }]}
>
<Form.Item name="condition" noStyle>
<InputNumber placeholder="使用条件" min={0} precision={2} />
</Form.Item>
</Form.Item>
<Form.Item
label="每人可领数量"
style={{ float: 'left', marginLeft: 10 }}
rules={[{ required: true }]}
>
<Form.Item name="getLimit" noStyle>
<InputNumber placeholder="可领数量" min={0} precision={0} />
</Form.Item>
<span style={{ color: '#FFCC52' }}> 0 为不限制</span>
</Form.Item>
</Form.Item>
<Form.Item name="timeType" label="时间类型" rules={[{ required: true }]}>
<Select>
<Select.Option value={1}>时间段</Select.Option>
<Select.Option value={2}>固定期限</Select.Option>
</Select>
</Form.Item>
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) =>
prevValues.timeType !== currentValues.timeType
}
>
{({ getFieldValue }) =>
getFieldValue('timeType') == '2' ? (
<Form.Item label="固定时间" rules={[{ required: true }]}>
<Form.Item name="validFixedTerm" noStyle>
<InputNumber placeholder="" precision={0} min={0} />
</Form.Item>
</Form.Item>
) : (
<Form.Item {...tailFormItemLayout} style={{ height: 32 }}>
<Form.Item
name="validStartTime"
label="开始时间"
style={{ float: 'left' }}
rules={[{ required: true }]}
>
<DatePicker placeholder="开始时间" />
</Form.Item>
<Form.Item
name="validEndTime"
label="结束时间"
style={{ float: 'left', marginLeft: 20 }}
rules={[{ required: true }]}
>
<DatePicker placeholder="结束时间" />
</Form.Item>
</Form.Item>
)
}
</Form.Item>
<Form.Item name="validStatus" label="状态" rules={[{ required: true }]}>
<Select placeholder="状态">
<Option value={1}>生效</Option>
<Option value={2}>失效</Option>
<Option value={3}>作废</Option>
</Select>
</Form.Item>

<Form.Item noStyle>
<Form.Item name="remarks" label="备注" rules={[{ max: 500 }]}>
<Input placeholder="备注" />
</Form.Item>
<span style={{ color: '#FFCC52', marginLeft: 70 }}>
注: 多条规则请用 &nbsp;;&nbsp; 隔开。 &nbsp;&nbsp; 如：1.xxxxxx； 2.xxxxxx
</span>
</Form.Item>

<Form.Item name="Coupon_Id" hidden={true}>
<Input />
</Form.Item>
<Form.Item name="SendNum" label="发放数量" rules={[{ required: true }]}>
<InputNumber placeholder="发放数量" min={0} style={{ width: '510px' }} />
</Form.Item>

<Form.Item name="RangeType" label="适用范围类型" hidden={true} defaultValue={1}>
<Select placeholder="发放范围" onSelect={hander} defaultValue={1}>
<Select.Option value="1">店铺</Select.Option>
{/* <Select.Option value="2">供应商</Select.Option> */}
<Select.Option value="3">区域</Select.Option>
</Select>
</Form.Item>

<Form.Item name="Relation" label="适用范围" rules={[{ required: true }]} defaultValue="1">
<Select placeholder="适用范围" filterOption={false} mode="multiple">
{
applicableStore.map(item => {
return <Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
})
}
</Select>
</Form.Item>
<Form.Item name="applyGoodType" label="适用商品类型">
<Select placeholder="适用商品类型" filterOption={false} onChange={(value) => {
onFetchGoods(value);
}}>
{
applyGoodType.map(item => {
return <Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
})
}
</Select>
</Form.Item>
<Form.Item name="goodsRelation" label="适用商品范围">
<Select placeholder="适用商品范围" filterOption={false} mode="multiple">
{
applyGood.map(item => {
return <Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
})
}
</Select>
</Form.Item>
<Form.Item name="Status" label="状态" rules={[{ required: true }]} defaultValue="1">
<Select placeholder="请选择状态">
<Select.Option value="1">启用</Select.Option>
<Select.Option value="0">禁用</Select.Option>
</Select>
</Form.Item>

<Form.Item name="Remark" label="备注">
<Input placeholder="备注" />
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit" style={{ float: 'right' }}>
保存
</Button>
</Form.Item>
</Form>
</Modal>
</div>
}


+ 51
- 0
src/pages/activity/activityStart/service.js View File

@@ -13,5 +13,56 @@ export default {
return request(`/kitchen/api/coupon-helper/coupon-can-use-count-and-limit`, {
method: 'get',
});
},

/** 获取优惠卷状态或类型 */
GetCouponStatusOrType(data) {
return request(`/kitchen/api/coupon/getCouponStatusOrType`, {
method: 'POST',
data: data
});
},

/** 新增优惠卷 POST */
Addcoupon(data) {
return request('/kitchen/api/activity-info/fast-coupon', {
method: 'POST',
data: data
});
},

//获取店铺
GetStores(data) {
return request('/kitchen/api/sysOrg/listbytype', {
method: 'get',
data: data,
});
},

//获取商品类型
GetGoodsType(data) {
return request(`/kitchen/api/select/goodstype`, {
method: 'get'
});
},

//获取商品类型
GetGoodsById(data) {
return request(`/kitchen/api/select/goods/${data}`, {
method: 'get'
});
},

GetSelectedConfig(data) {
return request(`/kitchen/api/select/selectedconfig/${data}`, {
method: 'get'
});
},

FastAddActivity(data) {
return request('/kitchen/api/activity-info/fast-activity', {
method: 'POST',
data
});
}
}

Write Preview
Loading…
Cancel
Save