bpa
/
BPA.KitChen.Web
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 1 Wiki Activité
Parcourir la source

新增活动快速开始 页面结构

tags/小炒逻辑变更前
yangwenhua il y a 2 ans
Parent
c8b406e6ba
révision
77544223cd
10 fichiers modifiés avec 1612 ajouts et 0 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +207
    -0
      src/pages/activity/activityStart/components/CouponDelivery/index.jsx
  2. +209
    -0
      src/pages/activity/activityStart/components/FreeCouponMoney/index.jsx
  3. +208
    -0
      src/pages/activity/activityStart/components/FreeGoodsMoney/index.jsx
  4. +204
    -0
      src/pages/activity/activityStart/components/FullDecrement/index.jsx
  5. +261
    -0
      src/pages/activity/activityStart/components/LadderExchange/index.jsx
  6. +207
    -0
      src/pages/activity/activityStart/components/PriceIncrease/index.jsx
  7. +201
    -0
      src/pages/activity/activityStart/components/SpecialOffer/index.jsx
  8. +80
    -0
      src/pages/activity/activityStart/index.jsx
  9. +25
    -0
      src/pages/activity/activityStart/index.less
  10. +10
    -0
      src/pages/activity/activityStart/service.js

+ 207
- 0
src/pages/activity/activityStart/components/CouponDelivery/index.jsx Voir le fichier

@@ -0,0 +1,207 @@
import React, { useState } from "react";
import { Form, Button, Input, Select, InputNumber, DatePicker, Upload } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';

const CouponDelivery = () => {

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

const uploadProp = {
name: 'file',
showUploadList: false,
multiple: false,
accept: '.png, .jpg, .jpeg, .gif',
// 这里需要指定文件上传的content-type
headers: {
'Content-Type': 'application/octet-stream',
},
customRequest({
action,
file,
headers,
onError,
onProgress,
onSuccess,
withCredentials,
}) {

//覆盖action 上传之前获取上传地址
var index = file.name.lastIndexOf(".");
var ext = file.name.substr(index + 1);

let fileData = null;
startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
action = r.allUrl;
var index = file.name.lastIndexOf(".");
//获取后缀
var ext = file.name.substr(index + 1);
const reader = new FileReader();

if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
message.error(`${file.name} 不是图片文件`);
return;
}

reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
// 使用 axios 进行文件上传的请求
axios.put(action, fileData, {
withCredentials,
headers,
onUploadProgress: ({ total, loaded }) => {
// 进行上传进度输出，更加直观
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
},
}).then(response => {
couponForm.setFieldsValue({ activityImg: r.seeUrl });
if (response.status == 200 || response.statusText == 'OK') {
setimgUrl(r.seeUrl)
}
})
.catch(onError);
};
});
},
};

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
name="basic"
labelCol={{
span: 3,
}}
initialValues={{
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
}}
layout="vertical"
autoComplete="off"
>
<Form.Item
label="活动名称"
name="activityName"
rules={[
{
required: true,
message: '请输入活动名称！',
},
]}
>
<Input style={{ width: '100%' }} placeholder="请输入活动名称" />
</Form.Item>


<Form.Item label="优惠券">
<Form.List name="activityRewards">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div className={styles.common_form_row}>
<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请选择优惠券' }]}
>
<Select
placeholder="请选择优惠券"
style={{
width: '250px',
}}

>
<Option value="jack">优惠券1</Option>
</Select>
</Form.Item>

<div style={{ margin: '0 20px', flexShrink: 0, marginBottom: '24px', fontSize: '16px' }}>可领取数量: 999</div>

<Form.Item
{...restField}
name={[name, 'value']}
fieldKey={[fieldKey, 'value']}
rules={[
{
required: true,
message: '请输入领取数量！',
},
]}
>
<InputNumber placeholder="每日领取数量" style={{
width: '150px',
}} min={0} max={999} />
</Form.Item>

<MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
</div>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '100%',
}}
icon={<PlusOutlined />}
>
添加
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form.Item>

<Form.Item
name="activityStartTime"
label="起止时间"
rules={[{ required: true }]}
>
<DatePicker.RangePicker style={{ width: '100%' }} />
</Form.Item>

<Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
<Input.TextArea rows={4} placeholder="请输入备注" />
</Form.Item>

<Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
<Input.TextArea rows={4} placeholder="请输入规则说明" />
</Form.Item>

<Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
>
<Upload
{...uploadProp}
>
{imgurl ? <img src={imgurl} alt="avatar" style={{ width: '30px', height: '40px' }} /> : <Button icon={<UploadOutlined />}>上传</Button>}

</Upload>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button style={{ marginLeft: '20px' }} onClick={() => {
couponForm.resetFields();
setimgUrl(null);
}}>
重置
</Button>
</Form.Item>

</Form>
</div>
}

export default CouponDelivery;

+ 209
- 0
src/pages/activity/activityStart/components/FreeCouponMoney/index.jsx Voir le fichier

@@ -0,0 +1,209 @@
import React, { useState } from "react";
import { Form, Button, Input, Image, Select, DatePicker, Upload, InputNumber } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';

/**
* 买满赠送（优惠券）
* @returns
*/

const FreeCouponMoney = () => {

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

const uploadProp = {
name: 'file',
showUploadList: false,
multiple: false,
accept: '.png, .jpg, .jpeg, .gif',
// 这里需要指定文件上传的content-type
headers: {
'Content-Type': 'application/octet-stream',
},
customRequest({
action,
file,
headers,
onError,
onProgress,
onSuccess,
withCredentials,
}) {

//覆盖action 上传之前获取上传地址
var index = file.name.lastIndexOf(".");
var ext = file.name.substr(index + 1);

let fileData = null;
startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
action = r.allUrl;
var index = file.name.lastIndexOf(".");
//获取后缀
var ext = file.name.substr(index + 1);
const reader = new FileReader();

if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
message.error(`${file.name} 不是图片文件`);
return;
}

reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
// 使用 axios 进行文件上传的请求
axios.put(action, fileData, {
withCredentials,
headers,
onUploadProgress: ({ total, loaded }) => {
// 进行上传进度输出，更加直观
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
},
}).then(response => {
couponForm.setFieldsValue({ activityImg: r.seeUrl });
if (response.status == 200 || response.statusText == 'OK') {
setimgUrl(r.seeUrl)
}
})
.catch(onError);
};
});
},
};

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
name="basic"
labelCol={{
span: 3,
}}
initialValues={{
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
}}
layout="vertical"
autoComplete="off"
>
<Form.Item
label="活动名称"
name="activityName"
rules={[
{
required: true,
message: '请输入活动名称！',
},
]}
>
<Input style={{ width: '100%' }} placeholder="请输入活动名称" />
</Form.Item>


<Form.Item label="消费金额">
<Form.List name="activityRewards">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div className={styles.common_form_row}>
<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请输入消费金额' }]}
>
<InputNumber style={{width: '200px'}} placeholder="请输入消费金额" />
</Form.Item>

<div style={{ margin: '0 10px 24px 10px' }}>赠送优惠券：</div>

<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请选择优惠券' }]}
>
<Select
placeholder="请选择优惠券"
style={{
width: '250px',
}}

>
<Option value="jack">优惠券1</Option>
</Select>
</Form.Item>

<MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
</div>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '100%',
}}
icon={<PlusOutlined />}
>
添加
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form.Item>

<Form.Item
name="activityStartTime"
label="起止时间"
rules={[{ required: true }]}
>
<DatePicker.RangePicker style={{ width: '100%' }} />
</Form.Item>

<Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
<Input.TextArea rows={4} placeholder="请输入备注" />
</Form.Item>

<Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
<Input.TextArea rows={4} placeholder="请输入规则说明" />
</Form.Item>

<Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
>
<Upload
{...uploadProp}
>
{imgurl ? <Image
width={200}
height={200}
src={imgurl}
fallback="data:image/png;base64,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"
/> : <Button icon={<UploadOutlined />}>上传</Button>}
</Upload>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button style={{ marginLeft: '20px' }} onClick={() => {
couponForm.resetFields();
setimgUrl(null);
}}>
重置
</Button>
</Form.Item>

</Form>
</div>
}

export default FreeCouponMoney;

+ 208
- 0
src/pages/activity/activityStart/components/FreeGoodsMoney/index.jsx Voir le fichier

@@ -0,0 +1,208 @@
import React, { useState } from "react";
import { Form, Button, Input, Image, Select, DatePicker, Upload, InputNumber } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';

