Merge branch 'dev' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into dev

package.json

@@ -66,7 +66,7 @@
     "immutability-helper": "^3.1.1",
     "lingxi-design": "^1.0.8",
     "lingxi-design-ui": "^1.1.21",
-    "lingxi-editor-core": "^1.0.8",
+    "lingxi-editor-core": "^1.0.9",
     "lingxi-web": "^1.0.6",
     "lint-staged": "^10.0.7",
     "lodash": "^4.17.20",

src/pages/channel/channelInfo/index.tsx

@@ -37,6 +37,7 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
   const [workshopPics, setWorkshopPics] = useState([]) // 厂房照片
   const [honorPics, setHonorPics] = useState([]) // 资质荣誉
   const [logo, setLogo] = useState<string>("")
+  const [promotionPic, setPromotionPic] = useState<string>('')
   const [shopInfo, setShopInfo] = useState<GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse>()
   const [shopId, setShopId] = useState<number>()
 
@@ -76,6 +77,7 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
         setWorkshopPics(data.workshopPics || [])
         setHonorPics(data.honorPics || [])
         setStoreUrl("")
+        setPromotionPic(data.promotionPic || "")
         form.setFieldsValue({
           describe: data.describe,
           customerUrl: data.customerUrl,
@@ -220,6 +222,17 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
     })
   }
 
