fix: 装修bug修复

package.json

@@ -63,7 +63,7 @@
     "@lingxi-disign/core": "^1.7.3",
     "@lingxi-disign/react": "^1.7.6",
     "@lingxi-disign/react-web": "^1.7.2",
-    "@lingxi-disign/ui": "^1.7.2",
+    "@lingxi-disign/ui": "^1.7.3",
     "@turf/turf": "^6.4.0",
     "@types/crypto-js": "^4.0.1",
     "@types/js-cookie": "^2.2.6",

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

@@ -1326,6 +1326,20 @@ export const paramsShop = (
           }
         }
         break
+      case '16':
+        propsData = get(pageConfig, ['16', 'props']) || {}
+        const headerPropsData = get(pageConfig, ['17', 'props']) || {}
+        const brandListPropsData = get(pageConfig, ['18', 'props']) || {}
+        _params.adornContent.brand = {
+          style: 0,
+          status: propsData.status,
+          details: {
+            title: headerPropsData?.title,
+            explain: headerPropsData?.explain,
+            ids: brandListPropsData?.brandIds
+          }
+        }
+        break
       case '12':
           _params.adornContent.suggestProduct = {
             sort: 1,

src/pages/editor/configs/componentConfigs/LingXiUI/MobileBrand.ts

+import { ComponentSchemaType, PROPS_TYPES, PROPS_SETTING_TYPES } from '@lingxi-disign/core';;
+
+const MobileBrand: ComponentSchemaType = {
+  propsConfig: {
+    children: {
+      label: '内容',
+      type: PROPS_TYPES.string,
+    },
+  },
+};
+
+const Header: ComponentSchemaType = {
+  fatherNodesRule: ['MobileBrand.children'],
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_SETTING_TYPES.marketingCardHeader
+    },
+  },
+};
+
+const List: ComponentSchemaType = {
+  fatherNodesRule: ['MobileBrand.children'],
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_SETTING_TYPES.mobileQualityBrandList
+    },
+  },
+};
+
+export default {
+  MobileBrand,
+  'MobileBrand.Header': Header,
+  'MobileBrand.List': List,
+};

src/pages/editor/configs/componentConfigs/LingXiUI/index.ts

@@ -58,6 +58,7 @@ import SuggestProduct from './SuggestProduct'
 import OwnBanner from './OwnBanner'
 import MallHeader from './MallHeader'
 import OwnMainNav from './OwnMainNav'
