Parcourir la source

买满送商品

tags/小炒逻辑变更前
yangwenhua il y a 1 an
Parent
révision
3aeff7959b
1 fichiers modifiés avec 395 ajouts et 9 suppressions
  1. +395
    -9
      src/pages/activity/activityStart/components/FreeGoodsMoney/index.jsx

+ 395
- 9
src/pages/activity/activityStart/components/FreeGoodsMoney/index.jsx Voir le fichier

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

const activityConfigArray = [
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "2B0F88D6-EDA0-4AAC-BB0B-DD34F3245C17",
"configurationName": "日参与次数限制",
"configurationRule": "每日参与次数",
"valueType": 1,
"configurationValueCount": 1
},
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "8AC2A2BA-BB6E-4566-B147-ACF798146BBD",
"configurationName": "星期限制",
"configurationRule": "包含的星期",
"valueType": 2,
"configurationValueCount": 1
},
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "9620CCF9-679E-44B1-B8FF-9B6F511208FA",
"configurationName": "消费金额",
"configurationRule": "单笔订单消费金额",
"valueType": 1,
"configurationValueCount": 1
},
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "AF62B336-15A6-453B-AD4A-61EB7D43B99B",
"configurationName": "商品种类限制",
"configurationRule": "包含的商品种类",
"valueType": 2,
"configurationValueCount": 1
},
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "ECBACC1C-6BA8-498E-BDE4-6A012881E0E7",
"configurationName": "门店限制",
"configurationRule": "包含的门店",
"valueType": 2,
"configurationValueCount": 1
},
{
"configId": null,
"operator": null,
"value1": [],
"value2": null,
"activity_Id": null,
"configuration_Id": "F06DEAD8-DDB8-4B27-94E9-389DE9AC155D",
"configurationName": "总参与次数限制",
"configurationRule": "总参与次数",
"valueType": 1,
"configurationValueCount": 1
}
]

/**
* 买满赠送(商品)
@@ -11,7 +87,58 @@ import axios from 'axios';
*/
const FreeGoodsMoney = () => {

const [couponInfo, SetCouponInfo] = useState([]);
/** 适用商品范围 */
const [applyGood, setApplyGood] = useState([]);
/**
* 获取商品
*/
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 [applyGoodType, setApplyGoodType] = useState([]);

/**
* 适用商品范围
*/
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 [applicableStore, setApplicableStore] = useState([]);

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

const [couponForm] = Form.useForm();
const [imgurl, setimgUrl] = useState(null);

@@ -74,6 +201,86 @@ const FreeGoodsMoney = () => {
},
};

/**
* 提交
* @param {*} values
*/
const onSubmitActivity = async (values) => {
values.activityType = 5;
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;
values.activityConfiguration = [];
values.activityConfig.forEach(config => {
const findConfig = activityConfigArray.find(item => item.configuration_Id === config);
if (findConfig) {
findConfig.configId = [findConfig.configuration_Id];
if (findConfig.configurationName === '日参与次数限制') {
findConfig.operator = values.dayOperator;
findConfig.value1 = values.dayValue;
} else if (findConfig.configurationName === '星期限制') {
findConfig.operator = values.weekOperator;
findConfig.value1 = values.weekValue;
} else if (findConfig.configurationName === '消费金额') {
findConfig.operator = values.amountOperator;
findConfig.value1 = values.amountValue;
} else if (findConfig.configurationName === '商品种类限制') {
findConfig.operator = values.goodsTypeOperator;
findConfig.value1 = values.goodsTypeValue;
} else if (findConfig.configurationName === '门店限制') {
findConfig.operator = values.storeOperator;
findConfig.value1 = values.storeValue;
} else if (findConfig.configurationName === '总参与次数限制') {
findConfig.operator = values.totalOperator;
findConfig.value1 = values.totalValue;
}
values.activityConfiguration.push(findConfig);
}
});
delete values.activityConfig;
delete values.activityStartAndEndTime;

delete values.amountOperator;
delete values.amountValue;

delete values.dayOperator;
delete values.dayValue;

delete values.goodsTypeOperator;
delete values.goodsTypeValue;

delete values.storeOperator;
delete values.storeValue;

delete values.totalOperator;
delete values.totalValue;

delete values.weekOperator;
delete values.weekValue;
const response = await startAPI.FastAddActivity(values);
if (response.statusCode === 200) {
message.success('新建活动成功!');
couponForm.resetFields();
} else {
message.error(response.errors || '创建失败 请重试!');
}
}


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

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
@@ -85,7 +292,7 @@ const FreeGoodsMoney = () => {
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
onSubmitActivity(values);
}}
layout="vertical"
autoComplete="off"
@@ -116,15 +323,15 @@ const FreeGoodsMoney = () => {
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请输入消费金额' }]}
>
<InputNumber style={{width: '200px'}} placeholder="请输入消费金额" />
<InputNumber style={{ width: '200px' }} placeholder="请输入消费金额" />
</Form.Item>

<div style={{ margin: '0 10px 24px 10px' }}>赠送商品:</div>

<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
name={[name, 'value']}
fieldKey={[fieldKey, 'value']}
rules={[{ required: true, message: '请选择商品' }]}
>
<Select
@@ -134,7 +341,13 @@ const FreeGoodsMoney = () => {
}}

