fix: 渠道商城装修商品数据问题

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

+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileChannelBanner: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: "mobileChannelBanner" as PROPS_TYPES
+    },
+  },
+};
+
+export default MobileChannelBanner;

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

@@ -25,6 +25,7 @@ import FindMore from './FindMore'
 import Information from './Information'
 import Footer from './Footer'
 import MobileBanner from './MobileBanner'
+import MobileChannelBanner from './MobileChannelBanner'
 import MobileQuickNav from './MobileQuickNav'
 import MobileShopCommodityList from './MobileShopCommodityList'
 import MobileShopHeaderNav from './MobileShopHeaderNav'
@@ -51,6 +52,7 @@ export default {
   ChannelHeader,
   ShopHeader,
   MobileBanner,
+  MobileChannelBanner,
   MobileQuickNav,
   MobileShopCommodityList,
   MobileShopHeaderNav,

src/pages/editor/configs/index.ts

@@ -8,11 +8,10 @@
  */
 import { htmlContainers, htmlNonContainers } from './htmlCategory';
 import { reactContainers, reactNonContainers } from './reactCategory';
-// import * as Ants from 'antd/es';
 import * as LingXiUI from 'lingxi-design-ui'
 import * as CustomComponents from '../customComponents'
 import AllComponentConfigs from './componentConfigs';
-import { CategoryType, ConfigType } from 'lingxi-editor-core';
+import { ConfigType } from 'lingxi-editor-core';
 import { flattenDeepArray } from '../utils';
 import { message } from 'antd';
 

src/pages/editor/customComponents/ChannelBanner/index.less

+@import '../style/common.less';
+
+.@{prefixCls}-banner {
+  padding: 10px 8px;
+  z-index: 6;
+  // margin-top: -50px;
+
+  &.hide {
+    display: none;
+  }
+
+  &-body {
+    position: relative;
+    height: 120px;
+    border-radius: 8px;
+    overflow: hidden;
+    background-color: #F2F2F2;
+  }
+
+  &-carousel {
+
+    &-item {
+      height: 120px;
+      width: 100%;
+
+      &-img {
+        height: 100%;
+      }
+    }
+  }
+
+  &-dots {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    height: 16px;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 7;
+    padding: 0 7px;
+    color: rgba(255, 255, 255, 0.5);
+    display: flex;
+    align-items: center;
+
+    &-active {
+      color: #FFF;
+    }
+  }
+}

src/pages/editor/customComponents/ChannelBanner/index.tsx

+import React, { useState } from 'react'
+import { ConfigConsumer } from '../Generator'
+import { Carousel } from 'antd'
+import { isEmpty } from 'lodash'
+import cx from 'classnames'
+import ImageBox from '@/components/ImageBox'
+import styles from './index.less'
+
+export interface DataItemType {
+  id: number,
+  name: string,
+  img: string,
+  /** 1: 商品详情 2: 积分详情 5: 不跳转 */
+  type: number,
+}
+
+export interface MobileBannerPropsType {
+  className?: string,
+  visible?: boolean,
+  dataList: DataItemType[],
+}
+
+const MobileChannelBanner: React.FC<MobileBannerPropsType> = (props) => {
+  const { children, className, dataList, visible, ...others } = props
+  const [currentIndex, setCurrentIndex] = useState<number>(1)
+
+  console.log(dataList, "dataList")
+
+  const renderChildren = ({ getPrefixCls }: any) => {
+    const prefixCls = getPrefixCls("banner");
+    const classNameString = cx(styles[`${prefixCls}`], className, !visible ? styles.hide: null)
+
+    const handleCarouselChange = (current: number) => {
+      setCurrentIndex(current + 1)
+    }
+
+    return (
+      <div className={classNameString} {...others}>
+        <div className={styles["lingxi-banner-body"]}>
+          <Carousel
+            autoplay
+            dots={false}
+            afterChange={handleCarouselChange}
+            className={styles["lingxi-banner-carousel"]}
+          >
+            {
+              !isEmpty(dataList) && dataList.map(item => (
+                <div key={item.id} className={styles["lingxi-banner-carousel-item"]}>
+                  {
+                    item.img && <ImageBox style={{ width: "100%" }} width="100%" height={120} imgUrl={item.img} />
+                  }
+                </div>
+              ))
+            }
+          </Carousel>
+          {
+            !isEmpty(dataList) && (
+               <div className={styles["lingxi-banner-dots"]}>
+                <span className={styles["lingxi-banner-dots-active"]}>{currentIndex}</span>
+                <span>/ {dataList.length}</span>
+              </div>
+            )
+          }
+        </div>
+      </div>
+    )
+  }
+
+  return <ConfigConsumer>{renderChildren}</ConfigConsumer>
+}
+
+MobileChannelBanner.defaultProps = {
+  dataList: [],
+  visible: true
+}
+
+export default MobileChannelBanner

src/pages/editor/customComponents/index.ts

@@ -10,3 +10,4 @@ export { default as MobileChannelHeaderNav } from './ChannelHeaderNav'
 export { default as MobileChannelGoodsCard } from './ChannelGoodsCard'
 export { default as MobileChannelInformation } from './ChannelInformation'
 export { default as MobileChannelCategory } from './ChannelCategory'
+export { default as MobileChannelBanner } from './ChannelBanner'

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

@@ -39,6 +39,9 @@ interface DataItemType {
 interface BannerPropsType {
   dataList: DataItemType[],
   visible: boolean,
+  type?: string,
+  channelMemberId?: number,
+  storeId?: number,
 }
 
 const RedirectTypeList = [
@@ -65,7 +68,7 @@ const modalWidthMap = {
 
 const Banner: React.FC<BannerPropsType> = (props) => {
 
-  const { dataList, visible } = props
+  const { dataList, channelMemberId, storeId, type } = props
   const [list, setList] = useState<DataItemType[]>([])
   const [modalVisible, setModalVisible] = useState<boolean>(false)
   const [currentInfo, setCurrentInfo] = useState<DataItemType>()
@@ -198,6 +201,7 @@ const Banner: React.FC<BannerPropsType> = (props) => {
     newList.map(item => {
       if (item.sort === sort) {
         item.type = type
+        item.id = null
         item.selectInfo = null
       }
     })
@@ -386,55 +390,47 @@ const Banner: React.FC<BannerPropsType> = (props) => {
   const fetchTableList = async (param: any) => {
     const params: any = {
       ...param,
-
     }
     let getFn: any = null
+    const headers: any = {}
     switch(currentInfo?.type) {
       case 1:
         params.priceTypeList = [1]
+        if (currentInfo.id) {
           params.idNotInList = [currentInfo.id]
-        getFn = PublicApi.postSearchMobileShopEnterpriseGetCommodityList
+        }
+        if (type === "channel") {
+          headers.type = "3"
+          params.channelMemberId = channelMemberId
+          getFn = PublicApi.postSearchMobileShopChannelGetCommodityList
+        } else {
+          params.storeId = storeId
+          getFn = PublicApi.postSearchMobileShopStoreGetCommodityList
+        }
         break
       case 2:
         params.priceTypeList = [3]
+        if (currentInfo.id) {
           params.idNotInList = [currentInfo.id]
-        getFn = PublicApi.postSearchMobileShopScoreGetCommodityList
-        break
-      case 3:
-        params.idList = [currentInfo.id]
-        getFn = PublicApi.getTemplateWebMemberShopWebPageByIdNotIn
-        break
-      case 4:
-        params.idList = [currentInfo.id]
-        getFn = PublicApi.getManageContentInformationPageByIdNotIn
+        }
+        if (type === "channel") {
+          headers.type = "3"
+          params.channelMemberId = channelMemberId
+          getFn = PublicApi.postSearchMobileShopChannelGetCommodityList
+        } else {
+          params.storeId = storeId
+          getFn = PublicApi.postSearchMobileShopStoreGetCommodityList
+        }
         break
       default:
         break
     }
 
-    const res = getFn ? await getFn(params, {ctlType: 'none'}) : await new Promise((resolve) => resolve({data: [], totolCount: 0}))
+    const res = getFn ? await getFn(params, { headers }) : await new Promise((resolve) => resolve({data: [], totolCount: 0}))
+    message.destroy()
     return res.data
   }
 
-  /**
-   * 根据类型显示文案
-   * @param type
-   */
-  const showTextByType = (type: number) => {
-    switch(type) {
-      case 1:
-        return "商品"
-      case 2:
-        return "商品"
-      case 3:
-        return "店铺"
-      case 4:
-        return "资讯"
-      default:
-        return ""
-    }
-  }
-
   return (
     <div className={styles.setting}>
       {/* <div className={styles.hideModule}>
@@ -449,7 +445,6 @@ const Banner: React.FC<BannerPropsType> = (props) => {
               props:Object.assign({ ...props }, { dataList: newList })
             })
           }
-
         }}
         handle=".draghandle"
       >
@@ -517,9 +512,9 @@ const Banner: React.FC<BannerPropsType> = (props) => {
                     {
                       item.type !== 5 && (
                         <div className={styles.setting_line_addItem_line}>
-                          <div className={styles.setting_line_addItem_line_label}>跳转{showTextByType(item.type)}：</div>
+                          <div className={styles.setting_line_addItem_line_label}>跳转商品：</div>
                           <div className={styles.setting_line_addItem_line_brief}>
-                            <Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={() => handleOpenSelectModal(item)}>选择{showTextByType(item.type)}</Button>
+                            <Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={() => handleOpenSelectModal(item)}>选择商品</Button>
                           </div>
                         </div>
                       )
@@ -536,7 +531,7 @@ const Banner: React.FC<BannerPropsType> = (props) => {
       </ReactSortable>
       <Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={handleAddItem}>添加广告</Button>
       <ModalTable
-        modalTitle={`选择${showTextByType(currentInfo?.type || 1)}`}
+        modalTitle={`选择商品`}
         width={modalWidthMap[currentInfo?.type || 1]}
         confirm={handleModalOk}
         cancel={handleModalCancel}
@@ -579,4 +574,8 @@ const Banner: React.FC<BannerPropsType> = (props) => {
   )
 }
 
+Banner.defaultProps = {
+  type: "shop"
+}
+
 export default Banner

src/pages/editor/mobileSettingPanel/propsSettings/components/channelGoods/contant/column.tsx

@@ -21,14 +21,18 @@ export const promptCommodityColumn = [
     dataIndex: "name",
     width: 300,
     ellipsis: true,
+    // eslint-disable-next-line react/display-name
+    render: (name: any) => <div dangerouslySetInnerHTML={{ __html: name }}></div>
   },
   {
     title: "品类",
-    // render: (_, record) => record.customerCategory.name
+    ellipsis: true,
+    render: (_, record) => record.customerCategory ? record.customerCategory.name : ""
   },
   {
     title: "品牌",
-    // render: (_, record) => record.brand.name
+    ellipsis: true,
+    render: (_, record) => record.brand ? record.brand.name : ""
   },
   {
     title: "价格",

src/pages/editor/mobileSettingPanel/propsSettings/components/headBackground/contant/column.tsx

-import React from 'react'
-import { numFormat, priceFormat } from '@/utils/numberFomat'
-import ImageBox from '@/components/ImageBox'
-
-const showMainPic = (mainPic: string) => <ImageBox width={32} height={32} imgUrl={mainPic} />
-
-export const promptCommodityColumn = [
-  {
-    title: 'ID',
-    dataIndex: 'id',
-    key: 'id',
-    width: 80,
-  },
-  {
-    title: "商品图片",
-    dataIndex: "mainPic",
-    render: (mainPic: string) => showMainPic(mainPic)
-  },
-  {
-    title: "商品名称",
-    dataIndex: "name",
-    width: 300,
-    ellipsis: true,
-  },
-  {
-    title: "品类",
-    // render: (_, record) => record.customerCategory.name
-  },
-  {
-    title: "品牌",
-    // render: (_, record) => record.brand.name
-  },
-  {
-    title: "价格",
-    dataIndex: "min",
-    render: (_, record) => `¥${priceFormat(record.min)}`
-  },
-]
-
-
-
-export const integralCommodityColumn = [
-  {
-    title: "商品图片",
-    dataIndex: "mainPic",
-    render: (mainPic: string) => showMainPic(mainPic)
-  },
-  {
-    title: "商品名称",
-    dataIndex: "name",
-    width: 300,
-    ellipsis: true,
-  },
-  {
-    title: "需要积分",
-    dataIndex: "min",
-    render: (_, record) => `${numFormat(record.min)}`
-  },
-]
-
-
-
-export const shopColumn = [
-  {
-    title: "店铺图片",
-    dataIndex: "logo",
-    render: (logo: string) => showMainPic(logo)
-  },
-  {
-    title: "店铺名称",
-    dataIndex: "memberName",
-    width: 300,
-    ellipsis: true,
-  },
-]
-
-export const informationColumn = [
-  {
-    title: "资讯图片",
-    dataIndex: "imageUrl",
-    render: (imageUrl: string) => showMainPic(imageUrl)
-  },
-  {
-    title: "资讯标题",
-    dataIndex: "title",
-    width: 360,
-    ellipsis: true,
-  },
-]
-
-const tableColumn = {
-  1: promptCommodityColumn,
-  2: integralCommodityColumn,
-  3: shopColumn,
-  4: informationColumn
-}
-
-export default tableColumn

src/pages/editor/mobileSettingPanel/propsSettings/components/headBackground/contant/schema.ts

-import { ISchema } from '@formily/antd'
-import { FORM_FILTER_PATH } from '@/formSchema/const'
-import { PublicApi } from '@/services/api'
-
-export const formProduct: ISchema = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      'x-component': 'ModalSearch',
-      'x-component-props': {
-        placeholder: '搜索',
-        align: 'flex-left',
-      },
-    },
-    [FORM_FILTER_PATH]: {
-      type: 'object',
-      'x-component': 'flex-layout',
-      'x-component-props': {
-        rowStyle: {
-          flexWrap: 'nowrap',
-          style: {
-            marginRight: 0
-          }
-        },
-        colStyle: {
-          marginTop: 20,
-        },
-      },
-      properties: {
-        customerCategoryId: {
-          type: 'string',
-          "x-component": 'SearchSelect',
-          "x-component-props": {
-            placeholder: '请选择品类',
-            className: 'fixed-ant-selected-down', // 该类强制将显示的下拉框出现在select下, 只有这里出现问题, ??
-            fetchSearch: PublicApi.getProductSelectGetSelectCategory,
-            style: {
-              width: 160
-            }
-          }
-        },
-        brandId: {
-          type: 'string',
-          "x-component": 'SearchSelect',
-          "x-component-props": {
-            placeholder: '请选择品牌',
-            fetchSearch: PublicApi.getProductSelectGetSelectPlatformBrand,
-            style: {
-              width: 160
-            }
-          }
-        },
-        submit: {
-          "x-component": 'Submit',
-          "x-mega-props": {
-            span: 1
-          },
-          "x-component-props": {
-            children: '查询'
-          }
-        }
-      }
-    }
-  }
-}
-
-export const basicSchema: ISchema = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      'x-component': 'Search',
-      'x-component-props': {
-        placeholder: '搜索',
-        align: 'flex-left',
-      },
-    },
-  }
-}

src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/contant/column.tsx

@@ -21,6 +21,8 @@ export const promptCommodityColumn = [
     dataIndex: "name",
     width: 280,
     ellipsis: true,
+    // eslint-disable-next-line react/display-name
+    render: (name: any) => <div dangerouslySetInnerHTML={{ __html: name }}></div>
   },
   {
     title: "品类",

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

@@ -31,6 +31,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
           return <HeaderNav {...initProps} />
         case PROPS_TYPES.mobileBanner:
           return <Banner {...initProps} />
+        case "mobileChannelBanner":
+          return <Banner {...initProps} type="channel" />
         case PROPS_TYPES.mobileQuickNav:
           return <QuickNav {...initProps} />
         case PROPS_TYPES.mobileChannelGoodsCard:

src/pages/mobileTemplate/channelTemplateEdit/config.ts

@@ -86,8 +86,8 @@ export const divWrap = {
 export const mobileBanner = {
   key: "3",
   "3": {
-    "componentName": "MobileBanner",
-    "componentType": PROPS_TYPES.mobileBanner,
+    "componentName": "MobileChannelBanner",
+    "componentType": "mobileChannelBanner",
     "title": "轮播广告",
     "canEdit": true,
     "canHide": false,

src/pages/mobileTemplate/channelTemplateEdit/index.tsx

@@ -173,7 +173,6 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
   const getComponentsConfig = async () => {
     try {
       const appConfig = await getAppChannelConfig()
-      console.log(appConfig, "appConfig")
 
       //渠道信息
       const channelInfo = await fetchChannelInfo()
@@ -190,6 +189,7 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
       }
 
       if (appConfig?.advertBO) {
+        mobileBanner[mobileBanner.key].props.channelMemberId = channelInfo.memberId
         mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
       }
 

src/pages/mobileTemplate/channelTemplatePreview/index.tsx

@@ -171,7 +171,6 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
   const getComponentsConfig = async () => {
     try {
       const appConfig = await getAppChannelConfig()
-      console.log(appConfig, "appConfig")
 
       //渠道信息
       const channelInfo = await fetchChannelInfo()

src/pages/mobileTemplate/shopTemplateEdit/index.tsx

@@ -163,6 +163,7 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
       }
 
       if(appConfig?.advertBO) {
+        mobileBanner[mobileBanner.key].props.storeId = shopInfo.id
         mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
       }