Skip to content

J
jinfa-platform
Commit cb286311 authored by 前端-黄佳鑫's avatar 前端-黄佳鑫
Browse files
Options

✨ feat(商家营销活动): 优惠券选择

parent ac82a9dd
Show whitespace changes
Inline Side-by-side
Showing with 1000 additions and 25 deletions
src/pages/transaction/dealAbility/inquiryOffer/waitAddOffer/components/productQuote.tsx
View file @ cb286311
......@@ -45,8 +45,8 @@ const ProductQuoteLayout: React.FC<ProductQuoteLayoutProps> = (props: any) => {
const columns: ColumnType<any>[] = [
{
title: "商品ID",
key: "productId",
dataIndex: "productId",
key: "commodityId",
dataIndex: "commodityId",
render: (text: any, record: any) => <EyePreview type='button' handleClick={() => handleJump(record)}>{text}</EyePreview>
},
{
......
src/pages/transaction/marketingAbility/components/addFormGoods/modal/addCouponsDrawer/index.tsx
View file @ cb286311
......@@ -19,7 +19,7 @@ const AddCouponsDrawer: React.FC<AddCouponsDrawerProps> = (props: any) => {
const [couponType, setCouponType] = useState<any>('');
const [couponName, setCouponName] = useState<any>('');
const [couponList, setCouponList] = useState<Array<any>>([{id: 1}, {id: 2}]);
const [couponList, setCouponList] = useState<Array<any>>([{ id: 1 }, { id: 2 }]);
// const [checkList, setCheckList] = useState<Array<number>>([]);
const [checkItem, setCheckItem] = useState<any>({});
......@@ -98,7 +98,7 @@ const AddCouponsDrawer: React.FC<AddCouponsDrawerProps> = (props: any) => {
onSearch={onSearch}
style={{ width: 256 }}
onChange={_setCouponName}
allowClear/>
allowClear />
</Col>
<Col>
<Button onClick={_reSet}>重置</Button>
......
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/collocationLayout/index.tsx → src/pages/transaction/marketingAbility/components/collocationLayout/index.tsx
View file @ cb286311
......@@ -6,6 +6,7 @@ import { FORM_FILTER_PATH } from '@/formSchema/const';
import { PublicApi } from '@/services/api';
export interface CollocationLayoutProps {
moda?: 'checkbox' | 'radio' ,
/** */
idNotInList?: number[],
/** 适用商城 */
......@@ -19,7 +20,7 @@ export interface CollocationLayoutProps {
}
const CollocationLayout: React.FC<CollocationLayoutProps> = (props: any) => {
const { idNotInList, shopIdList, visible, toggle, onConfirm } = props;
const { moda = 'checkbox', idNotInList, shopIdList, visible, toggle, onConfirm } = props;
/** 选择活动商品columns */
const columns: ColumnType<any>[] = [
{
......@@ -116,7 +117,7 @@ const CollocationLayout: React.FC<CollocationLayoutProps> = (props: any) => {
title="选择活动商品"
fetchData={handleFetchData}
columns={columns}
mode="checkbox"
mode={moda}
tableProps={{
rowKey: 'skuId',
}}
......
src/pages/transaction/marketingAbility/components/couponItem/index.tsx
View file @ cb286311
import React from 'react';
import { Row, Col, Space } from 'antd';
import { Row, Col } from 'antd';
import moment from 'moment';
import styles from './index.less';
import { isEmpty } from 'lodash';
const CouponItem = (props) => {
const { fieldListData } = props;
const format = (text, fmt?: string) => {
return <>{moment(text).format(fmt || "YYYY-MM-DD")}</>
}
const CouponItem = () => {
return (
<>
{!isEmpty(fieldListData) && (
<div className={styles.couponItem}>
<Row style={{ height: '100%' }} wrap={false}>
<Col flex='none'>
<div className={styles.couponItemLeft}>
<p>¥<span>10.00</span></p>
<p>满200.00元可用</p>
<p>¥<span>{fieldListData.denomination}</span></p>
<p>满{fieldListData.useConditionMoney}元可用</p>
</div>
</Col>
<Col flex='auto' style={{ overflow: 'hidden' }}>
<div className={styles.couponItemRight}>
<div className={styles.couponItemRight_type}>通用优惠券</div>
<div className={styles.couponItemRight_info}>10元全品类优惠劵</div>
<div className={styles.couponItemRight_date}>2020.08.25-2020.09.25</div>
<div className={styles.couponItemRight_type}>{fieldListData.typeName}</div>
<div className={styles.couponItemRight_info}>{fieldListData.name}</div>
<div className={styles.couponItemRight_date}>{format(fieldListData.effectiveTimeStart)}-{format(fieldListData.effectiveTimeEnd)}</div>
</div>
</Col>
</Row>
</div>
)}
</>
);
}
......
src/pages/transaction/marketingAbility/components/couponsListLayout/components/productLayout/index.tsx 0 → 100644
View file @ cb286311
import React, { Fragment } from 'react';
import { Form, Input, Row, Col, Image } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { FormInstance } from 'antd/es/form/Form';
import style from '../../index.less';
import moment from 'moment';
type ListProps = {
/** id */
id?: number,
/** 商品id */
productId?: number,
/** 商品名称 */
productName?: string,
/** 品类 */
category?: string,
/** 品牌 */
brand?: string,
/** 单位 */
unit?: string,
/** 商品价格 */
price?: number,
/** 换购价格 */
swapPrice?: number,
/** 允许换购数量赠送数量搭配数量 */
num: number,
/** 赠品主图 */
productImgUrl?: string
/** 活动商品id */
activityGoodsId?: number,
/** 优惠券id */
couponId?: number,
/** 优惠券名称 */
couponName?: string,
}
type RemindLayoutProps = {
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
buttonTitle?: string,
/** 列表标题 */
listTitle?: string
/** 列表label */
label?: { [key: number]: string },
/** 提醒 */
message?: { [key: number]: string },
}
export interface ProductLayoutProps {
/** FormInstance */
form?: FormInstance,
/** message */
remind?: RemindLayoutProps,
/** 最外层标号 */
index: number,
/** list 数据 */
list: ListProps[],
/** 删除某一个 */
onDeletion: (_index: number) => void,
/** 输入数量或者套餐价格 */
onEntry: (name: string, num: number, _index?: number) => void,
}
const ProductLayout: React.FC<ProductLayoutProps> = (props: any) => {
const { form, remind, index, list, onDeletion, onEntry } = props;
const format = (text, fmt?: string) => {
return <>{moment(text).format(fmt || "YYYY-MM-DD")}</>
}
const handleChange = (e, name, _index?) => {
onEntry(name, Number(e.target.value), _index)
}
return (
<Fragment>
{/* 套餐价格 */}
<Form.Item
name={`${remind.type}_${index}`}
label={remind.label[1]}
rules={[{ required: true, message: remind.message[4] }]}
>
<Input addonBefore={remind.type === 'limitValue' && '买'} addonAfter={remind.label[2]} onBlur={(e) => handleChange(e, `${remind.type}`)} />
</Form.Item>
{/* 搭配商品 */}
{list.map((_item: any, _index: number) => (
<div key={`list_${_index + 1}`}>
<div className={style.productLayout_title}>
<span className={style.productLayout_arrow}>
{remind.label[3]}{_index + 1}
</span>
<DeleteOutlined onClick={() => onDeletion(_index)} />
</div>
<div className={style.productLayout_contenxt}>
<Form.Item
label={remind.label[3]}
className={style.productLayout_formItem}
>
{remind.value === 1 && (
<div className={style.productLayout_item}>
<Row gutter={8} wrap={false}>
<Col>
<div className={style.productLayout_item_img}>
<Image width={80} height={80} src={_item.productImgUrl} />
</div>
</Col>
<Col flex='auto'>
<div className={style.productLayout_item_title}>{_item.productName}</div>
<div className={style.productLayout_item_price}>
<span>¥ {_item.price.toFixed(2)}</span>/{_item.unit}
</div>
<div className={style.productLayout_item_info}>品类：{_item.category}</div>
<div className={style.productLayout_item_info}>品牌：{_item.brand}L</div>
</Col>
</Row>
</div>
)}
{remind.value !== 1 && (
<div className={style.couponLayout_contenxt}>
<Row style={{ height: '100%' }} wrap={false}>
<Col flex='none'>
<div className={style.couponLayout_item_left}>
<p>¥<span>{_item.denomination}</span></p>
<p>满{_item.useConditionMoney}元可用</p>
</div>
</Col>
<Col flex='auto' style={{ overflow: 'hidden' }}>
<div className={style.couponLayout_item_right}>
<div className={style.couponLayout_item_right_type}>{_item.typeName}</div>
<div className={style.couponLayout_item_right_info}>{_item.name}</div>
<div className={style.couponLayout_item_right_date}>{format(_item.effectiveTimeStart)}-{format(_item.effectiveTimeEnd)}</div>
</div>
</Col>
</Row>
</div>
)}
</Form.Item>
<Form.Item
label={remind.label[4]}
name={`num_${index}_${_index}`}
rules={[{ required: true, message: remind.message[5] }]}
>
<Input addonAfter={_item.unit} onBlur={(e) => handleChange(e, 'num', _index)} />
</Form.Item>
</div>
</div>
))}
</Fragment>
)
}
export default ProductLayout;
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/listModalLayout/index.less → src/pages/transaction/marketingAbility/components/couponsListLayout/index.less
View file @ cb286311
......@@ -110,5 +110,101 @@
}
}
}
.couponLayout_contenxt {
position: relative;
height: 100px;
width: 100%;
.couponLayout_item_left {
width: 144px;
height: 100%;
background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #3899FF 3px);
background-size: 15px 10px;
background-position: 1% 1px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
p {
font-size: 12px;
text-align: center;
color: #fff;
margin: 0;
span {
font-size: 24px;
}
}
&::before {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
box-sizing: border-box;
left: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
&::after {
background-color: #3899FF;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 10px;
z-index: -1;
}
}
.couponLayout_item_right {
height: 100%;
position: relative;
border: 1px solid #EDEEEF;
border-radius: 0 4px 4px 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-size: 12px;
padding-left: 20px;
.couponLayout_item_right_type {
color: #007BFC;
padding: 2px 4px;
background-color: #E9F3FF;
width: fit-content;
}
.couponLayout_item_right_info {
font-size: 14px;
color: #252D37;
}
.couponLayout_item_right_date {
color: #91959B;
}
&::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #EDEEEF;
box-sizing: border-box;
right: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
}
}
}
}
src/pages/transaction/marketingAbility/components/couponsListLayout/index.tsx 0 → 100644
View file @ cb286311
import React, { useEffect, useState } from 'react';
import { Drawer, Button, Form, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import CollapseLayout from './components/collapseLayout';
import { isEmpty } from 'lodash';
import ProductLayout from './components/productLayout';
import CouponsLayout from '@/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout';
const layout: any = {
labelCol: { style: { width: "100px" } },
labelAlign: "left",
};
type RemindLayoutProps = {
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
buttonTitle?: string,
/** 列表标题 */
listTitle?: string
/** 列表label */
label?: { [key: number]: string },
/** 提醒 */
message?: { [key: number]: string },
}
interface ListModalLayoutProps {
idNotInList?: number[],
/** messges */
remind?: RemindLayoutProps,
/** 数据回显 */
value?: any[],
/** 设置标题 */
title?: string,
/** 显示隐藏 */
visible?: boolean,
/** 适用商城 */
shopIdList?: number[],
/** 关闭 */
onClose?: () => void,
/** 确定 */
onConfirm?: (fields: any[]) => void,
}
interface CouponGroupListProps {
/**分组编号优惠阶梯换购阶梯 */
groupNo?: number,
/** 换购门槛优惠门槛数量或金额 */
limitValue?: number,
/** 明细 */
list?: {
id?: number,
/** 活动商品id */
activityGoodsId?: number,
/** 优惠券id */
couponId: number,
/** 优惠券名称 */
couponName: string,
/** 赠送数量 */
num?: number,
}[]
}
const CouponsListLayout: React.FC<ListModalLayoutProps> = (props: any) => {
const { idNotInList, remind, value, shopIdList, title, visible, onClose, onConfirm } = props;
const [form] = Form.useForm();
const [couponSource, setCouponSource] = useState<CouponGroupListProps[]>([]);
const [tableModalVisible, setTableModalVisible] = useState<boolean>(false);
const [idx, setIdx] = useState<number>(0);
const toggle = (flag: boolean) => {
setTableModalVisible(flag)
};
/** 添加一个 */
const handleAppend = () => {
const CouponGroup: CouponGroupListProps = {
groupNo: 0,
limitValue: 0,
list: []
}
setCouponSource([...couponSource, CouponGroup]);
}
const handleCouponSubmit = (selectRowRecord: any) => {
console.log(selectRowRecord, 10086)
}
const handleClick = () => {
console.log('提交')
}
/** 删除一个 */
const handleDeletion = (index: number) => {
console.log(index)
}
/** 选择搭配优惠券 */
const handleCollocation = (_idx: number) => {
setIdx(_idx);
toggle(true)
}
/** 输入一个价格或者数量 */
const handleEntryNumber = (index: number, name: string, num: number, _index?: number) => {
console.log(index, name, num, _index)
}
/** 删除一个赠送优惠券 */
const handleDeletionColloCation = (index: number, _index: number) => {
console.log(index, _index)
}
return (
<Drawer
width={600}
title={title}
visible={visible}
destroyOnClose
onClose={onClose}
footer={
<div style={{ textAlign: 'right' }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>
取消
</Button>
<Button type="primary" onClick={handleClick}>
提交
</Button>
</div>
}
>
{/* 分组列表 */}
<Form {...layout} form={form}>
{couponSource.map((item: CouponGroupListProps, index: number) => (
<Form.Item
style={{ marginBottom: '0px' }}
name={`dataSource_${index}`}
rules={[{ required: true, message: remind.message[3] }]}
key={`CollapseLayout_${index}`}
>
<CollapseLayout
index={index}
remind={remind}
deletion={handleDeletion}
>
{!isEmpty(item.list) && (
<ProductLayout
form={form}
index={index}
remind={remind}
list={item.list as any}
onDeletion={(_index: number) => handleDeletionColloCation(index, _index)}
onEntry={(name: string, num: number, _index?: number) => handleEntryNumber(index, name, num, _index)}
/>
)}
{/* 选择搭配商品 */}
<Button type="dashed" block icon={<PlusOutlined />} onClick={() => handleCollocation(index)}>
{remind.buttonTitle}
</Button>
</CollapseLayout>
</Form.Item>
))}
</Form>
{/* 添加分组 */}
<Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>
{/* 弹框: 优惠券 */}
<CouponsLayout
visible={tableModalVisible}
onClose={() => toggle(false)}
onSubmit={handleCouponSubmit}
/>
</Drawer>
)
}
export default CouponsListLayout;
src/pages/transaction/marketingAbility/components/listModalLayout/components/collapseLayout/index.tsx 0 → 100644
View file @ cb286311
import React, { useEffect, useState } from 'react';
import { CaretRightOutlined, DeleteOutlined } from '@ant-design/icons';
import cx from 'classnames';
import style from '../../index.less';
type RemindLayoutProps = {
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
buttonTitle?: string,
/** 列表标题 */
listTitle?: string
/** 列表label */
label?: {[key: number]: string},
/** 提醒 */
message?: {[key: number]: string},
}
interface CollapseLayoutProps {
/** message */
remind?: RemindLayoutProps,
/** 组编号优惠阶梯换购阶梯 */
index: number,
/** 删除一个 */
deletion: (e: number) => void,
}
const CollapseLayout: React.FC<CollapseLayoutProps> = (props: any) => {
const { remind, children, index, deletion } = props;
const [isActive, setIsActive] = useState<boolean>(false);
useEffect(() => {
if (index === 0) {
setIsActive(true)
}
}, [index])
return (
<div className={cx(style.collapse, isActive && style.marginBottom)}>
<div className={style.collapse_index}>{index + 1}</div>
<div className={style.collapse_item}>
{/* 头部 */}
<div className={style.collapse_header} onClick={() => setIsActive(!isActive)}>
<CaretRightOutlined rotate={isActive ? 90 : 0} />
<span className={style.collapse_arrow}>{remind.listTitle}</span>
<DeleteOutlined onClick={() => deletion(index)} />
</div>
{/* 内容 */}
{isActive && (<>{children}</>)}
</div>
</div>
)
}
export default CollapseLayout
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/listModalLayout/components/productLayout/index.tsx → src/pages/transaction/marketingAbility/components/listModalLayout/components/productLayout/index.tsx
View file @ cb286311
......@@ -8,9 +8,9 @@ type ListProps = {
/** id */
id?: number,
/** 商品id */
productId: number,
productId?: number,
/** 商品名称 */
productName: string,
productName?: string,
/** 品类 */
category?: string,
/** 品牌 */
......@@ -25,6 +25,12 @@ type ListProps = {
num: number,
/** 赠品主图 */
productImgUrl?: string
/** 活动商品id */
activityGoodsId?: number,
/** 优惠券id */
couponId?: number,
/** 优惠券名称 */
couponName?: string,
}
type RemindLayoutProps = {
......
src/pages/transaction/marketingAbility/components/listModalLayout/index.less 0 → 100644
View file @ cb286311
.marginBottom {
margin-bottom: 16px;
}
.collapse {
display: flex;
flex-direction: row;
.collapse_index {
height: 32px;
width: 32px;
background-color: #FAFBFC;
text-align: center;
line-height: 32px;
margin-right: 4px;
font-size: 14px;
color: #303133;
}
.collapse_item {
flex: 1;
.collapse_header {
padding: 0 8px;
height: 32px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background-color: #FAFBFC;
margin-bottom: 16px;
cursor: pointer;
}
.collapse_arrow {
margin-left: 8px;
color: #252D37;
font-size: 12px;
flex: 1;
}
.productLayout_title {
margin-top: 16px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 16px;
.productLayout_arrow {
flex: 1;
font-size: 12px;
color: #303133;
}
&::before {
content: '';
width: 2px;
height: 12px;
background-color: #00A98F;
margin-right: 6px;
}
}
.productLayout_contenxt {
// display: flex;
// flex-direction: row;
// flex-wrap: nowrap;
margin-bottom: 16px;
.productLayout_formItem {
width: 100%;
.productLayout_item {
border: 1px solid #F7F8FA;
padding: 8px;
cursor: pointer;
position: relative;
&:hover{
border-color: #00B37A;
}
.productLayout_item_img {
height: 80px;
width: 80px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.productLayout_item_title {
font-size: 12px;
color: #252D37;
}
.productLayout_item_price {
color: #91959B;
font-size: 12px;
span{
font-size: 14px;
color: #D32F2F;
}
}
.productLayout_item_info {
font-size: 12px;
color: #91959B;
}
}
}
}
.couponLayout_contenxt {
position: relative;
height: 100px;
width: 100%;
.couponLayout_item_left {
width: 144px;
height: 100%;
background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 3px, #3899FF 3px);
background-size: 15px 10px;
background-position: 1% 1px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
p {
font-size: 12px;
text-align: center;
color: #fff;
margin: 0;
span {
font-size: 24px;
}
}
&::before {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
box-sizing: border-box;
left: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
&::after {
background-color: #3899FF;
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 10px;
z-index: -1;
}
}
.couponLayout_item_right {
height: 100%;
position: relative;
border: 1px solid #EDEEEF;
border-radius: 0 4px 4px 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
font-size: 12px;
padding-left: 20px;
.couponLayout_item_right_type {
color: #007BFC;
padding: 2px 4px;
background-color: #E9F3FF;
width: fit-content;
}
.couponLayout_item_right_info {
font-size: 14px;
color: #252D37;
}
.couponLayout_item_right_date {
color: #91959B;
}
&::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
border: 1px solid #EDEEEF;
box-sizing: border-box;
right: -15px;
top: 37.5px;
z-index: 10;
background-color: #fff;
}
}
}
}
}
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/listModalLayout/index.tsx → src/pages/transaction/marketingAbility/components/listModalLayout/index.tsx
View file @ cb286311
......@@ -5,6 +5,7 @@ import CollapseLayout from './components/collapseLayout';
import { isArray, isEmpty } from 'lodash';
import ProductLayout from './components/productLayout';
import CollocationLayout from '../collocationLayout';
import CouponsLayout from '@/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout';
const layout: any = {
labelCol: { style: { width: "100px" } },
......@@ -177,7 +178,6 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
/** 选择搭配商品 */
const handleCollocation = (_idx: number) => {
const fields = [...dataSource];
form.resetFields()
fields.forEach((item, _index) => {
item.list.forEach((_item, __index) => {
form.setFieldsValue({
......@@ -234,6 +234,7 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
})
})
setDataSource(value);
console.log(remind.value)
}, [value])
return (
......@@ -286,8 +287,9 @@ const ListModalLayout: React.FC<ListModalLayoutProps> = (props: any) => {
</Form>
{/* 添加分组 */}
<Button type="dashed" block icon={<PlusOutlined />} onClick={handleAppend}>添加</Button>
{/* 商品弹框 */}
{/* 弹框: -> 商品 */}
<CollocationLayout
moda={remind.name === 'swapValue' ? 'radio' : 'checkbox'}
visible={tableModalVisible}
idNotInList={idNotInList}
shopIdList={shopIdList}
......
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/productListLayout/index.tsx
View file @ cb286311
......@@ -7,8 +7,8 @@ import { isEmpty } from 'lodash';
import { PublicApi } from '@/services/api';
import { PlusOutlined } from '@ant-design/icons';
import { EditableContext } from '@/pages/transaction/components/detailLayout/components/context';
import ListModalLayout from '../listModalLayout';
import CollocationLayout from '../collocationLayout';
import ListModalLayout from '@/pages/transaction/marketingAbility/components/listModalLayout';
import CollocationLayout from '@/pages/transaction/marketingAbility/components/collocationLayout';
import { remindLayout, RemindLayoutProps } from './remind';
/** 表格头 */
......
src/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/productListLayout/remind.ts
View file @ cb286311
export type RemindLayoutProps = {
/** name */
name?: string,
/** 商品类型 */
value?: number,
/** 区分选择商品的类型 */
type?: string,
/** 弹窗标题 */
modalTitle?: string,
/** 选择商品按钮名称 */
......@@ -18,6 +24,7 @@ export const remindLayout = (int, giveType?, giftType?) => {
case 6:
return {
name: 'giveValue',
value: giftType,
type: 'limitValue',
modalTitle: `设置赠品-${give}赠${gift}`,
buttonTitle: `添加赠送${gift}`,
......@@ -41,6 +48,7 @@ export const remindLayout = (int, giveType?, giftType?) => {
case 13: {
return {
name: 'swapValue',
value: 1,
type: 'limitValue',
modalTitle: `设置换购商品-${give}换购商品`,
buttonTitle: '添加换购商品',
......@@ -65,6 +73,7 @@ export const remindLayout = (int, giveType?, giftType?) => {
case 15:
return {
name: 'groupValue',
value: 1,
type: 'groupPrice',
modalTitle: '设置搭配商品',
buttonTitle: '选择搭配商品',
......
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/add.tsx
View file @ cb286311
import React, { useEffect, useState } from 'react';
import React, { Fragment, useEffect, useState } from 'react';
import { Form, Button } from 'antd';
import { history } from 'umi';
import { history, Prompt } from 'umi';
import { useEventEmitter } from '@umijs/hooks';
import { SaveOutlined } from '@ant-design/icons';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
......@@ -145,6 +145,7 @@ const AddedMarketing = () => {
}, [id])
return (
<Fragment>
<PeripheralLayout
detail='新增营销活动'
tabLink={[
......@@ -169,6 +170,11 @@ const AddedMarketing = () => {
<Form
form={form}
{...layout}
onValuesChange={() => {
if (!unsaved) {
setUnsaved(true)
}
}}
>
<BasicInfoLayout form={form} focus$={focus$} />
<RulesLayout form={form} focus$={focus$} />
......@@ -178,6 +184,8 @@ const AddedMarketing = () => {
</Form>
}
/>
<Prompt when={unsaved} message="您还有未保存的内容，是否确定要离开？" />
</Fragment>
);
}
export default AddedMarketing;
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/basicInfoLayout/index.tsx
View file @ cb286311
......@@ -87,6 +87,7 @@ const BasicInfoLayout: React.FC<BasicInfoProps> = (props: any) => {
<Form.Item
label="活动类型"
name="activityType"
initialValue={1}
rules={[{ required: true, message: '请输入活动名称' }]}
>
<Select onChange={handleChange}>
......
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout/index.less 0 → 100644
View file @ cb286311
.customsCheckbox {
display: flex;
align-items: center;
:global {
.ant-checkbox+span {
flex: 1;
margin-left: 20px;
}
}
}
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout/index.tsx 0 → 100644
View file @ cb286311
import React, { useEffect, useState } from 'react';
import { Drawer, Space, Form, Select, Input, Button, Row, Col, Checkbox, Empty } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
import CouponItem from '@/pages/transaction/marketingAbility/components/couponItem';
import styles from './index.less';
interface CouponsLayoutProps {
/** 显示 */
visible?: boolean,
/** 关闭 */
onClose?: () => void,
/** 提交 */
onSubmit?: (e: any) => void,
}
const CouponsLayout: React.FC<CouponsLayoutProps> = (props: any) => {
const { visible, onClose, onSubmit } = props;
const [form] = Form.useForm();
const [state, setState] = useState({
filterSearch: false
})
const [params, setParams] = useState({
current: 1,
pageSize: 10,
})
const [couponList, setCouponList] = useState<any[]>([]);
const [chekedId, setCheckedId] = useState<number[]>([]); // 已选择的优惠券
const [couponsList, setCouponsList] = useState<any[]>([]);
const changeFilterVisible = () => {
setState({
filterSearch: !state.filterSearch,
});
};
// 提交搜索
const handleSubmit = async () => {
await form.validateFields().then(res => {
PublicApi.getMarketingMerchantActivityDetailGoodsCouponSelect({ ...res, ...params }).then(res => {
if (res.code !== 1000) {
return
}
const { data } = res.data
setCouponList(data)
})
})
}
// 重置
const handleResetForm = () => {
form.resetFields();
handleSubmit()
}
useEffect(() => {
if (visible) {
handleSubmit()
}
}, [visible])
const handleOnOk = () => {
onSubmit(couponsList)
}
const renderFooter = () => {
return (
<div style={{ textAlign: 'right' }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>
取消
</Button>
<Button onClick={handleOnOk} type="primary">
提交
</Button>
</div>
)
}
const _setCheckList = (_e, item: any) => {
const ids = [...chekedId]
if (!ids.includes(_e)) {
setCouponsList([...couponsList, item])
setCheckedId([...chekedId, _e])
} else {
setCouponsList(couponsList.filter(_item => _item.couponId !== _e))
setCheckedId(ids.filter(_item => _item !== _e));
}
}
return (
<Drawer
width={630}
title='选择优惠券'
visible={visible}
onClose={onClose}
footer={renderFooter()}
>
<Form
form={form}
onFinish={handleSubmit}
>
{/* 头部搜索 */}
<Space size={20} style={{ marginBottom: '24px' }}>
<Form.Item
name='type'
style={{ marginBottom: 0 }}
>
<Select
style={{ width: '160px' }}
placeholder='优惠劵类型'
options={[
{ label: '通用优惠券', value: 1 },
{ label: '品类优惠券', value: 2 },
{ label: '品牌优惠券', value: 3 },
{ label: '商品优惠券', value: 4 },
]}
/>
</Form.Item>
<Form.Item
name='name'
style={{ marginBottom: 0 }}
>
<Input.Search onSearch={handleSubmit} placeholder='优惠劵名称' />
</Form.Item>
<Button onClick={changeFilterVisible}>高级筛选 <CaretDownOutlined rotate={state.filterSearch ? 180 : 0} /></Button>
<Button onClick={handleResetForm}>重置</Button>
</Space>
{state.filterSearch && (
<Space size={20} style={{ marginBottom: '24px' }}>
<Form.Item
name='id'
style={{ marginBottom: 0 }}
>
<Input style={{ width: '160px' }} placeholder='优惠劵ID' />
</Form.Item>
<Button type='primary' htmlType="submit">查询</Button>
</Space>
)}
{/* 优惠券列表 */}
{couponList.length === 0 ?
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /> : (
<Row>
{couponList.map((item: any, index: number) => {
return (
<Col span={22} key={`Col_${index}`} style={{ marginBottom: 24 }}>
<Checkbox checked={chekedId.includes(item.id)} value={item.id} className={styles.customsCheckbox} onChange={(_e) => _setCheckList(_e.target.value, item)}>
<CouponItem
fieldListData={item}
/>
</Checkbox>
</Col>
)
})}
</Row>
)}
</Form>
</Drawer>
)
}
export default CouponsLayout;
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/couponsLayout/schema.ts 0 → 100644
View file @ cb286311
import { ISchema } from "@formily/antd";
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const schema: ISchema = {
type: 'object',
properties: {
megalayout: {
type: "object",
"x-component": "mega-layout",
"x-component-props": {
inline: true
},
properties: {
type: {
type: 'string',
'x-component-props': {
placeholder: '优惠劵类型',
style: {
width: 160,
},
},
enum: [],
},
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '优惠劵名称',
align: "flex-left",
},
},
}
},
[FORM_FILTER_PATH]: {
type: "object",
"x-component": "flex-layout",
"x-component-props": {
rowStyle: {
justifyContent: "flex-start",
flexWrap: "nowrap"
},
colStyle: {//改变间隔
marginRight: 20
}
},
properties: {
PRO_LAYOUT: {
type: "object",
"x-component": "mega-layout",
"x-mega-props": {
span: 5
},
"x-component-props": {
inline: true
},
properties: {
activityName: {
type: 'string',
'x-component-props': {
placeholder: '活动名称',
style: {
width: 160,
},
},
},
}
},
sumbit: {
"x-component": "Submit",
"x-mega-props": {
span: 1
},
"x-component-props": {
children: "查询"
}
}
}
}
}
}
src/pages/transaction/marketingAbility/selfManagement/readySubmitExamine/components/productListLayout/index.tsx
View file @ cb286311
......@@ -5,9 +5,9 @@ import { EventEmitter } from '@umijs/hooks/lib/useEventEmitter'
import CardLayout from '../card';
import { PlusOutlined } from '@ant-design/icons';
import { isEmpty } from 'lodash';
import CollocationLayout from '@/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/collocationLayout';
import { PublicApi } from '@/services/api';
import ListModalLayout from '@/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/listModalLayout';
import ListModalLayout from '@/pages/transaction/marketingAbility/components/listModalLayout';
import CollocationLayout from '@/pages/transaction/marketingAbility/components/collocationLayout';
import { remindLayout, RemindLayoutProps } from '@/pages/transaction/marketingAbility/paltformSign/readySubmitExamine/components/productListLayout/remind';
type optionProps = {
......@@ -187,7 +187,7 @@ const ProductListLayout: React.FC<ProductListProps> = (props: any) => {
onConfirm={handleSelectActiveProducts}
/>
{/* 设置搭配商品 */}
{!isEmpty(remind) && (
{(!isEmpty(remind) && remind.value !== 1) && (
<ListModalLayout
title={remind.modalTitle}
remind={remind}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment