feat: 对接商品、品类优惠券

src/pages/transaction/marketingAbility/merchantCoupon/common/hoc/fetchDetailHoc.tsx

@@ -36,13 +36,15 @@ const FetchDetailHoc = <P extends {}>(config: IConfig, WrapComponent: React.Comp
     getDetail();
   }, []);
 
-  return (props: Omit<P, ('dataSource' | 'loading')>): JSX.Element => {
-    return (
-      <div>
-        <WrapComponent {...props as any} dataSource={detail} loading={loading} />
-      </div>
-    );
-  };
+  return React.useMemo(() => {
+    return (props: Omit<P, ('dataSource' | 'loading')>): JSX.Element => {
+      return (
+        <div>
+          <WrapComponent {...props as any} dataSource={detail} loading={loading} />
+        </div>
+      );
+    };
+  }, [WrapComponent, detail, loading]);
 };
 
 export default FetchDetailHoc;

src/pages/transaction/marketingAbility/merchantCoupon/components/CouponDetail/index.tsx

@@ -2,10 +2,10 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-25 17:23:30
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-20 10:49:05
+ * @LastEditTime: 2021-07-23 15:16:09
  * @Description: 商家优惠券页面详情组件
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   Row,
   Col,
@@ -20,13 +20,21 @@ import {
 } from '@/constants/marketing';
 import AnchorPage from '@/layouts/AnchorPage';
 import AuditProcess from '@/components/AuditProcess';
+import {
+  normalizeCategoryList,
+  CategoryItemType,
+  normalizeShopList,
+  ShopItemType,
+  normalizeBrandList,
+  BrandItemType,
+} from '../../utils';
 import BacisInfo, { PropsType as BacisInfoPropsType } from '../../components/BacisInfo';
 import CouponRules, { PropsType as CouponRulesPropsType } from '../../components/CouponRules';
 import ApplicableGoods, { ListItemDataType } from '../../components/ApplicableGoods';
 import ApplicableShopList from '../../components/ApplicableShopList';
 import ApplicableCategories from '../../components/ApplicableCategories';
 import ApplicableBrands from '../../components/ApplicableBrands';
-import InnerFlowRecords, { FlowItem } from '../../components/InnerFlowRecords';
+import InnerFlowRecords from '../../components/InnerFlowRecords';
 
 export type DetailType = BacisInfoPropsType['dataSource'] & CouponRulesPropsType['dataSource'] & {
   /**
@@ -102,7 +110,19 @@ export type DetailType = BacisInfoPropsType['dataSource'] & CouponRulesPropsType
   /**
    * 适用商品
    */
-  suitableCommoditySkuList: ListItemDataType[],
+  suitableCommoditySkuList?: ListItemDataType[],
+  /**
+   * 适用品类
+   */
+  suitableCategoryList?: CategoryItemType[][],
+  /**
+   * 适用品牌
+   */
+  suitableBrandList?: BrandItemType[],
+  /**
+   * 适用商城
+   */
+  suitableMallTypes?: ShopItemType[],
 };
 
 interface IProps {
@@ -171,6 +191,18 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
     },
   ].filter(Boolean);
 