+  /**
+   * 添加推广页
+   *  @param url
+   */
+  const handleAddPromotionPic = (url: string) => {
+    setPromotionPic(url)
+    form.setFieldsValue({
+      promotionPic: url
+    })
+  }
+
   const handleMallSelectChange = (mallId: number) => {
     setShopId(mallId)
     if (!shopInfo) {
@@ -405,6 +418,31 @@ const ChannelInfo: React.FC<ShopInfoPropsType> = (props) => {
           </Form.Item>
           <Form.Item
             labelAlign="left"
+            name="promotionPic"
+            label={<RequireItem label="推广页" />}
+          >
+            <div className={styles.form_item_wrap}>
+              <div className={styles.img_list}>
+                {
+                  promotionPic && (
+                    <div className={cx(styles.upload_btn, styles.large, styles.upload)}>
+                      <div className={styles.delete_btn} onClick={() => setPromotionPic("")}><DeleteOutlined /></div>
+                      <img className={styles.upload_img} src={promotionPic} />
+                    </div>
+                  )
+                }
+                <UploadImage
+                  imgUrl={""}
+                  large={true}
+                  fileMaxSize={1024}
+                  size="106x107"
+                  onChange={(url) => handleAddPromotionPic(url)}
+                />
+              </div>
+            </div>
+          </Form.Item>
+          <Form.Item
+            labelAlign="left"
             name="customerUrl"
             label={<RequireItem label="客服链接" />}
             rules={[{ pattern: /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-.,@?^=%&:/~+#]*[\w\-@?^=%&/~+#])?/, message: '请输入正确的客服链接' }]}

src/pages/editor/components/MobileDesignPanel.tsx

@@ -7,17 +7,24 @@
  * @FilePath: /lingxi-business-paltform/src/pages/editor/components/MobileDesignPanel.tsx
  */
 import React from 'react'
-import { BrickDesign } from 'lingxi-design'
-import MobileUIDemo from './mobileUIDemo'
+import { BrickDesign, LingxiPreview } from 'lingxi-design'
+// import MobileUIDemo from './mobileUIDemo'
 import styles from './index.less'
 
-const MobileDesignPanel = (props) => {
-  const { theme } = props
+interface MobileDesignPanelPropsType {
+  theme: string,
+  isPreview?: boolean
+}
+
+const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
+  const { theme, isPreview } = props
 
   return (
     <div className={styles.mobileDesignContainer}>
       <div className={styles.mobileDesignWrap}>
-        <BrickDesign theme={theme} mobile />
+        {
+          isPreview ? <LingxiPreview theme={theme} /> : <BrickDesign theme={theme} mobile />
+        }
         {/* <MobileUIDemo /> */}
       </div>
       <div className={styles.appBottom}>
@@ -27,4 +34,8 @@ const MobileDesignPanel = (props) => {
   )
 }
 
+MobileDesignPanel.defaultProps = {
+  isPreview: false
+}
+
 export default MobileDesignPanel

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

@@ -91,6 +91,7 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
                 topDetailsBOList: componentConfigsItem.props.dataList || []
               }
               break
+            case "mobileChannelBanner":
             case PROPS_TYPES.mobileBanner:
               param.appChannelBO.advertBO = {
                 status: false,

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/customComponents/style/common.less

 @prefixCls: lingxi;
 @headerNavDefaultColor: #FFF;
-@headerNavScienceColor: #D32F2F;
+@headerNavScienceColor: #00B37A;

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]
-        params.idNotInList = [currentInfo.id]
-        getFn = PublicApi.postSearchMobileShopEnterpriseGetCommodityList
+        if (currentInfo.id) {
+          params.idNotInList = [currentInfo.id]
+        }
+        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]
-        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 (currentInfo.id) {
+          params.idNotInList = [currentInfo.id]
+        }
+        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/channelInformation/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} />

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/lxMall/commodityDetail/components/ProductDescription/components/Comment/index.tsx

@@ -70,7 +70,7 @@ const Comment: React.FC<CommentPropsType> = (props) => {
   }
 
   const fetchCommentSummary = () => {
-    PublicApi.getMemberCommentMallTradeSummary({ productIds: productIds.toString() }).then(res => {
+    PublicApi.getMemberCommentMallTradeSummary({ productIds: productIds.toString(), shopId: String(storeId) }).then(res => {
       if (res.code === 1000) {
         setSummaryInfo(res.data)
         getCommentCountBySummary(res.data.rows)

src/pages/lxMall/components/QuickNav/index.less

@@ -189,6 +189,11 @@
         &:hover {
           .quick_nav_list_item_text {
             color: var(--mall_main_color);
+
+            &.disabled {
+              color: #999;
+            }
+
           }
         }
 
@@ -207,8 +212,12 @@
           line-height: 12px;
           margin-top: 14px;
           color: #303133;
+
+          &.disabled {
+            color: #999;
+          }
         }
       }
     }
   }
-}
\ No newline at end of file
+}

src/pages/lxMall/components/QuickNav/index.tsx

@@ -70,6 +70,7 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
     {
       path: '/memberCenter/tranactionAbility/enquirySubmit/toAddSubmitList/add',
       title: '我要求购',
+      disabled: true,
       icon: require('@/assets/mallHomeIcon/buy_icon.png')
     },
     {
@@ -98,6 +99,7 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
     },
     {
       path: '/purchaseOnline',
+      disabled: true,
       title: '去求购',
       icon: require('@/assets/mallHomeIcon/tobuy_icon.png')
     },
@@ -230,20 +232,20 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
             tabType === 1 ? sell_quick_nav_list.map((item, index) => (
               <a href={goToLink(item.path)} className={cx(styles.quick_nav_list_item, styles.bb)} key={`sell_quick_nav_list_item-${index}`}>
                 <img className={styles.quick_nav_list_item_icon} src={item.icon} />
-                <span className={styles.quick_nav_list_item_text}>{item.title}</span>
+                <span className={cx(styles.quick_nav_list_item_text)}>{item.title}</span>
               </a>
             )) : buy_quick_nav_list.map((item, index) => (
-              <a href={goToLink(item.path)} className={cx(styles.quick_nav_list_item, styles.bb)} key={`buy_quick_nav_list_item-${index}`}>
+              <a href={item.disabled ? 'javascript:;' : goToLink(item.path)}  className={cx(styles.quick_nav_list_item, styles.bb)} key={`buy_quick_nav_list_item-${index}`}>
                 <img className={styles.quick_nav_list_item_icon} src={item.icon} />
-                <span className={styles.quick_nav_list_item_text}>{item.title}</span>
+                <span className={cx(styles.quick_nav_list_item_text, item.disabled ? styles.disabled : "")}>{item.title}</span>
               </a>
             ))
           }
           {
             quick_nav_list.map((item, index) => (
-              <a href={goToLink(item.path)} className={styles.quick_nav_list_item} key={`quick_nav_list_item-${index}`}>
+              <a href={item.disabled ? 'javascript:;' : goToLink(item.path)} className={styles.quick_nav_list_item} key={`quick_nav_list_item-${index}`}>
                 <img className={styles.quick_nav_list_item_icon} src={item.icon} />
-                <span className={styles.quick_nav_list_item_text}>{item.title}</span>
+                <span className={cx(styles.quick_nav_list_item_text, item.disabled ? styles.disabled : "")}>{item.title}</span>
               </a>
             ))
           }

src/pages/lxMall/index/index.tsx

@@ -155,7 +155,7 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
       {
         categoryComponents ? categoryComponents : loading ? <FloorSkeleton type={LAYOUT_TYPE.mall} /> : null
       }
-      <FindMore />
+      {/* <FindMore /> */}
       <Information {...props} />
     </div>
   )

src/pages/lxMall/order/index.tsx

@@ -122,6 +122,7 @@ const Order: React.FC<OrderPropsType> = (props) => {
           memberId: orderInfo.supplyMembersId,
           memberRoleId: orderInfo.supplyMembersRoleId,
         }
+        setSpinningState(true)
         const rulesRes = await PublicApi.getOrderTradingRulesByProductId(param)
         const { data } = rulesRes
         if (data) {
@@ -178,6 +179,11 @@ const Order: React.FC<OrderPropsType> = (props) => {
   const initOrderInfo = async () => {
     const result = []
     const sessionOrderInfo: any = await getOrderInfo(spam_id)
+
+    if (!sessionOrderInfo) {
+      message.error("订单不存在")
+      history.goBack()
+    }
     for (const item of sessionOrderInfo.orderList) {
       const tempOrderList = []
       for (const orderItem of item.orderList) {

src/pages/lxMall/pointsMall/index.tsx

@@ -105,10 +105,10 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
     getFn(param, { headers }).then(res => {
       setLoading(false)
       if (res.code === 1000) {
-        message.destroy()
         setCommodityList(res.data.data)
         setTotalCount(res.data.totalCount)
       }
+      message.destroy()
     })
   }
 

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

@@ -120,53 +120,6 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
     })
   }
 
-
-  const changeData = (dataList) => {
-    if(dataList) {
-      return dataList.map((dataItem) => {
-        return {
-          categoryId: dataItem.id,
-          categoryName: dataItem.name,
-          categoryImage: dataItem.imageUrl || "",
-          productList: dataItem.commodityResponseList ? dataItem.commodityResponseList.map((commodityItem) => {
-            return {
-              id: commodityItem.id,
-              name: commodityItem.name,
-              sellPoints: commodityItem.sellingPoint,
-              min: commodityItem.min,
-              unitName: commodityItem.unitName,
-              sold: commodityItem.sold,
-              mainPic: commodityItem.mainPic,
-            }
-          }) : []
-        }
-      })
-    }
-    return []
-  }
-
-  /**
-   * 根据商品id，查询商品根据分类的列表
-   * @param idList
-   */
-  const fetchCategoryByCommodityId = (idList: number[]) => {
-    return new Promise((resolve) => {
-      const param = {
-        idList
-      }
-      PublicApi.postSearchMobileShopStoreGetCategoryByCommodityId(param).then((res) => {
-        message.destroy()
-        if (res.code === 1000) {
-          resolve(changeData(res.data))
-        } else {
-          resolve([])
-        }
-      }).catch(() => {
-        resolve([])
-      })
-    })
-  }
-
   /**
    * 获取品类树
    */
@@ -220,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()
@@ -236,7 +188,13 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
         }
       }
 
+      if (appConfig?.topBO) {
+        mobileChannelHeaderNav[mobileChannelHeaderNav.key].props.styleTheme = appConfig?.topBO.style
+        mobileChannelHeaderNav[mobileChannelHeaderNav.key].props.dataList = appConfig?.topBO.topDetailsBOList
+      }
+
       if (appConfig?.advertBO) {
+        mobileBanner[mobileBanner.key].props.channelMemberId = channelInfo.memberId
         mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
       }
 

src/pages/mobileTemplate/channelTemplatePreview/config.ts

+/*
+ * @Author: ghua
+ * @Date: 2021-02-22 17:02:20
+ * @LastEditTime: 2021-03-01 11:47:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /lingxi-business-paltform/src/pages/mobileTemplate/channelTemplateEdit/config.ts
+ */
+import { PROPS_TYPES } from 'lingxi-editor-core'
+import styleThemeImgDefault from './imgs/style_theme_default.png'
+import styleThemeImgScience from './imgs/style_theme_science.png'
+
+export const mallLayoutConfig = {
+  key: "0",
+  "0": {
+    "componentName": "MallLayout",
+    "props": {
+      "style": {
+        "width": "100%",
+        "minHeight": "100%",
+        "background": "#F7F8FA",
+        "overflowX": "hidden",
+        "paddingBottom": "50px",
+      }
+    },
+    "childNodes": ["1", "2", "4", "5", "6", "7"]
+  },
+}
+
+export const mobileChannelHeaderNav = {
+  key: "1",
+  "1": {
+    "componentName": "MobileChannelHeaderNav",
+    "componentType": PROPS_TYPES.mobileHeaderNav,
+    "title": "顶部导航栏",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      styleTheme: 1,
+      dataList: [
+        {
+          name: "进货单",
+          content: "",
+          status: true,
+        },
+        {
+          name: "我的",
+          content: "",
+          status: true,
+        },
+        {
+          name: "搜索框",
+          content: "请输入商品名称或者品类",
+          status: true,
+        }
+      ],
+      stylesThemeList: [
+        {
+          key: 0,
+          img: styleThemeImgDefault,
+        },
+        {
+          key: 1,
+          img: styleThemeImgScience,
+        }
+      ]
+    },
+  }
+}
+
+export const divWrap = {
+  key: "2",
+  "2": {
+    "componentName": "div",
+    "props": {
+      "style": {
+        position: "relative",
+        marginTop: -48,
+        zIndex: 6,
+      }
+    },
+    "childNodes": ["3"]
+  }
+}
+
+export const mobileBanner = {
+  key: "3",
+  "3": {
+    "componentName": "MobileBanner",
+    "componentType": PROPS_TYPES.mobileBanner,
+    "title": "轮播广告",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      dataList: []
+    }
+  }
+}
+
+export const mobileChannelCategory = {
+  key: "4",
+  "4": {
+    "componentName": "MobileChannelCategory",
+    "componentType": PROPS_TYPES.moibileChannelCategory,
+    "title": "商品品类",
+    "canEdit": false,
+    "canHide": false,
+    "props": {
+      dataList: []
+    }
+  }
+}
+
+export const mobileChannelGoodsCard = {
+  key: "5",
+  "5": {
+    "componentName": "MobileChannelGoodsCard",
+    "componentType": PROPS_TYPES.mobileChannelGoodsCard,
+    "title": "推荐商品",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      dataList: [
+        // {
+        //   style: 0,
+        //   title: "电气电工",
+        //   viceTitle: "ELECTRICAL",
+        // },
+        // {
+        //   style: 1,
+        //   title: "机械设备",
+        //   viceTitle: "EQUIPMENT",
+        // }
+      ]
+    }
+  }
+}
+
+export const mobileChannelInformation = {
+  key: "6",
+  "6": {
+    "componentName": "MobileChannelInformation",
+    "componentType": PROPS_TYPES.moibileChannelInformation,
+    "title": "行业资讯",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      title: "行业资讯",
+      dataList: []
+    }
+  }
+}
+
+export const mobileBottomNavigation = {
+  key: "7",
+  "7": {
+    "componentName": "MobileBottomNavigation",
+    "componentType": PROPS_TYPES.mobileBottomNavigation,
+    "title": "底部导航",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      /** 类型：1-首页 2-积分 3-工作台 4-资讯 5-进货单 6-我的 */
+      dataList: [
+        {
+          name: "首页",
+          icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f8d1c35d735e47c187d8c0b0e12830971612351028389.png",
+          type: 1,
+          status: false,
+        },
+        {
+          name: "积分",
+          icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/d4b7e96e136e4a2eade7e0d3e441eb611612351032370.png",
+          type: 2,
+          status: false,
+        },
+        {
+          name: "工作台",
+          icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f8492d51f9234c43bf631e9f2482a6751612351036609.png",
+          type: 3,
+          status: false,
+        },
+        {
+          name: "进货单",
+          icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/50433de84ee046b19882e21c920b3f6b1612351040608.png",
+          type: 5,
+          status: false,
+        },
+        {
+          name: "我的",
+          icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/aa76edefd91f4e82b4f8fa56e169cd3f1612351044724.png",
+          type: 6,
+          status: false,
+        }
+      ]
+    }
+  }
+}