+import MobileBrand from './MobileBrand'
 
 export default {
   View,
@@ -110,4 +111,5 @@ export default {
   OwnBanner,
   MallHeader,
   OwnMainNav,
+  ...MobileBrand,
 }

src/pages/editor/mobileSettingPanel/propsSettings/components/banner/index.tsx

@@ -170,9 +170,10 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
   const recordDetail = () => {
     return useMemo(() => {
       if (record) {
-        if (type === 1) {
+        const chooseType = fixtureContext?.formActions.getFieldValue('type')
+        if (chooseType === 1) {
           return (
-            <>
+            <div style={{ width: '100%' }}>
               <div className={styles['banner-record-commodity-detail']}>
                 <img src={record?.mainPic} />
                 <div className={styles['banner-record-commodity-detail-right']}>
@@ -194,10 +195,10 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
                   )
                 })}
               </div>}
-            </>
+            </div>
           )
         }
-        if (type === 2) {
+        if (chooseType === 2) {
           return (
             <div className={styles['banner-record-activity']}>
               <img src={record?.templatePicUrl} />
@@ -211,7 +212,7 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
             </div>
           )
         }
-        if (type === 3) {
+        if (chooseType === 3) {
           return (
             <div className={styles['banner-record-integral']}>
               <img src={record?.mainPic} />
@@ -224,7 +225,7 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
             </div>
           )
         }
-        if (type === 4) {
+        if (chooseType === 4) {
           return (
             <div className={styles['banner-record-shop']}>
               <img src={record?.logo} />
@@ -234,7 +235,7 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
             </div>
           )
         }
-        if (type === 5) {
+        if (chooseType === 5) {
           return (
             <div className={styles['banner-record-activity']}>
               <img src={record?.imageUrl} />
@@ -251,7 +252,7 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
         }
       }
       return null
-    }, [type, record])
+    }, [record])
   }
 
   const _showChoose = useMemo(() => {

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

+@import "../../common.less";
+
+.banner {
+  &-box {
+    margin-bottom: 16px;
+
+    :global {
+      .ant-upload {
+        width: 100%;
+      }
+    }
+
+    &-label {
+      font-size: 12px;
+      color: #91959B;
+      margin-bottom: 8px;
+    }
+
+    &-icon {
+      height: 96px;
+      background-color: #FAFBFC;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+
+      &>img {
+        width: 100%;
+      }
+
+      &-add {
+        width: 24px;
+        height: 24px;
+      }
+
+      &:hover {
+        .banner-box-icon-cover {
+          display: block;
+        }
+      }
+
+      &-cover {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: rgba(0, 0, 0, .1);
+        display: none;
+        z-index: 1;
+
+        &-delete {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          font-size: 20px;
+          color: #fff;
+        }
+
+        &-bottom {
+          cursor: pointer;
+          position: absolute;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          background-color: rgba(0, 0, 0, 0.24);
+          font-size: 12px;
+          color: #fff;
+          width: 100%;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+    }
+  }
+
+  &-record {
+    &-shop {
+      position: relative;
+      height: 56px;
+      border: 1px solid #EDEEEF;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0 8px;
+      margin-bottom: 8px;
+
+      &:hover {
+        .banner-record-shop-mask {
+          display: block;
+        }
+      }
+
+      &-mask {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: none;
+        background-color: rgba(0, 0, 0, 0.24);
+        transition: 0.5s all;
+        z-index: 6;
+
+        &-delete {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          font-size: 20px;
+          color: #fff;
+          cursor: pointer;
+        }
+      }
+
+
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 8px;
+      }
+
+    }
+
+  }
+}

src/pages/editor/mobileSettingPanel/propsSettings/components/brandList/index.tsx

+import React, { useState, useMemo } from 'react'
+import { Button, Tooltip, Input } from 'antd'
+import { changeProps } from '@lingxi-disign/core'
+import { DeleteOutlined } from '@ant-design/icons';
+import { LAYOUT_TYPE } from '@/constants'
+import MixDrawer from '@/pages/editor/components/drawer/mixDrawer';
+import styles from './index.less'
+
+interface BrandItemType {
+  id: number,
+  name: string,
+  logoUrl: string,
+}
+
+
+interface MobileQualityBrandListProps {
+  shopId: number,
+  brandList: BrandItemType[],
+  brandIds: number[],
+  layoutType: LAYOUT_TYPE
+}
+
+const MobileBrandList: React.FC<MobileQualityBrandListProps> = (props) => {
+  const { brandList = [], brandIds = [], shopId, layoutType } = props
+  const [visible, setVisible] = useState<boolean>(false)
+
+  const _onClose = () => {
+    setVisible(false)
+  }
+
+  const _onConfirm = (record: any) => {
+    changeProps({
+      props: Object.assign({ ...props }, {
+        brandIds: [...brandIds, ...record.map((item) => item.id)],
+        brandList: [...brandList, ...record]
+      })
+    })
+    setVisible(false)
+  }
+
+  const _handleDeleteItem = (deleteId: number) => {
+    if (deleteId) {
+      changeProps({
+        props: Object.assign({ ...props }, {
+          brandIds: brandIds.filter((item) => item !== deleteId),
+          brandList: brandList.filter((item) => item.id !== deleteId)
+        })
+      })
+    }
+  }
+
+  const _recordDetail = useMemo(() => {
+    if (brandList && brandList.length > 0) {
+      return brandList.map((item) => (
+        <div className={styles['banner-record-shop']}>
+          <img src={item?.logoUrl} />
+          <Tooltip title={item?.name}>
+            <span>{item?.name}</span>
+          </Tooltip>
+          <div className={styles['banner-record-shop-mask']}>
+            <DeleteOutlined
+              className={styles['banner-record-shop-mask-delete']}
+              onClick={() => _handleDeleteItem(item?.id)}
+            />
+          </div>
+        </div>
+      ))
+    }
+
+  }, [brandList])
+
+  return (
+    <div className={styles['banner']}>
+      <div className={styles['banner-box']}>
+        <div className={styles['banner-box-label']}>推荐品牌</div>
+        <Button onClick={() => setVisible(true)}>选择</Button>
+      </div>
+      {_recordDetail}
+      <MixDrawer
+        type={6}
+        layoutType={layoutType}
+        visible={visible}
+        selectId={brandIds}
+        onConfirm={_onConfirm}
+        property={1}
+        onClose={_onClose}
+        selectType='checkbox'
+        shopId={shopId}
+      />
+    </div>
+  )
+}
+
+export default MobileBrandList

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

@@ -16,6 +16,7 @@ import MarketingCardHeader from './components/marketingCardHeader'
 import BottomNavigationClient from './components/bottomNavigationClient'
 import SuggestProduct from './components/suggestProduct'
 import SuggestProductCommodity from './components/suggestProductCommodity'
+import BrandList from './components/brandList'
 import { LAYOUT_TYPE } from '@/constants'
 import styles from './index.less'
 
@@ -75,6 +76,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
           return <SuggestProduct {..._props} />
         case PROPS_SETTING_TYPES.suggestProductCommodity:
           return <SuggestProductCommodity {..._props} />
+        case PROPS_SETTING_TYPES.mobileQualityBrandList:
+          return <BrandList {..._props} />
         default:
           return null
       }

src/pages/mobileTemplate/ownMallTemplateEdit/config.ts

@@ -144,6 +144,42 @@ export const defaultConfig: PageConfigType = {
   },
 }
 
+export const brandListConfig = {
+  '16': {
+    title: '推荐品牌',
+    componentName: 'MobileBrand',
+    hideAction: true,
+    props: {
+      status: true,
+      style: {
+        margin: '0 8px 8px 8px'
+      }
+    },
+    childNodes: ['17', '18'],
+  },
+  '17': {
+    title: '标题',
+    componentName: 'MobileBrand.Header',
+    props: {
+      title: '精选品牌',
+      explain: '享专属优惠',
+    },
+    childNodes: [],
+  },
+  '18': {
+    title: '品牌列表',
+    componentName: 'MobileBrand.List',
+    props: {
+      brandIds: [],
+      brandList: [],
+      style: {
+        paddingBottom: 12
+      }
+    },
+    childNodes: [],
+  },
+};
+
 export const suggestProductConfig = {
   '12': {
     title: '推荐商品',

src/pages/mobileTemplate/ownMallTemplateEdit/index.less

@@ -25,7 +25,7 @@
 
 .app-canvas-container {
   display: flex;
-  width: 381px;
+  width: 383px;
   margin-top: 40px;
   margin-bottom: 52px;
   justify-content: center;

src/pages/mobileTemplate/ownMallTemplateEdit/index.tsx

@@ -28,6 +28,7 @@ import {
   couponsModalConfig,
   defaultConfig,
   suggestProductConfig,
+  brandListConfig,
 } from './config';
 import {
   marketingConfig_1,
@@ -153,6 +154,21 @@ const OwnMallTempleteEdit: React.FC<ShopPreviewPropsType> = props => {
     });
   };
 
+  const getBrandList = async (ids: number[]) => {
+    const param: any = {
+      current: 1,
+      pageSize: 20,
+      shopId,
+      idInList: ids
+    };
+    const res = await PublicApi.getSearchCommodityTemplateGetBrandList(param);
+    message.destroy()
+    if (res.code === 1000 && res.data.data) {
+      return res.data.data
+    }
+    return [];
+  };
+
   const getInfoList = async () => {
     const param: any = {
       current: 1,
@@ -934,6 +950,24 @@ const OwnMallTempleteEdit: React.FC<ShopPreviewPropsType> = props => {
         }
       }
 
+      if (appConfig?.brand) {
+        const _details = appConfig?.brand?.details;
+        brandListConfig['16'].props.status = appConfig?.brand.status
+        if (_details) {
+          brandListConfig['17'].props = {
+            title: _details.title,
+            explain: _details.explain,
+          }
+          brandListConfig['18'].props = {
+            style: {
+              paddingBottom: 0
+            },
+            brandIds: _details?.ids || [],
+            brandList: await getBrandList(_details.ids)
+          }
+        }
+      }
+
       if (appConfig?.suggestProduct) {
         // 商品推荐
         const _details = appConfig?.suggestProduct?.details;
@@ -1001,17 +1035,12 @@ const OwnMallTempleteEdit: React.FC<ShopPreviewPropsType> = props => {
           }
         }
       }
-      !_mallLayoutConfig['0'].childNodes.includes('12') &&
-        _mallLayoutConfig['0'].childNodes.push('12');
 
-      _mallLayoutConfig['0'].childNodes = [
-        ..._mallLayoutConfig['0'].childNodes,
-        '13',
-        '14',
-      ];
+      _mallLayoutConfig['0'].childNodes = [..._mallLayoutConfig['0'].childNodes, '16', '12','13', '14'];
       const config = {
         ..._mallLayoutConfig,
         ..._other,
+        ...brandListConfig,
         ..._suggestProductConfig,
         ..._couponsModalConfig,
         ...defaultConfig,

src/pages/mobileTemplate/ownMallTemplateEdit/preview.tsx

@@ -28,6 +28,7 @@ import {
   couponsModalConfig,
   defaultConfig,
   suggestProductConfig,
+  brandListConfig,
 } from './config';
 import {
   marketingConfig_1,
@@ -168,6 +169,21 @@ const OwnMallTempletePreview: React.FC<ShopPreviewPropsType> = props => {
     });
   };
 
+  const getBrandList = async (ids: number[]) => {
+    const param: any = {
+      current: 1,
+      pageSize: 20,
+      shopId,
+      idInList: ids
+    };
+    const res = await PublicApi.getSearchCommodityTemplateGetBrandList(param);
+    message.destroy()
+    if (res.code === 1000 && res.data.data) {
+      return res.data.data
+    }
+    return [];
+  };
+
   const getInfoList = async () => {
     const param: any = {
       current: 1,
@@ -951,6 +967,24 @@ const OwnMallTempletePreview: React.FC<ShopPreviewPropsType> = props => {
         }
       }
 
+      if (appConfig?.brand) {
+        const _details = appConfig?.brand?.details;
+        brandListConfig['16'].props.status = appConfig?.brand.status
+        if (_details) {
+          brandListConfig['17'].props = {
+            title: _details.title,
+            explain: _details.explain,
+          }
+          brandListConfig['18'].props = {
+            style: {
+              paddingBottom: 0
+            },
+            brandIds: _details?.ids || [],
+            brandList: await getBrandList(_details.ids)
+          }
+        }
+      }
+
       if (appConfig?.suggestProduct) {
         // 商品推荐
         const _details = appConfig?.suggestProduct?.details;
@@ -1018,17 +1052,11 @@ const OwnMallTempletePreview: React.FC<ShopPreviewPropsType> = props => {
           }
         }
       }
-      !_mallLayoutConfig['0'].childNodes.includes('12') &&
-        _mallLayoutConfig['0'].childNodes.push('12');
-
-      _mallLayoutConfig['0'].childNodes = [
-        ..._mallLayoutConfig['0'].childNodes,
-        '13',
-        '14',
-      ];
+      _mallLayoutConfig['0'].childNodes = [..._mallLayoutConfig['0'].childNodes, '16', '12','13', '14'];
       const config = {
         ..._mallLayoutConfig,
         ..._other,
+        ...brandListConfig,
         ..._suggestProductConfig,
         ..._couponsModalConfig,
         ...defaultConfig,

src/pages/preview/channelPreview/index.tsx

@@ -25,7 +25,8 @@ interface ChannelPreviewPropsType {
        * 模板名称
        */
       template: string;
-      type: number
+      type: number,
+      shopId: string,
     }
   }
 }
@@ -33,7 +34,7 @@ interface ChannelPreviewPropsType {
 const TemplateList = ['science']
 
 const ChannelPreview: React.FC<ChannelPreviewPropsType> = (props) => {
-  const { query: { id, template, type } } = props.location
+  const { query: { id, template, type, shopId } } = props.location
   const userInfo: any = getAuth() || {}
   const [loading, setLoading] = useState<boolean>(true)
   const [theme, setTheme] = useState<string>('theme-channel-science')
@@ -74,6 +75,9 @@ const ChannelPreview: React.FC<ChannelPreviewPropsType> = (props) => {
       const params: any = {
         memberId: userInfo.memberId
       }
+      const headers: any = {
+        shopId
+      }
       PublicApi.getTemplateAdornWebChannelFindAllFirstCategory(params).then(res => {
         if (res.code === 1000) {
           resolve(res.data)

src/pages/preview/shopPreview/index.tsx

@@ -25,6 +25,7 @@ interface ShopEditPropsType {
        * 模板名称
        */
       template: string;
+      shopId: string,
     }
   }
 }
@@ -32,7 +33,7 @@ interface ShopEditPropsType {
 const TemplateList = ['science']
 
 const ShopEdit: React.FC<ShopEditPropsType> = (props) => {
-  const { query: { id, template } } = props.location
+  const { query: { id, template, shopId } } = props.location
   const [loading, setLoading] = useState<boolean>(true)
   const [theme, setTheme] = useState<string>('theme-shop-science')
   const [componentConfigs, setComponentConfigs] = useState({})
@@ -94,7 +95,11 @@ const ShopEdit: React.FC<ShopEditPropsType> = (props) => {
         memberId,
         roleId: memberRoleId
       }
-      PublicApi.getTemplateAdornWebStoreFindAllFirstCategory(param).then(res => {
+
+      const headers: any = {
+        shopId
+      }
+      PublicApi.getTemplateAdornWebStoreFindAllFirstCategory(param, { headers }).then(res => {
         if (res.code === 1000) {
           resolve(res.data)
         }