+  const categories = useMemo(() => {
+    return normalizeCategoryList(dataSource?.suitableCategoryList);
+  }, [dataSource?.suitableCategoryList]);
+  
+  const shopList = useMemo(() => {
+    return normalizeShopList(dataSource?.suitableMallTypes);
+  }, [dataSource?.suitableMallTypes]);
+  
+  const brandList = useMemo(() => {
+    return normalizeBrandList(dataSource?.suitableBrandList);
+  }, [dataSource?.suitableBrandList]);
+
   return (
     <Spin spinning={loading}>
       <AnchorPage
@@ -249,18 +281,7 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
                 ? (
                   <Col span={24}>
                     <ApplicableCategories
-                      options={[
-                        {
-                          logo: 'http://www.yyfun001.com/res/htmlLX/gunbo1.jpg',
-                          label: '成品皮-牛皮-头层牛皮',
-                          value: 1,
-                        },
-                        {
-                          logo: 'http://www.yyfun001.com/res/htmlLX/gunbo1.jpg',
-                          label: '成品皮-牛皮-头层牛皮',
-                          value: 2,
-                        },
-                      ]}
+                      options={categories}
                       id="applicableCategories"
                     />
                   </Col>
@@ -276,18 +297,7 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
                 ? (
                   <Col span={24}>
                     <ApplicableBrands
-                      options={[
-                        {
-                          logo: 'http://www.yyfun001.com/res/htmlLX/gunbo4.jpg',
-                          label: '头层牛皮',
-                          value: 1,
-                        },
-                        {
-                          logo: 'http://www.yyfun001.com/res/htmlLX/gunbo4.jpg',
-                          label: '牛皮',
-                          value: 2,
-                        },
-                      ]}
+                      options={brandList}
                       id="applicableBrands"
                     />
                   </Col>
@@ -299,18 +309,7 @@ const MerchantCouponDetail: React.FC<IProps> = (props) => {
           {/* 适用商城 */}
           <Col span={24}>
             <ApplicableShopList
-              options={[
-                {
-                  logo: 'http://www.yyfun001.com/res/htmlLX/gunbo3.jpg',
-                  label: 'WEB-渠道商城',
-                  value: 1,
-                },
-                {
-                  logo: 'http://www.yyfun001.com/res/htmlLX/gunbo3.jpg',
-                  label: 'H5-渠道商城',
-                  value: 2,
-                },
-              ]}
+              options={shopList}
               id="applicableShopList"
             />
           </Col>

src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponUnsubmitted/components/CouponForm/index.tsx

@@ -2,7 +2,7 @@
  * @Author: XieZhiXiong
  * @Date: 2021-06-24 13:47:47
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-19 18:30:06
+ * @LastEditTime: 2021-07-23 14:42:48
  * @Description: 新增/修改 优惠券表单
  */
 import React, { useState, useMemo } from 'react';
@@ -113,14 +113,14 @@ export type SubmitValueType = {
   /**
    * 适用品类
    */
-  applicableCategories: {
-    category: string[],
+  applicableCategories?: {
+    category: string[][],
   }[],
   /**
    * 适用品牌
    */
   applicableBrands: {
-    brand: string,
+    brand: string[],
   }[],
   /**
    * 适用用户
@@ -240,26 +240,21 @@ const CouponForm: React.FC<IProps> = (props) => {
       ...restValue
     } = values;
 
-    let applicationRelated: string[] = [];
-
-    if (applicableBrands && applicableBrands.length) {
-      applicationRelated = applicableBrands.map((item) => item.brand);
-    }
-    
-    if (applicableCategories && applicableCategories.length) {
-      applicationRelated = applicableCategories.map((item) => item.category.join('.'));
-    }
-
     const suitableCommoditySkuList = goodsList?.map((item) => ({
       id: item.id,
       commodityId: item.commodityId,
       name: item.name,
+      mainPic: item.mainPic,
       customerCategoryName: item.customerCategoryName,
       brandName: item.brandName,
       unitName: item.unitName,
       unitPrice: item.unitPrice,
     }));
 
+    const suitableCategoryList: any = applicableCategories?.map((item) => item.category);
+
+    const suitableBrandList: any = applicableBrands?.map((item) => item.brand);
+
     const payload = {
       conditionGetDay: +conditionGetDay,
       conditionGetTotal: +conditionGetTotal,
@@ -272,8 +267,9 @@ const CouponForm: React.FC<IProps> = (props) => {
       effectiveTimeStart: effectiveTimeStart ? moment(effectiveTimeStart).valueOf() : undefined,
       effectiveTimeEnd: effectiveTimeEnd ? moment(effectiveTimeEnd).valueOf() : undefined,
       suitableMemberLevelTypes: applicationMemberLevel,
-      relevanceProductData: applicationRelated as any,
       suitableCommoditySkuList,
+      suitableCategoryList,
+      suitableBrandList,
       ...restValue,
     };
 

src/pages/transaction/marketingAbility/merchantCoupon/merchantCouponUnsubmitted/components/GoodsDrawer/index.tsx

@@ -30,6 +30,10 @@ export type ProductItemType = {
    */
   name: string,
   /**
+   * 商品图片
+   */
+  mainPic: string,
+  /**
    * 会员分类名称
    */
   customerCategoryName: string,

src/pages/transaction/marketingAbility/merchantCoupon/utils.ts

@@ -2,10 +2,12 @@
  * @Author: XieZhiXiong
  * @Date: 2021-07-20 10:10:55
  * @LastEditors: XieZhiXiong
- * @LastEditTime: 2021-07-20 10:27:34
+ * @LastEditTime: 2021-07-23 15:00:55
  * @Description: 
  */
+import { OptionItemType } from '../components/ApplicableList';
 type OriginUnitPriceType = { [key: string]: any }
+
 type UnitPriceType = {
   /**
    * 起始
@@ -21,6 +23,51 @@ type UnitPriceType = {
   price: number,
 }
 
+export type CategoryItemType = {
+  /**
+   * 品类id
+   */
+  id: number,
+  /**
+   * 品类图片
+   */
+  imageUrl: string,
+  /**
+   * 品类名称
+   */
+  name: string,
+}
+
+export type ShopItemType = {
+  /**
+   * 商城id
+   */
+  id: number,
+  /**
+   * 商城图片
+   */
+  logoUrl: string,
+  /**
+   * 商城名称
+   */
+  name: string,
+}
+
+export type BrandItemType = {
+  /**
+   * 品牌id
+   */
+  id: number,
+  /**
+   * 品牌图片
+   */
+  logoUrl: string,
+  /**
+   * 品牌名称
+   */
+  name: string,
+}
+
 export function normalizeUnitPrice(unitPrice: UnitPriceType): UnitPriceType[] {
   const ret = [];
   const objKeys = Object.keys(unitPrice).sort((a, b) => parseFloat(a) - parseFloat(b));
@@ -36,4 +83,49 @@ export function normalizeUnitPrice(unitPrice: UnitPriceType): UnitPriceType[] {
   });
 
   return ret;
+};
+
+export function normalizeCategoryList(origin: CategoryItemType[][]): OptionItemType[] {
+  const ret: OptionItemType[] = [];
+  if (!Array.isArray(origin)) {
+    return ret;
+  }
+  origin.forEach((item, index) => {
+    ret.push({
+      logo: item[item.length - 1]?.imageUrl,
+      label: item.map((item) => item.name).join('-'),
+      value: index,
+    });
+  });
+  return ret;
+};
+
+export function normalizeShopList(origin: ShopItemType[]): OptionItemType[] {
+  const ret: OptionItemType[] = [];
+  if (!Array.isArray(origin)) {
+    return ret;
+  }
+  origin.forEach((item) => {
+    ret.push({
+      logo: item.logoUrl,
+      label: item.name,
+      value: item.id,
+    });
+  });
+  return ret;
+};
+
+export function normalizeBrandList(origin: BrandItemType[]): OptionItemType[] {
+  const ret: OptionItemType[] = [];
+  if (!Array.isArray(origin)) {
+    return ret;
+  }
+  origin.forEach((item) => {
+    ret.push({
+      logo: item.logoUrl,
+      label: item.name,
+      value: item.id,
+    });
+  });
+  return ret;
 };
\ No newline at end of file