diff --git a/src/pages/activity/activityStart/components/CouponDelivery/index.jsx b/src/pages/activity/activityStart/components/CouponDelivery/index.jsx new file mode 100644 index 0000000..88e0dca --- /dev/null +++ b/src/pages/activity/activityStart/components/CouponDelivery/index.jsx @@ -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
+
{ + console.log('values', values); + }} + layout="vertical" + autoComplete="off" + > + + + + + + + + {(fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }) => ( +
+ + + + +
可领取数量: 999
+ + + + + + remove(name)} /> +
+ ))} + + + + + + )} + + + + + + + + + + + + + + + + + + {imgurl ? avatar : } + + + + + + + + + +
+
+} + +export default CouponDelivery; \ No newline at end of file diff --git a/src/pages/activity/activityStart/components/FreeCouponMoney/index.jsx b/src/pages/activity/activityStart/components/FreeCouponMoney/index.jsx new file mode 100644 index 0000000..c4f9356 --- /dev/null +++ b/src/pages/activity/activityStart/components/FreeCouponMoney/index.jsx @@ -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
+
{ + console.log('values', values); + }} + layout="vertical" + autoComplete="off" + > + + + + + + + + {(fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }) => ( +
+ + + + +
赠送优惠券：
+ + + + + + remove(name)} /> +
+ ))} + + + + + + )} + + + + + + + + + + + + + + + + + + {imgurl ? : } + + + + + + + + +
+
+} + +export default FreeCouponMoney; \ No newline at end of file diff --git a/src/pages/activity/activityStart/components/FreeGoodsMoney/index.jsx b/src/pages/activity/activityStart/components/FreeGoodsMoney/index.jsx new file mode 100644 index 0000000..8722f24 --- /dev/null +++ b/src/pages/activity/activityStart/components/FreeGoodsMoney/index.jsx @@ -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
+
{ + console.log('values', values); + }} + layout="vertical" + autoComplete="off" + > + + + + + + + + {(fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }) => ( +
+ + + + +
赠送商品：
+ + + + + + remove(name)} /> +
+ ))} + + + + + + )} + + + + + + + + + + + + + + + + + + {imgurl ? : } + + + + + + + + +
+
+} + +export default FreeGoodsMoney; \ No newline at end of file diff --git a/src/pages/activity/activityStart/components/FullDecrement/index.jsx b/src/pages/activity/activityStart/components/FullDecrement/index.jsx new file mode 100644 index 0000000..9646e78 --- /dev/null +++ b/src/pages/activity/activityStart/components/FullDecrement/index.jsx @@ -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
+
{ + console.log('values', values); + }} + layout="vertical" + autoComplete="off" + > + + + + + + + + {(fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }) => ( +
+ + + + + +
赠送金额：
+ + + + + + remove(name)} /> +
+ ))} + + + + + + )} + + + + + + + + + + + + + + + + + + {imgurl ? : } + + + + + + + + +
+
+} + +export default FullDecrement; \ No newline at end of file diff --git a/src/pages/activity/activityStart/components/LadderExchange/index.jsx b/src/pages/activity/activityStart/components/LadderExchange/index.jsx new file mode 100644 index 0000000..c3562a9 --- /dev/null +++ b/src/pages/activity/activityStart/components/LadderExchange/index.jsx @@ -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
+
{ + console.log('values', values); + }} + layout="vertical" + autoComplete="off" + > + + + + + + + + + + + + + + + + + {(fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }) => ( +
+ + + + + +
赠送优惠券：
+ + + + + + remove(name)} /> +
+ ))} + + + + + + )} + + + + + + + + + + + + + + + + + + {imgurl ? : } + + + + + + + + +
+
+} + +export default LadderExchange; \ No newline at end of file diff --git a/src/pages/activity/activityStart/components/PriceIncrease/index.jsx b/src/pages/activity/activityStart/components/PriceIncrease/index.jsx new file mode 100644 index 0000000..b85a184 --- /dev/null +++ b/src/pages/activity/activityStart/components/PriceIncrease/index.jsx @@ -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
+
{ + console.log('values', values); + }} + layout="vertical" + autoComplete="off" + > + + + + + + + + {(fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }) => ( +
+ + + + +
赠送商品：
+ + + + + + remove(name)} /> +
+ ))} + + + + + + )} + + + + + + + + + + + + + + + + + + {imgurl ? : } + + + + + + + + +
+
+} + +export default PriceIncrease; \ No newline at end of file diff --git a/src/pages/activity/activityStart/components/SpecialOffer/index.jsx b/src/pages/activity/activityStart/components/SpecialOffer/index.jsx new file mode 100644 index 0000000..4784c86 --- /dev/null +++ b/src/pages/activity/activityStart/components/SpecialOffer/index.jsx @@ -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
+
{ + console.log('values', values); + }} + layout="vertical" + autoComplete="off" + > + + + + + + + + {(fields, { add, remove }, { errors }) => ( + <> + {fields.map(({ key, name, fieldKey, ...restField }) => ( +
+ + + +
原价: 99
+
促销价：
+ + + + + remove(name)} /> +
+ ))} + + + + + + )} + + + + + + + + + + + + + + + + + + {imgurl ? : } + + + + + + + + +
+
+} + +export default SpecialOffer; \ No newline at end of file diff --git a/src/pages/activity/activityStart/index.jsx b/src/pages/activity/activityStart/index.jsx new file mode 100644 index 0000000..e978c87 --- /dev/null +++ b/src/pages/activity/activityStart/index.jsx @@ -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 + +
+
+ 活动类型： +
+ +
+ { currentActivityType === 1 && } + { currentActivityType === 2 && } + { currentActivityType === 3 && } + { currentActivityType === 4 && } + { currentActivityType === 5 && } + { (currentActivityType === 6 || currentActivityType === 7) && } + { currentActivityType === 8 && } + + +} + +export default ActivityStart; \ No newline at end of file diff --git a/src/pages/activity/activityStart/index.less b/src/pages/activity/activityStart/index.less new file mode 100644 index 0000000..b35f83f --- /dev/null +++ b/src/pages/activity/activityStart/index.less @@ -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; +} \ No newline at end of file diff --git a/src/pages/activity/activityStart/service.js b/src/pages/activity/activityStart/service.js new file mode 100644 index 0000000..6f99bbd --- /dev/null +++ b/src/pages/activity/activityStart/service.js @@ -0,0 +1,10 @@ +import { request } from 'umi'; + +export default { + GetCosRequestURL(data) { + return request(`/kitchen/api/systemconfig/GetCosRequestSignURL`, { + method: 'POST', + data: data, + }); + } +} \ No newline at end of file