fix: 商城装修修改

src/global/config/global.d.ts

@@ -4,10 +4,10 @@ export interface ShopInfo {
 	type: number;
 	environment: number;
 	logoUrl: string;
-	describe: string;
+	describe?: any;
 	state: number;
 	url: string;
-	isDefault?: any;
+	isDefault: number;
 }
 
 export interface OrderMode {

src/pages/pageCustomized/components/drawers/mixDrawer/index.tsx

 import React, { useState, useEffect, useMemo } from 'react';
 import { Drawer, Input, Table, Button, Row, Col, message } from 'antd';
+import { TableRowSelection } from 'antd/es/table/interface'
 import { SearchOutlined } from '@ant-design/icons';
 import moment from 'moment';
 
@@ -292,13 +293,13 @@ const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
     }
   }, [type]);
 
-  const rowSelection: any = {
+  const rowSelection: TableRowSelection<any> = {
     selectedRowKeys,
     onChange: (selectedRowKeys, selectedRows) => {
       setSelectedRows(selectedRows);
       setSelectedRowKeys(selectedRowKeys);
     },
-    type: selectType
+    type: selectType,
   };
 
   useEffect(() => {

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

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

src/pages/pageCustomized/mobileSettingPanel/index.tsx

@@ -17,8 +17,8 @@ type SettingPanelType = {
 const { TabPane } = Tabs;
 
 interface MobileSettingPanelProps {
-  shopId?: string,
-  property?: number
+  shopId: number,
+  property: number
 }
 
 const MobileSettingPanel: React.FC<MobileSettingPanelProps> = (props)=> {
@@ -49,7 +49,7 @@ const MobileSettingPanel: React.FC<MobileSettingPanelProps> = (props)=> {
         {
           (propsConfig && propsConfig.componentType) && (
             <TabPane tab={propsConfig.componentType.label || '编辑'} key="props">
-              <SettingWrap>
+              <SettingWrap shopId={props.shopId} property={props.property}>
                 <PropsSettings selectedInfo={newSelectInfo} pageConfig={pageConfig} {...props} />
               </SettingWrap>
             </TabPane>
@@ -58,7 +58,7 @@ const MobileSettingPanel: React.FC<MobileSettingPanelProps> = (props)=> {
         {
           (propsConfig && propsConfig.styleType) && (
             <TabPane tab="样式" key="style">
-              <SettingWrap>
+              <SettingWrap shopId={props.shopId} property={props.property}>
                 <StyleSettings selectedInfo={newSelectInfo} />
               </SettingWrap>
             </TabPane>

src/pages/pageCustomized/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/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/index.tsx

-import React, { useEffect, useMemo, useState } from 'react';
-import { Input, Row, Col, Select, Button, Tooltip } from 'antd';
-import { DeleteOutlined } from '@ant-design/icons';
+import React, { useEffect, useMemo, useState, useContext, useCallback } from 'react';
+import { Input, Row, Col, Select, Button, Tooltip, Spin } from 'antd';
+import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons';
 import { changeProps } from '@lingxi-disign/core';
 import { PublicApi } from '@/services/api'
 import UploadImage from '@/components/UploadImage';
 import ImageBox from '@/components/ImageBox'
 import StatusTag from '@/components/StatusTag'
-
+import { context } from '../../../common/context';
+import NiceForm from '@/components/NiceForm';
+import FormilyUpload from '@/components/UploadFiles/FormilyUploadFiles';
+import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect'
 import MixDrawer from '@/pages/pageCustomized/components/drawers/mixDrawer';
 import ActivityDrawer from '@/pages/pageCustomized/components/drawers/activityDrawer';
-
+import { cardNavSchema } from './schema'
 import uploadImgIcon from '@/asserts/icons/upload_img_icon.svg'
-import { priceFormat } from '@/utils/numberFomat';
+// import { priceFormat } from '@/utils/numberFomat';
 import styles from './index.less';
 
 
@@ -96,10 +99,13 @@ const RedirectTypeList = [
 
 const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
   const { name, type, url, icon, id, property = 1, empty, shopId, selectedKey } = props;
+  const fixtureContext = useContext(context);
   const [categoryList, setCategoryList] = useState<{label: string, value: number}[]>([])
   const [mixVisible, setMixVisible] = useState<boolean>(false);
   const [actVisible, setActVisible] = useState<boolean>(false);
   const [record, setRecord] = useState<any>();
+  const [formValue, setFormValue] = useState({});
+  const [navType, setNavType] = useState<any>()
 
   const _fetch: any = useMemo(() => {
     switch (type) {
@@ -128,13 +134,13 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
     } else {
       setRecord(undefined)
     }
-  }, [id, type])
+  }, [])
 
   useEffect(() => {
-    if (type && type === 3 && categoryList.length === 0) {
+    if (navType && navType === 3 && categoryList.length === 0) {
       getFirstCategoryList()
     }
-  }, [type])
+  }, [navType])
 
   const getFirstCategoryList = async () => {
     if (shopId) {
@@ -155,9 +161,9 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
   }
 
   const _onChangeByKey = (val: any, key: string, title?: string) => {
-    if (key === 'type' && Number(val) === 3 && categoryList.length === 0) {
-      getFirstCategoryList()
-    }
+    // if (key === 'type' && Number(val) === 3 && categoryList.length === 0) {
+    //   getFirstCategoryList()
+    // }
     const newProps: any = {
       [key]: val,
     }
@@ -239,6 +245,7 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
   }, [type, record])
 
   const _onShopClose = () => {
+    console.log('close')
     setMixVisible(false);
   }
 
@@ -261,6 +268,7 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
 
   const _onChooseConfirm = (record) => {
     setRecord(record);
+    console.log(type, 'type')
     switch (type) {
       case 2:
         changeProps({
@@ -278,6 +286,114 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
     }
   }
 
+  const renderUploadChild = (value) =>  {
+    const target = value[0];
+    return (
+      <div className={styles.image}>
+        <div className={styles.image_body}>
+          <div className={styles.uploadImage}>上传图片</div>
+          <div className={styles.imageIcon}>
+            <Spin spinning={target?.status === 'uploading'}>
+            {
+              target?.url ? <img src={target?.url} style={{width: '100%', height: '96px'}} /> : <PlusCircleOutlined />
+            }
+            </Spin>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const SelectBtn = useMemo(() => <Button block onClick={_onChoose}>选择</Button>, [type])
+
+  const formProps = {
+    // onSubmit: handleSubmit,
+    expressionScope: {
+      renderUploadChild,
+      SelectBtn,
+      handleTypeChange: (value: number, type: string) => {
+        console.log(value, 'handleTypeChange value')
+        _onChangeByKey(value, 'type')
+        // setNavType(value)
+        switch(type) {
+          case 'id':
+            if (value === 3 ) return true
+            return false
+          case 'channel':
+            if (value === 5 ) return true
+            return false
+          case 'url':
+            if (value === 6 ) return true
+            return false
+          default:
+            return false
+        }
+      }
+    },
+    actions: fixtureContext?.formActions,
+    components: { FormilyUpload },
+  };
+
+
+  const handleSumit = (values) => {
+    console.log(values, 'values')
+  }
+
+  // 会员弹框筛选select值
+  const fetchSelectOptions = async () => {
+    let categoryListRes: any[] = []
+    const res = await PublicApi.getSearchCommodityTemplateGetFirstCategoryListByMemberId({ shopId })
+    if (res.code === 1000 && res.data) {
+      const list = res.data.map(item => {
+        return {
+          label: item.name,
+          value: item.id
+        }
+      })
+      categoryListRes = list
+    }
+
+    return {
+      type: RedirectTypeList,
+      id: categoryListRes,
+      channel: _selectOption,
+    }
+  }
+
+  // return (
+  //   <>
+  //     <NiceForm
+  //       value={formValue}
+  //       {...formProps}
+  //       onSubmit={handleSumit}
+  //       schema={cardNavSchema}
+  //       effects={($, actions) => {
+  //         useAsyncInitSelect(['type', 'id', 'channel'], fetchSelectOptions)
+  //         // useAsyncSelect('primary', fetchPrimaryOption, ["name", "id"]);
+  //         // onFieldInputChange$('*(primary, secondary)').subscribe(fieldState => {
+  //         //   const { originAsyncData } = fieldState;
+  //         //   const target = originAsyncData.filter((_item) => _item.value === fieldState.value)[0];
+  //         //   actions.setFieldValue('title', target.label);
+  //         // });
+
+  //       }}
+  //     />
+  //     <MixDrawer
+  //       onClose={_onShopClose}
+  //       property={property}
+  //       type={type}
+  //       onConfirm={_onChooseConfirm}
+  //       visible={mixVisible}
+  //     />
+  //     <ActivityDrawer
+  //       selectId={id}
+  //       visible={actVisible}
+  //       onClose={_onActClose}
+  //       onConfirm={_onChooseConfirm}
+  //     />
+  //   </>
+  // )
+
   return (
     <div className={styles['banner']}>
       <div className={styles['banner-box']}>

src/pages/pageCustomized/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-end',
+            },
+          },
+          properties: {
+            type: {
+              type: 'string',
+              title: '导航链接',
+              enum: [],
+              'x-linkages': [
+                {
+                  type: 'value:visible',
+                  target: 'id',
+                  condition: "{{handleTypeChange($value, 'id')}}"
+                },
+                {
+                  type: 'value:visible',
+                  target: 'channel',
+                  condition: "{{handleTypeChange($value, 'channel')}}"
+                },
+                {
+                  type: 'value:visible',
+                  target: 'url',
+                  condition: "{{handleTypeChange($value, 'url')}}"
+                }
+              ],
+              '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,
+              },
+            },
+          }
+        },
+        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: '请输入链接地址',
+            },
+          ],
+        },
+        // BLOCK_LAYOUT2: {
+        //   type: 'object',
+        //   "x-component": 'mega-layout',
+        //   "x-component-props": {
+        //     inline: true
+        //   },
+        //   properties: {
+
+        //     selectButton: {
+        //       type: 'string',
+        //       "x-component": 'Button',
+        //       // "x-component-props": {
+        //       //   children: "{{SelectBtn}}"
+        //       // }
+        //     }
+        //   }
+        // }
+      }
+    }
+  }
+};

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

@@ -26,8 +26,8 @@ import styles from './index.less';
 interface PropsSettingsPropsType {
   selectedInfo: SelectedInfoType | undefined,
   pageConfig: PageConfigType,
-  shopId?: string,
-  property?: number
+  shopId: number,
+  property: number
 }
 
 const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {

src/pages/pageCustomized/mobileSettingPanel/settingWrap.tsx

@@ -2,23 +2,39 @@
 import React from 'react'
 import { Button } from 'antd'
 import { clearSelectedStatus } from '@lingxi-disign/core';
+import { createFormActions, FormEffectHooks, FormPath } from '@formily/antd';
+import { FixtureContentProvider } from './common/context'
 import styles from './index.less'
 
 interface SettingPanelPropsType {
   footer?: React.ReactNode;
   onOK?: Function;
   onCancel?: Function;
-  confirmLoading?: boolean
+  confirmLoading?: boolean,
+  shopId: number,
+  property: number
 }
 
+const formActions = 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 { children, footer, onOK, onCancel, confirmLoading = false, shopId, property } = props
+
+  const handleConfirm = (e) => {
+    formActions.validate().then((res) => {
+      onOK ? onOK(e) : clearSelectedStatus()
+    }).catch((error) => {
+      console.log(error)
+    })
+  }
 
   return (
     <div className={styles.setting_panel} id="setting_panel">
       <div className={styles.setting_panel_body}>
-        {children}
+        <FixtureContentProvider value={{ formActions: formActions, shopId, property }}>
+          {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={(e) => handleConfirm(e)} loading={confirmLoading}>确定</Button>
               </div>
             </div>
           )