/**
* 买满赠送（商品）
* @returns
*/
const FreeGoodsMoney = () => {

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

const uploadProp = {
name: 'file',
showUploadList: false,
multiple: false,
accept: '.png, .jpg, .jpeg, .gif',
// 这里需要指定文件上传的content-type
headers: {
'Content-Type': 'application/octet-stream',
},
customRequest({
action,
file,
headers,
onError,
onProgress,
onSuccess,
withCredentials,
}) {

//覆盖action 上传之前获取上传地址
var index = file.name.lastIndexOf(".");
var ext = file.name.substr(index + 1);

let fileData = null;
startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
action = r.allUrl;
var index = file.name.lastIndexOf(".");
//获取后缀
var ext = file.name.substr(index + 1);
const reader = new FileReader();

if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
message.error(`${file.name} 不是图片文件`);
return;
}

reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
// 使用 axios 进行文件上传的请求
axios.put(action, fileData, {
withCredentials,
headers,
onUploadProgress: ({ total, loaded }) => {
// 进行上传进度输出，更加直观
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
},
}).then(response => {
couponForm.setFieldsValue({ activityImg: r.seeUrl });
if (response.status == 200 || response.statusText == 'OK') {
setimgUrl(r.seeUrl)
}
})
.catch(onError);
};
});
},
};

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
name="basic"
labelCol={{
span: 3,
}}
initialValues={{
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
}}
layout="vertical"
autoComplete="off"
>
<Form.Item
label="活动名称"
name="activityName"
rules={[
{
required: true,
message: '请输入活动名称！',
},
]}
>
<Input style={{ width: '100%' }} placeholder="请输入活动名称" />
</Form.Item>


<Form.Item label="消费金额">
<Form.List name="activityRewards">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div className={styles.common_form_row}>
<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请输入消费金额' }]}
>
<InputNumber style={{width: '200px'}} placeholder="请输入消费金额" />
</Form.Item>

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

<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请选择商品' }]}
>
<Select
placeholder="请选择商品"
style={{
width: '250px',
}}

>
<Option value="jack">葡萄酸奶</Option>
</Select>
</Form.Item>

<MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
</div>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '100%',
}}
icon={<PlusOutlined />}
>
添加
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form.Item>

<Form.Item
name="activityStartTime"
label="起止时间"
rules={[{ required: true }]}
>
<DatePicker.RangePicker style={{ width: '100%' }} />
</Form.Item>

<Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
<Input.TextArea rows={4} placeholder="请输入备注" />
</Form.Item>

<Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
<Input.TextArea rows={4} placeholder="请输入规则说明" />
</Form.Item>

<Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
>
<Upload
{...uploadProp}
>
{imgurl ? <Image
width={200}
height={200}
src={imgurl}
fallback="data:image/png;base64,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"
/> : <Button icon={<UploadOutlined />}>上传</Button>}
</Upload>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button style={{ marginLeft: '20px' }} onClick={() => {
couponForm.resetFields();
setimgUrl(null);
}}>
重置
</Button>
</Form.Item>

</Form>
</div>
}

export default FreeGoodsMoney;

+ 204
- 0
src/pages/activity/activityStart/components/FullDecrement/index.jsx Voir le fichier

@@ -0,0 +1,204 @@
import React, { useState } from "react";
import { Form, Button, Input, Image, InputNumber, DatePicker, Upload } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';

const FullDecrement = () => {

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

const uploadProp = {
name: 'file',
showUploadList: false,
multiple: false,
accept: '.png, .jpg, .jpeg, .gif',
// 这里需要指定文件上传的content-type
headers: {
'Content-Type': 'application/octet-stream',
},
customRequest({
action,
file,
headers,
onError,
onProgress,
onSuccess,
withCredentials,
}) {

//覆盖action 上传之前获取上传地址
var index = file.name.lastIndexOf(".");
var ext = file.name.substr(index + 1);

let fileData = null;
startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
action = r.allUrl;
var index = file.name.lastIndexOf(".");
//获取后缀
var ext = file.name.substr(index + 1);
const reader = new FileReader();

if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
message.error(`${file.name} 不是图片文件`);
return;
}

reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
// 使用 axios 进行文件上传的请求
axios.put(action, fileData, {
withCredentials,
headers,
onUploadProgress: ({ total, loaded }) => {
// 进行上传进度输出，更加直观
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
},
}).then(response => {
couponForm.setFieldsValue({ activityImg: r.seeUrl });
if (response.status == 200 || response.statusText == 'OK') {
setimgUrl(r.seeUrl)
}
})
.catch(onError);
};
});
},
};

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
name="basic"
labelCol={{
span: 3,
}}
initialValues={{
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
}}
layout="vertical"
autoComplete="off"
>
<Form.Item
label="活动名称"
name="activityName"
rules={[
{
required: true,
message: '请输入活动名称！',
},
]}
>
<Input style={{ width: '100%' }} placeholder="请输入活动名称" />
</Form.Item>