src/pages/mobileTemplate/channelTemplatePreview/index.less

+@content-height: calc(100vh - 120px);
+
+.wrapper {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
+  transition: all .3s;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #F2F3F5;
+  height: calc(100vh - 64px);
+}
+
+.app-wrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.app-canvas-container {
+  display: flex;
+  width: 381px;
+  margin-top: 40px;
+  margin-bottom: 52px;
+  justify-content: center;
+  background-color: #F4F5F7;
+  // height: calc(@content-height + 50px);
+  overflow: hidden;
+
+}
+
+.loading_wrap {
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+
+  .loading_text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}

src/pages/mobileTemplate/channelTemplatePreview/index.tsx

+/*
+ * @Author: ghua
+ * @Date: 2021-02-22 17:02:20
+ * @LastEditTime: 2021-03-01 11:37:34
+ * @LastEditors: Please set LastEditors
+ * @Description: app渠道商城装修预览
+ * @FilePath: /lingxi-business-paltform/src/pages/mobileTemplate/channelTemplateEdit/index.tsx
+ */
+import React, { useEffect, useState } from 'react'
+import { LegoProvider } from 'lingxi-editor-core'
+import ToolBar from '../../editor/components/toolBar'
+import MobileDesignPanel from '../../editor/components/MobileDesignPanel'
+import AllComponents from '../../editor/components/ComponentsPreview'
+import { message } from 'antd'
+import config from '../../editor/configs'
+import {
+  mallLayoutConfig,
+  divWrap,
+  mobileChannelHeaderNav,
+  mobileBanner,
+  mobileChannelCategory,
+  mobileChannelGoodsCard,
+  mobileChannelInformation,
+  mobileBottomNavigation,
+} from './config'
+import Loading from '../../editor/components/Loading'
+import { PublicApi } from '@/services/api'
+import {  LAYOUT_TYPE } from '@/constants'
+import { GetTemplateAdornAppChannelFindResponse, GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse } from '@/services/TemplateApi'
+import { getAuth } from '@/utils/auth'
+import styles from './index.less'
+
+interface ShopPreviewPropsType {
+  location: {
+    query: {
+      /**
+       * 模板id
+       */
+      id: number;
+      /**
+       * 模板名称
+       */
+      template: string;
+    }
+  }
+}
+
+const TemplateList = ['science']
+
+const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
+  const { query: { id, template } } = props.location
+  const [loading, setLoading] = useState<boolean>(true)
+  const [theme, setTheme] = useState<string>('theme-mall-science')
+  const [componentConfigs, setComponentConfigs] = useState({})
+  const { memberId, memberRoleId } = getAuth() || {}
+
+  useEffect(() => {
+    if (!TemplateList.includes(template)) {
+      setTheme(`theme-mall-${TemplateList[0]}`)
+    } else {
+      setTheme(`theme-mall-${template}`)
+    }
+    getComponentsConfig()
+  }, [])
+
+  /**
+   * 获取渠道信息
+   */
+  const fetchChannelInfo = (): Promise<GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse> => {
+    return new Promise((resolve) => {
+      PublicApi.getTemplateWebMemberChannelWebFindCurrMemberChannel().then(res => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
+      })
+    })
+  }
+
+  /**
+   * 获取app店铺装修信息
+   */
+  const getAppChannelConfig = (): Promise<GetTemplateAdornAppChannelFindResponse | null> => {
+    return new Promise((resolve, reject) => {
+      const param: any = {
+        templateId: id
+      }
+      PublicApi.getTemplateAdornAppChannelFind(param).then(res => {
+        if(res.code === 1000) {
+          resolve(res.data)
+        } else {
+          reject(res)
+        }
+      }).catch((eror) => {
+        reject(eror)
+      })
+    })
+  }
+
+  /**
+   * 根据选中的类型和id获取信息
+   * @param data
+   */
+  const getSelectInfo = (data, channelMemberId): Promise<any[] | undefined> => {
+    return new Promise((resolve) => {
+      const param: any = {
+        current: 1,
+        pageSize: 100,
+        idInList: data.productIdList,
+        priceTypeList: [1],
+        channelMemberId,
+      }
+      PublicApi.postSearchMobileShopChannelGetCommodityList(param).then(res => {
+        message.destroy()
+        resolve(res.data.data)
+      }).catch(() => {
+        resolve(undefined)
+      })
+    })
+  }
+
+  /**
+   * 获取品类树
+   */
+  const getCustomerCategoryTreeById = (channelMemberId: number) => {
+    return new Promise((resolve) => {
+      const param: any = {
+        channelMemberId,
+      }
+
+      PublicApi.getSearchMobileShopChannelGetCustomerCategoryTree(param).then((res) => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        } else {
+          resolve([])
+        }
+      }).catch(() => {
+        resolve([])
+      })
+    })
+
+  }
+
+  const getProductInfo = async (dataList, channelMemberId) => {
+    const newDataList: any[] = []
+    for(let index = 0; index < dataList.length; index += 1) {
+      const item = dataList[index]
+      if (item.productIdList && item.productIdList.length > 0) {
+        item.productList = await getSelectInfo(item, channelMemberId)
+      }
+      newDataList.push(item)
+    }
+    return newDataList
+  }
+
+  const getInformationInfo = async (ids: number[]) => {
+    if (ids && ids.length > 0) {
+      const params: any = {
+        current: 1,
+        pageSize: 100,
+        idList: ids,
+      }
+
+      const res = await PublicApi.getManageContentInformationPageByIdIn(params, {ctlType: 'none'})
+      if(res.code === 1000) {
+        return res.data.data
+      }
+    }
+    return []
+  }
+
+  const getComponentsConfig = async () => {
+    try {
+      const appConfig = await getAppChannelConfig()
+
+      //渠道信息
+      const channelInfo = await fetchChannelInfo()
+      mobileChannelHeaderNav[mobileChannelHeaderNav.key].props.name = channelInfo.memberName
+
+      if (channelInfo.memberId) {
+        const categoryList = await getCustomerCategoryTreeById(channelInfo.memberId)
+        mobileChannelCategory[mobileChannelCategory.key].props.dataList = categoryList
+
+        mobileChannelGoodsCard[mobileChannelGoodsCard.key].props.channelMemberId = channelInfo.memberId
+        if (appConfig?.productBO) {
+          mobileChannelGoodsCard[mobileChannelGoodsCard.key].props.dataList = await getProductInfo(appConfig?.productBO.productDetailsBOList, channelInfo.memberId)
+        }
+      }
+
+      if (appConfig?.advertBO) {
+        mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
+      }
+
+      if (appConfig?.informationBO) {
+        mobileChannelInformation[mobileChannelInformation.key].props.title = appConfig?.informationBO.title
+        mobileChannelInformation[mobileChannelInformation.key].props.informationIdList = appConfig?.informationBO.informationIdList || []
+        mobileChannelInformation[mobileChannelInformation.key].props.dataList = await getInformationInfo(appConfig?.informationBO.informationIdList)
+      }
+
+      if (appConfig?.bottomBO) {
+        mobileBottomNavigation[mobileBottomNavigation.key].props.dataList = appConfig?.bottomBO.bottomDetailsBOList
+      }
+
+      const config = {
+        ...mallLayoutConfig,
+        ...mobileChannelHeaderNav,
+        ...divWrap,
+        ...mobileBanner,
+        ...mobileChannelCategory,
+        ...mobileChannelGoodsCard,
+        ...mobileChannelInformation,
+        ...mobileBottomNavigation,
+      }
+      setComponentConfigs(config)
+      setLoading(false)
+    } catch (error) {
+      console.log(error)
+    }
+
+  }
+
+  return !loading ? (
+    <LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
+      <div className={styles['wrapper']}>
+        <ToolBar type={2} title="渠道商城-首页" layoutType={LAYOUT_TYPE.channel} templateId={id} />
+        <div className={styles['content']}>
+          <AllComponents />
+          <div className={styles['app-wrapper']}>
+            <div className={styles['app-canvas-container']}>
+              <MobileDesignPanel theme={theme} isPreview />
+            </div>
+          </div>
+        </div>
+      </div>
+    </LegoProvider>
+  ) : <Loading />
+}
+
+export default mobileShopTempleteEdit
+