>
<Option value="jack">葡萄酸奶</Option>
{
applyGood.map(item => {
return <Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
})
}
</Select>
</Form.Item>

@@ -160,7 +373,7 @@ const FreeGoodsMoney = () => {
</Form.Item>

<Form.Item
name="activityStartTime"
name="activityStartAndEndTime"
label="起止时间"
rules={[{ required: true }]}
>
@@ -189,6 +402,179 @@ const FreeGoodsMoney = () => {
</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', display: 'flex', alignItems: 'center' }}>
<Checkbox style={{ minWidth: '230px' }} value={config.configuration_Id}>{config.configurationName}:{config.configurationRule}</Checkbox>
{index === 0 && (
<>
<Form.Item
name="dayOperator"
noStyle
>
<Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
<Select.Option value=">">大于</Select.Option>
<Select.Option value="<">小于</Select.Option>
<Select.Option value="==">等于</Select.Option>
<Select.Option value=">=and<=">包含</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="dayValue"
noStyle
>
<Input style={{ width: 280 }} placeholder="每日参与次数" />
</Form.Item>
</>
)}
{index === 1 && (
<>
<Form.Item
name="weekOperator"
noStyle
>
<Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
<Select.Option value=">">大于</Select.Option>
<Select.Option value="<">小于</Select.Option>
<Select.Option value="==">等于</Select.Option>
<Select.Option value=">=and<=">包含</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="weekValue"
noStyle
>
<Select style={{ width: 280 }} size='Small' mode="multiple" placeholder="星期">
<Select.Option value="1">星期一</Select.Option>
<Select.Option value="2">星期二</Select.Option>
<Select.Option value="3">星期三</Select.Option>
<Select.Option value="4">星期四</Select.Option>
<Select.Option value="5">星期五</Select.Option>
<Select.Option value="6">星期六</Select.Option>
<Select.Option value="0">星期日</Select.Option>
</Select>
</Form.Item>
</>
)}
{index === 2 && (
<>
<Form.Item
name="amountOperator"
noStyle
>
<Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
<Select.Option value=">">大于</Select.Option>
<Select.Option value="<">小于</Select.Option>
<Select.Option value="==">等于</Select.Option>
<Select.Option value=">=and<=">包含</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="amountValue"
noStyle
>
<Input style={{ width: 280 }} placeholder="消费金额" />
</Form.Item>
</>
)}
{index === 3 && (
<>
<Form.Item
name="goodsTypeOperator"
noStyle
>
<Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
<Select.Option value=">">大于</Select.Option>
<Select.Option value="<">小于</Select.Option>
<Select.Option value="==">等于</Select.Option>
<Select.Option value=">=and<=">包含</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="goodsTypeValue"
noStyle
>
<Select style={{ width: 280 }} size='Small' placeholder="商品种类" mode="multiple">
{
applyGoodType.map(item => {
return <Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
})
}
</Select>
</Form.Item>
</>
)}
{index === 4 && (
<>
<Form.Item
name="storeOperator"
noStyle
>
<Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
<Select.Option value=">">大于</Select.Option>
<Select.Option value="<">小于</Select.Option>
<Select.Option value="==">等于</Select.Option>
<Select.Option value=">=and<=">包含</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="storeValue"
noStyle
>
<Select style={{ width: 280 }} size='Small' mode="multiple" placeholder="门店">
{
applicableStore.map(item => {
return <Select.Option value={item.id} key={item.id}>
{item.name}
</Select.Option>
})
}
</Select>
</Form.Item>
</>
)}
{index === 5 && (
<>
<Form.Item
name="totalOperator"
noStyle
>
<Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
<Select.Option value=">">大于</Select.Option>
<Select.Option value="<">小于</Select.Option>
<Select.Option value="==">等于</Select.Option>
<Select.Option value=">=and<=">包含</Select.Option>
</Select>
</Form.Item>
<Form.Item
name="totalValue"
noStyle
>
<Input style={{ width: 280 }} placeholder="总次数" />
</Form.Item>
</>
)}
</Col>
})
}
</Row>
</Checkbox.Group>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交


Chargement…
Annuler
Enregistrer