feat: 添加自营商城模板预览页面

src/pages/editor/ownMallEdit/preview.tsx

+import React, { useEffect, useState } from 'react'
+import { BrickProvider } from '@lingxi-disign/react'
+import { message }from 'antd'
+import ToolBar from '../components/toolBar'
+import PreviewPanel from '../components/PreviewPanel'
+import config from '../configs'
+import { isEmpty } from 'lodash'
+import { LAYOUT_TYPE } from '@/constants'
+import {
+  topBarConfig,
+  topAdvertConfig,
+  headerConfig,
+  mainNavConfig,
+  bannerWrap,
+  oneBannerConfig,
+  bannerColumnWrap,
+  twoBannerConfig,
+  threeBannerConfig,
+  mallLayoutConfig,
+  fourBannerConfig,
+  InformationConfig,
+  FooterConfig,
+} from './defaultData'
+import { menuData } from './defaultMenu'
+import Loading from '../components/Loading'
+import { PublicApi } from '@/services/api'
+import { GlobalConfig } from '@/global/config'
+import { getAuth } from '@/utils/auth'
+import styles from './index.less'
+
+interface ShopEditPropsType {
+  location: {
+    query: {
+      /**
+       * 模板id
+       */
+      id: number;
+      /**
+       * 模板名称
+       */
+      template: string;
+      shopId: number
+    }
+  }
+}
+
+const TemplateList = ['science']
+
+const OwnMallEdit: React.FC<ShopEditPropsType> = (props) => {
+  const { query: { id, template, shopId } } = props.location
+  const [loading, setLoading] = useState<boolean>(true)
+  const [theme, setTheme] = useState<string>('theme-ownmall-science')
+  const [componentConfigs, setComponentConfigs] = useState({})
+  const { memberId, memberRoleId } = getAuth() || {}
+
+  useEffect(() => {
+    if (!TemplateList.includes(template)) {
+      setTheme(`theme-ownmall-${TemplateList[0]}`)
+    } else {
+      setTheme(`theme-ownmall-${template}`)
+    }
+    getComponentsConfig()
+  }, [])
+
+  /**
+   * 获取所有一级品类信息
+   */
+  const fetchFirstCategory = () => {
+    return new Promise((resolve) => {
+      const param: any = {
+        memberId,
+        roleId: memberRoleId
+      }
+      const headers: any = {
+        shopId
+      }
+      PublicApi.getTemplateAdornWebSelfFindAllFirstCategory(param, { headers }).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
+      })
+    })
+  }
+
+  /**
+   * 获取导航栏菜单数据
+   */
+  const getOwnMallNavData = () => {
+    return new Promise((resolve) => {
+      const param: any = {
+        templateId: id,
+        memberId,
+        roleId: memberRoleId,
+      };
+      PublicApi.getTemplateAdornWebSelfFindColumn(param).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data);
+        }
+      });
+    });
+  };
+
+  /**
+   * 获取一级品类详细信息
+   */
+  const fetchCategoryById = (categoryId) => {
+    return new Promise((resolve) => {
+      const param: any = {
+        templateId: id,
+        categoryId,
+        memberId,
+        roleId: memberRoleId
+      }
+
+      PublicApi.getTemplateAdornWebSelfMemberCategoryAdorn(param).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
+      })
+    })
+  }
+
+  const findAdvertsByType = (type: number) => {
+    return new Promise((resolve) => {
+      const params: any = {
+        templateId: id,
+        type,
+        memberId,
+        roleId: memberRoleId
+      }
+
+      PublicApi.getTemplateAdornWebSelfFindAdvertsByType(params).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        } else {
+          resolve([])
+        }
+      })
+    })
+  }
+
+  // const getCategoryTree = () => {
+  //   return new Promise((resolve) => {
+  //     const param: any = {
+  //       templateId: id,
+  //       categoryId,
+  //       memberId,
+  //       roleId: memberRoleId
+  //     }
+
+  //     PublicApi.getTemplateAdornWebSelfMemberCategoryAdorn(param).then(res => {
+  //       if (res.code === 1000) {
+  //         resolve(res.data)
+  //       }
+  //     })
+  //   })
+  // }
+
+  const fetchNewByLabel = (label: string) => {
+    // 1-头条文章 2-轮播新闻 3-图片新闻 4-推荐阅读
+    return new Promise((resolve, reject) => {
+      PublicApi.getManageContentInformationFindAllByRecommendLabel({ recommendLabel: label }).then((res: { code: number; data: unknown }) => {
+        if (res.code === 1000) {
+          resolve(res.data);
+        } else {
+          reject();
+        }
+      }).catch(() => {
+        reject();
+      });
+    });
+  };
+
+  const getComponentsConfig = async () => {
+    // 导航栏
+    const navData = await getOwnMallNavData();
+    if(!isEmpty(navData)) {
+      mainNavConfig[mainNavConfig.key].props.menuData = navData;
+    } else {
+      mainNavConfig[mainNavConfig.key].props.menuData = menuData;
+    }
+    mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.shop
+    mainNavConfig[mainNavConfig.key].props.categoryList = []
+
+    // 一号位广告
+    oneBannerConfig[oneBannerConfig.key].props.advertList = await findAdvertsByType(1)
+    // 二号位广告
+    twoBannerConfig[twoBannerConfig.key].props.advertList = await findAdvertsByType(2)
+    // 三号位广告
+    threeBannerConfig[threeBannerConfig.key].props.advertList = await findAdvertsByType(3)
+    // 四号位广告
+    fourBannerConfig[fourBannerConfig.key].props.advertList = await findAdvertsByType(4)
+    //商城信息
+    const shopList = GlobalConfig.web.shopInfo
+    const webMallInfo = shopList.filter(item => item.id === Number(shopId))[0]
+    topBarConfig[topBarConfig.key].props.shopname = webMallInfo.name
+    headerConfig[headerConfig.key].props.logoUrl = webMallInfo.logoUrl
+
+    // 行情资讯
+    InformationConfig[InformationConfig.key].props.newsList = await fetchNewByLabel('4');
+
+    // AboutUsConfig[AboutUsConfig.key].props.shopInfo = shopInfo
+    let initIndex = 100
+    let floorLineConfig: any = {}
+    const floorLineKeys: any = []
+
+    const firstCategory: any = await fetchFirstCategory()
+
+    for (const item of firstCategory) {
+      if (item.categoryId ){
+        const categoryDetail: any = await fetchCategoryById(item.categoryId)
+
+        let floorLineConfigItem = {}
+        floorLineKeys.push(String(initIndex + 1))
+
+        const FloorLine = {
+          [String(initIndex + 1)]: {
+            "componentName": "ShopFloorLine",
+            "props": {
+              title: item.categoryName
+            },
+            "childNodes": [String(initIndex + 2), String(initIndex + 3)]
+          }
+        }
+
+        const Category = {
+          [String(initIndex + 2)]: {
+            "componentName": "ShopFloorLine.Category",
+            "props": {
+              categoryAdvertPicUrl: categoryDetail.categoryAdvertPicUrl,
+              categoryid: item.categoryId,
+              linkdisable: true,
+              categoryList: categoryDetail.categoryBOList
+            },
+          },
+        }
+
+        const Goods = {
+          [String(initIndex + 3)]: {
+            "componentName": "ShopFloorLine.Goods",
+            "props": {
+              linkdisable: true,
+              categoryid: item.categoryId,
+              goodsList: categoryDetail.goodsBOList
+            },
+          },
+        }
+
+        floorLineConfigItem = { ...FloorLine, ...Category, ...Goods }
+        floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem }
+        initIndex += 100
+      }
+
+    }
+
+    mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, fourBannerConfig.key, InformationConfig.key, FooterConfig.key]
+    const config = {
+      ...mallLayoutConfig,
+      ...topBarConfig,
+      ...topAdvertConfig,
+      ...headerConfig,
+      ...mainNavConfig,
+      ...bannerWrap,
+      ...oneBannerConfig,
+      ...bannerColumnWrap,
+      ...twoBannerConfig,
+      ...threeBannerConfig,
+      ...floorLineConfig,
+      ...fourBannerConfig,
+      ...InformationConfig,
+      ...FooterConfig
+    }
+    setComponentConfigs(config)
+    setLoading(false)
+  }
+
+  return !loading ? (
+    <BrickProvider
+      config={config}
+      warn={(msg: string) => {
+				message.warning(msg);
+			}}
+    >
+      <div className={styles['wrapper']}>
+        <ToolBar type={2} title="首页" />
+        <div className={styles['content']}>
+          <div className={styles['canvas-container']}>
+            <PreviewPanel onlyEidt theme={theme} pageConfig={componentConfigs} />
+          </div>
+        </div>
+      </div>
+    </BrickProvider>
+  ) : <Loading />
+}
+
+export default OwnMallEdit