feat: 平台首页装修

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

+import React, { useCallback, useState } from 'react'
+import { Modal, Button, message } from 'antd'
+import { ArrowLeftOutlined, SaveOutlined, LayoutOutlined } from '@ant-design/icons'
+import { PublicApi } from '@/services/api'
+import { DesingConfigItemType } from '../../platformEdit/types'
+import { useSelector, STATE_PROPS, ComponentConfigsType, PROPS_TYPES } from 'lingxi-editor-core'
+import { history } from 'umi'
+import styles from './index.less'
+
+interface ToolBarPropsType {
+  type?: number;
+  title?: string,
+  showActions?: boolean,
+  templateId?: number,
+}
+
+const PlatformToolBar: React.FC<ToolBarPropsType> = (props) => {
+  const { type = 1, title = "平台首页", showActions, templateId } = props
+  const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
+  const { componentConfigs } = useSelector<ComponentConfigsType, STATE_PROPS>(['componentConfigs'])
+
+  const handleGoBack = () => {
+    if (type === 1) {
+      Modal.confirm({
+        content: "是否确认离开模板装修页面？",
+        okText: "确认",
+        className: styles.modal_confirm,
+        cancelText: "取消",
+        onOk: () => {
+          history.goBack()
+        }
+      })
+    } else {
+      history.goBack()
+    }
+  }
+
+  const handleSave = useCallback(() => {
+    console.log(componentConfigs, 'componentConfigs')
+    const resultConfig: DesingConfigItemType[] = []
+    const goodsList: DesingConfigItemType[] = []
+    let goodsSort = 0
+    Object.keys(componentConfigs).forEach((key, index) => {
+      const componentConfigsItem = componentConfigs[key]
+      if(componentConfigsItem.componentType) {
+
+        switch(componentConfigsItem.componentType) {
+          case PROPS_TYPES.mallNav:
+            resultConfig.push({
+              name: 'navList',
+              status: true,
+              sort: index,
+              content: componentConfigsItem.props.menuData
+            })
+            break
+          case PROPS_TYPES.platformAdvert:
+            const { type, advertList } = componentConfigsItem.props
+            // 'banner' | 'bannerRight' | 'bannerBottom' | 'floorBanner' | 'service'
+            switch (type) {
+              case 'banner':
+                resultConfig.push({
+                  name: 'bannerAdvert',
+                  status: true,
+                  sort: index,
+                  content: advertList
+                })
+                break
+              case 'bannerRight':
+                resultConfig.push({
+                  name: 'bannerRightAdvert',
+                  status: true,
+                  sort: index,
+                  content: advertList
+                })
+                break
+              case 'bannerBottom':
+                resultConfig.push({
+                  name: 'banneBottomrAdvert',
+                  status: true,
+                  sort: index,
+                  content: advertList
+                })
+                break
+              case 'floorBanner':
+                resultConfig.push({
+                  name: 'middleAdvert',
+                  status: true,
+                  sort: index,
+                  content: advertList
+                })
+                break
+              case 'service':
+                resultConfig.push({
+                  name: 'bottomAdvert',
+                  status: true,
+                  sort: index,
+                  content: advertList
+                })
+                break
+              default:
+                break
+            }
+            break
+          case PROPS_TYPES.platformQuickNav:
+            const { sellQuickNavList, buyQuickNavList, quickNavList } = componentConfigsItem.props
+            resultConfig.push({
+              name: 'fastVisit',
+              status: true,
+              sort: index,
+              content: {
+                sellerBOList: sellQuickNavList,
+                buyerBOList: buyQuickNavList,
+                fastFunctionBOList: quickNavList
+              }
+            })
+            break
+          case PROPS_TYPES.platformGoods:
+            if (goodsSort === 0) {
+              goodsSort = index
+            }
+            goodsList.push(componentConfigsItem.props.dataInfo)
+            break
+          case PROPS_TYPES.platformBrand:
+            resultConfig.push({
+              name: 'brand',
+              sort: index,
+              status: true,
+              content: componentConfigsItem.props.dataList
+            })
+            break
+          case PROPS_TYPES.platformMechant:
+            resultConfig.push({
+              name: 'merchant',
+              sort: index,
+              status: true,
+              content: componentConfigsItem.props.dataList
+            })
+            break
+          case PROPS_TYPES.platformInformation:
+            const { marketList, information } = componentConfigsItem.props
+            resultConfig.push({
+              name: 'marketInformation',
+              status: true,
+              sort: index,
+              content: {
+                marketList: marketList,
+                information: information
+              }
+            })
+            break
+          case PROPS_TYPES.platformPurchaseAdvert:
+            resultConfig.push({
+              name: 'purchase',
+              sort: index,
+              status: true,
+              content: componentConfigsItem.props.advertList
+            })
+            break
+          case PROPS_TYPES.platformLogistics:
+            resultConfig.push({
+              name: 'logistics',
+              sort: index,
+              status: true,
+              content: componentConfigsItem.props.dataInfo
+            })
+            break
+          case PROPS_TYPES.platformProcess:
+            resultConfig.push({
+              name: 'process',
+              sort: index,
+              status: true,
+              content: componentConfigsItem.props.dataInfo
+            })
+            break
+          case PROPS_TYPES.platformService:
+            resultConfig.push({
+              name: 'platform',
+              sort: index,
+              status: true,
+              content: componentConfigsItem.props.dataList
+            })
+            break
+          default:
+            break
+        }
+      }
+    })
+
+    const newList: DesingConfigItemType[] = []
+    let addStatus = false
+    for (const item of resultConfig) {
+      if (item.sort && item.sort > goodsSort && !addStatus) {
+        newList.push({
+          name: 'goods',
+          sort: goodsSort,
+          status: true,
+          content: goodsList
+        })
+        addStatus = true
+      }
+      newList.push(item)
+    }
+
+    setConfirmLoading(true)
+    saveWebPlatformDesign(newList)
+  }, [componentConfigs])
+
+  const saveWebPlatformDesign = (configList: DesingConfigItemType[]) => {
+    const param: any = {
+      templateId,
+      list: configList
+    }
+    PublicApi.postTemplateAdornWebPlatformSave(param).then((res) => {
+      if (res.code === 1000) {
+        message.destroy()
+        message.success('保存成功')
+      }
+      setConfirmLoading(false)
+    }).catch(() => {
+      setConfirmLoading(false)
+    })
+  }
+
+  return (
+    <div className={styles.toolbar}>
+      <div className={styles.toolbar_back_btn} onClick={() => handleGoBack()}>
+        <ArrowLeftOutlined />
+      </div>
+      <div className={styles.toolbar_title}>
+        <span>{type === 1 ? '正在编辑：' : '正在预览：'}</span>
+        <label>{title}</label>
+      </div>
+      <div className={styles.toolbar_actions}>
+        <Button type="link" onClick={() => handleGoBack()}>取消</Button>
+        <Button
+          icon={<LayoutOutlined />}
+          loading={confirmLoading}
+          type="default"
+          style={{ marginRight: 24 }}
+        >
+          自定义显示板块
+        </Button>
+        <Button icon={<SaveOutlined />} loading={confirmLoading} type="primary" onClick={() => handleSave()}>保存</Button>
+      </div>
+    </div>
+  )
+}
+
+PlatformToolBar.defaultProps = {
+  type: 1,
+  title: "平台首页",
+  showActions: false,
+}
+
+export default PlatformToolBar