<Form.Item label="消费金额">
<Form.List name="activityRewards">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div className={styles.common_form_row}>

<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请输入消费金额' }]}
>
<InputNumber style={{ width: '200px' }} placeholder="请输入消费金额" />
</Form.Item>

<div style={{ margin: '0 10px 24px 20px' }}>赠送金额：</div>

<Form.Item
{...restField}
name={[name, 'value']}
fieldKey={[fieldKey, 'value']}
rules={[
{
required: true,
message: '请输入赠送金额！',
},
]}
>
<InputNumber placeholder="请输入赠送金额！" style={{
width: '200px',
}} min={0} max={999} />
</Form.Item>

<MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
</div>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '100%',
}}
icon={<PlusOutlined />}
>
添加
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form.Item>

<Form.Item
name="activityStartTime"
label="起止时间"
rules={[{ required: true }]}
>
<DatePicker.RangePicker style={{ width: '100%' }} />
</Form.Item>

<Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
<Input.TextArea rows={4} placeholder="请输入备注" />
</Form.Item>

<Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
<Input.TextArea rows={4} placeholder="请输入规则说明" />
</Form.Item>

<Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
>
<Upload
{...uploadProp}
>
{imgurl ? <Image
width={200}
height={200}
src={imgurl}
fallback="data:image/png;base64,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"
/> : <Button icon={<UploadOutlined />}>上传</Button>}
</Upload>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button style={{ marginLeft: '20px' }} onClick={() => {
couponForm.resetFields();
setimgUrl(null);
}}>
重置
</Button>
</Form.Item>

</Form>
</div>
}

export default FullDecrement;

+ 261
- 0
src/pages/activity/activityStart/components/LadderExchange/index.jsx Voir le fichier

@@ -0,0 +1,261 @@
import React, { useState } from "react";
import { Form, Button, Input, Image, Select, DatePicker, Upload, InputNumber } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';
/**
* 阶梯消费换购
* @returns
*/
const LadderExchange = () => {

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

const uploadProp = {
name: 'file',
showUploadList: false,
multiple: false,
accept: '.png, .jpg, .jpeg, .gif',
// 这里需要指定文件上传的content-type
headers: {
'Content-Type': 'application/octet-stream',
},
customRequest({
action,
file,
headers,
onError,
onProgress,
onSuccess,
withCredentials,
}) {

//覆盖action 上传之前获取上传地址
var index = file.name.lastIndexOf(".");
var ext = file.name.substr(index + 1);

let fileData = null;
startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
action = r.allUrl;
var index = file.name.lastIndexOf(".");
//获取后缀
var ext = file.name.substr(index + 1);
const reader = new FileReader();

if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
message.error(`${file.name} 不是图片文件`);
return;
}

reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
// 使用 axios 进行文件上传的请求
axios.put(action, fileData, {
withCredentials,
headers,
onUploadProgress: ({ total, loaded }) => {
// 进行上传进度输出，更加直观
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
},
}).then(response => {
couponForm.setFieldsValue({ activityImg: r.seeUrl });
if (response.status == 200 || response.statusText == 'OK') {
setimgUrl(r.seeUrl)
}
})
.catch(onError);
};
});
},
};

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
name="basic"
labelCol={{
span: 3,
}}
initialValues={{
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
}}
layout="vertical"
autoComplete="off"
>
<Form.Item
label="活动名称"
name="activityName"
rules={[
{
required: true,
message: '请输入活动名称！',
},
]}
>
<Input style={{ width: '100%' }} placeholder="请输入活动名称" />
</Form.Item>

<Form.Item>
<Form.Item
name="isGiftGoodsParticipate"
label="赠送商品是否参与活动"
rules={[
{
required: true,
},
]}
>
<Select
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
placeholder="请选活动消费类型"
>
<Option key={1} value={1}>
{'是'}
</Option>
<Option key={0} value={0}>
{'否'}
</Option>
</Select >
</Form.Item>

