fix: 店铺装修品类导航表单验证

src/pages/channel/channelTemplate/index.tsx

@@ -35,7 +35,7 @@ const ShopTemplate: React.FC = () => {
         <Row gutter={24} className={styles.template_list}>
           {
             templateList.map(item => (
-              <Col xxl={6} xl={8} lg={12} key={item.id}>
+              <Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}>
                 <TemplateItem templateInfo={item} type="shop" />
               </Col>
             ))

src/pages/editor/components/drawer/activityDrawer/index.tsx

@@ -15,10 +15,10 @@ import StatusTag from '@/components/StatusTag'
 
 import * as tableSchemas from './schema';
 
-const options = [
-  { label: '平台', value: 1 },
-  { label: '商家', value: 2 },
-];
+// const options = [
+//   { label: '平台', value: 1 },
+//   { label: '商家', value: 2 },
+// ];
 
 interface ActivityDrawerProps {
   visible: boolean,
@@ -159,22 +159,22 @@ const ActivityDrawer: React.FC<ActivityDrawerProps> = (props: ActivityDrawerProp
             span: 16
           }
         }}
-        formilyChilds={{
-          children: (
-            <div style={{ textAlign: 'right' }}>
-              <Radio.Group
-                options={options}
-                onChange={_onRadioChange}
-                value={type}
-                optionType="button"
-              />
-            </div>
-          ),
-          layouts: {
-            order: 2,
-            span: 8
-          }
-        }}
+        // formilyChilds={{
+        //   children: (
+        //     <div style={{ textAlign: 'right' }}>
+        //       <Radio.Group
+        //         options={options}
+        //         onChange={_onRadioChange}
+        //         value={type}
+        //         optionType="button"
+        //       />
+        //     </div>
+        //   ),
+        //   layouts: {
+        //     order: 2,
+        //     span: 8
+        //   }
+        // }}
       />
     </Drawer>
   )

src/pages/editor/components/toolBar/index.tsx

@@ -14,11 +14,12 @@ interface ToolBarPropsType {
   title?: string,
   showActions?: boolean,
   templateId?: number,
-  layoutType?: LAYOUT_TYPE
+  layoutType?: LAYOUT_TYPE,
+  templateInfo?: any
 }
 
 const ToolBar: React.FC<ToolBarPropsType> = (props) => {
-  const { type = 1, title = "首页", showActions, templateId, layoutType } = props
+  const { type = 1, title = "首页", showActions, templateId, templateInfo, layoutType } = props
   const [saveLoading, setSaveLoading] = useState<boolean>(false)
   const { pageConfig } = useSelector<{ pageConfig: PageConfigType }, STATE_PROPS>(['pageConfig'])
 
@@ -42,7 +43,7 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
     if (layoutType === LAYOUT_TYPE.shop) {
       saveAppEnterprise(paramsShop(templateId, pageConfig))
     } else if(layoutType=== LAYOUT_TYPE.channel) {
-      saveAppEnterprise(paramsChannel(templateId, pageConfig))
+      saveAppEnterprise(paramsChannel(templateId, pageConfig, templateInfo))
     }
   }, [pageConfig])
 

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

