fix: 修改装修热门推荐样式

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/configs/schema.ts

@@ -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,

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/hooks/useGetLayout.ts

@@ -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",

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/Combination/index.tsx

@@ -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>

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/CommodityList/index.tsx

@@ -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>
                         );
                       })

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/CommodityWithProcess/index.less

+.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;
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/CommodityWithProcess/index.tsx

+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;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/index.tsx

@@ -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
 };