Skip to content

J
jinfa-admin
Commit a55d2a37 authored by Bill's avatar Bill
Browse files
Options

feat: 装修活动页对接商品

parent 771cf383
Hide whitespace changes
Inline Side-by-side
Showing with 332 additions and 135 deletions
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/common/configs/index.tsx
View file @ a55d2a37
......@@ -71,31 +71,24 @@ const activityContainer: PageConfigType = {
props: {
title: '活动推荐',
},
childNodes: ['3-1', "3-2"],
childNodes: ['3-1'],
},
"3-1": {
dataIndex: 'hotItem',
componentName: 'CommodityList.Item',
title: '活动推荐商品',
props: {
name: "轩妈家蛋黄酥6枚 雪媚娘糕点点心网红零食休闲小吃食品早餐下午茶",
image: "https://img2.baidu.com/it/u=4073850171,2776482768&fm=26&fmt=auto&gp=0.jpg",
mode:"horizonal",
discountPrice:289.28,
tags:[{
type: 'purple',
// icon: <TagOutlined />,
name: "满300减20"
}],
buyBtn:false,
originalPrice:300,
},
addBtnText: '添加'
},
"3-2": {
componentName: 'CommodityList.Item',
title: '活动推荐商品',
props: {
empty: "true",
// name: "轩妈家蛋黄酥6枚 雪媚娘糕点点心网红零食休闲小吃食品早餐下午茶",
// image: "https://img2.baidu.com/it/u=4073850171,2776482768&fm=26&fmt=auto&gp=0.jpg",
// mode:"horizonal",
// discountPrice:289.28,
// tags:[{
// type: 'purple',
// // icon: <TagOutlined />,
// name: "满300减20"
// }],
// buyBtn:false,
// originalPrice:300,
},
addBtnText: '添加'
},
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/common/mock/index.json
View file @ a55d2a37
......@@ -22,7 +22,7 @@
"props": {
"theme":0,
"visible": 1,
"children": [19, 24]
"children": [19]
}
},
"specialOffer":{
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ActivityAreaSetting/activityItem.tsx
View file @ a55d2a37
......@@ -10,11 +10,12 @@ interface Iprops {
statusName: string,
isActive: boolean,
onSelect?: ( (id: number) => void) | null,
hasChildSelected?: boolean
hasChildSelected?: boolean,
activityImage: string,
}
const ActivityItem: React.FC<Iprops> = (props: Iprops) => {
const { id, activityName, activityTypeName, statusName, isActive = false, onSelect = null, hasChildSelected = false } = props;
const { id, activityName, activityTypeName, statusName, isActive = false, onSelect = null, hasChildSelected = false, activityImage } = props;
const triggerSelect = () => {
onSelect?.(id);
......@@ -27,7 +28,7 @@ const ActivityItem: React.FC<Iprops> = (props: Iprops) => {
return (
<div onClick={triggerSelect} className={mergeClasses}>
<img className={styles.img}/>
<img className={styles.img} src={activityImage}/>
<div className={styles.info}>
<div className={styles.titleContainer}>
<span className={styles.title}>{activityName}</span>
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ActivityAreaSetting/activityProductDrawer.tsx
View file @ a55d2a37
......@@ -20,7 +20,9 @@ interface Iprops {
onCancel: (() => void) | null,
fetchData?: ((params: any) => Promise<any>) | null,
onOk?: ((data: any) => void) | null,
products: any[]
products: any[],
activityImage: string,
mode?: 'radio' | 'checked',
}
type SubmitType = {
......@@ -85,7 +87,7 @@ const columns: ColumnsType<GetMarketingPlatformActivityListAdornResponseDetail["
const ActivityProductDrawer: React.FC<Iprops> = (props: Iprops) => {
const { visible, onCancel, fetchData = null, onOk, products = [] } = props;
const { visible, onCancel, fetchData = null, onOk, products = [], activityImage, mode = 'checked' } = props;
const [current, setPage] = useState<number>(1);
const [currentPageSize, setPageSize] = useState<number>(10);
const [dataSource, setDataSource] = useState<GetMarketingPlatformActivityListAdornResponseDetail[]>([]);
......@@ -95,7 +97,7 @@ const ActivityProductDrawer: React.FC<Iprops> = (props: Iprops) => {
const [checkedProduct, setCheckedProduct] = useState<GetMarketingPlatformActivityListAdornResponseDetail["productList"]>([]);
const [loading, setLoading] = useState<boolean>(false);
const selectedRowKeys = useMemo(() => checkedProduct.map((_item) => `${_item.activityId!}-${_item.id!}`), [checkedProduct])
const selectedRowKeys = useMemo(() => checkedProduct.map((_item) => `${_item.activityId!}-${_item.id!}`), [checkedProduct]);
const fetchList = useCallback(async (params: any) => {
if (fetchData === null) {
......@@ -153,32 +155,36 @@ const ActivityProductDrawer: React.FC<Iprops> = (props: Iprops) => {
};
const handleRowSelect = (record: GetMarketingPlatformActivityListAdornResponseDetail["productList"][0], selected: boolean, selectedRows: GetMarketingPlatformActivityListAdornResponseDetail["productList"]) => {
if (selected) {
setCheckedProduct((prev) => prev.concat(record));
} else {
const key = `${record.activityId!}-${record.id!}`;
setCheckedProduct((prev) => prev.filter((_item) => {
const tempKey = `${_item.activityId}-${_item.id}`;
return key !== tempKey;
}));
if (mode === 'checked') {
if (selected) {
setCheckedProduct((prev) => prev.concat(record));
} else {
const key = `${record.activityId!}-${record.id!}`;
setCheckedProduct((prev) => prev.filter((_item) => {
const tempKey = `${_item.activityId}-${_item.id}`;
return key !== tempKey;
}));
}
return;
}
setCheckedProduct([record]);
};
const rowSelection = {
type: 'checkbox',
type: mode,
onSelect: handleRowSelect,
selectedRowKeys: selectedRowKeys
};
const drawerStyle = { background: '#FAFBFC' };
return (
<Drawer
onClose={handleCancel}
headerStyle={{
background: '#FAFBFC'
}}
bodyStyle={{
background: '#FAFBFC'
}}
headerStyle={drawerStyle}
bodyStyle={drawerStyle}
footerStyle={drawerStyle}
title="选择活动商品"
visible={visible}
width={950}
......@@ -191,7 +197,6 @@ const ActivityProductDrawer: React.FC<Iprops> = (props: Iprops) => {
</div>
}
>
<Spin spinning={loading}>
<div className={styles.container}>
<div className={styles.form}>
<NiceForm
......@@ -204,7 +209,6 @@ const ActivityProductDrawer: React.FC<Iprops> = (props: Iprops) => {
}}
></NiceForm>
</div>
<div className={styles.table}>
{
dataSource?.map((_item) => {
......@@ -221,6 +225,7 @@ const ActivityProductDrawer: React.FC<Iprops> = (props: Iprops) => {
statusName={outerStatusName}
activityTypeName={activityTypeName}
hasChildSelected={hasChildSelected}
activityImage={activityImage}
/>
</div>
);
......@@ -231,13 +236,13 @@ const ActivityProductDrawer: React.FC<Iprops> = (props: Iprops) => {
<Table
rowSelection={rowSelection as any}
rowKey={(_record) => `${_record.activityId!}-${_record.id!}` }
loading={loading}
columns={columns} dataSource={selectedActivityProductList}></Table>
</div>
<div className={styles.pagination}>
<Pagination pageSize={currentPageSize} current={current} showQuickJumper total={totalCount} onChange={onChange}/>
</div>
</div>
</Spin>
</Drawer>
);
};
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ActivityAreaSetting/index.less
View file @ a55d2a37
......@@ -16,7 +16,7 @@
padding: 8px;
background: #f9f9f9;
box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
margin-bottom: 8px;
margin-bottom: 16px;
border-radius: 8px;
}
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ActivityAreaSetting/index.tsx
View file @ a55d2a37
import React, { useEffect, useState } from 'react';
import { Tabs , Input, Button, Select } from 'antd';
import { useEventEmitter, useToggle } from '@umijs/hooks';
import React, { useEffect, useMemo, useState } from 'react';
import { Tabs , Input, Button, Select, message } from 'antd';
import { useToggle } from '@umijs/hooks';
import { PublicApi } from '@/services/api';
import { GetMarketingPlatformActivityListAdornRequest } from '@/services/MaketingV2Api';
import { GetMarketingPlatformActivityListAdornRequest, GetMarketingPlatformActivityListAdornResponseDetail } from '@/services/MaketingV2Api';
import _group from 'lodash/groupBy';
import { changeProps } from '@lingxi-disign/core';
import { changeProps , PageConfigType, SelectedInfoType, STATE_PROPS, } from '@lingxi-disign/core';
import { useSelector } from '@lingxi-disign/react';
import styles from './index.less';
import ActivityProductDrawer from './activityProductDrawer';
import ThemeItem from './themeItem';
......@@ -20,19 +21,26 @@ interface Iprops {
onCancel: null | (() => void),
products: any[],
title?: string,
isWithoutLabels: boolean,
withTypeSelect: boolean,
}
type SettingPanelType = {
selectedInfo: SelectedInfoType,
pageConfig: PageConfigType,
}
const defaultProduct = [];
const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
const { visible, onCancel, products = defaultProduct, ...rest } = props;
const { pageConfig } = useSelector<SettingPanelType, STATE_PROPS>(['pageConfig']);
const { visible, onCancel, products = defaultProduct, isWithoutLabels = false, withTypeSelect = false, ...rest } = props;
const { state: productVisible, toggle: setProductVisible } = useToggle();
const [listType, setListType] = useState<{label: string, value: number}[]>([]);
const [selectedType, setSelectedType] = useState<number>(0);
const [innerProducts, setInnerProducts] = useState<any[]>(products);
const [innerProducts, setInnerProducts] = useState<GetMarketingPlatformActivityListAdornResponseDetail["productList"]>(products);
const [innerTitle, setInnerTitle] = useState<string>(rest?.title || '');
console.log("products", products, rest);
const activityImage = useMemo(() => pageConfig[1]?.props?.imageUrl, [pageConfig]);
const fetchData = async (params: GetMarketingPlatformActivityListAdornRequest) => {
const common = {
......@@ -88,6 +96,11 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
});
};
const onRemove = (data: { id: number, activityId: number }) => {
const newData = innerProducts.filter((_item) => _item.activityId !== data.activityId && _item.id !== data.id);
setInnerProducts(newData);
};
return (
<>
<Drawer header={<div />} visible={visible} onCancel={onCancel} onSubmit={onConfirm}>
......@@ -98,24 +111,39 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
<span className={styles.label}>名称</span>
<Input value={innerTitle} />
</div>
<div className={styles.name}>
<span className={styles.label}>活动类型</span>
<Select style={{width: '100%'}} value={selectedType} onChange={onSelectedChange}>
{
listType.map((_item) => (
<Option value={_item.value} key={_item.value}>{_item.label}</Option>
))
}
</Select>
</div>
{
withTypeSelect && (
<div className={styles.name}>
<span className={styles.label}>活动类型</span>
<Select style={{width: '100%'}} value={selectedType} onChange={onSelectedChange}>
{
listType.map((_item) => (
<Option value={_item.value} key={_item.value}>{_item.label}</Option>
))
}
</Select>
</div>
) || null
}
<Button onClick={() => setProductVisible(true)}>选择商品</Button>
<div className={styles.list}>
<span className={styles.label}>商品</span>
{
innerProducts?.map((_item) => {
return (
<div key={`${_item.activityId}-${_item.id}`} className={styles.productItem}>
<Product />
<div key={`${_item.activityId}-${_item!.id}`} className={styles.productItem}>
<Product
productName={_item.productName!}
productImgUrl={_item.productImgUrl!}
id={_item.id!}
activityId={_item.activityId!}
price={_item.price!}
activityList={_item.activityList as any}
isWithoutLabels={isWithoutLabels}
activityImage={activityImage}
// onEdit={onEdlt}
onRemove={onRemove}
/>
</div>
);
})
......@@ -123,7 +151,7 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
</div>
</div>
</TabPane>
<TabPane tab="样式" key="2">
{/* <TabPane tab="样式" key="2">
<div className={styles.theme}>
<div className={styles.themeItem}>
<ThemeItem />
......@@ -132,9 +160,16 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
<ThemeItem />
</div>
</div>
</TabPane>
</TabPane> */}
</Tabs>
<ActivityProductDrawer products={products} onOk={onOk} fetchData={fetchData} visible={productVisible} onCancel={() => setProductVisible(false)} />
<ActivityProductDrawer
activityImage={activityImage}
products={innerProducts}
onOk={onOk}
fetchData={fetchData}
visible={productVisible}
onCancel={() => setProductVisible(false)}
/>
</Drawer>
</>
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/CouponSelect/index.less
View file @ a55d2a37
.couponImage {
background-color: #3899FF;
width: 40px;
height: 40px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.image {
width: 18px;
height: 18px;
}
}
.platform {
background-color: #13BC9D;
}
.wrap {
......@@ -41,3 +55,8 @@
margin-bottom: 4px;
margin-left: 4px;
}
.belong {
color: #909399;
font-size: 12px;
}
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/CouponSelect/index.tsx
View file @ a55d2a37
......@@ -6,9 +6,14 @@ import { Space } from 'antd';
import { priceFormat } from '@/utils/numberFomat';
import { PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons';
import moment from 'moment';
import StatusTag from '@/components/StatusTag';
import member from '@/asserts/member.png';
import cube from '@/asserts/cube.png';
import cx from 'classnames';
import TableModal from './tableModal';
import styles from './index.less';
interface Iprops {
visible: boolean,
onCancel: () => void,
......@@ -34,9 +39,14 @@ const CouponSelect: React.FC<Iprops> = React.forwardRef((props: Iprops, couponRe
title: '优惠券信息',
dataIndex: 'couponInfo',
render: (_text, _record) => {
/** 这里判断有点问题@tofix 没字段可以判断了 */
const isPlatform = _record.belongName === '平台';
return (
<Space align="center">
<img className={styles.couponImage} />
<div className={cx(styles.couponImage, { [styles.platform]: isPlatform })}>
<img className={styles.image} src={isPlatform ? cube : member} />
</div>
<div className={styles.wrap}>
<div className={styles.title}>{_record.name}</div>
<div className={styles.id}>ID: {_record.id}</div>
......@@ -95,7 +105,16 @@ const CouponSelect: React.FC<Iprops> = React.forwardRef((props: Iprops, couponRe
},
{
title: '所属',
dataIndex: 'belong'
dataIndex: 'belong',
render: (_text, _record) => {
const isPlatform = _record.belongName === '平台';
return (
<Space direction="vertical">
<StatusTag title={isPlatform ? '平台' : '商家'} type={isPlatform ? 'success' : 'primary'} />
<div className={styles.belong}>{_record.belongName}</div>
</Space>
);
}
}
];
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/EditPanel/index.tsx
View file @ a55d2a37
......@@ -31,8 +31,8 @@ const ComponentsMap = {
const EditPanel = () => {
const { selectedInfo, pageConfig } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'pageConfig']);
const {state: visible, toggle: setVisible } = useToggle(false);
// const { dataSource } = use
console.log(selectedInfo, pageConfig );
const componentType: any = selectedInfo?.propsConfig?.componentType?.type || '';
const Component = componentType && ComponentsMap[componentType as unknown as "Advertisement"];
useEffect(() => {
if (selectedInfo) {
......@@ -44,24 +44,33 @@ const EditPanel = () => {
setVisible(false);
};
const withoutLabel = ["hot", "hotItem"];
const otherProps = (selectedInfo as any)?.dataIndex && withoutLabel.includes((selectedInfo as any)?.dataIndex) ? { isWithoutLabels: true } : {};
const withTypeSelect = ["specialOffer"];
const wityTypeSelectProps = (selectedInfo as any)?.dataIndex && withTypeSelect.includes((selectedInfo as any)?.dataIndex) ? { withTypeSelect: true } : {};
const dataProps = {
visible: visible,
onCancel: handleOncancel,
...selectedInfo?.props || {},
...otherProps,
...wityTypeSelectProps
};
const componentType: any = selectedInfo?.propsConfig?.componentType?.type || '';
const Component = componentType && ComponentsMap[componentType as unknown as "Advertisement"];
/** 这里分开写是因为需要吧props， 方便使用useEffect 更新内部值 */
if (!Component) {
return null;
}
if(componentType === 'CouponSetting') {
if (componentType === 'CouponSetting') {
return <Component visible={visible} onCancel={handleOncancel} value={selectedInfo?.props} />;
}
if (componentType === 'ProductPanel') {
return <Component visible={visible} onCancel={handleOncancel} value={selectedInfo?.props} {...otherProps} />;
}
return (
Component && <Component {...dataProps} /> || null
<Component {...dataProps} />
);
};
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/Layouts/CommodityList/index.tsx
View file @ a55d2a37
......@@ -29,6 +29,11 @@ const CommodityList: React.FC<Iprops> & { Item: typeof CommodityItem, CommodityT
const { children, className, title, theme, ...other } = props;
const classNameStr = cx(styles.recommand, className);
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState } = other as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState,
};
const render2Columns = () => {
return (
<div className={styles.twoColumns}>
......@@ -64,7 +69,7 @@ const CommodityList: React.FC<Iprops> & { Item: typeof CommodityItem, CommodityT
};
return (
<div className={classNameStr} {...other}>
<div className={classNameStr} {...divProps}>
<span className={styles.title}>{title}</span>
<div className={styles.container}>
{
......@@ -86,9 +91,24 @@ const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
const classNameStr = cx(className, styles.item, customizeClassName);
const rest = _omit(other, ["draggable", "getOperateState", "onClick", "onDrag", "onDragEnd", "onDragEnter", "onDragStart", "onMouseOver"]);
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState } = other as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState,
};
const { productName: name, productImgUrl: image, mode = "horizontal", price: originalPrice, discount, ...otherRestProps } = rest as any;
return (
<div className={classNameStr} {...other}>
<Commodity {...rest} />
<div className={classNameStr} {...divProps}>
<Commodity
name={name}
image={image}
mode={mode}
originalPrice={originalPrice}
discountPrice={discount}
{...otherRestProps}
/>
</div>
);
};
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ProductPanel/product.less
View file @ a55d2a37
......@@ -74,7 +74,7 @@
.activity {
display: flex;
flex-direction: column;
margin: 16px 0px;
margin: 16px 0px 0 0;
.activityItem {
display: flex;
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ProductPanel/product.tsx
View file @ a55d2a37
......@@ -4,16 +4,30 @@ import { CloseOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-
import { Input, Tag, Space } from 'antd';
// eslint-disable-next-line @typescript-eslint/camelcase
import { unstable_batchedUpdates } from 'react-dom';
import { priceFormat } from '@/utils/numberFomat';
import styles from './product.less';
interface Iprops {
onEdit?: (() => void) | null,
onRemove?: (() => void) | null
onEdit?: ((data: { id: number, activityId: number}) => void) | null,
onRemove?: ((data: { id: number, activityId: number}) => void) | null,
productName: string,
productImgUrl: string,
id: number
activityId: number
price: number
activityList: {
name: string,
id: number,
type: number
}[],
/** 是否有标签 */
isWithoutLabels: boolean,
activityImage: string,
}
const Product: React.FC<Iprops> = (props: Iprops) => {
const { onEdit, onRemove } = props;
const { onEdit, onRemove, productName, productImgUrl, id, activityId, price, activityList, isWithoutLabels, activityImage } = props;
const [inputVisible, setInputVisible] = useState<boolean>(false);
const [inputValue, setInputValue] = useState<string>("");
const inputRef = useRef<(Input) | null>(null);
......@@ -48,20 +62,69 @@ const Product: React.FC<Iprops> = (props: Iprops) => {
};
const handleEdit = () => {
onEdit?.();
onEdit?.({
id: id,
activityId: activityId
});
};
const handleRemove = () => {
onRemove?.();
onRemove?.({
id: id,
activityId: activityId
});
};
const renderLabel = () => {
return (
<div className={styles.tagContainer}>
<div className={styles.headerName}>活动标签</div>
<div className={styles.tag}>
{
tags.map((_item) => {
return (
<div className={styles.tagItem} key={_item}>
<StatusTag type="danger" title={_item}></StatusTag>
<div><CloseOutlined style={{color: '#EF3346'}} /></div>
</div>
);
})
}
{inputVisible && (
<Input
ref={inputRef}
type="text"
size="small"
className={styles.tagInput}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag className={styles.addTag} onClick={showInput}>
<PlusOutlined /> 新增标签
</Tag>
)}
</div>
</div>
);
};
return (
<div className={styles.section}>
<div className={styles.actions}>
<Space>
<div className={styles.iconContainer} onClick={handleEdit}>
<EditOutlined className={styles.icon} />
</div>
{
onEdit && (
<div className={styles.iconContainer} onClick={handleEdit}>
<EditOutlined className={styles.icon} />
</div>
)
}
<div className={styles.iconContainer} onClick={handleRemove}>
<DeleteOutlined className={styles.icon} />
</div>
......@@ -69,60 +132,30 @@ const Product: React.FC<Iprops> = (props: Iprops) => {
</div>
<div className={styles.container}>
<div className={styles.product}>
<img className={styles.img} />
<img className={styles.img} src={productImgUrl} />
<div className={styles.info}>
<span className={styles.name}>新鲜冷冻漂汤12斤齿轮花海鲜商用鱿鱼花新鲜冷冻漂汤12斤齿轮花海鲜商用鱿鱼花新鲜冷冻漂汤12斤新…</span>
<span className={styles.price}>￥179.00</span>
<span className={styles.name}>{productName}</span>
<span className={styles.price}>￥{priceFormat(price)}</span>
</div>
</div>
<div className={styles.activity}>
<div className={styles.headerName}>商品活动</div>
{
[1, 2].map((_item) => {
activityList?.map((_item) => {
return (
<div className={styles.activityItem} key={_item}>
<img className={styles.activityImg} />
<span className={styles.activityName}>双11促销活动页-APP</span>
<div className={styles.activityItem} key={_item.id}>
<img className={styles.activityImg} src={activityImage} />
<span className={styles.activityName}>{_item.name}</span>
<StatusTag type="danger" title="折扣促销"></StatusTag>
</div>
);
})
}
</div>
<div className={styles.tagContainer}>
<div className={styles.headerName}>活动标签</div>
<div className={styles.tag}>
{
tags.map((_item) => {
return (
<div className={styles.tagItem} key={_item}>
<StatusTag type="danger" title={_item}></StatusTag>
<div><CloseOutlined style={{color: '#EF3346'}} /></div>
</div>
);
})
}
{inputVisible && (
<Input
ref={inputRef}
type="text"
size="small"
className={styles.tagInput}
value={inputValue}
onChange={handleInputChange}
onBlur={handleInputConfirm}
onPressEnter={handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag className={styles.addTag} onClick={showInput}>
<PlusOutlined /> 新增标签
</Tag>
)}
{
!isWithoutLabels && renderLabel()
}
</div>
</div>
</div>
</div>
);
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ProductPanel/productPanel.tsx
View file @ a55d2a37
import React from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { Space } from 'antd';
import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useSelector } from '@lingxi-disign/react';
import { useToggle } from '@umijs/hooks';
import { GetMarketingPlatformActivityListAdornRequest } from '@/services/MaketingV2Api';
import { PublicApi } from '@/services/api';
import { changeProps , PageConfigType, SelectedInfoType, STATE_PROPS, } from '@lingxi-disign/core';
import styles from './productPanel.less';
import Product from './product';
import Drawer from '../Drawer';
import ActivityProductDrawer from '../ActivityAreaSetting/activityProductDrawer';
interface Iprops {
visible: boolean,
onCancel?: null | (() => void)
value: any,
isWithoutLabels: boolean
}
const ProductPanel: React.FC<Iprops> = (props: Iprops) => {
const { visible, onCancel } = props;
const { visible, onCancel, value, isWithoutLabels } = props;
const { pageConfig } = useSelector<any, any>(['pageConfig']);
const { state: productVisible, toggle: setProductVisible } = useToggle();
const [innerProducts, setInnerProducts] = useState<any>(null);
const activityImage = useMemo(() => pageConfig[1]?.props?.imageUrl, [pageConfig]);
const cacheProductList = useMemo(() => [innerProducts], [innerProducts]);
const onEdit = () => {
setProductVisible(true);
};
useEffect(() => {
if (!visible) {
return;
}
setInnerProducts(value);
}, [value, visible]);
const fetchData = async (params: GetMarketingPlatformActivityListAdornRequest) => {
/** @tofix shopId */
const common = {
...params,
shopId: 1
};
const isWithActivityType = common;
return await PublicApi.getMarketingPlatformActivityListAdorn(isWithActivityType as any);
};
const onOk = (data: any) => {
const target = data[0];
if (target.activityId !== innerProducts.activityId || target.id !== innerProducts.id) {
setInnerProducts(data[0]);
}
setProductVisible(false);
};
const handleSubmit = () => {
changeProps({
props: innerProducts
});
};
return (
<Drawer title="商品设置" visible={visible} onCancel={onCancel}>
<Drawer title="商品设置" visible={visible} onCancel={onCancel} onSubmit={handleSubmit}>
<div className={styles.container}>
<div className={styles.product}>
<Product />
<Product
activityImage={activityImage}
onEdit={onEdit}
isWithoutLabels={isWithoutLabels}
{...innerProducts}
/>
</div>
</div>
<ActivityProductDrawer
activityImage={activityImage}
products={cacheProductList}
onOk={onOk}
fetchData={fetchData}
visible={productVisible}
onCancel={() => setProductVisible(false)}
mode="radio"
/>
</Drawer>
);
};
......
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