@@ -566,10 +566,12 @@ export const paramsShop = (
  export const paramsChannel = (
   templateId: number,
   pageConfig: PageConfigType,
+  templateInfo: any,
 ) => {
   let _params: any = {
     templateId,
     adornContent: {},
+    categoryAdornContent: templateInfo?.categoryAdornContent || {}
   };
 
   const _root: any = pageConfig[ROOT].childNodes || [];

src/pages/editor/mobileSettingPanel/common/context/index.tsx

+import { ISchemaFormActions } from '@formily/antd';
+import React from 'react';
+
+type Icontext = {
+  formActions: ISchemaFormActions
+}
+
+export const context = React.createContext<Icontext | null>(null);
+
+export const FixtureContentProvider = context.Provider;

src/pages/editor/mobileSettingPanel/common/hooks/useSameLevelProps.ts

+import React, { useMemo, useEffect } from 'react';
+import { useSelector } from '@lingxi-disign/react';
+
+interface useSamLevelPropsType {
+  key: string,
+}
+
+const useSamLevelProps = (props: useSamLevelPropsType) => {
+  const { key } = props
+  const { pageConfig } = useSelector<any, any>(['pageConfig']);
+
+  const result = useMemo(() => {
+    // 判断key是否含有’-‘符号的子模块
+    if (key && key.indexOf('-') > -1) {
+      const keySplit = key.split('-')
+      keySplit.pop()
+      const commonKey = `${keySplit.join('-')}-`
+      let propsList: any[] = []
+      pageConfig && Object.keys(pageConfig).forEach((moduleKey: string) => {
+        if (moduleKey.indexOf(commonKey) > -1) {
+          if (pageConfig[moduleKey]?.props) {
+            propsList.push(pageConfig[moduleKey]?.props)
+          }
+        }
+      })
+      return propsList
+    } else {
+      return []
+    }
+  }, [key])
+
+  return result
+}
+
+export default useSamLevelProps

src/pages/editor/mobileSettingPanel/propsSettings/common.less

 @import "../../../../global//styles/utils.less";
 
+.image {
+  margin-top: 8px;
+  width: 100%;
+  position: relative;
+
+  &_body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 96px;
+    cursor: pointer;
+    background-color: #fafbfc;
+    overflow: hidden;
+  }
+
+  .imageIcon {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .uploadImage {
+    position: absolute;
+    bottom: -34px;
+    left: 0;
+    right: 0;
+    padding: 4px;
+    background: rgba(0,0,0,0.3);
+    z-index: 99;
+    text-align: center;
+    color: #fff;
+    transition: all 0.6s;
+
+  }
+  &:hover {
+    .uploadImage {
+      transform: translateY(-34px);
+    }
+  }
+}
+
+
 .setting {
 
   .setting_title {

src/pages/editor/mobileSettingPanel/propsSettings/components/cardNavItem/index.less

@@ -76,6 +76,7 @@
 
   &-record {
     &-shop {
+      width: 100%;
       height: 56px;
       border: 1px solid #EDEEEF;
       display: flex;
@@ -101,6 +102,7 @@
     }
 
     &-integral {
+      width: 100%;
       height: 56px;
       border: 1px solid #EDEEEF;
       display: flex;
@@ -138,6 +140,7 @@
     }
 
     &-activity {
+      width: 100%;
       height: 56px;
       border: 1px solid #EDEEEF;
       display: flex;

src/pages/editor/mobileSettingPanel/propsSettings/components/cardNavItem/schema.ts

+import { ISchema } from "@formily/antd";
+
+export const cardNavSchema: ISchema = {
+  type: 'Object',
+  properties: {
+    layout: {
+      type: 'object',
+      "x-component": 'mega-layout',
+      "x-component-props": {
+        labelAlign: "top"
+      },
+      properties: {
+        name: {
+          type: 'string',
+          title: '名称',
+          'x-rules': [
+            {
+              required: true,
+              message: '请输入名称',
+            },
+          ],
+        },
+        icon: {
+          type: 'string',
+          title: '图标',
+          'x-rules': [
+            {
+              required: true,
+              message: '请上传图标',
+            },
+          ],
+          "x-component": 'FormilyUpload',
+          "x-component-props": {
+            renderUploadChild: '{{renderUploadChild}}',
+            showFiles: false,
+            customizeItemRender: null,
+            children: null,
+            maxCount: 1,
+          },
+        },
+        typeWrap: {
+          type: 'object',
+          "x-component": 'flex-layout',
+          "x-component-props": {
+            rowStyle: {
+              justifyContent: 'flex-start',
+              alignItems: 'flex-start',
+            },
+          },
+          properties: {
+            type: {
+              type: 'string',
+              title: '导航链接',
+              enum: [],
+              'x-linkages': [
+                {
+                  type: 'value:visible',
+                  target: 'id',
+                  condition: "{{$value === 1}}"
+                },
+                {
+                  type: 'value:visible',
+                  target: 'channel',
+                  condition: "{{$value === 3}}"
+                },
+                {
+                  type: 'value:visible',
+                  target: 'url',
+                  condition: "{{$value === 4}}"
+                },
+                {
+                  type: 'value:visible',
+                  target: 'recordDetail',
+                  condition: "{{$value === 2}}"
+                },
+              ],
+              'x-rules': [
+                {
+                  required: true,
+                  message: '请选择导航链接',
+                },
+              ],
+              'x-component-props': {
+                style: {
+                  width: 320,
+                  marginRight: 12
+                }
+              }
+            },
+            sumbit: {
+              'x-component': 'Children',
+              'x-component-props': {
+                children: '{{SelectBtn}}',
+              },
+              'x-mega-props': {
+                span: 1,
+              },
+            },
+          }
+        },
+        recordDetail: {
+          'x-component': 'recordDetail',
+        },
+        id: {
+          type: 'string',
+          title: '品类',
+          enum: [],
+          'x-component-props': {
+            state: false,
+          },
+          'x-rules': [
+            {
+              required: true,
+              message: '请选择品类',
+            },
+          ],
+        },
+        channel: {
+          type: 'string',
+          title: '频道',
+          enum: [],
+          'x-rules': [
+            {
+              required: true,
+              message: '请选择频道',
+            },
+          ],
+        },
+        url: {
+          type: 'string',
+          title: '链接地址',
+          'x-rules': [
+            {
+              required: true,
+              message: '请输入链接地址',
+            },
+          ],
+        },
+      }
+    }
+  }
+};

src/pages/editor/mobileSettingPanel/settingWrap.tsx

@@ -2,6 +2,8 @@
 import React from 'react'
 import { Button } from 'antd'
 import { clearSelectedStatus } from '@lingxi-disign/core';
+import { createFormActions, ISchemaFormActions } from '@formily/antd';
+import { FixtureContentProvider } from './common/context'
 import styles from './index.less'
 
 interface SettingPanelPropsType {
@@ -11,14 +13,28 @@ interface SettingPanelPropsType {
   confirmLoading?: boolean
 }
 
+const formActions: ISchemaFormActions = createFormActions();
+
 const SettingWrap: React.FC<SettingPanelPropsType> = (props) => {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   const { children, footer, onOK, onCancel, confirmLoading = false } = props
 
+  const handleConfirm = (e) => {
+    if (formActions.validate()) {
+      formActions.submit().then(() => {
+        clearSelectedStatus()
+      })
+    } else {
+      clearSelectedStatus()
+    }
+  }
+
   return (
     <div className={styles.setting_panel} id="setting_panel">
       <div className={styles.setting_panel_body}>
-        {children}
+        <FixtureContentProvider value={{ formActions: formActions }}>
+          {children}
+        </FixtureContentProvider>
       </div>
       {
         footer ? (
@@ -29,7 +45,7 @@ const SettingWrap: React.FC<SettingPanelPropsType> = (props) => {
             <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>
+                <Button type="primary" onClick={handleConfirm} loading={confirmLoading}>确定</Button>
               </div>
             </div>
           )

src/pages/shop/components/templateItem/index.less

-.template_item {
-  // width: 386px;
-  background-color: #ffffff;
-  border-radius: 8px;
-  overflow: hidden;
-  height: 100%;
-  padding-bottom: 24px;
-
-  .img_box {
-    position: relative;
-    // height: 218px;
-    height: 0;
-    padding-bottom: 67%;
-    overflow: hidden;
-    background-size: auto 100%;
-    background-position: center center;
-    background-repeat: no-repeat;
-
-    &:hover {
-      .img_box_mask {
-        opacity: 1;
-      }
-    }
-
-    .img_box_mask {
-      position: absolute;
-      width: 100%;
-      opacity: 0;
-      transition: all .5s;
-      height: 100%;
-      background: rgba(255, 255, 255, 0.45);
-      z-index: 8;
-
-      .detail_btn {
-        position: relative;
-        display: block;
-        left: 0;
-        right: 0;
-        top: 50%;
-        margin: 0 auto;
-        margin-top: -20px;
-        width: 240px;
-        height: 40px;
-        background: rgba(0, 0, 0, 0.85);
-        color: #ffffff;
-        text-align: center;
-        line-height: 40px;
-        font-weight: 500;
-        cursor: pointer;
-
-        &:hover {
-          opacity: .9;
-        }
-      }
-    }
-
-    .type_tag {
-      position: absolute;
-      top: 0;
-      width: 72px;
-      height: 24px;
-      color: #ffffff;
-      text-align: center;
-      line-height: 24px;
-      font-size: 12px;
-      background: #4279DF;
-      border-radius: 8px 0px 8px 0px;
-      z-index: 3;
-
-      &.h5 {
-        background: #6554C0;
-      }
-    }
-
-    &>img {
-      // height: 100%;
-      width: 100%;
-    }
-  }
-
-  .template_info {
-    padding: 0 24px;
-
-    .template_info_name {
-      display: flex;
-      align-items: center;
-      color: #303133;
-      font-weight: bold;
-      line-height: 24px;
-      padding: 16px 0;
-
-      .tag {
-        padding: 0 8px;
-        height: 24px;
-        background: rgba(244, 245, 247, 1);
-        border-radius: 4px;
-        margin-left: 8px;
-        color: #606266;
-        font-weight: 400;
-
-      }
-    }
-
-    .template_info_content {
-      display: flex;
-      align-items: flex-end;
-      height: 52px;
-
-      &.goods {
-        height: 32px;
-      }
-
-      .template_info_content_text_wrap {
-        flex: 1;
-        font-size: 12px;
-        line-height: 22px;
-
-        .template_info_content_text_line {
-          display: flex;
-
-          &:not(:last-child) {
-            margin-bottom: 8px;
-          }
-
-          &>label {
-            color: #909399;
-            margin-right: 8px;
-          }
-
-          &>span {
-            flex: 1;
-            width: 0;
-            display: block;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            color: #303133;
-          }
-        }
-      }
-
-      .template_item_btn {
-        width: 88px;
-        height: 32px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background: rgba(250, 251, 252, 1);
-        border: 1px solid rgba(235, 236, 240, 1);
-        cursor: pointer;
-        color: #606266;
-        font-size: 12px;
-        // margin-top: auto;
-        margin-left: auto;
-
-        &.active {
-          background: #00B37A;
-          border: 1px solid #00B37A;
-          color: #ffffff;
-        }
-
-        &>label {
-          margin-left: 8px;
-          cursor: pointer;
-        }
-
-        &:hover {
-          opacity: .8;
-        }
-      }
-    }
-
-  }
-}
\ No newline at end of file
+.template_item {
+  // width: 386px;
+  background-color: #ffffff;
+  border-radius: 8px;
+  overflow: hidden;
+  height: 100%;
+  padding-bottom: 24px;
+
+  .img_box {
+    position: relative;
+    // height: 218px;
+    height: 0;
+    padding-bottom: 67%;
+    overflow: hidden;
+    background-size: auto 100%;
+    background-position: center center;
+    background-repeat: no-repeat;
+
+    &:hover {
+      .img_box_mask {
+        opacity: 1;
+      }
+    }
+
+    .img_box_mask {
+      position: absolute;
+      width: 100%;
+      opacity: 0;
+      transition: all .5s;
+      height: 100%;
+      background: rgba(255, 255, 255, 0.45);
+      z-index: 8;
+
+      .detail_btn {
+        position: relative;
+        display: block;
+        left: 0;
+        right: 0;
+        top: 50%;
+        margin: 0 auto;
+        margin-top: -20px;
+        width: 240px;
+        height: 40px;
+        background: rgba(0, 0, 0, 0.85);
+        color: #ffffff;
+        text-align: center;
+        line-height: 40px;
+        font-weight: 500;
+        cursor: pointer;
+
+        &:hover {
+          opacity: .9;
+        }
+      }
+    }
+
+    .type_tag {
+      position: absolute;
+      top: 0;
+      width: 72px;
+      height: 24px;
+      color: #ffffff;
+      text-align: center;
+      line-height: 24px;
+      font-size: 12px;
+      background: #4279DF;
+      border-radius: 8px 0px 8px 0px;
+      z-index: 3;
+
+      &.h5 {
+        background: #6554C0;
+      }
+    }
+
+    &>img {
+      // height: 100%;
+      width: 100%;
+    }
+  }
+
+  .template_info {
+    padding: 0 24px;
+
+    .template_info_name {
+      display: flex;
+      align-items: center;
+      color: #303133;
+      font-weight: bold;
+      line-height: 24px;
+      padding: 16px 0;
+
+      .tag {
+        padding: 0 8px;
+        height: 24px;
+        background: rgba(244, 245, 247, 1);
+        border-radius: 4px;
+        margin-left: 8px;
+        color: #606266;
+        font-weight: 400;
+
+      }
+    }
+
+    .template_info_content {
+      display: flex;
+      align-items: flex-end;
+      height: 52px;
+
+      &.goods {
+        height: 32px;
+      }
+
+      .template_info_content_text_wrap {
+        flex: 1;
+        font-size: 12px;
+        line-height: 22px;
+
+        .template_info_content_text_line {
+          display: flex;
+
+          &:not(:last-child) {
+            margin-bottom: 8px;
+          }
+
+          &>label {
+            color: #909399;
+            margin-right: 8px;
+          }
+
+          &>span {
+            flex: 1;
+            width: 0;
+            display: block;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: #303133;
+          }
+        }
+      }
+
+      .template_item_btn {
+        width: 88px;
+        height: 32px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: rgba(250, 251, 252, 1);
+        border: 1px solid rgba(235, 236, 240, 1);
+        cursor: pointer;
+        color: #606266;
+        font-size: 12px;
+        // margin-top: auto;
+        margin-left: auto;
+
+        &.active {
+          background: #00B37A;
+          border: 1px solid #00B37A;
+          color: #ffffff;
+        }
+
+        &>label {
+          margin-left: 8px;
+          cursor: pointer;
+        }
+
+        &:hover {
+          opacity: .8;
+        }
+      }
+    }
+
+  }
+}

src/pages/shop/shopTemplate/index.tsx

@@ -35,7 +35,7 @@ const ShopTemplate: React.FC = () => {
         <Row gutter={24} className={styles.template_list}>
           {
             templateList.map(item => (
-              <Col xxl={6} xl={8} lg={12} key={item.id}>
+              <Col xxl={6} xl={8} lg={12} key={item.id} style={{ marginBottom: 16 }}>
                 <TemplateItem templateInfo={item} type="shop" />
               </Col>
             ))