fix: 移动端装修页面添加公共取消确认按钮

src/global/config/global.d.ts

-export interface RuleConfiguration {
-	value: number;
-	label: string;
-	platformType: number;
-}
-
-export interface PayWayResponse {
-	payType: number;
-	value: number;
-	label: string;
-}
-
-export interface PayInitializeConfig {
-	payType: number;
-	ruleConfigurations: RuleConfiguration[];
-	payWayResponses: PayWayResponse[];
-}
-
-export interface PayPlatformPayConfig {
-	id: number;
-	way: string;
-	wayId?: any;
-	payType: number;
-	isPitchOn: number;
-	settlementWay?: any;
-	settlementDays?: any;
-	settlementDate?: any;
-}
-
-export interface PayConfig {
-	payInitializeConfig: PayInitializeConfig[];
-	payPlatformPayConfig: PayPlatformPayConfig[];
-}
-
 export interface ShopInfo {
 	id: number;
 	name: string;
@@ -91,7 +57,6 @@ export interface Global {
 }
 
 export interface RootObject {
-	payConfig: PayConfig;
 	web: Web;
 	site: Site;
 	global: Global;

src/pages/pageCustomized/mobileEdit/config.ts

@@ -51,6 +51,7 @@ export const defaultConfig: PageConfigType = {
   '1': {
     title: '头部导航栏',
     componentName: 'HeaderNav',
+    canDelete: false,
     props: {
       styleTheme: '${topStyle}',
       categoryList: '${categoryList}',
@@ -80,6 +81,7 @@ export const defaultConfig: PageConfigType = {
   '3': {
     title: '广告图',
     componentName: 'Banner',
+    canDelete: false,
     props: {
       style: {
         margin: '8px',
@@ -104,6 +106,7 @@ export const defaultConfig: PageConfigType = {
   '5': {
     title: '分类导航',
     componentName: 'MobileNavCard',
+    canDelete: false,
     props: {
       style: {
         margin: '8px',
@@ -137,6 +140,7 @@ export const defaultConfig: PageConfigType = {
   '7': {
     title: '橱窗广告',
     componentName: 'ShowCaseBanner',
+    canDelete: false,
     childComponentName: 'ShowCaseBanner.Item',
     props: {
       stylesthemelist: [
@@ -175,6 +179,7 @@ export const defaultConfig: PageConfigType = {
     },
     childNodes: [],
     canEdit: false,
+    canDelete: false,
     addBtnText: '添加资讯',
   },
   '10': {
@@ -191,6 +196,7 @@ export const defaultConfig: PageConfigType = {
       ]
     },
     childNodes: ['11'],
+    canDelete: false,
     childComponentName: 'RecommendShop.Item',
     addBtnText: '添加店铺',
     maxLength: 3
@@ -212,6 +218,7 @@ export const defaultConfig: PageConfigType = {
   '12': {
     title: '优质推荐',
     componentName: 'QualityRecommend',
+    canDelete: false,
     props: {
       defaultActiveType: '${defaultActive}'
     },
@@ -221,6 +228,7 @@ export const defaultConfig: PageConfigType = {
     title: '分类标签',
     componentName: 'ClassifyLabel',
     childNodes: ['14'],
+    canDelete: false,
     props: {},
     childComponentName: 'ClassifyLabel.LabelItem',
     addBtnText: '添加标签',
@@ -242,11 +250,13 @@ export const defaultConfig: PageConfigType = {
   '15': {
     title: '推荐列表',
     componentName: 'RecommendList',
+    canDelete: false,
     childNodes: ['16', '17', '19', '21'],
   },
   '16': {
     title: '商品列表',
     componentName: 'RecommendCommodityList',
+    canDelete: false,
     props: {
       dataList: '${recommendCommodityList}',
       id: '${recommendCommodityIdList}'
@@ -257,6 +267,7 @@ export const defaultConfig: PageConfigType = {
     title: '店铺列表',
     componentName: 'RecommendShopList',
     childNodes: ['18'],
+    canDelete: false,
     childComponentName: 'RecommendShopList.Item',
     addBtnText: '添加店铺',
     // canHide: true,
@@ -279,6 +290,7 @@ export const defaultConfig: PageConfigType = {
     title: '品牌列表',
     componentName: 'RecommendBrandList',
     childNodes: ['20'],
+    canDelete: false,
     childComponentName: 'RecommendBrandList.Item',
     addBtnText: '添加品牌',
     // canHide: true,
@@ -297,6 +309,7 @@ export const defaultConfig: PageConfigType = {
   '21': {
     title: '资讯列表',
     componentName: 'RecommendInformationList',
+    canDelete: false,
     props: {
       dataList: '${recommendInformationList}',
       id: '${recommendInformationIdList}'
@@ -307,6 +320,7 @@ export const defaultConfig: PageConfigType = {
     title: '底部标签栏',
     componentName: 'BottomNavigation',
     props: {},
+    canDelete: false,
     childNodes: ['23'],
     childComponentName: 'BottomNavigation.Items',
     addBtnText: '添加标签',

src/pages/pageCustomized/mobileSettingPanel/index.less

@@ -13,8 +13,15 @@
   }
 
   .settingTabs {
-
+    height: 100%;
     :global {
+      .ant-tabs-content {
+        position: relative;
+        height: 100%;
+      }
+      .ant-tabs {
+        height: 100%;
+      }
       .ant-tabs-tab {
         margin: 0 32px;
 
@@ -33,3 +40,28 @@
     }
   }
 }
+
+
+.setting_panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 100%;
+  height: 100%;
+
+  &_body {
+    flex-grow: 1;
+    overflow: auto;
+    font-size: 12px;
+    line-height: 1.5715;
+  }
+
+  &_footer {
+    flex-shrink: 0;
+    padding: 10px 10px;
+    border-top: 1px solid #f0f0f0;
+  }
+}

src/pages/pageCustomized/mobileSettingPanel/index.tsx

@@ -6,6 +6,7 @@ import cx from 'classnames';
 import { Tabs } from 'antd';
 import StyleSettings from './styleSettings';
 import PropsSettings from './propsSettings';
+import SettingWrap from './settingWrap'
 import styles from './index.less';
 
 type SettingPanelType = {
@@ -48,14 +49,18 @@ const MobileSettingPanel: React.FC<MobileSettingPanelProps> = (props)=> {
         {
           (propsConfig && propsConfig.componentType) && (
             <TabPane tab={propsConfig.componentType.label || '编辑'} key="props">
-              <PropsSettings selectedInfo={newSelectInfo} pageConfig={pageConfig} {...props} />
+              <SettingWrap>
+                <PropsSettings selectedInfo={newSelectInfo} pageConfig={pageConfig} {...props} />
+              </SettingWrap>
             </TabPane>
           )
         }
         {
           (propsConfig && propsConfig.styleType) && (
             <TabPane tab="样式" key="style">
-              <StyleSettings selectedInfo={newSelectInfo} />
+              <SettingWrap>
+                <StyleSettings selectedInfo={newSelectInfo} />
+              </SettingWrap>
             </TabPane>
           )
         }

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

@@ -167,6 +167,10 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
       }
     }
 
+    if (key === 'type') {
+      newProps.id = null
+    }
+
     changeProps({
       title: title ? title : name,
       props: Object.assign({ ...props }, newProps)

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

@@ -33,11 +33,9 @@ interface PropsSettingsPropsType {
 const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
   const { selectedInfo, pageConfig, shopId, property } = props;
   const renderSettingItem = () => {
-    console.log(selectedInfo, 'selectedInfo');
     const { props: initProps, propsConfig, parentKey } = selectedInfo || {};
     const _props = { ...initProps, shopId, property, selectedKey: selectedInfo?.selectedKey };
     const componentType = propsConfig?.componentType;
-    console.log(componentType, 'componentType');
     if (componentType) {
       switch (componentType.type) {
         case PROPS_SETTING_TYPES.mobileHeaderNav:

src/pages/pageCustomized/mobileSettingPanel/settingWrap.tsx

+
+import React from 'react'
+import { Button } from 'antd'
+import { clearSelectedStatus } from '@lingxi-disign/core';
+import styles from './index.less'
+
+interface SettingPanelPropsType {
+  footer?: React.ReactNode;
+  onOK?: Function;
+  onCancel?: Function;
+  confirmLoading?: boolean
+}
+
+const SettingWrap: React.FC<SettingPanelPropsType> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  const { children, footer, onOK, onCancel, confirmLoading = false } = props
+
+  return (
+    <div className={styles.setting_panel} id="setting_panel">
+      <div className={styles.setting_panel_body}>
+        {children}
+      </div>
+      {
+        footer ? (
+          <div className={styles.setting_panel_footer}>
+            {footer}
+          </div>
+        ) : (
+            <div className={styles.setting_panel_footer}>
+              <div style={{ textAlign: 'right' }}>
+                <Button style={{ marginRight: 8 }} onClick={() => onCancel ? onCancel() : clearSelectedStatus()}>取消</Button>
+                <Button type="primary" onClick={(e) => onOK ? onOK(e) : clearSelectedStatus()} loading={confirmLoading}>确定</Button>
+              </div>
+            </div>
+          )
+      }
+    </div>
+  )
+}
+
+export default SettingWrap