feat: app店铺模板装修

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

@@ -16,7 +16,7 @@ interface ToolBarPropsType {
 }
 
 const ToolBar: React.FC<ToolBarPropsType> = (props) => {
-  const { type = 1, title = "首页", showActions, templateId } = props
+  const { type = 1, title = "首页", showActions, templateId, layoutType } = props
   const [saveLoading, setSaveLoading] = useState<boolean>(false)
   const { componentConfigs } = useSelector<ComponentConfigsType, STATE_PROPS>(['componentConfigs'])
 
@@ -39,54 +39,36 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
   const handleSave = useCallback(() => {
     const param: any = {
       templateId: Number(templateId),
-      appEnterpriseBO: {},
     }
+    if(layoutType === LAYOUT_TYPE.shop) {
+      param.appStoreBO = {}
       Object.keys(componentConfigs).forEach(key => {
         const componentConfigsItem = componentConfigs[key]
         if(componentConfigsItem.componentType) {
           switch(componentConfigsItem.componentType) {
-          case PROPS_TYPES.mobileHeaderNav:
-            param.appEnterpriseBO.topBO = {
-              style: componentConfigsItem.props.styleTheme || 0,
-              status: true,
-              topDetailsBOList: componentConfigsItem.props.dataList || []
+            case PROPS_TYPES.mobileShopHeaderNav:
+              param.appStoreBO.backdropBO = {
+                status: false,
+                backdrop: componentConfigsItem.props.backdrop || ''
               }
               break
             case PROPS_TYPES.mobileBanner:
-            param.appEnterpriseBO.advertBO = {
-              status: componentConfigsItem.props.visible || true,
+              param.appStoreBO.advertBO = {
+                status: false,
                 advertDetailsBOList: componentConfigsItem.props.dataList || []
               }
               break
             case PROPS_TYPES.mobileQuickNav:
-            param.appEnterpriseBO.functionBO = {
-              status: componentConfigsItem.props.visible || true,
+              param.appStoreBO.functionBO = {
+                status: false,
                 functionDetailsBO: componentConfigsItem.props.dataList || []
               }
               break
-          case PROPS_TYPES.mobileShowCase:
-            param.appEnterpriseBO.showcaseBO = {
-              style: componentConfigsItem.props.styleTheme || 0,
-              status: componentConfigsItem.props.visible || true,
-              showcaseDetailsBO: componentConfigsItem.props.dataList || []
-            }
-            break
-          case PROPS_TYPES.mobileRecommentShops:
-            param.appEnterpriseBO.storeBO = {
-              status: componentConfigsItem.props.visible || true,
-              storeIdList: componentConfigsItem.props.dataList ? componentConfigsItem.props.dataList.map(item => item.selectId) : []
-            }
-            break
-          case PROPS_TYPES.mobileQuality:
-            param.appEnterpriseBO.excellentBO = {
-              status: componentConfigsItem.props.visible || true,
-              excellentDetailsBO: componentConfigsItem.props.dataList || []
-            }
-            break
-          case PROPS_TYPES.mobileBottomNavigation:
-            param.appEnterpriseBO.bottomBO = {
-              status: true,
-              bottomDetailsBOList: componentConfigsItem.props.dataList || []
+            case PROPS_TYPES.mobileShopCommodity:
+              param.appStoreBO.productBO = {
+                status: false,
+                title: componentConfigsItem.props.title,
+                productIdList: componentConfigsItem.props.productIdList,
               }
               break
             default:
@@ -94,18 +76,30 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
           }
         }
       })
+
+    } else if(layoutType=== LAYOUT_TYPE.channel) {
+      param.appChannelBO = {}
+    }
     console.log(JSON.stringify(param), "param")
     saveAppEnterprise(param)
   }, [componentConfigs])
 
   const saveAppEnterprise = (param) => {
-    PublicApi.postTemplateAdornAppEnterpriseSave(param).then(res => {
+    let postFn
+    if(layoutType=== LAYOUT_TYPE.shop) {
+      postFn = PublicApi.postTemplateAdornAppStoreSave
+    } else if(layoutType=== LAYOUT_TYPE.channel) {
+      postFn = PublicApi.postTemplateAdornAppChannelSave
+    }
+    if(postFn) {
+      postFn(param).then(res => {
         if(res.code === 1000) {
           message.destroy()
           message.success("保存成功")
         }
       })
     }
+  }
 
   return (
     <div className={styles.toolbar}>

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

@@ -51,14 +51,6 @@ const RedirectTypeList = [
     label: '积分详情',
   },
   {
-    value: 3,
-    label: '店铺主页',
-  },
-  {
-    value: 4,
-    label: '资讯详情',
-  },
-  {
     value: 5,
     label: '不跳转',
   },

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

@@ -29,50 +29,27 @@ interface QuickNavPropsType {
   visible: boolean,
 }
 
+// 跳转类型：1-商品 2-分类 3-积分兑换 4-公司介绍 5-成为会员 12-外部链接(可多个)
 const RedirectTypeList = [
   {
     value: 1,
-    label: '找现货',
+    label: '商品',
   },
   {
     value: 2,
-    label: '找供应',
+    label: '分类',
   },
   {
     value: 3,
-    label: '发布求购',
+    label: '积分兑换',
   },
   {
     value: 4,
-    label: '求购列表',
+    label: '公司介绍',
   },
   {
     value: 5,
-    label: '换积分',
-  },
-  {
-    value: 6,
-    label: '找店铺',
-  },
-  {
-    value: 7,
-    label: '看资讯',
-  },
-  {
-    value: 8,
-    label: '授信申请',
-  },
-  {
-    value: 9,
-    label: '人气店铺',
-  },
-  {
-    value: 10,
-    label: '求购动态',
-  },
-  {
-    value: 11,
-    label: '最新成交',
+    label: '成为会员',
   },
   {
     value: 12,
@@ -234,6 +211,26 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
   }
 
   /**
+  * 修改广告链接
+  * @param value
+  * @param id
+  */
+  const handleUrlChange = (value: string, id: number) => {
+    console.log(value, "value")
+    const newList = [...list]
+    newList.map(item => {
+      if (item.id === id) {
+        item.url = `https://${value}`
+      }
+    })
+
+    setList(newList)
+    changeProps({
+      props:Object.assign({ ...props }, { dataList: newList })
+    })
+  }
+
+  /**
    * 添加广告
    */
   const handleAddItem = () => {
@@ -253,6 +250,14 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
     })
   }
 
+
+  const judgedItemNotInList = (item, type: number) => {
+    if(item.value === type) {
+      return true
+    }
+    return list.every(listItem => listItem.type !== item.value)
+  }
+
   return (
     <div className={styles.setting}>
       {/* <div className={styles.hideModule}>
@@ -308,11 +313,21 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
                       <div className={styles.setting_line_addItem_line_brief}>
                         <Select style={{ width: '100%' }} value={item.type || undefined} onChange={(value) => handleTypeChange(value, item.id)}>
                           {
-                            RedirectTypeList.map(item => (<Select.Option value={item.value} key={`redirect_type_${item.value}`}>{item.label}</Select.Option>))
+                            RedirectTypeList.map(selectItem => judgedItemNotInList(selectItem, item.type) && (<Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>))
                           }
                         </Select>
                       </div>
                     </div>
+                    {
+                      item.type === 12 && (
+                         <div className={styles.setting_line_addItem_line}>
+                          <div className={styles.setting_line_addItem_line_label}>链接地址：</div>
+                          <div className={styles.setting_line_addItem_line_brief}>
+                            <Input addonBefore="https://" value={item.url} onChange={(e) => handleUrlChange(e.target.value, item.id)} />
+                          </div>
+                        </div>
+                      )
+                    }
                     <div className={styles.setting_line_addItem_line}>
                       <div className={styles.setting_line_addItem_line_label}>图标：</div>
                       <div className={styles.setting_line_addItem_line_brief}>
@@ -340,7 +355,9 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
           </div>
         ))}
       </ReactSortable>
-      <Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={handleAddItem}>添加功能模块</Button>
+      {
+        list.length <=5 && <Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={handleAddItem}>添加功能模块</Button>
+      }
     </div>
   )
 }

src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/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: 280,
+    ellipsis: true,
+  },
+  {
+    title: "品类",
+    render: (_, record) => record.customerCategory ? record.customerCategory.name : "",
+    ellipsis: true,
+  },
+  {
+    title: "品牌",
+    render: (_, record) => record.brand ? record.brand.name : "",
+    ellipsis: true,
+  },
+  {
+    title: "价格",
+    dataIndex: "min",
+    render: (_, record) => `¥${priceFormat(record.min)}`
+  },
+]
+
+export default promptCommodityColumn

src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/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下, 只有这里出现问题, ??
+            queryParams: {
+              storeId: 2,
+            },
+            fetchSearch: PublicApi.getProductSelectGetSelectCategory,
+            style: {
+              width: 160
+            }
+          }
+        },
+        brandId: {
+          type: 'string',
+          "x-component": 'SearchSelect',
+          "x-component-props": {
+            placeholder: '请选择品牌',
+            queryParams: {
+              storeId: 2,
+            },
+            fetchSearch: PublicApi.getSearchMobileShopStoreGetBrand,
+            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/index.less

+@import "../../../../../../global//styles/utils.less";
+@import "../../common.less";
+
+.selectBtn {
+  display: block;
+  width: 100%;
+  background-color: #FAFBFC;
+  border: 1px dashed #D8DDE6;
+}
+
+.uploadPreview {
+  border: 1px solid #EBECF0;
+}

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

@@ -3,6 +3,8 @@ import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES } from 'lingxi-edito
 import HeaderNav from './components/headerNav'
 import Banner from './components/banner'
 import QuickNav from './components/quickNav'
+import HeadBackground from './components/headBackground'
+import RecommendCommodity from './components/recommendCommodity'
 import BottomNavigation from './components/bottomNavigation'
 import styles from './index.less'
 
@@ -19,6 +21,10 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
 
     if (componentType) {
       switch (componentType.type) {
+        case PROPS_TYPES.mobileShopHeaderNav:
+          return <HeadBackground {...initProps} />
+        case PROPS_TYPES.mobileShopCommodity:
+          return <RecommendCommodity {...initProps} />
         case PROPS_TYPES.mobileHeaderNav:
           return <HeaderNav  {...initProps} />
         case PROPS_TYPES.mobileBanner:

src/pages/editor/settingsPanel/propsSettings/components/GoodsSetting/index.tsx

@@ -5,7 +5,6 @@ import SettingList from '../../../../components/SettingList'
 import GoodsItem from './GoodsItem'
 import SettingPanel from '../../../../components/SettingPanel'
 import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
-import { GetTemplatePlatformFindGoodsListResponseDetail } from '@/services/TemplateApi'
 import { PublicApi } from '@/services/api'
 import { filterProps } from '../../../../utils'
 import styles from './index.less'
@@ -37,7 +36,7 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
   const { templateid, categoryid, goodsList = [], templateType } = props
   const [current, setCurrent] = useState<number>(1)
   const [pageSize, setPageSize] = useState<number>(10)
-  const [noSelectGoods, setNoSelectGoods] = useState<GetTemplatePlatformFindGoodsListResponseDetail[]>([])
+  const [noSelectGoods, setNoSelectGoods] = useState<any[]>([])
   const [selectList, setSelectList] = useState<any>([])
   const [selectGoodsList, setSelectGoodsList] = useState<any>(goodsList)
   const [goodsIds, setGoodsIds] = useState<any>([])
@@ -240,7 +239,7 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
 
       postFn(param).then(res => {
         if (res.code === 1000) {
-          resolve()
+          resolve(true)
         } else {
           reject()
         }

src/pages/mobileTemplate/shopTemplateEdit/config.ts

@@ -21,6 +21,7 @@ export const mobileShopHeaderNav = {
   key: "1",
   "1": {
     "componentName": "MobileShopHeaderNav",
+     "componentType": PROPS_TYPES.mobileShopHeaderNav,
     "title": "背景图编辑",
     "canEdit": true,
     "canHide": false,

src/pages/mobileTemplate/shopTemplateEdit/index.tsx

@@ -25,7 +25,7 @@ import {
 import Loading from '../../editor/components/Loading'
 import { PublicApi } from '@/services/api'
 import {  LAYOUT_TYPE } from '@/constants'
-import { GetTemplateAdornAppStoreFindResponse } from '@/services/TemplateApi'
+import { GetTemplateAdornAppStoreFindResponse, GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse } from '@/services/TemplateApi'
 // import { GlobalConfig } from '@/global/config'
 import MobileSettingPanel from '../../editor/mobileSettingPanel'
 import { getAuth } from '@/utils/auth'
@@ -67,7 +67,7 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
   /**
    * 获取店铺信息
    */
-  const fetchShopInfo = () => {
+  const fetchShopInfo = (): Promise<GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse> => {
     return new Promise((resolve) => {
       const param: any = {
         memberId,
@@ -191,73 +191,35 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
 
   const getComponentsConfig = async () => {
     try {
-      // const appConfig = await getAppShopConfig()
-      // console.log(appConfig, "appConfig")
+      const appConfig = await getAppShopConfig()
+      console.log(appConfig, "appConfig")
 
       //店铺信息
       const shopInfo = await fetchShopInfo()
       mobileShopHeaderNav[mobileShopHeaderNav.key].props.shopInfo = shopInfo
-      // if(appConfig?.topBO) {
-      //   // 顶部导航
-      //   mobileHeaderNav[mobileHeaderNav.key].props.styleTheme = appConfig?.topBO.style
-      //   mobileHeaderNav[mobileHeaderNav.key].props.dataList = appConfig?.topBO.topDetailsBOList
-      // }
 
-      // if(appConfig?.advertBO) {
-      //   // 轮播广告
-      //   mobileBanner[mobileBanner.key].props = {
-      //     visible: appConfig.advertBO.status,
-      //     dataList: appConfig.advertBO.advertDetailsBOList
-      //   }
-      // }
+      mobileShopCommodityList[mobileShopCommodityList.key].props.storeId = shopInfo.id
 
-      // if(appConfig?.functionBO) {
-      //   // 功能入口
-      //   mobileQuickNav[mobileQuickNav.key].props = {
-      //     visible: appConfig.functionBO.status,
-      //     dataList: appConfig.functionBO.functionDetailsBO,
-      //   }
-      // }
-
-      // if(appConfig?.showcaseBO) {
-      //   // 橱窗推荐
-      //   mobileShowCase[mobileShowCase.key].props = {
-      //     visible: appConfig?.showcaseBO.status,
-      //     dataList: appConfig?.showcaseBO.showcaseDetailsBO,
-      //   }
-      // }
-
-      // if(appConfig?.storeBO) {
-      //   const storeBOParam = {
-      //     current: 1,
-      //     pageSize: 100,
-      //     idList: appConfig?.storeBO.storeIdList || [],
-      //   }
-      //   console.log(storeBOParam, "storeBOParam")
-      //   const storeBORes = await getRecommendShopList(storeBOParam)
+      if(appConfig?.backdropBO) {
+        mobileShopHeaderNav[mobileShopHeaderNav.key].props.backdrop = appConfig?.backdropBO.backdrop
+      }
 
-      //   // 推荐店铺
-      //   mobileRecommendShops[mobileRecommendShops.key].props = {
-      //     visible: appConfig?.storeBO.status,
-      //     dataList: getStoreBOList(storeBORes),
-      //   }
-      // }
+      if(appConfig?.advertBO) {
+        mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
+      }
 
-      // if(appConfig?.excellentBO) {
-      //   // 优质推荐
-      //   mobileQuality[mobileQuality.key].props = {
-      //     visible: appConfig?.excellentBO.status,
-      //     dataList: await getExcellentDetailsBO(appConfig?.excellentBO.excellentDetailsBO),
-      //   }
-      // }
+      if(appConfig?.functionBO) {
+        mobileQuickNav[mobileQuickNav.key].props.dataList = appConfig?.functionBO.functionDetailsBO
+      }
 
-      // if(appConfig?.bottomBO) {
-      //   // 底部导航
-      //   mobileBottomNavigation[mobileBottomNavigation.key].props = {
-      //     visible: appConfig?.bottomBO.status,
-      //     dataList: appConfig?.bottomBO.bottomDetailsBOList,
-      //   }
-      // }
+      if(appConfig?.productBO) {
+        mobileShopCommodityList[mobileShopCommodityList.key].props = {
+          title: appConfig.productBO.title,
+          productIdList: appConfig.productBO.productIdList
+        }
+      } else {
+        mobileShopCommodityList[mobileShopCommodityList.key].props.title = '热销商品'
+      }
 
       const config = {
         ...mallLayoutConfig,