feat: B端APP商城装修开发

package.json

@@ -71,7 +71,7 @@
     "core-js": "^3.6.5",
     "crypto-js": "^4.0.0",
     "god": "^0.2.9",
-    "lingxi-design-ui": "^2.0.16",
+    "lingxi-design-ui": "^2.0.19",
     "lint-staged": "^10.0.7",
     "mobx": "^5.15.4",
     "mobx-react": "^6.2.2",

src/pages/pageCustomized/components/DesignPanel.tsx

-import React from 'react';
+import React, { useEffect } from 'react';
 import { PageConfigType  } from '@lingxi-disign/core';
 import { BrickDesign, useSelector } from '@lingxi-disign/react';
 
@@ -10,8 +10,7 @@ interface DesignPanelPropsType {
 }
 
 const DesignPanel: React.FC<DesignPanelPropsType> = (props) => {
-  const { theme, pageName = 'index', onlyEidt } = props;
-  const { pageConfig } = useSelector(['pageConfig']);
+  const { pageConfig, theme, pageName = 'index', onlyEidt } = props;
 
   return <BrickDesign
     pageName={pageName}

src/pages/pageCustomized/components/MobileDesign.tsx

+import React, { useEffect } from 'react';
+import { PageConfigType  } from '@lingxi-disign/core';
+import { BrickDesign, useSelector } from '@lingxi-disign/react';
+
+interface DesignPanelPropsType {
+  pageConfig?: PageConfigType,
+  theme: string,
+  onlyEidt?: boolean,
+  pageName?: string
+}
+
+const DesignPanel: React.FC<DesignPanelPropsType> = (props) => {
+  const { theme, pageName = 'index', onlyEidt } = props;
+  const { pageConfig } = useSelector(['pageConfig']);
+
+  useEffect(() => {
+    console.log(pageConfig, 'pageConfig')
+  }, [pageConfig])
+
+  return <BrickDesign
+    pageName={pageName}
+    initState={{ pageConfig }}
+    themeName={theme}
+    onlyEidt={onlyEidt}
+  />;
+};
+
+export default DesignPanel;

src/pages/pageCustomized/components/MobileDesignPanel.tsx

 import React from 'react';
 import { PageConfigType } from '@lingxi-disign/core';
 // import MobileUIDemo from './mobileUIDemo'
-import DesignPanel from './DesignPanel';
-import DesignPreview from './DesignPreview';
+import DesignPanel from './MobileDesign';
+import DesignPreview from './MobilePreview';
 import styles from './index.less';
 import { useSelector } from '@lingxi-disign/react';
 interface MobileDesignPanelPropsType {

src/pages/pageCustomized/components/MobilePreview.tsx

+import React from 'react';
+import { PageConfigType } from '@lingxi-disign/core';
+import { BrickPreview } from '@lingxi-disign/react';
+
+interface DesignPanelPropsType {
+  pageConfig?: PageConfigType,
+  theme: string,
+  onlyEidt?: boolean,
+  pageName?: string
+}
+
+const DesignPanel: React.FC<DesignPanelPropsType> = (props) => {
+  const { pageConfig, theme, pageName = 'index', onlyEidt } = props;
+  return <BrickPreview
+    pageName={pageName}
+    initState={{ pageConfig }}
+    themeName={theme}
+    onlyEidt={onlyEidt}
+  />;
+};
+
+export default DesignPanel;

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

@@ -500,21 +500,39 @@ export const paramsBusiness = (templateId: number, pageConfig: PageConfigType) =
     const { propsConfig } = getComponentConfig(configItem.componentName)
 
     if (propsConfig.componentType) {
+      let tempProps: any = undefined
       switch (propsConfig.componentType.type) {
         case PROPS_SETTING_TYPES.mobileHeaderNavAction:
           _params.adornContent['headerNav'] = contactList(_params.adornContent['headerNav'], configItem.props?.data)
           break
         case PROPS_SETTING_TYPES.bannerItems:
-
+          tempProps = configItem.props
+          _params.adornContent['banner'] = contactList(_params.adornContent['banner'], {
+            id: tempProps.id,
+            name: tempProps.name,
+            type: tempProps.type,
+            img: tempProps.img,
+          })
+          break
           break
         case PROPS_SETTING_TYPES.mobileNavCardNavItem:
-          const data: any = configItem.props
+          tempProps = configItem.props
           _params.adornContent['navList'] = contactList(_params.adornContent['navList'], {
-            id: data.id,
-            name: data.name,
-            type: data.type,
-            url: data.url,
-            icon: data.icon,
+            id: tempProps.id,
+            name: tempProps.name,
+            type: tempProps.type,
+            url: tempProps.url,
+            icon: tempProps.icon,
+          })
+          break
+        case PROPS_SETTING_TYPES.mobileShowCase:
+          tempProps = configItem.props
+          _params.adornContent['showCase'] = contactList(_params.adornContent['showCase'], {
+            idList: tempProps.idList || [],
+            name: tempProps.name,
+            type: tempProps.type,
+            banner: tempProps.banner,
+            inner: tempProps.inner,
           })
           break
       }

src/pages/pageCustomized/configs/componentConfigs/LingXiUI/ShowCaseBanner.ts

+import { ComponentSchemaType, PROPS_TYPES, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
+
+
+const ShowCaseBanner: ComponentSchemaType = {
+  propsConfig: {
+    children: {
+      label: '内容',
+      type: PROPS_TYPES.string,
+    },
+    styleType: {
+      label: "样式",
+      type: PROPS_TYPES.number,
+    },
+  },
+};
+
+const Item: ComponentSchemaType = {
+  fatherNodesRule: ['ShowCaseBanner.children'],
+  propsConfig: {
+    children: {
+      label: '内容',
+      type: PROPS_TYPES.string,
+    },
+    componentType: {
+      label: '内容',
+      type: PROPS_SETTING_TYPES.mobileShowCase,
+    },
+  },
+};
+
+
+export default {
+  ShowCaseBanner,
+  'ShowCaseBanner.Item': Item,
+};

src/pages/pageCustomized/configs/componentConfigs/LingXiUI/index.ts

@@ -25,6 +25,7 @@ import MobileQuality from './MobileQuality';
 import MobileQuickNav from './MobileQuickNav';
 import MobileRecommendShops from './MobileRecommendShops';
 import MobileShowCase from './MobileShowCase';
+import ShowCaseBanner from './ShowCaseBanner';
 import Category from './Category';
 import PlatformQuickNav from './PlatformQuickNav';
 import PlatformAdvert from './PlatformAdvert';
@@ -78,6 +79,7 @@ export default {
   MobileQuickNav,
   MobileRecommendShops,
   MobileShowCase,
+  ...ShowCaseBanner,
   Category,
   PlatformQuickNav,
   PlatformAdvert,

src/pages/pageCustomized/mallEdit/index.tsx

 import React, { useEffect, useState } from 'react';
 import { BrickProvider } from '@lingxi-disign/react';
+import { updatePageConfig } from '@lingxi-disign/core'
 import { Prompt } from 'umi';
 import { message } from 'antd';
 import { GlobalConfig } from '@/global/config';
@@ -322,6 +323,7 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
     };
     setComponentConfigs(config);
     setLoading(false);
+    updatePageConfig(config)
   };
 
   return !loading ? (
@@ -333,7 +335,7 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
     >
       <Prompt message="你确定要离开么？" />
       <div className={styles['wrapper']}>
-        <ToolBar />
+        <ToolBar templateId={id} />
         <div className={styles['content']}>
           <div className={styles['canvas-container']}>
             <DesignPanel onlyEidt theme={theme} pageConfig={componentConfigs} />

src/pages/pageCustomized/mobileEdit/config.ts

@@ -3,10 +3,7 @@ import { resolveMappingPageConfig } from '@lingxi-disign/react'
 import styleThemeImgDefault from './imgs/style_theme_default.png'
 import styleThemeImgScience from './imgs/style_theme_science.png'
 import categoryNavTemplateDefault from './imgs/category_template_default.png'
-
-import mineIcon from './imgs/mine_icon.png'
-import orderIcon from './imgs/order_icon.png'
-import kefuIcon from './imgs/kefu_icon.png'
+import showCaseTemplateDefault from './imgs/showcase_template_default.jpg'
 
 export const defaultHeaderNavData = [
   {
@@ -48,7 +45,7 @@ export const defaultConfig: PageConfigType = {
         position: 'relative',
       },
     },
-    childNodes: ['1', '3', '5']
+    childNodes: ['1', '3', '5', '7']
   },
   '1': {
     title: '头部导航栏',
@@ -87,18 +84,22 @@ export const defaultConfig: PageConfigType = {
         margin: '8px',
       },
     },
-    childNodes: [],
+    childNodes: ['4'],
     childComponentName: 'Banner.Items',
     addBtnText: '添加广告',
   },
-  // '4': {
-  //   loop: '${navList}',
-  //   title: '广告图',
-  //   componentName: 'Banner.Items',
-  //   props: {
-
-  //   },
-  // },
+  '4': {
+    loop: '${banner}',
+    title: '${item.name}',
+    componentName: 'Banner.Items',
+    props: {
+      id: '${item.name}',
+      type: '${item.type}',
+      img: '${item.img}',
+      name: '${item.name}',
+      isNull: false,
+    },
+  },
   '5': {
     title: '分类导航',
     componentName: 'MobileNavCard',
@@ -132,6 +133,35 @@ export const defaultConfig: PageConfigType = {
       empty: false,
     },
   },
+  '7': {
+    title: '橱窗广告',
+    componentName: 'ShowCaseBanner',
+    childComponentName: 'ShowCaseBanner.Item',
+    props: {
+      stylesthemelist: [
+        {
+          key: 0,
+          width: 152,
+          height: 105,
+          img: showCaseTemplateDefault,
+        },
+      ]
+    },
+    addBtnText: '添加橱窗',
+    childNodes: ['8'],
+  },
+  '8': {
+    loop: '${showCase}',
+    title: '${item.name}',
+    componentName: 'ShowCaseBanner.Item',
+    props: {
+      name: '${item.name}',
+      banner: '${item.banner}',
+      inner: '${item.inner}',
+      type: '${item.type}',
+      idList: '${item.idList}',
+    },
+  },
 }
 
 // const allState = { headerNav: defaultHeaderNavData }

src/pages/pageCustomized/mobileEdit/index.tsx

@@ -202,8 +202,10 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
       const appConfig: any = await getAppEnterpriseConfig();
       const allState = {
         headerNav: appConfig?.headerNav ? appConfig.headerNav : defaultHeaderNavData,
+        banner: appConfig?.banner ? appConfig?.banner : [],
         categoryList: await getFirstCategoryList(),
-        navList: appConfig?.navList ? appConfig?.navList : []
+        navList: appConfig?.navList ? appConfig?.navList : [],
+        showCase: appConfig?.showCase ? appConfig?.showCase : [],
       }
       const finalConfig = resolveMappingPageConfig(defaultConfig, allState)
       console.log(finalConfig, 'finalConfig')

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/showCase/index.less

-@import "../../../../../../global//styles/utils.less";
 @import "../../common.less";
 
-.selectBtn {
-  display: block;
-  width: 100%;
-  background-color: #FAFBFC;
-  border: 1px dashed #D8DDE6;
-}
+.banner {
+  &-box {
+    margin-bottom: 16px;
 
-.uploadPreview {
-  border: 1px solid #EBECF0;
-}
+    :global {
+      .ant-upload {
+        width: 100%;
+      }
+    }
+
+    &-label {
+      font-size: 12px;
+      color: #91959B;
+      margin-bottom: 8px;
+    }
+
+    &-icon {
+      height: 96px;
+      background-color: #FAFBFC;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+
+      &>img {
+        width: 100%;
+      }
+
+      &-add {
+        width: 24px;
+        height: 24px;
+      }
+
+      &:hover {
+        .banner-box-icon-cover {
+          display: block;
+        }
+      }
+
+      &-cover {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: rgba(0, 0, 0, .1);
+        display: none;
+        z-index: 1;
+
+        &-delete {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          font-size: 20px;
+          color: #fff;
+        }
+
+        &-bottom {
+          position: absolute;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          background-color: rgba(0, 0, 0, 0.24);
+          font-size: 12px;
+          color: #fff;
+          width: 100%;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+    }
+  }
+
+  &-record {
+    &-shop {
+      height: 56px;
+      border: 1px solid #EDEEEF;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
 
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 8px;
+      }
+
+      span {
+        flex: 1;
+        color: #303133;
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &-integral {
+      height: 56px;
+      border: 1px solid #EDEEEF;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
+
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 8px;
+      }
+
+      &-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        &-top {
+          flex: 1;
+          color: #303133;
+          font-size: 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &-bottom {
+          flex: 1;
+          color: #EA8000;
+          font-size: 12px;
+        }
+      }
+    }
+
+    &-activity {
+      height: 56px;
+      border: 1px solid #EDEEEF;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
+      position: relative;
+
+      img {
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        margin-right: 8px;
+      }
+
+      &-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+
+        &-top {
+          flex: 1;
+          color: #303133;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &-bottom {
+          flex: 1;
+          color: #91959B;
+        }
+      }
+      &-tag{
+        position: absolute;
+        right: 0;
+        top: -3px;
+      }
+    }
+  }
+}

src/pages/pageCustomized/platformEdit/index.tsx

 /* eslint-disable no-case-declarations */
 import React, { useEffect, useState } from 'react';
 import { BrickProvider } from '@lingxi-disign/react';
-import { PROPS_SETTING_TYPES } from '@lingxi-disign/core';
+import { PROPS_SETTING_TYPES, updatePageConfig } from '@lingxi-disign/core';
 import { Prompt } from 'umi';
 import { message } from 'antd';
 import { GlobalConfig } from '@/global/config';
@@ -701,6 +701,8 @@ const getInformationByIds = (idList: number[]) => {
 
       setComponentConfigs(config);
       setLoading(false);
+      updatePageConfig(config)
+
     }
   };
 
@@ -718,7 +720,7 @@ const getInformationByIds = (idList: number[]) => {
         </div>
         <div className={styles['content']}>
           <div className={styles['canvas-container']}>
-            <DesignPanel onlyEidt theme={theme} pageConfig={componentConfigs} />
+            <DesignPanel onlyEidt theme={theme} />
           </div>
         </div>
       </div>

typings.d.ts

 declare module '*.css';
 declare module '*.less';
 declare module "*.png";
+declare module "*.jpg";
 declare module '*.svg' {
   export function ReactComponent(props: React.SVGProps<SVGSVGElement>): React.ReactElement
   const url: string