src/pages/pageCustomized/platformEdit/index.tsx

@@ -12,7 +12,8 @@ import {
   FooterConfig
 } from './defaultData'
 import Loading from '../components/Loading'
-import { ArrowLeftOutlined, SaveOutlined, LayoutOutlined } from '@ant-design/icons'
+import { ArrowLeftOutlined } from '@ant-design/icons'
+import PlatformToolBar from '../components/toolBar/platform'
 import { getMenuData, defaultDesignConfig } from './utils'
 import { DesingConfigItemType } from './types'
 import { PublicApi } from '@/services/api'
@@ -847,24 +848,7 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
           <div className={styles.toolbar_back_btn} onClick={() => handleGoBack()}>
             <ArrowLeftOutlined />
           </div>
-          <div className={styles.toolbar_title}>
-            <span>正在编辑：</span>
-            <label>平台首页</label>
-          </div>
-          {
-            <div className={styles.toolbar_actions}>
-              <Button type="link" onClick={() => handleGoBack()}>取消</Button>
-              <Button
-                icon={<LayoutOutlined />}
-                loading={saveLoading}
-                type="default"
-                style={{ marginRight: 24 }}
-              >
-                自定义显示板块
-              </Button>
-              <Button icon={<SaveOutlined />} loading={confirmLoading} type="primary" onClick={() => handleSave()}>保存</Button>
-            </div>
-          }
+          <PlatformToolBar templateId={id} />
         </div>
         <div className={styles['content']}>
           <div className={styles['canvas-container']}>

src/pages/pageCustomized/settingsPanel/propsSettings/components/PlatformAdvertSetting/index.tsx

@@ -2,11 +2,10 @@ import React, { forwardRef, useState, useCallback, useEffect } from 'react'
 import { Button, Input, Modal } from 'antd'
 import UploadImage from '@/components/UploadImage'
 import { ReactSortable } from "react-sortablejs"
