Commit ed05a0f5 authored by XieZhiXiong's avatar XieZhiXiong
parents 62398a19 a9ae6d06
......@@ -116,7 +116,7 @@ const WrapCommodityList = {
}
};
/** 组合出校 */
/** 组合促销 */
const Combination = {
Combination: {
propsConfig: {}
......@@ -126,6 +126,16 @@ const Combination = {
}
}
/** 热门推荐 */
const CommodityWithProcess = {
CommodityWithProcess: {
propsConfig: {}
},
'CommodityWithProcess.Item': {
propsConfig: {}
}
}
const MallLayout = {
propsConfig: {},
}
......@@ -147,6 +157,7 @@ export default {
View,
HeaderNav,
CustomizeTabs,
...CommodityWithProcess,
...Coupon,
...MarketingCard,
...CommodityList,
......
......@@ -65,7 +65,7 @@ const formatData = {
const COMPONENT_NAME = {
top: 'Advertisement',
coupon: 'Coupon',
hot: "CommodityList",
hot: "CommodityWithProcess",
plummet: "CommodityList",
discount: "CommodityList",
fullQuantitySub: "CommodityList",
......@@ -90,7 +90,7 @@ const COMPONENT_NAME = {
/** key 对应子节点ComponentName */
const CHILD_COMPONENT_NAME = {
coupon: 'Coupon.Item',
hot: "CommodityList.Item",
hot: "CommodityWithProcess.Item",
plummet: "CommodityList.Item",
discount: "CommodityList.Item",
fullQuantitySub: "CommodityList.Item",
......
......@@ -4,6 +4,7 @@ import { SimpleCommodity, CustomizeTag } from '@linkseeks/design-ui';
import cx from 'classnames';
import { PlusOutlined } from '@ant-design/icons';
import omit from 'lodash/omit'
interface Iprops {
children,
......@@ -17,6 +18,7 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props:
const { children, className, title, theme, visible = true, ...other } = props;
const classNameStr = cx(styles.combiantion, className, { [styles.hide]: !visible });
const omitGetOperateState = omit(other, 'getOperateState')
// const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState } = other as any;
const count = React.Children.count(children);
const renderChildren = () => {
......@@ -35,7 +37,7 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props:
};
return (
<div className={classNameStr} {...other}>
<div className={classNameStr} {...omitGetOperateState}>
<p className={styles.title}>{title}</p>
<div className={styles.container}>
<div className={styles['container-title']}>以下商品认选2件,只需800元</div>
......
......@@ -96,7 +96,6 @@ interface Iprops {
const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
// const intl = useIntl();
const { className, customizeClassName, ...other } = props;
const classNameStr = cx(styles.item, customizeClassName);
const rest = omit(other, ["draggable", "getOperateState", "onClick", "onDrag", "onDragEnd", "onDragEnter", "onDragStart", "onMouseOver"]);
......@@ -106,22 +105,32 @@ const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver,
};
const { productName: name, productImgUrl: image, mode = "horizontal", price: originalPrice, discount, activityPrice, label, ...otherRestProps } = rest as any;
const withLabel = label ? {tags: [label]} : {};
const {
productName: name, productImgUrl: image, mode = "horizontal",
price: originalPrice,
discount,
activityPrice,
activityList,
activityId,
plummetPrice,
...otherRestProps
} = rest as any;
const activityLabel = activityList?.find((_item) => _item.id === activityId);
const withLabel = activityLabel && activityLabel.label ? {tags: [activityLabel.label]} : {};
const horizontalData = {
name,
image,
mode,
...withLabel,
originalPrice: originalPrice,
discountPrice: discount || activityPrice
discountPrice: discount || activityPrice || plummetPrice
};
const verticalData = {
name,
image,
mode,
discountPrice: discount || activityPrice,
discountPrice: discount || activityPrice || plummetPrice,
buyBtn: false,
...withLabel,
sold: 0
......@@ -200,7 +209,7 @@ const CommodityTab: React.FC<any> = (props) => {
footer={<div></div>}
tags={[intl.formatMessage({ id: 'activityPage.fill300remove20' })]}
style={{padding: '0'}}
></Commodity>
/>
</div>
);
})
......
.recommand {
padding: 0 8px;
margin-top: 24px;
.title {
color: #fff;
font-size: 20px;
margin-bottom: 12px;
display: block;
line-height: 28px;
margin-bottom: 8px;
}
}
.hide {
display: none;
}
.item {
margin-bottom: 8px;
}
import React from 'react';
import { Commodity, Progress } from '@linkseeks/design-ui';
import styles from './index.less';
import classNames from 'classnames';
interface IChildprops {
className: string,
onClick: () => void,
onDrag: () => void,
onDragEnd: () => void,
onDragEnter: () => void,
onDragStart: () => void,
onMouseOver: () => void,
draggable?: boolean,
getOperateState: any,
productImgUrl?: string,
productName?: string,
productId?: number,
id?: number,
price?: number,
activityPrice?: number,
}
interface Iprops {
className: string,
children: React.ReactNode,
title: string,
theme: 0 | 1 | 2,
visible: boolean,
}
const CommodityWithProcess: React.FC<Iprops> & { Item: typeof Item} = (props: Iprops) => {
const { children, className, title, theme, visible = true, ...other } = props;
const classNameStr = classNames(styles.recommand, className, { [styles.hide]: !visible });
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState } = other as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver,
};
const renderChild = () => {
return (
<div>
{
React.Children.map(children, (_child: any) => {
if (_child === null) {
return null;
}
return React.cloneElement(_child, {..._child.props});
})
}
</div>
);
};
return (
<div className={classNameStr} {...divProps}>
<span className={styles.title}>{title}</span>
<div className={styles.container}>
{
renderChild()
}
</div>
</div>
)
}
const Item: React.FC<IChildprops> = (props: IChildprops) => {
const { className, onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, ...other } = props;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver,
};
return (
<div className={styles.item}>
<div {...divProps} className={className} style={{height: '100%'}}>
<Commodity
name={other.productName}
image={other.productImgUrl}
mode="horizontal"
discountPrice={other.activityPrice}
price={other.price}
progress={
<Progress
percent={50}
progressTips={"剩余50%"}
extra={
<div style={{fontSize: '10px', color: '#919598', marginLeft: '12px', minWidth: '80px'}}>
剩余<span style={{color: '#ef3346' }}>{other.restrictTotalNum}</span>
</div>
}
/>
}
/>
</div>
</div>
);
}
CommodityWithProcess.Item = Item;
export default CommodityWithProcess;
......@@ -3,11 +3,13 @@ import Coupon from './Coupon';
import CommodityList from './CommodityList';
import WrapCommodityList from './WrapCommodityList';
import Combination from './Combination';
import CommodityWithProcess from './CommodityWithProcess'
export default {
Advertisement,
Coupon,
CommodityList,
WrapCommodityList,
Combination
Combination,
CommodityWithProcess
};
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