Commit ed05a0f5 authored by XieZhiXiong's avatar XieZhiXiong
parents 62398a19 a9ae6d06
...@@ -116,7 +116,7 @@ const WrapCommodityList = { ...@@ -116,7 +116,7 @@ const WrapCommodityList = {
} }
}; };
/** 组合出校 */ /** 组合促销 */
const Combination = { const Combination = {
Combination: { Combination: {
propsConfig: {} propsConfig: {}
...@@ -126,6 +126,16 @@ const Combination = { ...@@ -126,6 +126,16 @@ const Combination = {
} }
} }
/** 热门推荐 */
const CommodityWithProcess = {
CommodityWithProcess: {
propsConfig: {}
},
'CommodityWithProcess.Item': {
propsConfig: {}
}
}
const MallLayout = { const MallLayout = {
propsConfig: {}, propsConfig: {},
} }
...@@ -147,6 +157,7 @@ export default { ...@@ -147,6 +157,7 @@ export default {
View, View,
HeaderNav, HeaderNav,
CustomizeTabs, CustomizeTabs,
...CommodityWithProcess,
...Coupon, ...Coupon,
...MarketingCard, ...MarketingCard,
...CommodityList, ...CommodityList,
......
...@@ -65,7 +65,7 @@ const formatData = { ...@@ -65,7 +65,7 @@ const formatData = {
const COMPONENT_NAME = { const COMPONENT_NAME = {
top: 'Advertisement', top: 'Advertisement',
coupon: 'Coupon', coupon: 'Coupon',
hot: "CommodityList", hot: "CommodityWithProcess",
plummet: "CommodityList", plummet: "CommodityList",
discount: "CommodityList", discount: "CommodityList",
fullQuantitySub: "CommodityList", fullQuantitySub: "CommodityList",
...@@ -90,7 +90,7 @@ const COMPONENT_NAME = { ...@@ -90,7 +90,7 @@ const COMPONENT_NAME = {
/** key 对应子节点ComponentName */ /** key 对应子节点ComponentName */
const CHILD_COMPONENT_NAME = { const CHILD_COMPONENT_NAME = {
coupon: 'Coupon.Item', coupon: 'Coupon.Item',
hot: "CommodityList.Item", hot: "CommodityWithProcess.Item",
plummet: "CommodityList.Item", plummet: "CommodityList.Item",
discount: "CommodityList.Item", discount: "CommodityList.Item",
fullQuantitySub: "CommodityList.Item", fullQuantitySub: "CommodityList.Item",
......
...@@ -4,6 +4,7 @@ import { SimpleCommodity, CustomizeTag } from '@linkseeks/design-ui'; ...@@ -4,6 +4,7 @@ import { SimpleCommodity, CustomizeTag } from '@linkseeks/design-ui';
import cx from 'classnames'; import cx from 'classnames';
import { PlusOutlined } from '@ant-design/icons'; import { PlusOutlined } from '@ant-design/icons';
import omit from 'lodash/omit'
interface Iprops { interface Iprops {
children, children,
...@@ -17,6 +18,7 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props: ...@@ -17,6 +18,7 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props:
const { children, className, title, theme, visible = true, ...other } = props; const { children, className, title, theme, visible = true, ...other } = props;
const classNameStr = cx(styles.combiantion, className, { [styles.hide]: !visible }); 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 { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState } = other as any;
const count = React.Children.count(children); const count = React.Children.count(children);
const renderChildren = () => { const renderChildren = () => {
...@@ -35,7 +37,7 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props: ...@@ -35,7 +37,7 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props:
}; };
return ( return (
<div className={classNameStr} {...other}> <div className={classNameStr} {...omitGetOperateState}>
<p className={styles.title}>{title}</p> <p className={styles.title}>{title}</p>
<div className={styles.container}> <div className={styles.container}>
<div className={styles['container-title']}>以下商品认选2件,只需800元</div> <div className={styles['container-title']}>以下商品认选2件,只需800元</div>
......
...@@ -96,7 +96,6 @@ interface Iprops { ...@@ -96,7 +96,6 @@ interface Iprops {
const CommodityItem: React.FC<Iprops> = (props: Iprops) => { const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
// const intl = useIntl(); // const intl = useIntl();
const { className, customizeClassName, ...other } = props; const { className, customizeClassName, ...other } = props;
const classNameStr = cx(styles.item, customizeClassName); const classNameStr = cx(styles.item, customizeClassName);
const rest = omit(other, ["draggable", "getOperateState", "onClick", "onDrag", "onDragEnd", "onDragEnter", "onDragStart", "onMouseOver"]); const rest = omit(other, ["draggable", "getOperateState", "onClick", "onDrag", "onDragEnd", "onDragEnter", "onDragStart", "onMouseOver"]);
...@@ -106,22 +105,32 @@ const CommodityItem: React.FC<Iprops> = (props: Iprops) => { ...@@ -106,22 +105,32 @@ const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver,
}; };
const { productName: name, productImgUrl: image, mode = "horizontal", price: originalPrice, discount, activityPrice, label, ...otherRestProps } = rest as any; const {
const withLabel = label ? {tags: [label]} : {}; 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 = { const horizontalData = {
name, name,
image, image,
mode, mode,
...withLabel, ...withLabel,
originalPrice: originalPrice, originalPrice: originalPrice,
discountPrice: discount || activityPrice discountPrice: discount || activityPrice || plummetPrice
}; };
const verticalData = { const verticalData = {
name, name,
image, image,
mode, mode,
discountPrice: discount || activityPrice, discountPrice: discount || activityPrice || plummetPrice,
buyBtn: false, buyBtn: false,
...withLabel, ...withLabel,
sold: 0 sold: 0
...@@ -200,7 +209,7 @@ const CommodityTab: React.FC<any> = (props) => { ...@@ -200,7 +209,7 @@ const CommodityTab: React.FC<any> = (props) => {
footer={<div></div>} footer={<div></div>}
tags={[intl.formatMessage({ id: 'activityPage.fill300remove20' })]} tags={[intl.formatMessage({ id: 'activityPage.fill300remove20' })]}
style={{padding: '0'}} style={{padding: '0'}}
></Commodity> />
</div> </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'; ...@@ -3,11 +3,13 @@ import Coupon from './Coupon';
import CommodityList from './CommodityList'; import CommodityList from './CommodityList';
import WrapCommodityList from './WrapCommodityList'; import WrapCommodityList from './WrapCommodityList';
import Combination from './Combination'; import Combination from './Combination';
import CommodityWithProcess from './CommodityWithProcess'
export default { export default {
Advertisement, Advertisement,
Coupon, Coupon,
CommodityList, CommodityList,
WrapCommodityList, 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