-import { filterPropsFunction, getAdvertType, addTempalteIdToList } from '../../../../utils'
+import { filterPropsFunction} from '../../../../utils'
 import SettingPanel from '../../../../components/SettingPanel'
 import { message } from 'antd'
 import { isEmpty } from '@formily/antd/esm/shared'
-import { PublicApi } from '@/services/api'
 import { clearSelectedStatus, changeProps } from 'lingxi-editor-core'
 import cx from 'classnames'
 import { PlusOutlined, CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons'

src/pages/pageCustomized/settingsPanel/propsSettings/index.tsx

 import React, { useState, useEffect } from 'react'
-import { Drawer } from 'antd'
+import { Drawer, message } from 'antd'
 import GoodsSetting from './components/GoodsSetting'
 import BrandSetting from './components/BrandSetting'
 import ShopSetting from './components/ShopSetting'
@@ -15,8 +15,9 @@ import PlatformService from './components/PlatformService'
 import PlatformInformation from './components/PlatformInformation'
 import MallNav from './components/MallNav'
 import CategoryRecommendSetting from './components/CategoryreCommendSetting'
-import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES, addPropsConfig } from 'lingxi-editor-core';
+import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES, useSelector, STATE_PROPS, ComponentConfigsType, SelectedInfoBaseType, selectComponent, changeProps } from 'lingxi-editor-core';
 import './index.less'
+import { useMemo } from 'react'
 
 interface PropsSettingsPropsType {
   selectedInfo?: SelectedInfoType,
@@ -28,6 +29,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
   const [drawerTitle, setDrawerTitle] = useState<string>('')
   const [drawerWidth, setDrawerWidth] = useState<number>(800)
   const { selectedInfo, templateId } = props
+  const { componentConfigs } = useSelector<ComponentConfigsType, STATE_PROPS>(['componentConfigs'])
+  const [currentGoodsItem, setCurrentGoodsItem] = useState<any>()
 
   const onClose = () => {
     setDrawerVisible(false)
@@ -73,15 +76,36 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
         case PROPS_TYPES.platformInformation:
           return <PlatformInformation templateId={templateId} {...initProps} />
         case PROPS_TYPES.platformAddGoodsItem:
-          console.log(selectedInfo, 'selectedInfo')
-
-          // const newGoodsItem = {
-          //   newPropField: "120",
-          //   fatherFieldLocation: "113",
-          //   propType: PROPS_TYPES.platformGoods
-          // }
-
-          // addPropsConfig(newGoodsItem)
+            const newList: any[] = []
+            Object.keys(componentConfigs).forEach(key => {
+              if(componentConfigs[key].componentType && componentConfigs[key].componentType === PROPS_TYPES.platformGoods) {
+                componentConfigs[key].key = key
+                newList.push(componentConfigs[key])
+              }
+            })
+          if (newList && newList.length > 0) {
+            let currentItem: any = undefined
+            for (let i = 0; i < newList.length; i++) {
+              const item = newList[i]
+              if (!item.props.dataInfo.visible) {
+                console.log(item.key, item.props.dataInfo.visible)
+                currentItem = item
+                break
+              }
+            }
+            if (currentItem) {
+              setCurrentGoodsItem(currentItem)
+              const specialProps: SelectedInfoBaseType = {
+                parentKey: "0",
+                key: currentItem.key,
+                domTreeKeys: ["0", currentItem.key],
+                draggable: false,
+              }
+              selectComponent(specialProps)
+            } else {
+              message.info('最多添加6种商品推荐')
+            }
+          }
           break
       }
     }
@@ -90,6 +114,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
 
   useEffect(() => {
     const { propsConfig } = selectedInfo || {};
+
     const componentType = propsConfig?.componentType
     if (componentType) {
       setDrawerTitle(componentType.label || '')
@@ -102,12 +127,20 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
       if (componentType.type !== PROPS_TYPES.platformAddGoodsItem) {
         setDrawerVisible(true)
       }
+      if (componentType.type === PROPS_TYPES.platformGoods && currentGoodsItem) {
+        console.log(currentGoodsItem, 'currentGoodsItem')
+        const newProps = { ...currentGoodsItem.props }
+        newProps.dataInfo.visible = true
+        changeProps({
+          props: newProps
+        })
+      }
     } else {
       setDrawerVisible(false)
     }
   }, [selectedInfo])
 
-  return (
+  return useMemo(() => (
     <Drawer
       maskClosable={false}
       title={drawerTitle}
@@ -118,7 +151,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
     >
       {renderDrawerComponent()}
     </Drawer>
-  )
+  ), [selectedInfo, componentConfigs, drawerVisible])
 }
 
 export default PropsSettings