Skip to content

J
jinfa-admin
Commit bba59511 authored by GuanHua's avatar GuanHua
Browse files
Options

fix: 修改装修相关组件

parent 906572b8
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1232 additions and 1294 deletions
package.json
View file @ bba59511
......@@ -55,7 +55,7 @@
"@formily/antd": "^1.2.11",
"@formily/antd-components": "^1.2.11",
"@lingxi-disign/core": "^1.0.1",
"@lingxi-disign/react": "^1.0.1",
"@lingxi-disign/react": "^1.0.3",
"@lingxi-disign/ui": "^1.0.1",
"@types/crypto-js": "^4.0.1",
"@umijs/hooks": "^1.9.3",
......
src/pages/pageCustomized/components/ComponentsPreview.tsx
View file @ bba59511
import React, { useEffect, useState } from 'react';
import map from 'lodash/map'
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons'
import cx from 'classnames'
import { cloneDeep } from 'lodash'
import { selectComponent, useSelector, ComponentConfigsType, SelectedInfoBaseType, SelectedInfoType, clearSelectedStatus, STATE_PROPS, VirtualDOMType } from 'lingxi-editor-core';
import styles from './index.less'
import map from 'lodash/map';
import { EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons';
import cx from 'classnames';
import { cloneDeep } from 'lodash';
import { selectComponent, PageConfigType, PropsType, ChildNodesType, SelectedInfoBaseType, SelectedInfoType, clearSelectedStatus, STATE_PROPS } from '@lingxi-disign/core';
import { useSelector } from '@lingxi-disign/react';
import styles from './index.less';
export interface VirtualDOMType {
key?: string;
componentName: string;
props?: PropsType;
childNodes?: ChildNodesType;
condition?: string;
isStateDomain?: boolean;
propFields?: string[];
methods?: {
[key: string]: string;
};
loop?: string | any[];
fileName?: string;
[custom: string]: any;
}
type SettingPanelType = {
selectedInfo: SelectedInfoType,
componentConfigs: ComponentConfigsType
pageConfig: PageConfigType
}
const AllComponents = () => {
const [allComponents, setAllComponents] = useState<VirtualDOMType[]>([])
const { selectedInfo, componentConfigs } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'componentConfigs'])
const [allComponents, setAllComponents] = useState<VirtualDOMType[]>([]);
const { selectedInfo, pageConfig } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'pageConfig']);
useEffect(() => {
const newList: VirtualDOMType[] = []
const config = cloneDeep(componentConfigs)
const newList: VirtualDOMType[] = [];
const config = cloneDeep(pageConfig);
Object.keys(config).forEach(key => {
if(config[key].canEdit) {
if (key !== 'key') {
config[key].key = key
newList.push(config[key])
config[key].key = key;
newList.push(config[key]);
}
}
})
setAllComponents(newList)
}, [componentConfigs, selectedInfo])
});
setAllComponents(newList);
}, [pageConfig, selectedInfo]);
const handleSelectComponent = (key: string) => {
const handleSelectComponent = (key: string | undefined) => {
if (!key) return;
if(!selectedInfo || selectedInfo.selectedKey !== key) {
const specialProps: SelectedInfoBaseType = {
parentKey: "0",
key,
domTreeKeys: ["0", key],
draggable: false,
}
selectComponent(specialProps)
};
selectComponent(specialProps);
} else {
clearSelectedStatus()
clearSelectedStatus();
}
}
};
const renderCompontentItem = (item: VirtualDOMType) => {
return (
<div className={cx(styles.components_item, (selectedInfo && selectedInfo.selectedKey === item.key) ? styles.active : {})} key={item.title} onClick={() => handleSelectComponent(item.key)}>
<span className={styles.components_item_text}>{item.title}</span>
{
item.canHide && (item.props.visible !== false ? <EyeOutlined className={cx(styles.components_item_icon)} /> : <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />)
item.canHide && (item.props?.visible !== false ? <EyeOutlined className={cx(styles.components_item_icon)} /> : <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />)
}
</div>
)
}
);
};
return (
<div className={styles.allcomponents_container}>
......@@ -66,6 +83,6 @@ const AllComponents = () => {
</div>
</div>
);
}
};
export default AllComponents;
src/pages/pageCustomized/components/DesignPanel.tsx
View file @ bba59511
......@@ -5,11 +5,18 @@ import { BrickDesign } from '@lingxi-disign/react';
interface DesignPanelPropsType {
pageConfig: PageConfigType,
theme: string,
onlyEidt?: boolean,
pageName?: string
}
const DesignPanel: React.FC<DesignPanelPropsType> = (props) => {
const { pageConfig, theme } = props;
return <BrickDesign pageName={'平台首页装修'} initState={{ pageConfig }} themeName={theme} />;
const { pageConfig, theme, pageName = 'index', onlyEidt } = props;
return <BrickDesign
pageName={pageName}
initState={{ pageConfig }}
themeName={theme}
onlyEidt={onlyEidt}
/>;
};
export default DesignPanel;
src/pages/pageCustomized/components/DesignPreview.tsx
View file @ bba59511
import React from 'react'
import { LingxiPreview } from 'lingxi-design';
import React from 'react';
import { PageConfigType } from '@lingxi-disign/core';
import { BrickPreview } from '@lingxi-disign/react';
const DesignPreview = (props) => {
const { theme } = props
return <LingxiPreview theme={theme} />
interface DesignPanelPropsType {
pageConfig: PageConfigType,
theme: string,
onlyEidt?: boolean,
pageName?: string
}
export default DesignPreview
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/MobileDesignPanel.tsx
View file @ bba59511
import React from 'react'
import { BrickDesign, LingxiPreview } from 'lingxi-design'
import React from 'react';
import { PageConfigType } from '@lingxi-disign/core';
// import MobileUIDemo from './mobileUIDemo'
import styles from './index.less'
import DesignPanel from './DesignPanel';
import DesignPreview from './DesignPreview';
import styles from './index.less';
interface MobileDesignPanelPropsType {
pageConfig: PageConfigType,
theme: string,
isPreview?: boolean,
onlyEidt?: boolean,
}
const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
const { theme, isPreview } = props
const { theme, isPreview, pageConfig, onlyEidt } = props;
return (
<div className={styles.mobileDesignContainer}>
<div className={styles.mobileDesignWrap}>
{
isPreview ? <LingxiPreview theme={theme} /> : <BrickDesign theme={theme} mobile />
isPreview ? <DesignPreview theme={theme} pageConfig={pageConfig} /> : <DesignPanel onlyEidt={onlyEidt} theme={theme} pageConfig={pageConfig} />
}
{/* <MobileUIDemo /> */}
</div>
<div className={styles.appBottom}>
<div className={styles.appBottomStrip}></div>
</div>
</div>
)
}
);
};
MobileDesignPanel.defaultProps = {
isPreview: false
}
};
export default MobileDesignPanel
export default MobileDesignPanel;
src/pages/pageCustomized/components/toolBar/index.tsx
View file @ bba59511
import React, { useCallback, useState } from 'react'
import { Modal, Button, message } from 'antd'
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons'
import { PublicApi } from '@/services/api'
import { useSelector, STATE_PROPS, ComponentConfigsType, PROPS_TYPES } from 'lingxi-editor-core'
import { history } from 'umi'
import styles from './index.less'
import React, { useCallback, useState } from 'react';
import { Modal, Button, message } from 'antd';
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
// import { useSelector, STATE_PROPS, ComponentConfigsType, PROPS_SETTING_TYPES } from 'lingxi-editor-core';
import { STATE_PROPS, PageConfigType, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
import { useSelector } from '@lingxi-disign/react';
import { history } from 'umi';
import styles from './index.less';
interface ToolBarPropsType {
type?: number;
......@@ -14,9 +17,9 @@ interface ToolBarPropsType {
}
const ToolBar: React.FC<ToolBarPropsType> = (props) => {
const { type = 1, title = "首页", showActions, templateId } = props
const [saveLoading, setSaveLoading] = useState<boolean>(false)
const { componentConfigs } = useSelector<ComponentConfigsType, STATE_PROPS>(['componentConfigs'])
const { type = 1, title = "首页", showActions, templateId } = props;
const [saveLoading, setSaveLoading] = useState<boolean>(false);
const { pageConfig } = useSelector<{ pageConfig: PageConfigType}, STATE_PROPS>(['pageConfig']);
const handleGoBack = () => {
if (type === 1) {
......@@ -26,84 +29,86 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
className: styles.modal_confirm,
cancelText: "取消",
onOk: () => {
history.goBack()
history.goBack();
}
})
});
} else {
history.goBack()
history.goBack();
}
}
};
const handleSave = useCallback(() => {
const param: any = {
templateId: Number(templateId),
appEnterpriseBO: {},
}
Object.keys(componentConfigs).forEach(key => {
const componentConfigsItem = componentConfigs[key]
if(componentConfigsItem.componentType) {
switch(componentConfigsItem.componentType) {
case PROPS_TYPES.mobileHeaderNav:
};
Object.keys(pageConfig).forEach(key => {
const pageConfigItem = pageConfig[key];
if(pageConfigItem.componentType) {
switch(pageConfigItem.componentType) {
case PROPS_SETTING_TYPES.mobileHeaderNav:
param.appEnterpriseBO.topBO = {
style: componentConfigsItem.props.styleTheme || 0,
style: pageConfigItem.props?.styleTheme || 0,
status: true,
topDetailsBOList: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileBanner:
topDetailsBOList: pageConfigItem.props?.dataList || []
};
break;
case PROPS_SETTING_TYPES.mobileBanner:
param.appEnterpriseBO.advertBO = {
status: componentConfigsItem.props.visible,
advertDetailsBOList: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileQuickNav:
status: pageConfigItem.props?.visible,
advertDetailsBOList: pageConfigItem.props?.dataList || []
};
break;
case PROPS_SETTING_TYPES.mobileQuickNav:
param.appEnterpriseBO.functionBO = {
status: componentConfigsItem.props.visible,
functionDetailsBO: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileShowCase:
status: pageConfigItem.props?.visible,
functionDetailsBO: pageConfigItem.props?.dataList || []
};
break;
case PROPS_SETTING_TYPES.mobileShowCase:
param.appEnterpriseBO.showcaseBO = {
style: componentConfigsItem.props.styleTheme || 0,
status: componentConfigsItem.props.visible,
showcaseDetailsBO: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileRecommentShops:
style: pageConfigItem.props?.styleTheme || 0,
status: pageConfigItem.props?.visible,
showcaseDetailsBO: pageConfigItem.props?.dataList || []
};
break;
case PROPS_SETTING_TYPES.mobileRecommentShops:
param.appEnterpriseBO.storeBO = {
status: componentConfigsItem.props.visible,
storeIdList: componentConfigsItem.props.dataList ? componentConfigsItem.props.dataList.map(item => item.selectId) : []
}
break
case PROPS_TYPES.mobileQuality:
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: componentConfigsItem.props.visible,
excellentDetailsBO: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileBottomNavigation:
status: pageConfigItem.props?.visible,
excellentDetailsBO: pageConfigItem.props?.dataList || []
};
break;
case PROPS_SETTING_TYPES.mobileBottomNavigation:
param.appEnterpriseBO.bottomBO = {
status: true,
bottomDetailsBOList: componentConfigsItem.props.dataList || []
}
break
bottomDetailsBOList: pageConfigItem.props?.dataList || []
};
break;
default:
break
break;
}
}
})
console.log(JSON.stringify(param), "param")
saveAppEnterprise(param)
}, [componentConfigs])
});
saveAppEnterprise(param);
}, [pageConfig]);
const saveAppEnterprise = (param) => {
setSaveLoading(true);
PublicApi.postTemplateAdornAppEnterpriseSave(param).then(res => {
if(res.code === 1000) {
message.destroy()
message.success("保存成功")
message.destroy();
message.success("保存成功");
}
})
}
setSaveLoading(false);
});
};
return (
<div className={styles.toolbar}>
......@@ -121,13 +126,13 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
</div>
}
</div>
)
}
);
};
ToolBar.defaultProps = {
type: 1,
title: "首页",
showActions: false,
}
};
export default ToolBar
export default ToolBar;
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/View.ts 0 → 100644
View file @ bba59511
import {
ComponentSchemaType,
PROPS_TYPES
} from '@lingxi-disign/react';
const View: ComponentSchemaType = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
}
},
};
export default View;
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/index.ts
View file @ bba59511
......@@ -38,8 +38,10 @@ import PlatformService from './PlatformService';
import PlatformInformation from './PlatformInformation';
import PlatformAddGoodsItem from './PlatformAddGoodsItem';
import PlatformIndex from './PlatformIndex';
import View from './View';
export default {
View,
TopBar,
Header,
Navigation,
......
src/pages/pageCustomized/configs/index.ts
View file @ bba59511
import * as LingXiUI from 'lingxi-design-ui';
import * as LxUI from '@lingxi-disign/ui';
import { ConfigType } from '@lingxi-disign/react';
// import { message } from 'antd';
import { htmlContainers, htmlNonContainers } from './htmlCategory';
......@@ -8,7 +9,7 @@ import AllComponentConfigs from './componentConfigs';
import * as CustomComponents from '../customComponents';
// import { flattenDeepArray } from '../utils';
const originalComponents = { ...LingXiUI, ...CustomComponents };
const originalComponents = { ...LingXiUI, ...LxUI, ...CustomComponents };
/**
* 容器组件分类
......
src/pages/pageCustomized/mallEdit/defaultData.ts
View file @ bba59511
......@@ -11,7 +11,7 @@ export const mallLayoutConfig = {
},
"childNodes": ["1", "3", "4", "21"]
},
}
};
export const topBarConfig = {
key: "1",
......@@ -21,7 +21,7 @@ export const topBarConfig = {
linkdisable: true
},
}
}
};
export const topAdvertConfig = {
key: "2",
......@@ -33,7 +33,7 @@ export const topAdvertConfig = {
"advertList": []
},
},
}
};
export const headerConfig = {
key: "3",
......@@ -43,7 +43,7 @@ export const headerConfig = {
"logoUrl": ""
},
},
}
};
export const mainNavConfig = {
key: "4",
......@@ -51,7 +51,7 @@ export const mainNavConfig = {
"componentName": "MallMainNav",
"props": {},
},
}
};
export const bannerContainer = {
key: "21",
......@@ -68,7 +68,7 @@ export const bannerContainer = {
},
"childNodes": ["22", "23", "24"]
}
}
};
export const categoryConfig = {
key: "22",
......@@ -79,7 +79,7 @@ export const categoryConfig = {
canHide: false,
}
}
}
};
export const bannerWrap = {
key: "23",
......@@ -94,7 +94,7 @@ export const bannerWrap = {
},
"childNodes": ["5", "6"]
}
}
};
export const quickNavConfigWrap = {
key: "24",
......@@ -103,7 +103,7 @@ export const quickNavConfigWrap = {
"props": {},
"childNodes": ["25", "26"]
}
}
};
export const quickNavConfig = {
key: "25",
......@@ -111,7 +111,7 @@ export const quickNavConfig = {
"componentName": "QuickNav",
"props": {},
}
}
};
export const navAdvertConfig = {
key: "26",
......@@ -123,7 +123,7 @@ export const navAdvertConfig = {
"advertList": []
},
},
}
};
export const bannerAdvertConfig = {
key: "5",
......@@ -136,7 +136,7 @@ export const bannerAdvertConfig = {
"advertList": []
}
},
}
};
export const interactAdvertConfig = {
key: "6",
......@@ -148,7 +148,7 @@ export const interactAdvertConfig = {
"advertList": []
},
},
}
};
export const FindMoreConfig = {
key: "18",
......@@ -156,7 +156,7 @@ export const FindMoreConfig = {
"componentName": "FindMore",
"props": {},
},
}
};
export const InformationConfig = {
key: '19',
......@@ -164,7 +164,7 @@ export const InformationConfig = {
"componentName": "Information",
"props": {},
},
}
};
export const FooterConfig = {
key: '20',
......@@ -172,4 +172,4 @@ export const FooterConfig = {
"componentName": "Footer",
"props": {},
},
}
};
src/pages/pageCustomized/mallEdit/defaultMenu.ts
View file @ bba59511
import { GlobalConfig } from '@/global/config'
import { GlobalConfig } from '@/global/config';
const siteUrl = GlobalConfig.site.siteInfo.siteUrl
const siteUrl = GlobalConfig.site.siteInfo.siteUrl;
/**
* 请求头
*/
export const REQUEST_HEADER = 'http://'
export const REQUEST_HEADER = 'http://';
export const getTopDomainByHost = (url: string): string => {
if (!url) return ''
return url.split('.').slice(-2).join('.')
}
if (!url) return '';
return url.split('.').slice(-2).join('.');
};
export const TOP_DOMAIN = getTopDomainByHost(siteUrl)
export const TOP_DOMAIN = getTopDomainByHost(siteUrl);
export const getMenuData = (shopId: number) => {
const shopInfo = GlobalConfig.web.shopInfo
const webMallList = shopInfo.filter((item: { id: number}) => item.id === shopId)
const shopInfo = GlobalConfig.web.shopInfo;
const webMallList = shopInfo.filter((item: { id: number}) => item.id === shopId);
if (webMallList.length > 0) {
const SUB_DOMAIN = webMallList[0].url
const SUB_DOMAIN = webMallList[0].url;
return [
{
......@@ -64,7 +64,7 @@ export const getMenuData = (shopId: number) => {
"status": true,
"key": "shopInfomation",
},
]
];
}
return []
}
return [];
};
src/pages/pageCustomized/mallEdit/index.tsx
View file @ bba59511
This diff is collapsed.
src/pages/pageCustomized/mobileSettingPanel/index.tsx
View file @ bba59511
import React, { useEffect, useState } from 'react'
import { ComponentConfigsType, SelectedInfoType, STATE_PROPS, useSelector } from 'lingxi-editor-core';
import React, { useEffect, useState } from 'react';
// import { pageConfigType, SelectedInfoType, STATE_PROPS, useSelector } from 'lingxi-editor-core';
import { PageConfigType, SelectedInfoType, STATE_PROPS, } from '@lingxi-disign/core';
import { useSelector } from '@lingxi-disign/react';
import get from 'lodash/get';
import cx from 'classnames'
import { Tabs } from 'antd'
import StyleSettings from './styleSettings'
import PropsSettings from './propsSettings'
import styles from './index.less'
import cx from 'classnames';
import { Tabs } from 'antd';
import StyleSettings from './styleSettings';
import PropsSettings from './propsSettings';
import styles from './index.less';
type SettingPanelType = {
selectedInfo: SelectedInfoType,
componentConfigs: ComponentConfigsType,
pageConfig: PageConfigType,
}
const { TabPane } = Tabs
const { TabPane } = Tabs;
const MobileSettingPanel: React.FC = ()=> {
const { selectedInfo, componentConfigs } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'componentConfigs'])
const { propsConfig } = selectedInfo || {}
const [ newSelectInfo, setNewSelectInfo ] = useState<SelectedInfoType>()
const { selectedInfo, pageConfig } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'pageConfig']);
const { propsConfig } = selectedInfo || {};
const [ newSelectInfo, setNewSelectInfo ] = useState<SelectedInfoType>();
useEffect(() => {
const updateSelectInfo = () => {
if(selectedInfo) {
const { props: oldProps ,selectedKey } = selectedInfo
const newProps = get(componentConfigs, [selectedKey, 'props'], oldProps)
const updateSelectInfo = { ...selectedInfo }
updateSelectInfo.props = newProps
const { props: oldProps ,selectedKey } = selectedInfo;
const newProps = get(pageConfig, [selectedKey, 'props'], oldProps);
const updateSelectInfo = { ...selectedInfo };
updateSelectInfo.props = newProps;
setNewSelectInfo(updateSelectInfo)
setNewSelectInfo(updateSelectInfo);
}
}
};
updateSelectInfo()
}, [selectedInfo, componentConfigs])
updateSelectInfo();
}, [selectedInfo, pageConfig]);
return (
<div className={cx(styles.mobileSettingPanel, selectedInfo ? styles.show : styles.hide)}>
......@@ -52,7 +54,7 @@ const MobileSettingPanel: React.FC = ()=> {
}
</Tabs>
</div>
)
}
);
};
export default MobileSettingPanel
export default MobileSettingPanel;
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bottomNavigation/index.tsx
View file @ bba59511
import React, { useState, useEffect } from 'react'
import { Button, Input, Radio, Select } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { changeProps } from 'lingxi-editor-core'
import { ReactSortable } from "react-sortablejs"
import cx from 'classnames'
import isEmpty from 'lodash/isEmpty'
import UploadImage from '@/components/UploadImage'
import arrowRightIcon from '@/asserts/icons/arrow_right.png'
import arrowLeftIcon from '@/asserts/icons/arrow_left.png'
import arrowUpIcon from '@/asserts/icons/arrow_up.png'
import arrowDownIcon from '@/asserts/icons/arrow_down.png'
import sortIcon from '@/asserts/icons/sort_icon.png'
import { cloneDeep } from 'lodash'
import React, { useState, useEffect } from 'react';
import { Button, Input, Radio, Select } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import { ReactSortable } from "react-sortablejs";
import cx from 'classnames';
import isEmpty from 'lodash/isEmpty';
import UploadImage from '@/components/UploadImage';
import arrowRightIcon from '@/asserts/icons/arrow_right.png';
import arrowLeftIcon from '@/asserts/icons/arrow_left.png';
import arrowUpIcon from '@/asserts/icons/arrow_up.png';
import arrowDownIcon from '@/asserts/icons/arrow_down.png';
import sortIcon from '@/asserts/icons/sort_icon.png';
import { cloneDeep } from 'lodash';
import styles from './index.less'
import styles from './index.less';
interface DataItemType {
id: number,
......@@ -71,27 +71,27 @@ const RedirectTypeList = [
value: 10,
label: '找店铺',
},
]
];
const BottomNavigation: React.FC<BottomNavigationPropsType> = (props) => {
const { dataList } = props
const [list, setList] = useState<DataItemType[]>([])
const { dataList } = props;
const [list, setList] = useState<DataItemType[]>([]);
useEffect(() => {
initDataList()
}, [dataList])
initDataList();
}, [dataList]);
const initDataList = () => {
if(dataList) {
const newDataList = cloneDeep(dataList).map((item: DataItemType, index: number) => {
item.id = index + 1
item.expand = item.expand || false
return item
})
setList(newDataList)
item.id = index + 1;
item.expand = item.expand || false;
return item;
});
setList(newDataList);
}
}
};
/**
* 修改名称
......@@ -99,139 +99,139 @@ const BottomNavigation: React.FC<BottomNavigationPropsType> = (props) => {
* @param id
*/
const handleNameChange = (value: string, id: number) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.name = value
item.name = value;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
/**
* 修改导航链接
*/
const handleTypeChange = (type: number, id: number) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.type = type
item.name = findNameByType(type)
item.type = type;
item.name = findNameByType(type);
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
/**
* 根据类型查询导航栏链接名称
* @param type
*/
const findNameByType = (type: number) => {
const result = RedirectTypeList.filter(item => item.value === type)[0]
const result = RedirectTypeList.filter(item => item.value === type)[0];
if(!isEmpty(result)) {
return result.label
return result.label;
}
return ""
}
return "";
};
const judgedItemNotInList = (item, type: number) => {
if(item.value === type) {
return true
return true;
}
return list.every(listItem => listItem.type !== item.value)
}
return list.every(listItem => listItem.type !== item.value);
};
const handleExpand = (id: number, expand: boolean) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.expand = expand
item.expand = expand;
} else {
item.expand = false
item.expand = false;
}
})
setList(newList)
}
});
setList(newList);
};
const sortUp = (index: number, item: DataItemType) => {
const newList = JSON.parse(JSON.stringify(list))
const tempItem = JSON.parse(JSON.stringify(item))
const temp = newList[index - 1]
newList[index - 1] = item
newList[index - 1].id = temp.id
newList[index] = temp
newList[index].id = tempItem.id
setList(newList)
const newList = JSON.parse(JSON.stringify(list));
const tempItem = JSON.parse(JSON.stringify(item));
const temp = newList[index - 1];
newList[index - 1] = item;
newList[index - 1].id = temp.id;
newList[index] = temp;
newList[index].id = tempItem.id;
setList(newList);
changeProps({
props:Object.assign({...props}, {dataList: newList })
})
}
});
};
const sortDown = (index: number, item: DataItemType) => {
const newList = JSON.parse(JSON.stringify(list))
const temp = newList[index + 1]
const tempItem = JSON.parse(JSON.stringify(item))
newList[index + 1] = item
newList[index + 1].id = temp.id
newList[index] = temp
newList[index].id = tempItem.id
setList(newList)
const newList = JSON.parse(JSON.stringify(list));
const temp = newList[index + 1];
const tempItem = JSON.parse(JSON.stringify(item));
newList[index + 1] = item;
newList[index + 1].id = temp.id;
newList[index] = temp;
newList[index].id = tempItem.id;
setList(newList);
changeProps({
props:Object.assign({...props}, {dataList: newList })
})
}
});
};
const handleDeleteItem = (index: number) => {
console.log('handleDeleteItem')
}
console.log('handleDeleteItem', index);
};
const handleStatusChange = (e, name: string) => {
const check = e.target.value
const newList = [...list]
const check = e.target.value;
const newList = [...list];
newList.map(item => {
if (item.name === name) {
item.status = check
item.status = check;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
const handleIconChange = (url: string, id: number, key: string) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item[key] = url
item[key] = url;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
const handleSortableChange = (evt, sortable, store) => {
console.log(evt, sortable, store)
}
console.log(evt, sortable, store);
};
return (
<div className={styles.setting}>
<ReactSortable
list={list}
setList={(newList) => {
setList(newList)
setList(newList);
if(!isEmpty(newList)) {
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
});
}
}}
......@@ -335,7 +335,7 @@ const BottomNavigation: React.FC<BottomNavigationPropsType> = (props) => {
))}
</ReactSortable>
</div>
)
}
);
};
export default BottomNavigation
export default BottomNavigation;
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/headerNav/index.tsx
View file @ bba59511
import React, { useState, useEffect } from 'react'
import { Button, Input, Radio } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { changeProps } from 'lingxi-editor-core'
import { ReactSortable } from "react-sortablejs"
import cx from 'classnames'
import isEmpty from 'lodash/isEmpty'
import UploadImage from '@/components/UploadImage'
import arrowRightIcon from '@/asserts/icons/arrow_right.png'
import arrowLeftIcon from '@/asserts/icons/arrow_left.png'
import arrowUpIcon from '@/asserts/icons/arrow_up.png'
import arrowDownIcon from '@/asserts/icons/arrow_down.png'
import sortIcon from '@/asserts/icons/sort_icon.png'
import { cloneDeep } from 'lodash'
import styles from './index.less'
import React, { useState, useEffect } from 'react';
import { Button, Input, Radio } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import { ReactSortable } from "react-sortablejs";
import cx from 'classnames';
import isEmpty from 'lodash/isEmpty';
import UploadImage from '@/components/UploadImage';
import arrowRightIcon from '@/asserts/icons/arrow_right.png';
import arrowLeftIcon from '@/asserts/icons/arrow_left.png';
import arrowUpIcon from '@/asserts/icons/arrow_up.png';
import arrowDownIcon from '@/asserts/icons/arrow_down.png';
import sortIcon from '@/asserts/icons/sort_icon.png';
import { cloneDeep } from 'lodash';
import styles from './index.less';
interface DataItemType {
id: number,
......@@ -29,123 +29,123 @@ interface HeaderNavPropsType {
const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
const { dataList } = props
const [list, setList] = useState<DataItemType[]>([])
const { dataList } = props;
const [list, setList] = useState<DataItemType[]>([]);
useEffect(() => {
initDataList()
}, [dataList])
initDataList();
}, [dataList]);
const initDataList = () => {
if(dataList) {
const newDataList = cloneDeep(dataList).map((item: DataItemType, index: number) => {
item.id = index + 1
item.expand = item.expand || false
return item
})
setList(newDataList)
item.id = index + 1;
item.expand = item.expand || false;
return item;
});
setList(newDataList);
}
}
};
const handleExpand = (id: number, expand: boolean) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.expand = expand
item.expand = expand;
} else {
item.expand = false
item.expand = false;
}
})
setList(newList)
}
});
setList(newList);
};
const sortUp = (index: number, item: DataItemType) => {
const newList = JSON.parse(JSON.stringify(list))
const tempItem = JSON.parse(JSON.stringify(item))
const temp = newList[index - 1]
newList[index - 1] = item
newList[index - 1].id = temp.id
newList[index] = temp
newList[index].id = tempItem.id
setList(newList)
const newList = JSON.parse(JSON.stringify(list));
const tempItem = JSON.parse(JSON.stringify(item));
const temp = newList[index - 1];
newList[index - 1] = item;
newList[index - 1].id = temp.id;
newList[index] = temp;
newList[index].id = tempItem.id;
setList(newList);
changeProps({
props:Object.assign({...props}, {dataList: newList })
})
}
});
};
const sortDown = (index: number, item: DataItemType) => {
const newList = JSON.parse(JSON.stringify(list))
const temp = newList[index + 1]
const tempItem = JSON.parse(JSON.stringify(item))
newList[index + 1] = item
newList[index + 1].id = temp.id
newList[index] = temp
newList[index].id = tempItem.id
setList(newList)
const newList = JSON.parse(JSON.stringify(list));
const temp = newList[index + 1];
const tempItem = JSON.parse(JSON.stringify(item));
newList[index + 1] = item;
newList[index + 1].id = temp.id;
newList[index] = temp;
newList[index].id = tempItem.id;
setList(newList);
changeProps({
props:Object.assign({...props}, {dataList: newList })
})
}
});
};
const handleDeleteItem = (index: number) => {
console.log('handleDeleteItem')
}
console.log('handleDeleteItem', index);
};
const handleSearchContentChange = (e) => {
const value = e.target.value
const newList = [...list]
const value = e.target.value;
const newList = [...list];
newList.map(item => {
if (item.name === "搜索框") {
item.content = value
item.content = value;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
const handleStatusChange = (e, name: string) => {
const check = e.target.value
const newList = [...list]
const check = e.target.value;
const newList = [...list];
newList.map(item => {
if (item.name === name) {
item.status = check
item.status = check;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
const handleIconChange = (url: string, name: string) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.name === name) {
item.content = url
item.content = url;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
const handleSortableChange = (evt, sortable, store) => {
console.log(evt, sortable, store)
}
console.log(evt, sortable, store);
};
return (
<div className={styles.setting}>
<ReactSortable
list={list}
setList={(newList) => {
setList(newList)
setList(newList);
if(!isEmpty(newList)) {
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
});
}
}}
......@@ -229,7 +229,7 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
))}
</ReactSortable>
</div>
)
}
);
};
export default HeaderNav
export default HeaderNav;
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/quickNav/index.tsx
View file @ bba59511
import React, { useState, useEffect } from 'react'
import { Button, Input, Select, Checkbox } from 'antd'
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
import { changeProps } from 'lingxi-editor-core'
import { ReactSortable } from "react-sortablejs"
import cx from 'classnames'
import isEmpty from 'lodash/isEmpty'
import UploadImage from '@/components/UploadImage'
import arrowRightIcon from '@/asserts/icons/arrow_right.png'
import arrowLeftIcon from '@/asserts/icons/arrow_left.png'
import arrowUpIcon from '@/asserts/icons/arrow_up.png'
import arrowDownIcon from '@/asserts/icons/arrow_down.png'
import sortIcon from '@/asserts/icons/sort_icon.png'
import { cloneDeep } from 'lodash'
import React, { useState, useEffect } from 'react';
import { Button, Input, Select, Checkbox } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import { ReactSortable } from "react-sortablejs";
import cx from 'classnames';
import isEmpty from 'lodash/isEmpty';
import UploadImage from '@/components/UploadImage';
import arrowRightIcon from '@/asserts/icons/arrow_right.png';
import arrowLeftIcon from '@/asserts/icons/arrow_left.png';
import arrowUpIcon from '@/asserts/icons/arrow_up.png';
import arrowDownIcon from '@/asserts/icons/arrow_down.png';
import sortIcon from '@/asserts/icons/sort_icon.png';
import { cloneDeep } from 'lodash';
import styles from './index.less'
import styles from './index.less';
interface DataItemType {
id: number,
......@@ -79,142 +79,142 @@ const RedirectTypeList = [
value: 12,
label: '外部链接',
},
]
];
const QuickNav: React.FC<QuickNavPropsType> = (props) => {
const { dataList, visible } = props
const [list, setList] = useState<DataItemType[]>([])
const { dataList, visible } = props;
const [list, setList] = useState<DataItemType[]>([]);
useEffect(() => {
initDataList()
}, [dataList])
initDataList();
}, [dataList]);
const initDataList = () => {
if(dataList) {
const newDataList = cloneDeep(dataList).map((item: DataItemType, index: number) => {
item.id = index + 1
item.expand = item.expand || false
return item
})
setList(newDataList)
item.id = index + 1;
item.expand = item.expand || false;
return item;
});
setList(newDataList);
}
}
};
const handleExpand = (id: number, expand: boolean) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.expand = expand
item.expand = expand;
} else {
item.expand = false
item.expand = false;
}
})
setList(newList)
}
});
setList(newList);
};
const sortUp = (index: number, item: DataItemType) => {
const newList = JSON.parse(JSON.stringify(list))
const tempItem = JSON.parse(JSON.stringify(item))
const temp = newList[index - 1]
newList[index - 1] = item
newList[index - 1].id = temp.id
newList[index] = temp
newList[index].id = tempItem.id
setList(newList)
const newList = JSON.parse(JSON.stringify(list));
const tempItem = JSON.parse(JSON.stringify(item));
const temp = newList[index - 1];
newList[index - 1] = item;
newList[index - 1].id = temp.id;
newList[index] = temp;
newList[index].id = tempItem.id;
setList(newList);
changeProps({
props:Object.assign({...props}, {dataList: newList })
})
}
});
};
const sortDown = (index: number, item: DataItemType) => {
const newList = JSON.parse(JSON.stringify(list))
const temp = newList[index + 1]
const tempItem = JSON.parse(JSON.stringify(item))
newList[index + 1] = item
newList[index + 1].id = temp.id
newList[index] = temp
newList[index].id = tempItem.id
setList(newList)
const newList = JSON.parse(JSON.stringify(list));
const temp = newList[index + 1];
const tempItem = JSON.parse(JSON.stringify(item));
newList[index + 1] = item;
newList[index + 1].id = temp.id;
newList[index] = temp;
newList[index].id = tempItem.id;
setList(newList);
changeProps({
props:Object.assign({...props}, {dataList: newList })
})
}
});
};
const handleDeleteItem = (index: number) => {
console.log('handleDeleteItem')
}
console.log('handleDeleteItem', index);
};
const handleIconChange = (url: string, id: number) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.icon = url
item.icon = url;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
const handleSortableChange = (evt, sortable, store) => {
console.log(evt, sortable, store)
}
console.log(evt, sortable, store);
};
/**
* 显示隐藏模块
*/
const handleHideChange = (e) => {
const checked = e.target.checked
const checked = e.target.checked;
changeProps({
props:Object.assign({ ...props }, { visible: !checked })
})
}
});
};
/**
* 根据id删除某一项
* @param id
*/
const handleClickItem = (id: number) => {
const newList = [...list]
const result = newList.filter(item => item.id !== id)
setList(result)
const newList = [...list];
const result = newList.filter(item => item.id !== id);
setList(result);
changeProps({
props:Object.assign({ ...props }, { dataList: result })
})
}
});
};
/**
* 修改跳转类型
*/
const handleTypeChange = (type: number, id: number) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.type = type
item.type = type;
if(!item.name) {
item.name = findNameByType(item.type)
item.name = findNameByType(item.type);
}
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
/**
* 根据类型查询导航栏链接名称
* @param type
*/
const findNameByType = (type: number) => {
const result = RedirectTypeList.filter(item => item.value === type)[0]
const result = RedirectTypeList.filter(item => item.value === type)[0];
if(!isEmpty(result)) {
return result.label
return result.label;
}
return ""
}
return "";
};
/**
* 修改广告名称
......@@ -222,17 +222,17 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
* @param id
*/
const handleNameChange = (value: string, id: number) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.name = value
item.name = value;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
/**
* 修改链接地址
......@@ -240,23 +240,23 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
* @param id
*/
const handleUrlChange = (value: string, id: number) => {
const newList = [...list]
const newList = [...list];
newList.map(item => {
if (item.id === id) {
item.url = value
item.url = value;
}
})
setList(newList)
});
setList(newList);
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
});
};
/**
* 添加广告
*/
const handleAddItem = () => {
const newList = [...list]
const newList = [...list];
const newItem: DataItemType = {
id: newList.length + 1,
expand: true,
......@@ -264,13 +264,13 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
type: 0,
name: "",
url: ""
}
handleExpand(newItem.id, true)
setList([...newList, newItem])
};
handleExpand(newItem.id, true);
setList([...newList, newItem]);
changeProps({
props:Object.assign({ ...props }, { dataList: [...newList, newItem] })
})
}
});
};
return (
<div className={styles.setting}>
......@@ -280,11 +280,11 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
<ReactSortable
list={list}
setList={(newList) => {
setList(newList)
setList(newList);
if(!isEmpty(newList)) {
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
});
}
}}
......@@ -371,7 +371,7 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
</ReactSortable>
<Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={handleAddItem}>添加功能模块</Button>
</div>
)
}
);
};
export default QuickNav
export default QuickNav;
src/pages/pageCustomized/mobileSettingPanel/propsSettings/index.tsx
View file @ bba59511
import React from 'react'
import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES } from 'lingxi-editor-core';
import HeaderNav from './components/headerNav'
import Banner from './components/banner'
import QuickNav from './components/quickNav'
import ShowCase from './components/showCase'
import Shops from './components/shops'
import Quality from './components/quality'
import BottomNavigation from './components/bottomNavigation'
import styles from './index.less'
import React from 'react';
import { SelectedInfoType, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
import HeaderNav from './components/headerNav';
import Banner from './components/banner';
import QuickNav from './components/quickNav';
import ShowCase from './components/showCase';
import Shops from './components/shops';
import Quality from './components/quality';
import BottomNavigation from './components/bottomNavigation';
import styles from './index.less';
interface PropsSettingsPropsType {
selectedInfo: SelectedInfoType | undefined,
}
const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
const { selectedInfo } = props
const { selectedInfo } = props;
const renderSettingItem = () => {
const { props: initProps, propsConfig } = selectedInfo || {};
const componentType = propsConfig?.componentType
const componentType = propsConfig?.componentType;
if (componentType) {
switch (componentType.type) {
case PROPS_TYPES.mobileHeaderNav:
return <HeaderNav {...initProps} />
case PROPS_TYPES.mobileBanner:
return <Banner {...initProps} />
case PROPS_TYPES.mobileQuickNav:
return <QuickNav {...initProps} />
case PROPS_TYPES.mobileShowCase:
return <ShowCase {...initProps} />
case PROPS_TYPES.mobileRecommentShops:
return <Shops {...initProps} />
case PROPS_TYPES.mobileQuality:
return <Quality {...initProps} />
case PROPS_TYPES.mobileBottomNavigation:
return <BottomNavigation {...initProps} />
case PROPS_SETTING_TYPES.mobileHeaderNav:
return <HeaderNav {...initProps} />;
case PROPS_SETTING_TYPES.mobileBanner:
return <Banner {...initProps} />;
case PROPS_SETTING_TYPES.mobileQuickNav:
return <QuickNav {...initProps} />;
case PROPS_SETTING_TYPES.mobileShowCase:
return <ShowCase {...initProps} />;
case PROPS_SETTING_TYPES.mobileRecommentShops:
return <Shops {...initProps} />;
case PROPS_SETTING_TYPES.mobileQuality:
return <Quality {...initProps} />;
case PROPS_SETTING_TYPES.mobileBottomNavigation:
return <BottomNavigation {...initProps} />;
default:
return null
return null;
}
}
}
};
return (
<div className={styles.propsSettingsWrapper}>
......@@ -48,7 +48,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
{renderSettingItem()}
</div>
</div>
)
}
);
};
export default PropsSettings
export default PropsSettings;
src/pages/pageCustomized/mobileSettingPanel/styleSettings/index.tsx
View file @ bba59511
import React, { useState } from 'react'
import cx from 'classnames'
import { SelectedInfoType, changeProps } from 'lingxi-editor-core'
import styles from './index.less'
import React, { useState } from 'react';
import cx from 'classnames';
import { SelectedInfoType, changeProps } from '@lingxi-disign/core';
import styles from './index.less';
interface StyleSettingsPropsType {
selectedInfo: SelectedInfoType | undefined,
}
const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
const { props: selectProps } = selectedInfo || {}
const [ selectKey, setSelectKey ] = useState<number>(selectProps.styleTheme)
const { props: selectProps } = selectedInfo || {};
const [ selectKey, setSelectKey ] = useState<number>(selectProps.styleTheme);
/**
* 更换样式模板
......@@ -17,12 +17,12 @@ const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
*/
const handleChangeStyleTheme = (key: number) => {
if(selectKey !== key) {
setSelectKey(key)
setSelectKey(key);
changeProps({
props: Object.assign({ ...selectProps }, { styleTheme: key })
})
});
}
}
};
return (
<div className={styles.styleSettings}>
......@@ -36,7 +36,7 @@ const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
}
</div>
</div>
)
}
);
};
export default StyleSettings
export default StyleSettings;
src/pages/pageCustomized/platformEdit/defaultData.ts
View file @ bba59511
......@@ -12,7 +12,7 @@ export const mallLayoutConfig = {
"childNodes": ["1"] // "3", "4", "5"
// , "13", "30", "14", "15", "16", "17", "18", "19", "20", "22"
},
}
};
export const platformIndexConfig = {
key: "1",
......@@ -21,7 +21,7 @@ export const platformIndexConfig = {
"props": {},
"childNodes": []
}
}
};
// export const topBarConfig = {
// key: "1",
......@@ -41,7 +41,7 @@ export const headerConfig = {
"type": "platform"
},
},
}
};
export const mainNavConfig = {
key: "4",
......@@ -49,13 +49,13 @@ export const mainNavConfig = {
"componentName": "MallMainNav",
"props": {},
},
}
};
export const bannerContainer = {
key: "5",
"5": {
"componentName": "div",
"componentName": "View",
"props": {
"style": {
position: "relative",
......@@ -67,7 +67,7 @@ export const bannerContainer = {
},
"childNodes": ["6", "7", "12"]
}
}
};
export const categoryConfig = {
key: "6",
......@@ -78,12 +78,12 @@ export const categoryConfig = {
canHide: false,
}
}
}
};
export const bannerWrap = {
key: "7",
"7": {
"componentName": "div",
"componentName": "View",
"props": {
"style": {
flex: 1,
......@@ -92,12 +92,12 @@ export const bannerWrap = {
},
"childNodes": ["8", "11"]
}
}
};
export const bannerHorizontal = {
key: "8",
"8": {
"componentName": "div",
"componentName": "View",
"props": {
"style": {
display: 'flex',
......@@ -106,7 +106,7 @@ export const bannerHorizontal = {
},
"childNodes": ["9", "10"]
}
}
};
export const bannerAdvertConfig = {
key: "9",
......@@ -118,7 +118,7 @@ export const bannerAdvertConfig = {
"advertList": []
}
},
}
};
export const bannerRightAdvertConfig = {
key: "10",
......@@ -130,7 +130,7 @@ export const bannerRightAdvertConfig = {
"advertList": []
}
},
}
};
export const bannerBottomAdvertConfig = {
key: "11",
......@@ -142,7 +142,7 @@ export const bannerBottomAdvertConfig = {
"advertList": []
}
},
}
};
export const quickNavConfigWrap = {
key: "12",
......@@ -150,7 +150,7 @@ export const quickNavConfigWrap = {
"componentName": "PlatformQuickNav",
"props": {},
}
}
};
export const PlatformGoodsConfig = {
key: "13",
......@@ -160,7 +160,7 @@ export const PlatformGoodsConfig = {
"dataInfo": {}
},
}
}
};
export const PlatformBrandConfig = {
key: "14",
......@@ -168,7 +168,7 @@ export const PlatformBrandConfig = {
"componentName": "PlatformBrand",
"props": {},
}
}
};
export const PlatformMerchantConfig = {
key: "15",
......@@ -176,7 +176,7 @@ export const PlatformMerchantConfig = {
"componentName": "PlatformMerchant",
"props": {},
}
}
};
export const PlatformInformationConfig = {
......@@ -185,7 +185,7 @@ export const PlatformInformationConfig = {
"componentName": "PlatformInformation",
"props": {},
}
}
};
export const PlatformPurchaseConfig = {
key: "17",
......@@ -195,7 +195,7 @@ export const PlatformPurchaseConfig = {
},
"childNodes": ["21"]
}
}
};
export const PlatformLogisticsConfig = {
key: "18",
......@@ -203,7 +203,7 @@ export const PlatformLogisticsConfig = {
"componentName": "PlatformLogistics",
"props": {},
}
}
};
export const PlatformProcessConfig = {
......@@ -212,7 +212,7 @@ export const PlatformProcessConfig = {
"componentName": "PlatformProcess",
"props": {},
}
}
};
export const PlatformServiceConfig = {
key: "20",
......@@ -220,7 +220,7 @@ export const PlatformServiceConfig = {
"componentName": "PlatformService",
"props": {},
}
}
};
export const PurchaseAdvertConfig = {
......@@ -231,7 +231,7 @@ export const PurchaseAdvertConfig = {
advertList: []
},
}
}
};
export const FooterConfig = {
key: '40',
......@@ -239,7 +239,7 @@ export const FooterConfig = {
"componentName": "Footer",
"props": {},
},
}
};
export const PlatformAddGoodsItemConfig = {
key: "30",
......@@ -247,4 +247,4 @@ export const PlatformAddGoodsItemConfig = {
"componentName": 'PlatformAddGoodsItem',
"props": {},
}
}
};
src/pages/pageCustomized/platformEdit/index.tsx
View file @ bba59511
......@@ -222,28 +222,28 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
};
const getPurchaseNoticeList = (type: number) => {
return new Promise((resolve) => {
const param: any = {
current: 1,
pageSize: 8,
createTime: 'DESC'
};
if (type && typeof type === 'number') {
param.type = type;
}
PublicApi.getPurchasePurchaseNoticeList(param).then((res) => {
if (res.code === 1000) {
resolve(res.data.data);
} else {
resolve([]);
}
}).catch(() => {
resolve([]);
});
});
};
// const getPurchaseNoticeList = (type: number) => {
// return new Promise((resolve) => {
// const param: any = {
// current: 1,
// pageSize: 8,
// createTime: 'DESC'
// };
// if (type && typeof type === 'number') {
// param.type = type;
// }
// PublicApi.getPurchasePurchaseNoticeList(param).then((res) => {
// if (res.code === 1000) {
// resolve(res.data.data);
// } else {
// resolve([]);
// }
// }).catch(() => {
// resolve([]);
// });
// });
// };
const getComponentsConfig = async () => {
// await getPurchaseNoticeList(0);
......@@ -288,7 +288,7 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
const bannerContainer = {
key: "5",
"5": {
"componentName": "div",
"componentName": "View",
"props": {
"style": {
position: "relative",
......@@ -316,7 +316,7 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
const bannerWrap = {
key: "7",
"7": {
"componentName": "div",
"componentName": "View",
"props": {
"style": {
flex: 1,
......@@ -330,7 +330,7 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
const bannerHorizontal = {
key: "8",
"8": {
"componentName": "div",
"componentName": "View",
"props": {
"style": {
display: 'flex',
......@@ -674,27 +674,12 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
</div>
<div className={styles['content']}>
<div className={styles['canvas-container']}>
<DesignPanel theme={theme} pageConfig={componentConfigs} />
<DesignPanel onlyEidt theme={theme} pageConfig={componentConfigs} />
</div>
</div>
</div>
<SettingPanel templateId={id} />
</BrickProvider>
// <LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
// <Prompt message="你确定要离开么？" />
// <div className={styles['wrapper']}>
// <div className={styles.toolbar}>
// <PlatformToolBar templateId={id} />
// </div>
// <div className={styles['content']}>
// <div className={styles['canvas-container']}>
// <DesignPanel theme={theme} />
// </div>
// </div>
// </div>
// <SettingPanel templateId={id} />
// </LegoProvider>
) : <Loading />;
};
......
src/pages/pageCustomized/platformEdit/utils.ts
View file @ bba59511
import { GlobalConfig } from '@/global/config'
import { GlobalConfig } from '@/global/config';
const siteUrl = GlobalConfig.site.siteInfo.siteUrl
const siteUrl = GlobalConfig.site.siteInfo.siteUrl;
/**
* 请求头
*/
export const REQUEST_HEADER = 'http://'
export const REQUEST_HEADER = 'http://';
export const getTopDomainByHost = (url: string): string => {
if (!url) return ''
return url.split('.').slice(-2).join('.')
}
if (!url) return '';
return url.split('.').slice(-2).join('.');
};
export const TOP_DOMAIN = getTopDomainByHost(siteUrl)
export const TOP_DOMAIN = getTopDomainByHost(siteUrl);
export const getMenuData = () => {
const shopInfo = GlobalConfig.web.shopInfo
const webMallList = shopInfo.filter((item: any) => item.type === 1 && item.environment === 1)
const channelList = shopInfo.filter((item: any) => item.type === 3 && item.environment === 1)
const shopInfo = GlobalConfig.web.shopInfo;
const webMallList = shopInfo.filter((item: any) => item.type === 1 && item.environment === 1);
const channelList = shopInfo.filter((item: any) => item.type === 3 && item.environment === 1);
if (webMallList.length > 0 && channelList.length > 0) {
const defaultEnterprise = webMallList.filter((item) => item.isDefault === 1)
let enterpriseSubDomain = ''
const defaultEnterprise = webMallList.filter((item) => item.isDefault === 1);
let enterpriseSubDomain = '';
if (defaultEnterprise && defaultEnterprise.length > 0) {
enterpriseSubDomain = defaultEnterprise[0].url
enterpriseSubDomain = defaultEnterprise[0].url;
} else {
enterpriseSubDomain = webMallList[0].url
enterpriseSubDomain = webMallList[0].url;
}
const channelSubDomain = channelList[0].url
const channelSubDomain = channelList[0].url;
return [
{
"id": 0,
......@@ -101,10 +101,10 @@ export const getMenuData = () => {
"status": true,
"key": "information",
},
]
];
}
return []
}
return [];
};
/**
* 一开始没有装修过用的初始数据
......@@ -398,4 +398,4 @@ export const defaultDesignConfig = [
status: true,
content: []
}
]
];
src/pages/pageCustomized/preview/channelPreview/index.tsx
View file @ bba59511
import React, { useEffect, useState } from 'react'
import { LegoProvider } from 'lingxi-editor-core'
import ToolBar from '../../components/toolBar'
import DesignPreview from '../../components/DesignPreview'
import config from '../../configs'
import { LAYOUT_TYPE } from '@/constants'
import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, CommonTitle1Config, mallLayoutConfig, serviceAdvertConfig, CommonTitle2Config, AboutUsConfig, InformationConfig, FooterConfig } from './defaultData'
import { menuData } from './defaultMenu'
import Loading from '../../components/Loading'
import styles from './index.less'
import React, { useEffect, useState } from 'react';
import { BrickProvider } from '@lingxi-disign/react';
import { LAYOUT_TYPE } from '@/constants';
import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, CommonTitle1Config, mallLayoutConfig, serviceAdvertConfig, CommonTitle2Config, AboutUsConfig, InformationConfig, FooterConfig } from './defaultData';
import { menuData } from './defaultMenu';
import styles from './index.less';
import ToolBar from '../../components/toolBar';
import PreviewPanel from '../../components/DesignPreview';
import config from '../../configs';
import Loading from '../../components/Loading';
interface ShopPreviewPropsType {
location: {
......@@ -24,34 +24,34 @@ interface ShopPreviewPropsType {
}
}
let TemplateList = ['science']
const TemplateList = ['science'];
const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
const { query: { id, template } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [theme, setTheme] = useState<string>('theme-channel-science')
const [componentConfigs, setComponentConfigs] = useState({})
const { query: { template } } = props.location;
const [loading, setLoading] = useState<boolean>(true);
const [theme, setTheme] = useState<string>('theme-channel-science');
const [componentConfigs, setComponentConfigs] = useState({});
useEffect(() => {
if (!TemplateList.includes(template)) {
setTheme(`theme-channel-${TemplateList[0]}`)
setTheme(`theme-channel-${TemplateList[0]}`);
} else {
setTheme(`theme-channel-${template}`)
setTheme(`theme-channel-${template}`);
}
getComponentsConfig()
}, [])
getComponentsConfig();
}, []);
const getComponentsConfig = async () => {
// 导航栏
mainNavConfig[mainNavConfig.key].props.menuData = menuData
mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.channel
mainNavConfig[mainNavConfig.key].props.categoryList = []
mainNavConfig[mainNavConfig.key].props.menuData = menuData;
mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.channel;
mainNavConfig[mainNavConfig.key].props.categoryList = [];
let initIndex = 100
let floorLineConfig: any = {}
let floorLineKeys: any = []
let initIndex = 100;
let floorLineConfig: any = {};
const floorLineKeys: any = [];
let firstCategory: any = [
const firstCategory: any = [
{
"id": 23,
"name": "电子电器"
......@@ -60,7 +60,7 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
"id": 14,
"name": "机械设备"
}
]
];
const detailData = {
23: {
......@@ -159,15 +159,15 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
}
]
}
}
};
for (let item of firstCategory) {
let categoryDetail: any = detailData[item.id]
for (const item of firstCategory) {
const categoryDetail: any = detailData[item.id];
let floorLineConfigItem = {}
floorLineKeys.push(String(initIndex + 1))
let floorLineConfigItem = {};
floorLineKeys.push(String(initIndex + 1));
let FloorLine = {
const FloorLine = {
[String(initIndex + 1)]: {
"componentName": "ShopFloorLine",
"props": {
......@@ -175,9 +175,9 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
},
"childNodes": [String(initIndex + 2), String(initIndex + 3)]
}
}
};
let Category = {
const Category = {
[String(initIndex + 2)]: {
"componentName": "ShopFloorLine.Category",
"props": {
......@@ -186,9 +186,9 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
categoryList: categoryDetail.categoryBOList
},
},
}
};
let Goods = {
const Goods = {
[String(initIndex + 3)]: {
"componentName": "ShopFloorLine.Goods",
"props": {
......@@ -197,15 +197,15 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
goodsList: categoryDetail.goodsBOList
},
},
}
};
floorLineConfigItem = { ...FloorLine, ...Category, ...Goods }
floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem }
initIndex += 100
floorLineConfigItem = { ...FloorLine, ...Category, ...Goods };
floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem };
initIndex += 100;
}
mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, serviceAdvertConfig.key, CommonTitle2Config.key, AboutUsConfig.key, InformationConfig.key, FooterConfig.key]
let config = {
mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, serviceAdvertConfig.key, CommonTitle2Config.key, AboutUsConfig.key, InformationConfig.key, FooterConfig.key];
const config = {
...mallLayoutConfig,
...topBarConfig,
...topAdvertConfig,
......@@ -219,23 +219,25 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
...AboutUsConfig,
...InformationConfig,
...FooterConfig
}
setComponentConfigs(config)
setLoading(false)
}
};
setComponentConfigs(config);
setLoading(false);
};
return !loading ? (
<LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
<BrickProvider
config={config}
>
<div className={styles['wrapper']}>
<ToolBar type={2} title="首页" />
<div className={styles['content']}>
<div className={styles['canvas-container']}>
<DesignPreview theme={theme} />
<PreviewPanel theme={theme} pageConfig={componentConfigs} />
</div>
</div>
</div>
</LegoProvider>
) : <Loading />
}
</BrickProvider>
) : <Loading />;
};
export default ShopPreview
\ No newline at end of file
export default ShopPreview;
src/pages/pageCustomized/preview/mallPreview/defaultData.ts
View file @ bba59511
......@@ -9,9 +9,9 @@ export const mallLayoutConfig = {
"minHeight": "100%"
}
},
"childNodes": ["1", "3", "4", "5", "6"]
"childNodes": ["1", "3", "4", "21"]
},
}
};
export const topBarConfig = {
key: "1",
......@@ -21,7 +21,7 @@ export const topBarConfig = {
linkdisable: true
},
}
}
};
export const topAdvertConfig = {
key: "2",
......@@ -33,23 +33,97 @@ export const topAdvertConfig = {
"advertList": []
},
},
}
};
export const headerConfig = {
key: "3",
"3": {
"componentName": "Header",
"props": {},
"props": {
"logoUrl": ""
},
},
}
};
export const mainNavConfig = {
key: "4",
"4": {
"componentName": "MainNav",
"componentName": "MallMainNav",
"props": {},
},
};
export const bannerContainer = {
key: "21",
"21": {
"componentName": "div",
"props": {
"style": {
position: "relative",
display: "flex",
paddingTop: "16px",
width: "1200px",
margin: "0 auto",
}
},
"childNodes": ["22", "23", "24"]
}
};
export const categoryConfig = {
key: "22",
"22": {
"componentName": "Category",
"props": {
categoryList: [],
canHide: false,
}
}
};
export const bannerWrap = {
key: "23",
"23": {
"componentName": "div",
"props": {
"style": {
margin: "0 16px",
flex: 1,
width: 0,
}
},
"childNodes": ["5", "6"]
}
};
export const quickNavConfigWrap = {
key: "24",
"24": {
"componentName": "div",
"props": {},
"childNodes": ["25", "26"]
}
};
export const quickNavConfig = {
key: "25",
"25": {
"componentName": "QuickNav",
"props": {},
}
};
export const navAdvertConfig = {
key: "26",
"26": {
"componentName": "Advert",
"props": {
"type": "nav",
"linkdisable": true,
"advertList": []
},
},
}
};
export const bannerAdvertConfig = {
key: "5",
......@@ -57,12 +131,12 @@ export const bannerAdvertConfig = {
"componentName": "Advert",
"props": {
"type": "banner",
"hasQuickNav": true,
"hasQuickNav": false,
"linkdisable": true,
"advertList": []
}
},
}
};
export const interactAdvertConfig = {
key: "6",
......@@ -74,7 +148,7 @@ export const interactAdvertConfig = {
"advertList": []
},
},
}
};
export const FindMoreConfig = {
key: "18",
......@@ -82,7 +156,7 @@ export const FindMoreConfig = {
"componentName": "FindMore",
"props": {},
},
}
};
export const InformationConfig = {
key: '19',
......@@ -90,7 +164,7 @@ export const InformationConfig = {
"componentName": "Information",
"props": {},
},
}
};
export const FooterConfig = {
key: '20',
......@@ -98,4 +172,4 @@ export const FooterConfig = {
"componentName": "Footer",
"props": {},
},
}
};
src/pages/pageCustomized/preview/mallPreview/defaultMenu.ts
View file @ bba59511
export const menuData = [
{
"path": "/shop",
"name": "首页",
"key": "shopHome",
},
{
"path": "/commodity",
"name": "商品商城",
"key": "shopCommodity",
},
{
"path": "/purchaseOnline",
"name": "在线求购",
"key": "purchaseOnline",
},
{
"path": "/pointsMall",
"name": "积分商城",
"key": "shopPointsMall",
},
{
"path": "/shops",
"name": "店铺",
"key": "shops",
},
{
"path": "/shop/infomation",
"name": "资讯",
"key": "shopInfomation",
},
]
\ No newline at end of file
import { GlobalConfig } from '@/global/config';
const siteUrl = GlobalConfig.site.siteInfo.siteUrl;
/**
* 请求头
*/
export const REQUEST_HEADER = 'http://';
export const getTopDomainByHost = (url: string): string => {
if (!url) return '';
return url.split('.').slice(-2).join('.');
};
export const TOP_DOMAIN = getTopDomainByHost(siteUrl);
export const getMenuData = (shopId: number) => {
const shopInfo = GlobalConfig.web.shopInfo;
const webMallList = shopInfo.filter((item: { id: number }) => item.id === shopId);
if (webMallList.length > 0) {
const SUB_DOMAIN = webMallList[0].url;
return [
{
"id": 0,
"link": `${REQUEST_HEADER}${SUB_DOMAIN}.${TOP_DOMAIN}`,
"name": "商城首页",
"status": true,
"key": "shopHome",
},
{
"id": 1,
"link": `${REQUEST_HEADER}${SUB_DOMAIN}.${TOP_DOMAIN}/commodity`,
"name": "现货商品",
"status": true,
"key": "shopCommodity",
},
{
"id": 2,
"link": `${REQUEST_HEADER}${SUB_DOMAIN}.${TOP_DOMAIN}/inquiry`,
"name": "询价商品",
"status": true,
"key": "purchaseOnline",
},
{
"id": 3,
"link": `${REQUEST_HEADER}${SUB_DOMAIN}.${TOP_DOMAIN}/stores`,
"name": "优选店铺",
"status": true,
"key": "shopPointsMall",
},
{
"id": 4,
"link": `${REQUEST_HEADER}${SUB_DOMAIN}.${TOP_DOMAIN}/integral`,
"name": "积分商城",
"key": "shops",
"status": true,
},
{
"id": 5,
"link": `${REQUEST_HEADER}info.${TOP_DOMAIN}`,
"name": "行情资讯",
"status": true,
"key": "shopInfomation",
},
];
}
return [];
};
src/pages/pageCustomized/preview/platformPreview/defaultData.ts deleted 100644 → 0
View file @ 906572b8
export const mallLayoutConfig = {
key: "0",
"0": {
"componentName": "MallLayout",
"props": {
"style": {
"width": "100%",
"minHeight": "100%"
}
},
"childNodes": ["1"] // "3", "4", "5"
// , "13", "30", "14", "15", "16", "17", "18", "19", "20", "22"
},
}
export const platformIndexConfig = {
key: "1",
"1": {
"componentName": "PlatformIndex",
"props": {},
"childNodes": []
}
}
// export const topBarConfig = {
// key: "1",
// "1": {
// "componentName": "TopBar",
// "props": {
// linkdisable: true
// },
// }
// }
export const headerConfig = {
key: "3",
"3": {
"componentName": "Header",
"props": {
"type": "platform"
},
},
}
export const mainNavConfig = {
key: "4",
"4": {
"componentName": "MallMainNav",
"props": {},
},
}
export const bannerContainer = {
key: "5",
"5": {
"componentName": "div",
"props": {
"style": {
position: "relative",
display: "flex",
paddingTop: "16px",
width: "1200px",
margin: "0 auto",
}
},
"childNodes": ["6", "7", "12"]
}
}
export const categoryConfig = {
key: "6",
"6": {
"componentName": "Category",
"props": {
categoryList: [],
canHide: false,
}
}
}
export const bannerWrap = {
key: "7",
"7": {
"componentName": "div",
"props": {
"style": {
flex: 1,
padding: '0 16px',
}
},
"childNodes": ["8", "11"]
}
}
export const bannerHorizontal = {
key: "8",
"8": {
"componentName": "div",
"props": {
"style": {
display: 'flex',
justifyContent: 'space-between',
}
},
"childNodes": ["9", "10"]
}
}
export const bannerAdvertConfig = {
key: "9",
"9": {
"componentName": "PlatformAdvert",
"props": {
"type": "banner",
"linkdisable": true,
"advertList": []
}
},
}
export const bannerRightAdvertConfig = {
key: "10",
"10": {
"componentName": "PlatformAdvert",
"props": {
"type": "bannerRight",
"linkdisable": true,
"advertList": []
}
},
}
export const bannerBottomAdvertConfig = {
key: "11",
"11": {
"componentName": "PlatformAdvert",
"props": {
"type": "bannerBottom",
"linkdisable": true,
"advertList": []
}
},
}
export const quickNavConfigWrap = {
key: "12",
"12": {
"componentName": "PlatformQuickNav",
"props": {},
}
}
export const PlatformGoodsConfig = {
key: "13",
"13": {
"componentName": "PlatformGoods",
"props": {
"dataInfo": {}
},
}
}
export const PlatformBrandConfig = {
key: "14",
"14": {
"componentName": "PlatformBrand",
"props": {},
}
}
export const PlatformMerchantConfig = {
key: "15",
"15": {
"componentName": "PlatformMerchant",
"props": {},
}
}
export const PlatformInformationConfig = {
key: "16",
"16": {
"componentName": "PlatformInformation",
"props": {},
}
}
export const PlatformPurchaseConfig = {
key: "17",
"17": {
"componentName": "PlatformPurchase",
"props": {
},
"childNodes": ["21"]
}
}
export const PlatformLogisticsConfig = {
key: "18",
"18": {
"componentName": "PlatformLogistics",
"props": {},
}
}
export const PlatformProcessConfig = {
key: "19",
"19": {
"componentName": "PlatformProcess",
"props": {},
}
}
export const PlatformServiceConfig = {
key: "20",
"20": {
"componentName": "PlatformService",
"props": {},
}
}
export const PurchaseAdvertConfig = {
key: "21",
"21": {
"componentName": "PlatformPurchase.Banner",
"props": {
advertList: []
},
}
}
export const FooterConfig = {
key: '40',
"40": {
"componentName": "Footer",
"props": {},
},
}
export const PlatformAddGoodsItemConfig = {
key: "30",
"30": {
"componentName": 'PlatformAddGoodsItem',
"props": {},
}
}
src/pages/pageCustomized/preview/platformPreview/types.ts deleted 100644 → 0
View file @ 906572b8
export interface DesingConfigItemType {
name: string,
status: boolean,
sort?: number,
content: any
}
export type PlatformConfigType = DesingConfigItemType[]
src/pages/pageCustomized/preview/shopPreview/index.tsx
View file @ bba59511
import React, { useEffect, useState } from 'react'
import { LegoProvider } from 'lingxi-editor-core'
import ToolBar from '../../components/toolBar'
import PreviewPanel from '../../components/DesignPreview'
import config from '../../configs'
import { LAYOUT_TYPE } from '@/constants'
import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, CommonTitle1Config, mallLayoutConfig, serviceAdvertConfig, CommonTitle2Config, AboutUsConfig, InformationConfig, FooterConfig } from './defaultData'
import { menuData } from './defaultMenu'
import Loading from '../../components/Loading'
import { PublicApi } from '@/services/api'
import { GlobalConfig } from '@/global/config'
import styles from './index.less'
import React, { useEffect, useState } from 'react';
import { BrickProvider } from '@lingxi-disign/react';
import { LAYOUT_TYPE } from '@/constants';
import { GlobalConfig } from '@/global/config';
import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, CommonTitle1Config, mallLayoutConfig, serviceAdvertConfig, CommonTitle2Config, AboutUsConfig, FooterConfig } from './defaultData';
import { menuData } from './defaultMenu';
import styles from './index.less';
import ToolBar from '../../components/toolBar';
import PreviewPanel from '../../components/DesignPreview';
import config from '../../configs';
import Loading from '../../components/Loading';
interface ShopPreviewPropsType {
location: {
......@@ -26,37 +25,37 @@ interface ShopPreviewPropsType {
}
}
const TemplateList = ['science']
const TemplateList = ['science'];
const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
const { query: { id, template } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [theme, setTheme] = useState<string>('theme-shop-science')
const [componentConfigs, setComponentConfigs] = useState({})
const { query: { template } } = props.location;
const [loading, setLoading] = useState<boolean>(true);
const [theme, setTheme] = useState<string>('theme-shop-science');
const [componentConfigs, setComponentConfigs] = useState({});
useEffect(() => {
if (!TemplateList.includes(template)) {
setTheme(`theme-shop-${TemplateList[0]}`)
setTheme(`theme-shop-${TemplateList[0]}`);
} else {
setTheme(`theme-shop-${template}`)
setTheme(`theme-shop-${template}`);
}
getComponentsConfig()
}, [])
getComponentsConfig();
}, []);
const getComponentsConfig = async () => {
// 导航栏
mainNavConfig[mainNavConfig.key].props.menuData = menuData
mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.shop
mainNavConfig[mainNavConfig.key].props.categoryList = []
mainNavConfig[mainNavConfig.key].props.menuData = menuData;
mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.shop;
mainNavConfig[mainNavConfig.key].props.categoryList = [];
const shopList = GlobalConfig.web.shopInfo
const webMallInfo = shopList.filter(item => item.environment === 1 && item.type === 1)[0]
headerConfig[headerConfig.key].props.logoUrl = webMallInfo.logoUrl
topBarConfig[topBarConfig.key].props.shopname = webMallInfo.name
const shopList = GlobalConfig.web.shopInfo;
const webMallInfo = shopList.filter(item => item.environment === 1 && item.type === 1)[0];
headerConfig[headerConfig.key].props.logoUrl = webMallInfo.logoUrl;
topBarConfig[topBarConfig.key].props.shopname = webMallInfo.name;
let initIndex = 100
let floorLineConfig: any = {}
const floorLineKeys: any = []
let initIndex = 100;
let floorLineConfig: any = {};
const floorLineKeys: any = [];
const firstCategory: any = [
{
......@@ -67,7 +66,7 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
"id": 14,
"name": "机械设备"
}
]
];
const detailData = {
23: {
......@@ -166,13 +165,13 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
}
]
}
}
};
for (const item of firstCategory) {
const categoryDetail: any = detailData[item.id]
const categoryDetail: any = detailData[item.id];
let floorLineConfigItem = {}
floorLineKeys.push(String(initIndex + 1))
let floorLineConfigItem = {};
floorLineKeys.push(String(initIndex + 1));
const FloorLine = {
[String(initIndex + 1)]: {
......@@ -182,7 +181,7 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
},
"childNodes": [String(initIndex + 2), String(initIndex + 3)]
}
}
};
const Category = {
[String(initIndex + 2)]: {
......@@ -193,7 +192,7 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
categoryList: categoryDetail.categoryBOList
},
},
}
};
const Goods = {
[String(initIndex + 3)]: {
......@@ -204,14 +203,14 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
goodsList: categoryDetail.goodsBOList
},
},
}
};
floorLineConfigItem = { ...FloorLine, ...Category, ...Goods }
floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem }
initIndex += 100
floorLineConfigItem = { ...FloorLine, ...Category, ...Goods };
floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem };
initIndex += 100;
}
mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, serviceAdvertConfig.key, FooterConfig.key]
mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, serviceAdvertConfig.key, FooterConfig.key];
const config = {
...mallLayoutConfig,
...topBarConfig,
......@@ -225,23 +224,25 @@ const ShopPreview: React.FC<ShopPreviewPropsType> = (props) => {
...floorLineConfig,
...serviceAdvertConfig,
...FooterConfig
}
setComponentConfigs(config)
setLoading(false)
}
};
setComponentConfigs(config);
setLoading(false);
};
return !loading ? (
<LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
<BrickProvider
config={config}
>
<div className={styles['wrapper']}>
<ToolBar type={2} title="首页" />
<div className={styles['content']}>
<div className={styles['canvas-container']}>
<PreviewPanel theme={theme} />
<PreviewPanel theme={theme} pageConfig={componentConfigs} />
</div>
</div>
</div>
</LegoProvider>
) : <Loading />
}
</BrickProvider>
) : <Loading />;
};
export default ShopPreview
export default ShopPreview;
src/pages/pageCustomized/settingsPanel/propsSettings/components/AdvertSetting/index.tsx
View file @ bba59511
......@@ -66,7 +66,7 @@ interface AdvertSettingPropsType {
categoryid?: number;
}
const AdvertSetting: React.FC<AdvertSettingPropsType> = forwardRef((props, ref) => {
const AdvertSetting: React.FC<AdvertSettingPropsType> = forwardRef((props) => {
const { advertList = [], templateid, type, categoryid } = props;
const [list, setList] = useState<AdvertItemType[]>(advertList);
const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
......
src/pages/pageCustomized/settingsPanel/propsSettings/components/PlatformQuickNavSetting/index.tsx
View file @ bba59511
import React, { useState, useEffect } from 'react';
import { Modal, Input, Button } from 'antd';
import { clearSelectedStatus, changeProps } from '@lingxi-disign/core';
import { clearSelectedStatus, changeProps, produce } from '@lingxi-disign/core';
import { ReactSortable } from "react-sortablejs";
import cx from 'classnames';
import { CaretDownOutlined, CaretRightOutlined, PlusOutlined } from '@ant-design/icons';
......@@ -31,7 +31,7 @@ interface PlatformQuickNavSettingProps {
const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props) => {
const { sellQuickNavList, buyQuickNavList, quickNavList} = props;
const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
const [confirmLoading] = useState<boolean>(false);
const [sellList, setSellList] = useState<ItemType[]>([]);
const [buyList, setBuyList] = useState<ItemType[]>([]);
const [navList, setNavList] = useState<ItemType[]>([]);
......@@ -39,10 +39,12 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
const initSellList = () => {
if(sellQuickNavList) {
const newDataList = sellQuickNavList.map((item: ItemType, index: number) => {
item.sort = index + 1;
item.expand = item.expand || false;
return item;
const newDataList = produce(sellQuickNavList, (oldSellQuickNavList) => {
oldSellQuickNavList.map((item: ItemType, index: number) => {
item.sort = index + 1;
item.expand = item.expand || false;
return item;
});
});
setSellList(newDataList);
}
......@@ -50,10 +52,12 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
const initBuyList = () => {
if(buyQuickNavList) {
const newDataList = buyQuickNavList.map((item: ItemType, index: number) => {
item.sort = index + 1;
item.expand = item.expand || false;
return item;
const newDataList = produce(buyQuickNavList, (oldList) => {
oldList.map((item: ItemType, index: number) => {
item.sort = index + 1;
item.expand = item.expand || false;
return item;
});
});
setBuyList(newDataList);
}
......@@ -61,10 +65,12 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
const initNavList = () => {
if(quickNavList) {
const newDataList = quickNavList.map((item: ItemType, index: number) => {
item.sort = index + 1;
item.expand = item.expand || false;
return item;
const newDataList = produce(quickNavList, (oldList) => {
oldList.map((item: ItemType, index: number) => {
item.sort = index + 1;
item.expand = item.expand || false;
return item;
});
});
setNavList(newDataList);
}
......@@ -109,34 +115,40 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
switch (type) {
case 'sell':
newList = [...sellList];
newList.map(item => {
if (item.sort === sort) {
item.expand = state;
} else {
item.expand = false;
}
newList = produce(newList, (oldList) => {
oldList.map(item => {
if (item.sort === sort) {
item.expand = state;
} else {
item.expand = false;
}
});
});
setSellList(newList);
break;
case 'buy':
newList = [...buyList];
newList.map(item => {
if (item.sort === sort) {
item.expand = state;
} else {
item.expand = false;
}
newList = produce(newList, (oldList) => {
oldList.map(item => {
if (item.sort === sort) {
item.expand = state;
} else {
item.expand = false;
}
});
});
setBuyList(newList);
break;
case 'nav':
newList = [...navList];
newList.map(item => {
if (item.sort === sort) {
item.expand = state;
} else {
item.expand = false;
}
newList = produce(newList, (oldList) => {
oldList.map(item => {
if (item.sort === sort) {
item.expand = state;
} else {
item.expand = false;
}
});
});
setNavList(newList);
break;
......@@ -154,30 +166,36 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
switch (type) {
case 'sell':
newList = [...sellList];
newList.map(item => {
if (item.sort === sort) {
item[key] = value;
}
newList = produce(newList, (oldList) => {
oldList.map(item => {
if (item.sort === sort) {
item[key] = value;
}
});
});
setSellList(newList);
changeNewProps('sellQuickNavList', newList);
break;
case 'buy':
newList = [...buyList];
newList.map(item => {
if (item.sort === sort) {
item[key] = value;
}
newList = produce(newList, (oldList) => {
oldList.map(item => {
if (item.sort === sort) {
item[key] = value;
}
});
});
setBuyList(newList);
changeNewProps('buyQuickNavList', newList);
break;
case 'nav':
newList = [...navList];
newList.map(item => {
if (item.sort === sort) {
item[key] = value;
}
newList = produce(newList, (oldList) => {
oldList.map(item => {
if (item.sort === sort) {
item[key] = value;
}
});
});
setNavList(newList);
changeNewProps('quickNavList', newList);
......@@ -192,10 +210,11 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
case 'sell':
newList = [...sellList];
newList.splice(index, 1);
newList.map(item => {
item.sort = sort;
sort++;
newList = produce(newList, (oldList) => {
oldList.map(item => {
item.sort = sort;
sort++;
});
});
setSellList(newList);
changeNewProps('sellQuickNavList', newList);
......@@ -203,9 +222,11 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
case 'buy':
newList = [...buyList];
newList.splice(index, 1);
newList.map(item => {
item.sort = sort;
sort++;
newList = produce(newList, (oldList) => {
oldList.map(item => {
item.sort = sort;
sort++;
});
});
setBuyList(newList);
changeNewProps('buyQuickNavList', newList);
......@@ -213,9 +234,11 @@ const PlatformQuickNavSetting: React.FC<PlatformQuickNavSettingProps> = (props)
case 'nav':
newList = [...navList];
newList.splice(index, 1);
newList.map(item => {
item.sort = sort;
sort++;
newList = produce(newList, (oldList) => {
oldList.map(item => {
item.sort = sort;
sort++;
});
});
setNavList(newList);
changeNewProps('quickNavList', newList);
......
src/pages/pageCustomized/templateDetail/index.tsx
View file @ bba59511
import React, { useState, Fragment, useEffect } from 'react'
import { LayoutOutlined, EyeOutlined, ToTopOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import { Modal, message } from 'antd'
import cx from 'classnames'
import { inject } from 'mobx-react'
import UseModal from '../components/useModal'
import { TEMPLATE_TYPE_TEXT } from '@/constants'
import DetailPage from '@/components/DetailPage'
import { PublicApi } from '@/services/api'
import { GetTemplateWebPageTemplateWebFindTemplateDetailsResponse } from '@/services/TemplateApi'
import styles from './index.less'
import React, { useState, Fragment, useEffect } from 'react';
import { LayoutOutlined, EyeOutlined, ToTopOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Modal, message } from 'antd';
import cx from 'classnames';
import { inject } from 'mobx-react';
import { TEMPLATE_TYPE_TEXT } from '@/constants';
import DetailPage from '@/components/DetailPage';
import { PublicApi } from '@/services/api';
import { GetTemplateWebPageTemplateWebFindTemplateDetailsResponse } from '@/services/TemplateApi';
import styles from './index.less';
import UseModal from '../components/useModal';
interface TemplateDetailPropsType {
SiteStore: any,
......@@ -20,7 +20,7 @@ interface TemplateDetailPropsType {
}
}
const Environment_Status = {
const EnvironmentStatus = {
1: {
name: "web"
},
......@@ -33,30 +33,30 @@ const Environment_Status = {
4: {
name: "APP"
}
}
};
const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
const { query: { type, id } } = props.location
const { siteId } = props.SiteStore
const { query: { type, id } } = props.location;
// const { siteId } = props.SiteStore;
const [useModalVisible, setUseModalVisible] = useState<boolean>(false)
const [detailInfo, setDetailInfo] = useState<GetTemplateWebPageTemplateWebFindTemplateDetailsResponse>()
const [useModalVisible, setUseModalVisible] = useState<boolean>(false);
const [detailInfo, setDetailInfo] = useState<GetTemplateWebPageTemplateWebFindTemplateDetailsResponse>();
useEffect(() => {
fetchDetail()
}, [])
fetchDetail();
}, []);
const fetchDetail = () => {
const param: any = {
id
}
};
PublicApi.getTemplateWebPageTemplateWebFindTemplateDetails(param).then(res => {
if (res.code === 1000) {
setDetailInfo(res.data)
setDetailInfo(res.data);
}
})
}
});
};
const handleShelfShop = (shelf: number) => {
......@@ -67,57 +67,58 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
okText: '确认',
cancelText: '取消',
onOk: () => confirmShelfShop(shelf)
})
}
});
};
const confirmShelfShop = (shelf: number) => {
return new Promise((resolve) => {
const param = {
id,
shelf
}
PublicApi.postTemplateWebPageTemplateWebShelfTemplate(param).then(res => {
fetchDetail()
resolve(true)
})
})
}
};
PublicApi.postTemplateWebPageTemplateWebShelfTemplate(param).then(() => {
fetchDetail();
resolve(true);
});
});
};
const linkToPreview = () => {
switch (type) {
case "mall":
if (detailInfo?.environment === 1) {
window.location.href = `/pageCustomized/mall/template/preview?id=${id}&template=${detailInfo?.fileName}`
window.location.href = `/pageCustomized/mall/template/preview?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}&shopId=${detailInfo?.shopId}`;
} else {
window.location.href = `/pageCustomized/mobile/template/preview?id=${id}&template=${detailInfo?.fileName}`
window.location.href = `/pageCustomized/mobile/template/preview?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}&shopId=${detailInfo?.shopId}`;
// message.info(`暂仅支持web环境模板预览`)
}
break
break;
case "shop":
if (detailInfo?.environment === 1) {
window.location.href = `/pageCustomized/shop/template/preview?template=${detailInfo?.fileName}`
window.location.href = `/pageCustomized/shop/template/preview?template=${detailInfo?.fileName}`;
} else {
message.info(`暂仅支持web环境模板预览`)
message.info(`暂仅支持web环境模板预览`);
}
break
break;
case "channel":
if (detailInfo?.environment === 1) {
window.location.href = `/pageCustomized/channel/template/preview?template=${detailInfo?.fileName}`
window.location.href = `/pageCustomized/channel/template/preview?template=${detailInfo?.fileName}`;
} else {
message.info(`暂仅支持web环境模板预览`)
message.info(`暂仅支持web环境模板预览`);
}
break
break;
case "platform":
if (detailInfo?.environment === 1) {
window.location.href = `/pageCustomized/platform/template/preview?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}`
window.location.href = `/pageCustomized/platform/template/preview?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}`;
} else {
message.info(`暂仅支持web环境模板预览`)
message.info(`暂仅支持web环境模板预览`);
}
break
break;
default:
break
break;
}
}
};
return (
<DetailPage
......@@ -126,7 +127,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<div className={styles.template_detail}>
<div className={styles.template_info_wrap}>
<div className={styles.template_img_box}>
<div className={cx(styles.type_tag)}>{detailInfo?.environment && Environment_Status[detailInfo?.environment].name}</div>
<div className={cx(styles.type_tag)}>{detailInfo?.environment && EnvironmentStatus[detailInfo?.environment].name}</div>
<img src={detailInfo?.templatePicUrl} />
</div>
<div className={styles.template_info}>
......@@ -136,7 +137,7 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
</div>
<div className={styles.template_info_line}>
<label>适用环境：</label>
<span>{detailInfo?.environment && Environment_Status[detailInfo?.environment].name}</span>
<span>{detailInfo?.environment && EnvironmentStatus[detailInfo?.environment].name}</span>
</div>
<div className={styles.template_info_line}>
<label>模板描述：</label>
......@@ -167,20 +168,20 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
switch (type) {
case TEMPLATE_TYPE_TEXT.mall:
if (detailInfo?.environment === 1) {
window.location.href = `/pageCustomized/mall/template/edit?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}&shopId=${detailInfo?.shopId}`
window.location.href = `/pageCustomized/mall/template/edit?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}&shopId=${detailInfo?.shopId}`;
} else {
window.location.href = `/pageCustomized/mobile/template/edit?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}`
window.location.href = `/pageCustomized/mobile/template/edit?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}&shopId=${detailInfo?.shopId}`;
}
break
break;
case TEMPLATE_TYPE_TEXT.platform:
if (detailInfo?.environment === 1) {
window.location.href = `/pageCustomized/platform/template/edit?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}`
window.location.href = `/pageCustomized/platform/template/edit?id=${id}&template=${detailInfo?.fileName}&environment=${detailInfo?.environment}`;
} else {
message.info(`暂仅支持web环境模板装修`)
message.info(`暂仅支持web环境模板装修`);
}
break
break;
default:
break
break;
}
}} >
<LayoutOutlined />
......@@ -213,13 +214,13 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
<UseModal
title="使用商场模板"
visible={useModalVisible}
onOk={() => { console.log() }}
onOk={() => { console.log(); }}
type={type}
onCancel={() => setUseModalVisible(false)}
/>
</div>
</DetailPage>
)
}
);
};
export default inject('SiteStore')(TemplateDetail)
export default inject('SiteStore')(TemplateDetail);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment