feat: 完善c端广告图装修

src/pages/pageCustomized/components/toolBar/index.tsx

@@ -6,6 +6,9 @@ import { STATE_PROPS, PageConfigType, PROPS_SETTING_TYPES } from '@lingxi-disign
 import { useSelector } from '@lingxi-disign/react';
 
 import { history } from 'umi';
+
+import { paramsClient } from './returnSaveParams';
+
 import styles from './index.less';
 
 interface ToolBarPropsType {
@@ -13,12 +16,13 @@ interface ToolBarPropsType {
   title?: string,
   showActions?: boolean,
   templateId?: number,
+  saveType?: number
 }
 
 const ToolBar: React.FC<ToolBarPropsType> = (props) => {
-  const { type = 1, title = "首页", showActions, templateId } = props;
+  const { type = 1, title = "首页", showActions, templateId, saveType = 1 } = props;
   const [saveLoading, setSaveLoading] = useState<boolean>(false);
-  const { pageConfig } = useSelector<{ pageConfig: PageConfigType}, STATE_PROPS>(['pageConfig']);
+  const { pageConfig } = useSelector<{ pageConfig: PageConfigType }, STATE_PROPS>(['pageConfig']);
 
   const handleGoBack = () => {
     if (type === 1) {
@@ -37,71 +41,76 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
   };
 
   const handleSave = useCallback(() => {
-    const param: any = {
-      templateId: Number(templateId),
-      appEnterpriseBO: {},
-    };
-    Object.keys(pageConfig).forEach(key => {
-      const pageConfigItem = pageConfig[key];
-      if(pageConfigItem.componentType) {
-        switch(pageConfigItem.componentType) {
-          case PROPS_SETTING_TYPES.mobileHeaderNav:
-            param.appEnterpriseBO.topBO = {
-              style: pageConfigItem.props?.styleTheme || 0,
-              status: true,
-              topDetailsBOList: pageConfigItem.props?.dataList || []
-            };
-            break;
-          case PROPS_SETTING_TYPES.mobileBanner:
-            param.appEnterpriseBO.advertBO = {
-              status: pageConfigItem.props?.visible,
-              advertDetailsBOList: pageConfigItem.props?.dataList || []
-            };
-            break;
-          case PROPS_SETTING_TYPES.mobileQuickNav:
-            param.appEnterpriseBO.functionBO = {
-              status: pageConfigItem.props?.visible,
-              functionDetailsBO: pageConfigItem.props?.dataList || []
-            };
-            break;
-          case PROPS_SETTING_TYPES.mobileShowCase:
-            param.appEnterpriseBO.showcaseBO = {
-              style: pageConfigItem.props?.styleTheme || 0,
-              status: pageConfigItem.props?.visible,
-              showcaseDetailsBO: pageConfigItem.props?.dataList || []
-            };
-            break;
-          case PROPS_SETTING_TYPES.mobileRecommentShops:
-            param.appEnterpriseBO.storeBO = {
-              status: pageConfigItem.props?.visible,
-              storeIdList: pageConfigItem.props?.dataList ? pageConfigItem.props?.dataList.map(item => item.selectId) : []
-            };
-            break;
-          case PROPS_SETTING_TYPES.mobileQuality:
-            param.appEnterpriseBO.excellentBO = {
-              status: pageConfigItem.props?.visible,
-              excellentDetailsBO: pageConfigItem.props?.dataList || []
-            };
-            break;
-          case PROPS_SETTING_TYPES.mobileBottomNavigation:
-            param.appEnterpriseBO.bottomBO = {
-              status: true,
-              bottomDetailsBOList: pageConfigItem.props?.dataList || []
-            };
-            break;
-          default:
-            break;
+    if (saveType === 1) {
+      const param: any = {
+        templateId: Number(templateId),
+        appEnterpriseBO: {},
+      };
+      Object.keys(pageConfig).forEach(key => {
+        const pageConfigItem = pageConfig[key];
+        if (pageConfigItem.componentType) {
+          switch (pageConfigItem.componentType) {
+            case PROPS_SETTING_TYPES.mobileHeaderNav:
+              param.appEnterpriseBO.topBO = {
+                style: pageConfigItem.props?.styleTheme || 0,
+                status: true,
+                topDetailsBOList: pageConfigItem.props?.dataList || []
+              };
+              break;
+            case PROPS_SETTING_TYPES.mobileBanner:
+              param.appEnterpriseBO.advertBO = {
+                status: pageConfigItem.props?.visible,
+                advertDetailsBOList: pageConfigItem.props?.dataList || []
+              };
+              break;
+            case PROPS_SETTING_TYPES.mobileQuickNav:
+              param.appEnterpriseBO.functionBO = {
+                status: pageConfigItem.props?.visible,
+                functionDetailsBO: pageConfigItem.props?.dataList || []
+              };
+              break;
+            case PROPS_SETTING_TYPES.mobileShowCase:
+              param.appEnterpriseBO.showcaseBO = {
+                style: pageConfigItem.props?.styleTheme || 0,
+                status: pageConfigItem.props?.visible,
+                showcaseDetailsBO: pageConfigItem.props?.dataList || []
+              };
+              break;
+            case PROPS_SETTING_TYPES.mobileRecommentShops:
+              param.appEnterpriseBO.storeBO = {
+                status: pageConfigItem.props?.visible,
+                storeIdList: pageConfigItem.props?.dataList ? pageConfigItem.props?.dataList.map(item => item.selectId) : []
+              };
+              break;
+            case PROPS_SETTING_TYPES.mobileQuality:
+              param.appEnterpriseBO.excellentBO = {
+                status: pageConfigItem.props?.visible,
+                excellentDetailsBO: pageConfigItem.props?.dataList || []
+              };
+              break;
+            case PROPS_SETTING_TYPES.mobileBottomNavigation:
+              param.appEnterpriseBO.bottomBO = {
+                status: true,
+                bottomDetailsBOList: pageConfigItem.props?.dataList || []
+              };
+              break;
+            default:
+              break;
+          }
         }
-      }
-    });
+      });
+
+      saveAppEnterprise(param);
+    } else if (saveType === 2) {
+      saveAppEnterprise(paramsClient(templateId, pageConfig));
+    }
 
-    saveAppEnterprise(param);
   }, [pageConfig]);
 
   const saveAppEnterprise = (param) => {
     setSaveLoading(true);
     PublicApi.postTemplateAdornAppEnterpriseSave(param).then(res => {
-      if(res.code === 1000) {
+      if (res.code === 1000) {
         message.destroy();
         message.success("保存成功");
       }
@@ -119,7 +128,7 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
         <label>{title}</label>
       </div>
       {
-        showActions &&  <div className={styles.toolbar_actions}>
+        showActions && <div className={styles.toolbar_actions}>
           <Button type="link" onClick={() => handleGoBack()}>取消</Button>
           <Button icon={<SaveOutlined />} loading={saveLoading} type="primary" onClick={() => handleSave()}>保存</Button>
         </div>

src/pages/pageCustomized/components/toolBar/returnSaveParams.ts

 import { PageConfigType } from '@lingxi-disign/core';
 
 export const paramsClient = (
-  templateId: number,
+  templateId: any,
   pageConfig: PageConfigType,
 ) => {
   let _params: any = {
@@ -21,12 +21,13 @@ export const paramsClient = (
             details: [],
           };
           if (pageConfig['2'].childNodes?.length) {
-            for (let key in pageConfig['2'].childNodes) {
+            const _list = pageConfig['2'].childNodes;
+            for (let key in _list) {
               _params.adornContent.advert.details.push({
-                id: pageConfig[key]?.props?.id,
-                img: pageConfig[key]?.props?.img,
-                name: pageConfig[key]?.props?.name,
-                type: pageConfig[key]?.props?.type,
+                id: pageConfig[_list[key]]?.props?.id,
+                img: pageConfig[_list[key]]?.props?.img,
+                name: pageConfig[_list[key]]?.props?.name,
+                type: pageConfig[_list[key]]?.props?.type,
               });
             }
           }
@@ -71,4 +72,5 @@ export const paramsClient = (
       }
     }
   });
+  return _params;
 };

src/pages/pageCustomized/mobileClientEdit/index.tsx

@@ -55,6 +55,7 @@ interface ShopPreviewPropsType {
        * 模板名称
        */
       template: string;
+      shopId: number;
       environment: string;
     }
   }
@@ -63,7 +64,7 @@ interface ShopPreviewPropsType {
 const TemplateList = ['science'];
 
 const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
-  const { query: { id, template, environment } } = props.location;
+  const { query: { id, template, environment, shopId } } = props.location;
   const [loading, setLoading] = useState<boolean>(true);
   const [theme, setTheme] = useState<string>('theme-mall-science');
   const [componentConfigs, setComponentConfigs] = useState<any>();
@@ -78,7 +79,6 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
     } else {
       setTheme(`theme-mall-${template}`);
     }
-    PublicApi.getMarketingPlatformActivityGetActivityTypeList()
     getComponentsConfig();
   }, []);
 
@@ -107,6 +107,7 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
       const appConfig = await getAppEnterpriseConfig();
       console.log(appConfig)
       let _mallLayoutConfig: any = { ...mallLayoutConfig };
+      let _headerConfig: any = { ...headerConfig };
       let _bannerConfig: any = { ...bannerConfig };
       let _bottomNavigationConfig: any = { ...bottomNavigationConfig };
       let _couponsModalConfig: any = { ...couponsModalConfig };
@@ -133,6 +134,8 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
       let _marketingConfig_17: any = { ...marketingConfig_17 };
       let _marketingConfig_18: any = { ...marketingConfig_18 };
       let _marketingConfig_19: any = { ...marketingConfig_19 };
+      // const categoryData = await PublicApi.getSearchCommodityTemplateGetFirstCategoryListByMemberId({shopId})
+      // console.log(categoryData)
       if (appConfig?.adornContent?.advert) {
         // 广告图
         const _list = appConfig?.adornContent?.advert?.details;
@@ -146,8 +149,8 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
             props: { ..._list[key], isnull: false },
           }
         }
-        !_mallLayoutConfig['0'].childNodes.includes('2') && _mallLayoutConfig['0'].childNodes.push('2');
       }
+      !_mallLayoutConfig['0'].childNodes.includes('2') && _mallLayoutConfig['0'].childNodes.push('2');
       if (appConfig?.adornContent?.categoryGuidance) {
         // 品类导航
         const _list = appConfig?.adornContent?.categoryGuidance?.details;
@@ -335,10 +338,10 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
         !_mallLayoutConfig['0'].childNodes.includes('11-19') && _mallLayoutConfig['0'].childNodes.push('11-19');
       }
 
-      if(appConfig?.adornContent?.suggestProduct){
+      if (appConfig?.adornContent?.suggestProduct) {
         // 商品推荐
-        !_mallLayoutConfig['0'].childNodes.includes('10') && _mallLayoutConfig['0'].childNodes.push('10');
       }
+      !_mallLayoutConfig['0'].childNodes.includes('10') && _mallLayoutConfig['0'].childNodes.push('10');
 
       if (appConfig?.adornContent?.bottom) {
         // 底部导航
@@ -353,8 +356,8 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
             props: { ..._list[key], isnull: false },
           }
         }
-        !_mallLayoutConfig['0'].childNodes.includes('12') && _mallLayoutConfig['0'].childNodes.push('12');
       }
+      !_mallLayoutConfig['0'].childNodes.includes('12') && _mallLayoutConfig['0'].childNodes.push('12');
 
       if (appConfig?.adornContent?.coupon) {
         // 优惠券弹窗
@@ -366,12 +369,12 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
         //     !_couponsModalConfig['13'].childNodes.includes(_childKey) && _couponsModalConfig['13'].childNodes.push(_childKey)
         //   }
         // }
-        !_mallLayoutConfig['0'].childNodes.includes('13') && _mallLayoutConfig['0'].childNodes.push('13');
       }
+      !_mallLayoutConfig['0'].childNodes.includes('13') && _mallLayoutConfig['0'].childNodes.push('13');
 
       const config = cloneDeep({
         ..._mallLayoutConfig,
-        ...headerConfig,
+        ..._headerConfig,
         ..._bannerConfig,
         // ..._categoryGuidanceConfig,
         ..._suggestProductConfig,
@@ -396,7 +399,7 @@ const mobileClientEdit: React.FC<ShopPreviewPropsType> = (props) => {
       }}
     >
       <div className={styles['wrapper']}>
-        <ToolBar type={1} title="APP首页" showActions={true} templateId={id} />
+        <ToolBar type={1} title="APP首页" saveType={2} showActions={true} templateId={id} />
         <div className={styles['content']}>
           <MobileClientEditLeft />
           <div className={styles['app-wrapper']}>

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bannerClient/index.tsx

@@ -117,6 +117,8 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
         id && _fetch?.({ id: id }).then((res) => {
           if (res.code === 1000) {
             setRecord(res.data)
+          }else{
+            setRecord('');
           }
         }).catch(_ => setRecord(''));
         break;
@@ -184,6 +186,9 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
     if (property === 2 && type === 5) {
       return false
     }
+    if(!type){
+      return false
+    }
     return true;
   }, [type, property])