<Form.Item
name="consumptionType"
label="活动消费类型"
rules={[
{
required: true,
},
]}
>
<Select
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
placeholder="请选活动消费类型"
>
<Select.Option key={1} value={1}>
{'钱（元）'}
</Select.Option>
<Select.Option key={2} value={2}>
{'数量（杯/碗/盒/个/.....）'}
</Select.Option>
</Select >
</Form.Item>
</Form.Item>

<Form.Item label="消费次数">
<Form.List name="activityRewards">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div className={styles.common_form_row}>

<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请输入消费次数' }]}
>
<InputNumber style={{ width: '200px' }} placeholder="请输入消费次数" />
</Form.Item>

<div style={{ margin: '0 10px 24px 20px' }}>赠送优惠券：</div>

<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请选择优惠券' }]}
>
<Select
placeholder="请选择优惠券"
style={{
width: '230px',
}}

>
<Option value="jack">优惠券1</Option>
</Select>
</Form.Item>

<MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
</div>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '100%',
}}
icon={<PlusOutlined />}
>
添加
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form.Item>

<Form.Item
name="activityStartTime"
label="起止时间"
rules={[{ required: true }]}
>
<DatePicker.RangePicker style={{ width: '100%' }} />
</Form.Item>

<Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
<Input.TextArea rows={4} placeholder="请输入备注" />
</Form.Item>

<Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
<Input.TextArea rows={4} placeholder="请输入规则说明" />
</Form.Item>

<Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
>
<Upload
{...uploadProp}
>
{imgurl ? <Image
width={200}
height={200}
src={imgurl}
fallback="data:image/png;base64,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"
/> : <Button icon={<UploadOutlined />}>上传</Button>}
</Upload>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button style={{ marginLeft: '20px' }} onClick={() => {
couponForm.resetFields();
setimgUrl(null);
}}>
重置
</Button>
</Form.Item>

</Form>
</div>
}

export default LadderExchange;

+ 207
- 0
src/pages/activity/activityStart/components/PriceIncrease/index.jsx Voir le fichier

@@ -0,0 +1,207 @@
import React, { useState } from "react";
import { Form, Button, Input, Image, Select, DatePicker, Upload } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';

/**
* 加价换购
* @returns
*/

const PriceIncrease = () => {

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

const uploadProp = {
name: 'file',
showUploadList: false,
multiple: false,
accept: '.png, .jpg, .jpeg, .gif',
// 这里需要指定文件上传的content-type
headers: {
'Content-Type': 'application/octet-stream',
},
customRequest({
action,
file,
headers,
onError,
onProgress,
onSuccess,
withCredentials,
}) {

//覆盖action 上传之前获取上传地址
var index = file.name.lastIndexOf(".");
var ext = file.name.substr(index + 1);

let fileData = null;
startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
action = r.allUrl;
var index = file.name.lastIndexOf(".");
//获取后缀
var ext = file.name.substr(index + 1);
const reader = new FileReader();

if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
message.error(`${file.name} 不是图片文件`);
return;
}

reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
// 使用 axios 进行文件上传的请求
axios.put(action, fileData, {
withCredentials,
headers,
onUploadProgress: ({ total, loaded }) => {
// 进行上传进度输出，更加直观
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
},
}).then(response => {
couponForm.setFieldsValue({ activityImg: r.seeUrl });
if (response.status == 200 || response.statusText == 'OK') {
setimgUrl(r.seeUrl)
}
})
.catch(onError);
};
});
},
};

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
name="basic"
labelCol={{
span: 3,
}}
initialValues={{
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
}}
layout="vertical"
autoComplete="off"
>
<Form.Item
label="活动名称"
name="activityName"
rules={[
{
required: true,
message: '请输入活动名称！',
},
]}
>
<Input style={{ width: '100%' }} placeholder="请输入活动名称" />
</Form.Item>


<Form.Item label="加购价格">
<Form.List name="activityRewards">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div className={styles.common_form_row}>
<Form.Item
{...restField}
name={[name, 'value']}
fieldKey={[fieldKey, 'value']}
rules={[{ required: true, message: '请输入加购价格' }]}>
<Input style={{ width: '100%' }} placeholder="请输入加购价格" />
</Form.Item>

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

<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请选择商品' }]}
>
<Select style={{width: '200px'}}>
<Select.Option value="酸奶葡萄">
酸奶葡萄
</Select.Option>
<Select.Option value="意式浓缩">
意式浓缩
</Select.Option>
</Select>
</Form.Item>

<MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
</div>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '100%',
}}
icon={<PlusOutlined />}
>
添加
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form.Item>

<Form.Item
name="activityStartTime"
label="起止时间"
rules={[{ required: true }]}
>
<DatePicker.RangePicker style={{ width: '100%' }} />
</Form.Item>

<Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
<Input.TextArea rows={4} placeholder="请输入备注" />
</Form.Item>

<Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
<Input.TextArea rows={4} placeholder="请输入规则说明" />
</Form.Item>

<Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
>
<Upload
{...uploadProp}
>
{imgurl ? <Image
width={200}
height={200}
src={imgurl}
fallback="data:image/png;base64,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"
/> : <Button icon={<UploadOutlined />}>上传</Button>}
</Upload>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button style={{ marginLeft: '20px' }} onClick={() => {
couponForm.resetFields();
setimgUrl(null);
}}>
重置
</Button>
</Form.Item>

</Form>
</div>
}

export default PriceIncrease;

+ 201
- 0
src/pages/activity/activityStart/components/SpecialOffer/index.jsx Voir le fichier

@@ -0,0 +1,201 @@
import React, { useState } from "react";
import { Form, Button, Input, Image, Select, DatePicker, Upload } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';

const SpecialOffer = () => {

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

const uploadProp = {
name: 'file',
showUploadList: false,
multiple: false,
accept: '.png, .jpg, .jpeg, .gif',
// 这里需要指定文件上传的content-type
headers: {
'Content-Type': 'application/octet-stream',
},
customRequest({
action,
file,
headers,
onError,
onProgress,
onSuccess,
withCredentials,
}) {

//覆盖action 上传之前获取上传地址
var index = file.name.lastIndexOf(".");
var ext = file.name.substr(index + 1);

let fileData = null;
startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
action = r.allUrl;
var index = file.name.lastIndexOf(".");
//获取后缀
var ext = file.name.substr(index + 1);
const reader = new FileReader();

if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
message.error(`${file.name} 不是图片文件`);
return;
}

reader.readAsArrayBuffer(file);
reader.onload = (e) => {
fileData = e.target.result;
// 使用 axios 进行文件上传的请求
axios.put(action, fileData, {
withCredentials,
headers,
onUploadProgress: ({ total, loaded }) => {
// 进行上传进度输出，更加直观
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
},
}).then(response => {
couponForm.setFieldsValue({ activityImg: r.seeUrl });
if (response.status == 200 || response.statusText == 'OK') {
setimgUrl(r.seeUrl)
}
})
.catch(onError);
};
});
},
};

return <div className={styles.activity_form_container} >
<Form
form={couponForm}
name="basic"
labelCol={{
span: 3,
}}
initialValues={{
remember: true,
}}
onFinish={(values) => {
console.log('values', values);
}}
layout="vertical"
autoComplete="off"
>
<Form.Item
label="活动名称"
name="activityName"
rules={[
{
required: true,
message: '请输入活动名称！',
},
]}
>
<Input style={{ width: '100%' }} placeholder="请输入活动名称" />
</Form.Item>