src/pages/mobileTemplate/shopTemplateEdit/config.ts

@@ -25,15 +25,7 @@ export const mobileShopHeaderNav = {
     "title": "背景图编辑",
     "canEdit": true,
     "canHide": false,
-    "props": {
-      "shopInfo": {
-        memberName: "温州市龙昌皮业有限公司",
-        logo: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f60693caed3f47868e5897bd1ccf40ea1610331248766.png",
-        creditPoint: 998,
-        registerYears: 2,
-        avgTradeCommentStar: 3,
-      }
-    },
+    "props": {},
   }
 }
 
@@ -133,78 +125,7 @@ export const mobileShopCommodityList = {
     "title": "商品推荐",
     "canEdit": true,
     "canHide": false,
-    "props": {
-      "dataList": [
-        {
-          categoryId: 1,
-          categoryName: "灯光照明",
-          categoryImage: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png",
-          productList: [
-            {
-              id: 11,
-              name: '三级抗震螺纹钢 HRB400E 25*12三钢',
-              sellPoints: ["硬度适中偏软", "手感舒适"],
-              min: 79,
-              unitName: "吨",
-              sold: 3133,
-              mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
-            },
-            {
-              id: 12,
-              name: '三级抗震螺纹钢 HRB400E 25*12三钢',
-              sellPoints: ["硬度适中偏软", "手感舒适"],
-              min: 79,
-              unitName: "吨",
-              sold: 3133,
-              mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
-            },
-            {
-              id: 13,
-              name: '三级抗震螺纹钢 HRB400E 25*12三钢',
-              sellPoints: ["硬度适中偏软", "手感舒适"],
-              min: 79,
-              unitName: "吨",
-              sold: 3133,
-              mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
-            },
-            {
-              id: 14,
-              name: '三级抗震螺纹钢 HRB400E 25*12三钢',
-              sellPoints: ["硬度适中偏软", "手感舒适"],
-              min: 79,
-              unitName: "吨",
-              sold: 3133,
-              mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
-            }
-          ]
-        },
-        {
-          categoryId: 2,
-          categoryName: "灯光照明",
-          categoryImage: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png",
-          productList: [
-            {
-              id: 21,
-              name: '四级抗震螺纹钢 HRB400E 25*12三钢',
-              sellPoints: ["硬度适中偏软"],
-              min: 79,
-              unitName: "吨",
-              sold: 3133,
-              mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
-            },
-            {
-              id: 22,
-              name: '三级抗震螺纹钢 HRB400E 25*12三钢',
-              sellPoints: ["硬度适中偏软", "手感舒适"],
-              min: 79,
-              unitName: "吨",
-              sold: 3133,
-              mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
-            }
-          ]
-        }
-      ]
-    }
+    "props": {}
   }
 
 }

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
       }
 

src/pages/mobileTemplate/shopTemplatePreview/config.ts

+import { PROPS_TYPES } from 'lingxi-editor-core'
+
+export const mallLayoutConfig = {
+  key: "0",
+  "0": {
+    "componentName": "MallLayout",
+    "props": {
+      "style": {
+        "width": "100%",
+        "minHeight": "100%",
+        "background": "#F7F8FA",
+        "overflowX": "hidden",
+        "paddingBottom": "50px",
+      }
+    },
+    "childNodes": ["1", "2", "5"]
+  },
+}
+
+export const mobileShopHeaderNav = {
+  key: "1",
+  "1": {
+    "componentName": "MobileShopHeaderNav",
+     "componentType": PROPS_TYPES.mobileShopHeaderNav,
+    "title": "背景图编辑",
+    "canEdit": true,
+    "canHide": false,
+    "props": {},
+  }
+}
+
+export const divWrap = {
+  key: "2",
+  "2": {
+    "componentName": "div",
+    "props": {
+      "style": {
+        position: "relative",
+        marginTop: -24,
+        backgroundColor: "#FFF",
+        borderTopLeftRadius: '16px',
+        borderTopRightRadius: '16px',
+        zIndex: 6,
+        padding: '2px 4px',
+      }
+    },
+    "childNodes": ["3", "4"]
+  }
+}
+
+export const mobileBanner = {
+  key: "3",
+  "3": {
+    "componentName": "MobileBanner",
+    "componentType": PROPS_TYPES.mobileBanner,
+    "title": "轮播广告",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      dataList: []
+    }
+  }
+}
+
+export const mobileQuickNav = {
+  key: "4",
+  "4": {
+    "componentName": "MobileQuickNav",
+    "componentType": PROPS_TYPES.mobileQuickNav,
+    "title": "导航模块",
+    "canEdit": true,
+    "canHide": false,
+    "props": {
+      dataList: [
+        {
+          "id":1,
+          "expand":false,
+          "icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/c5d66f1488cc47d0a73279ce1ef11c991610677462848.png",
+          "type":1,
+          "name":"商城",
+          "url":""
+        },
+        {
+          "id":2,
+          "expand":false,
+          "icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/9f105bdebcfb4010b5827f7b64fb53281610696444606.png",
+          "type":2,
+          "name":"分类",
+          "url":""
+        },
+        {
+          "id":3,
+          "expand":false,
+          "icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/d4383c684c6e4707b405f46f281796d71610696469970.png",
+          "type":3,
+          "name":"积分兑换",
+          "url":""
+        },
+        {
+          "id":4,
+          "expand":false,
+          "icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/d4383c684c6e4707b405f46f281796d71610696469970.png",
+          "type":4,
+          "name":"公司介绍",
+          "url":""
+        },
+        {
+          "id":5,
+          "expand":false,
+          "icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/441a66ebeb3b45e6a64ecfa9977f411c1610696489991.png",
+          "type":5,
+          "name":"成为会员",
+          "url":""
+        },
+      ]
+    }
+  }
+}
+
+export const mobileShopCommodityList = {
+  key: "5",
+  "5": {
+    "componentName": "MobileShopCommodityList",
+    "componentType": PROPS_TYPES.mobileShopCommodity,
+    "title": "商品推荐",
+    "canEdit": true,
+    "canHide": false,
+    "props": {}
+  }
+
+}