<Form.Item label="商品信息">
<Form.List name="activityRewards">
{(fields, { add, remove }, { errors }) => (
<>
{fields.map(({ key, name, fieldKey, ...restField }) => (
<div className={styles.common_form_row}>
<Form.Item
{...restField}
name={[name, 'rewardValue']}
fieldKey={[fieldKey, 'rewardValue']}
rules={[{ required: true, message: '请选择商品' }]}
>
<Select style={{width: '200px'}}>
<Select.Option value="酸奶葡萄">
酸奶葡萄
</Select.Option>
<Select.Option value="意式浓缩">
意式浓缩
</Select.Option>
</Select>
</Form.Item>
<div style={{margin: '0 10px 24px 10px'}}>原价: 99</div>
<div style={{margin: '0 10px 24px 10px'}}>促销价：</div>
<Form.Item
{...restField}
name={[name, 'value']}
fieldKey={[fieldKey, 'value']}
rules={[{ required: true, message: '请输入促销价' }]}>
<Input style={{ width: '100%' }} placeholder="请输入促销价" />
</Form.Item>

<MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
</div>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => add()}
style={{
width: '100%',
}}
icon={<PlusOutlined />}
>
添加
</Button>
<Form.ErrorList errors={errors} />
</Form.Item>
</>
)}
</Form.List>
</Form.Item>

<Form.Item
name="activityStartTime"
label="起止时间"
rules={[{ required: true }]}
>
<DatePicker.RangePicker style={{ width: '100%' }} />
</Form.Item>

<Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
<Input.TextArea rows={4} placeholder="请输入备注" />
</Form.Item>

<Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
<Input.TextArea rows={4} placeholder="请输入规则说明" />
</Form.Item>

<Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
>
<Upload
{...uploadProp}
>
{imgurl ? <Image
width={200}
height={200}
src={imgurl}
fallback="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
/> : <Button icon={<UploadOutlined />}>上传</Button>}
</Upload>
</Form.Item>

<Form.Item>
<Button type="primary" htmlType="submit">
提交
</Button>
<Button style={{ marginLeft: '20px' }} onClick={() => {
couponForm.resetFields();
setimgUrl(null);
}}>
重置
</Button>
</Form.Item>

</Form>
</div>
}

export default SpecialOffer;

+ 80
- 0
src/pages/activity/activityStart/index.jsx Voir le fichier

@@ -0,0 +1,80 @@
import React, { useState } from "react";
import { PageContainer } from '@ant-design/pro-layout';
import { Card, Form, Select } from 'antd';
import styles from "./index.less";
import CouponDelivery from "./components/CouponDelivery";
import FullDecrement from "./components/FullDecrement";
import SpecialOffer from "./components/SpecialOffer";
import FreeCouponMoney from "./components/FreeCouponMoney";
import FreeGoodsMoney from "./components/FreeGoodsMoney";
import LadderExchange from "./components/LadderExchange";
import PriceIncrease from "./components/PriceIncrease";

const { Option } = Select;

/**
* 活动快速开始
* @returns
*/
const ActivityStart = () => {

const activityForm = Form.useForm();
const [currentActivityType, setCurrentActivityType] = useState(1);

return <PageContainer>
<Card className={styles.activity_start_container}>
<div className={styles.head_row}>
<div className={styles.head_row_prev}>
活动类型：
</div>
<Select
showSearch
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
placeholder="请选择活动类型"
style={{ width: '600px' }}
onChange={(value) => {
setCurrentActivityType(value);
}}
value={currentActivityType}
>
<Option key={1} value={1}>
{'送券'}
</Option>
<Option key={2} value={2}>
{'买满减现'}
</Option>
<Option key={3} value={3}>
{'特价商品'}
</Option>
<Option key={4} value={4}>
{'买满赠送(优惠券)'}
</Option>
<Option key={5} value={5}>
{'买满赠送(商品)'}
</Option>
<Option key={6} value={6}>
{'累计消费换购(阶梯)'}
</Option>
<Option key={7} value={7}>
{'累计消费换购(循环)'}
</Option >
<Option key={8} value={8}>
{'加价换购'}
</Option>
</Select>
</div>
{ currentActivityType === 1 && <CouponDelivery></CouponDelivery> }
{ currentActivityType === 2 && <FullDecrement></FullDecrement> }
{ currentActivityType === 3 && <SpecialOffer></SpecialOffer> }
{ currentActivityType === 4 && <FreeCouponMoney></FreeCouponMoney> }
{ currentActivityType === 5 && <FreeGoodsMoney></FreeGoodsMoney>}
{ (currentActivityType === 6 || currentActivityType === 7) && <LadderExchange></LadderExchange>}
{ currentActivityType === 8 && <PriceIncrease></PriceIncrease>}
</Card>
</PageContainer >
}

export default ActivityStart;

+ 25
- 0
src/pages/activity/activityStart/index.less Voir le fichier

@@ -0,0 +1,25 @@
.activity_start_container {
display: flex;
flex-direction: column;
align-items: center;
}

.head_row {
display: flex;
flex-direction: column;
}

.head_row_prev {
margin-bottom: 10px;
margin-right: 10px;
}

.activity_form_container {
width: 600px;
margin-top: 20px;
}

.common_form_row {
display: flex;
align-items: center;
}

+ 10
- 0
src/pages/activity/activityStart/service.js Voir le fichier

@@ -0,0 +1,10 @@
import { request } from 'umi';

export default {
GetCosRequestURL(data) {
return request(`/kitchen/api/systemconfig/GetCosRequestSignURL`, {
method: 'POST',
data: data,
});
}
}

Écrire Aperçu
Chargement…
Annuler
Enregistrer