src/pages/mobileTemplate/shopTemplatePreview/index.less

+@content-height: calc(100vh - 120px);
+
+.wrapper {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
+  transition: all .3s;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #F2F3F5;
+  height: calc(100vh - 64px);
+}
+
+.app-wrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.app-canvas-container {
+  display: flex;
+  width: 381px;
+  margin-top: 40px;
+  margin-bottom: 52px;
+  justify-content: center;
+  background-color: #F4F5F7;
+  // height: calc(@content-height + 50px);
+  overflow: hidden;
+
+}
+
+.loading_wrap {
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+
+  .loading_text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}

src/pages/mobileTemplate/shopTemplatePreview/index.tsx

+/*
+* @Author: ghua
+* @Date: 2021-01-14 17:03:08
+* @Last Modified by: ghua
+* @Last Modified time: 2021-01-15 17:47:38
+* @Description app店铺主页装修预览
+*/
+import React, { useEffect, useState } from 'react'
+import { LegoProvider } from 'lingxi-editor-core'
+import ToolBar from '../../editor/components/toolBar'
+import MobileDesignPanel from '../../editor/components/MobileDesignPanel'
+import AllComponents from '../../editor/components/ComponentsPreview'
+import { message } from 'antd'
+import config from '../../editor/configs'
+import {
+  mallLayoutConfig,
+  divWrap,
+  mobileShopHeaderNav,
+  mobileBanner,
+  mobileQuickNav,
+  mobileShopCommodityList,
+} from './config'
+import Loading from '../../editor/components/Loading'
+import { PublicApi } from '@/services/api'
+import {  LAYOUT_TYPE } from '@/constants'
+import { GetTemplateAdornAppStoreFindResponse, GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse } from '@/services/TemplateApi'
+import { getAuth } from '@/utils/auth'
+import styles from './index.less'
+
+interface ShopPreviewPropsType {
+  location: {
+    query: {
+      /**
+       * 模板id
+       */
+      id: number;
+      /**
+       * 模板名称
+       */
+      template: string;
+    }
+  }
+}
+
+const TemplateList = ['science']
+
+const  mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
+  const { query: { id, template } } = props.location
+  const [loading, setLoading] = useState<boolean>(true)
+  const [theme, setTheme] = useState<string>('theme-mall-science')
+  const [componentConfigs, setComponentConfigs] = useState({})
+  const { memberId, memberRoleId } = getAuth() || {}
+
+  useEffect(() => {
+    if (!TemplateList.includes(template)) {
+      setTheme(`theme-mall-${TemplateList[0]}`)
+    } else {
+      setTheme(`theme-mall-${template}`)
+    }
+    getComponentsConfig()
+  }, [])
+
+  /**
+   * 获取店铺信息
+   */
+  const fetchShopInfo = (): Promise<GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse> => {
+    return new Promise((resolve) => {
+      const param: any = {
+        memberId,
+        roleId: memberRoleId
+      }
+      PublicApi.getTemplateWebMemberShopWebFindByMemberIdAndRoleId(param).then(res => {
+        if (res.code === 1000) {
+          resolve(res.data)
+        }
+      })
+    })
+  }
+
+  /**
+   * 获取app店铺装修信息
+   */
+  const getAppShopConfig = (): Promise<GetTemplateAdornAppStoreFindResponse | null> => {
+    return new Promise((resolve, reject) => {
+      const param: any = {
+        templateId: id
+      }
+      PublicApi.getTemplateAdornAppStoreFind(param).then(res => {
+        if(res.code === 1000) {
+          resolve(res.data)
+        } else {
+          reject(res)
+        }
+      }).catch((eror) => {
+        reject(eror)
+      })
+    })
+  }
+
+  const changeData = (dataList) => {
+    if(dataList) {
+      return dataList.map((dataItem) => {
+        return {
+          categoryId: dataItem.id,
+          categoryName: dataItem.name,
+          categoryImage: dataItem.imageUrl || "",
+          productList: dataItem.commodityResponseList ? dataItem.commodityResponseList.map((commodityItem) => {
+            return {
+              id: commodityItem.id,
+              name: commodityItem.name,
+              sellPoints: commodityItem.sellingPoint,
+              min: commodityItem.min,
+              unitName: commodityItem.unitName,
+              sold: commodityItem.sold,
+              mainPic: commodityItem.mainPic,
+            }
+          }) : []
+        }
+      })
+    }
+    return []
+  }
+
+  /**
+   * 根据商品id，查询商品根据分类的列表
+   * @param idList
+   */
+  const fetchCategoryByCommodityId = (idList: number[]) => {
+
+    return new Promise((resolve) => {
+      if(!idList) {
+        resolve([])
+        return
+      }
+      const param = {
+        idList
+      }
+      PublicApi.postSearchMobileShopStoreGetCategoryByCommodityId(param).then((res) => {
+        message.destroy()
+        if (res.code === 1000) {
+          resolve(changeData(res.data))
+        } else {
+          resolve([])
+        }
+      }).catch(() => {
+        resolve([])
+      })
+    })
+  }
+
+  const getComponentsConfig = async () => {
+    try {
+      const appConfig = await getAppShopConfig()
+
+      //店铺信息
+      const shopInfo = await fetchShopInfo()
+      mobileShopHeaderNav[mobileShopHeaderNav.key].props.shopInfo = shopInfo
+
+      if(appConfig?.backdropBO) {
+        mobileShopHeaderNav[mobileShopHeaderNav.key].props.backdrop = appConfig?.backdropBO.backdrop
+      }
+
+      if(appConfig?.advertBO) {
+        mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
+      }
+
+      if(appConfig?.functionBO) {
+        mobileQuickNav[mobileQuickNav.key].props.dataList = appConfig?.functionBO.functionDetailsBO
+      }
+
+      if(appConfig?.productBO) {
+        const dataList = await fetchCategoryByCommodityId(appConfig.productBO.productIdList)
+        mobileShopCommodityList[mobileShopCommodityList.key].props = {
+          storeId: shopInfo.id,
+          title: appConfig.productBO.title,
+          productIdList: appConfig.productBO.productIdList || [],
+          dataList,
+        }
+      } else {
+        mobileShopCommodityList[mobileShopCommodityList.key].props.storeId = shopInfo.id
+        mobileShopCommodityList[mobileShopCommodityList.key].props.title = '热销商品'
+      }
+
+      const config = {
+        ...mallLayoutConfig,
+        ...mobileShopHeaderNav,
+        ...divWrap,
+        ...mobileBanner,
+        ...mobileQuickNav,
+        ...mobileShopCommodityList,
+      }
+      setComponentConfigs(config)
+      setLoading(false)
+    } catch (error) {
+      console.log(error)
+    }
+
+  }
+
+  return !loading ? (
+    <LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
+      <div className={styles['wrapper']}>
+        <ToolBar type={2} title="店铺主页" layoutType={LAYOUT_TYPE.shop} templateId={id} />
+        <div className={styles['content']}>
+          <AllComponents />
+          <div className={styles['app-wrapper']}>
+            <div className={styles['app-canvas-container']}>
+              <MobileDesignPanel theme={theme} isPreview />
+            </div>
+          </div>
+        </div>
+      </div>
+    </LegoProvider>
+  ) : <Loading />
+}
+
+export default mobileShopTempletePreview
+