feat: 渠道商城装修页面开发

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

+/*
+ * @Author: ghua
+ * @Date: 2021-02-26 11:00:24
+ * @LastEditTime: 2021-03-01 10:15:04
+ * @LastEditors: Please set LastEditors
+ * @Description: app渠道商城行业资讯组件
+ * @FilePath: /lingxi-business-paltform/src/pages/editor/configs/componentConfigs/LingXiUI/MobileChannelHeaderNav.ts
+ */
+import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
+
+const MobileChannelCategory: ComponentConfigTypes = {
+  propsConfig: {
+    componentType: {
+      label: '编辑',
+      type: PROPS_TYPES.moibileChannelCategory
+    },
+  },
+};
+
+export default MobileChannelCategory;

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

@@ -32,6 +32,7 @@ import MobileBottomNavigation from './MobileBottomNavigation'
 import MobileChannelHeaderNav from './MobileChannelHeaderNav'
 import MobileChannelGoodsCard from './MobileChannelGoodsCard'
 import MobileChannelInformation from './MobileChannelInformation'
+import MobileChannelCategory from './MobileChannelCategory'
 
 export default {
   TopBar,
@@ -57,6 +58,7 @@ export default {
   MobileChannelGoodsCard,
   MobileChannelInformation,
   MobileBottomNavigation,
+  MobileChannelCategory,
   ...FloorLine,
   ...ShopFloorLine,
   ...ShowCase,

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

+@import '../style/common.less';
+
+.@{prefixCls}-category-list {
+  background-color: #FFF;
+  min-height: 78px;
+  padding-top: 12px;
+  margin: 0 8px;
+  border-radius: 8px;
+
+  &.hide {
+    display: none;
+  }
+
+  &-carousel {
+    position: relative;
+  }
+
+  &-list {
+    display: flex;
+    flex-wrap: wrap;
+
+    &-item {
+      width: 20%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 12px;
+      color: #606266;
+
+      &-navIcon {
+        width: 48px;
+        height: 48px;
+        background-color: #F9F9F9;
+        border-radius: 50%;
+        margin-bottom: 6px;
+      }
+    }
+
+    &-pagination {
+      padding-bottom: 12px;
+
+      &-wrap {
+        display: flex;
+        justify-content: center;
+      }
+
+      &-item {
+        width: 24px;
+        height: 3px;
+        background-color: #EEF0F3;
+        border-radius: 2px;
+
+        &.active {
+          background-color: @headerNavScienceColor;
+        }
+      }
+    }
+  }
+}

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

+import React, { useEffect, useState, useRef } from 'react'
+import { ConfigConsumer } from '../Generator'
+import { Carousel } from 'antd'
+import { isEmpty, isArray } from 'lodash'
+import cx from 'classnames'
+import { arrayGroupsByCount } from '@/utils'
+import defaultImg from './default_img.png'
+import styles from './index.less'
+
+interface DataItemType {
+  title: string,
+  id: number,
+  imageUrl: string,
+}
+
+export interface MobileQuickNavPropsType {
+  className?: string,
+  style?: React.CSSProperties,
+  visible?: boolean,
+  dataList: DataItemType[],
+}
+
+const MobileChannelCategory: React.FC<MobileQuickNavPropsType> = (props) => {
+  const { children, className, style, dataList, visible, ...others } = props
+  const [navList, setNavList] = useState<any>([])
+  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const carouselRef: any = useRef()
+
+  useEffect(() => {
+    console.log(dataList, "dataList")
+    if(isArray(dataList)) {
+      setNavList(arrayGroupsByCount(dataList, 10))
+    }
+  }, [dataList])
+
+  const renderChildren = ({ getPrefixCls }: any) => {
+    const prefixCls = getPrefixCls("category-list");
+    const classNameString = cx(styles[`${prefixCls}`], !visible ? styles.hide: null)
+
+    const handleCarouselChange = (current: number) => {
+      setCurrentIndex(current)
+    }
+
+    const handleGoSlide = (e, index: number) => {
+      e.stopPropagation()
+      carouselRef.current.goTo(index, false)
+    }
+
+    return !isEmpty(navList) ? (
+      <div className={classNameString} style={style} {...others}>
+        <Carousel
+          ref={carouselRef}
+          dots={false}
+          afterChange={handleCarouselChange}
+          className={styles["lingxi-category-list-carousel"]}
+        >
+          {
+            !isEmpty(navList) && navList.map((listItem, listIndex) => (
+              <div key={`lingxi-category-list-list-${listIndex}`} >
+                <div className={styles["lingxi-category-list-list"]}>
+                  {
+                    listItem.map((item: DataItemType, index: number) => (
+                      <div className={styles["lingxi-category-list-list-item"]} key={`lingxi-category-list-list-item-${index}`}>
+                        {
+                          item.imageUrl ? <img className={styles["lingxi-category-list-list-item-navIcon"]} src={item.imageUrl} /> :
+                          <img className={styles["lingxi-category-list-list-item-navIcon"]} src={defaultImg} />
+                        }
+                        <span className={styles["lingxi-category-list-list-item-navText"]}>{item.title}</span>
+                      </div>
+                    ))
+                  }
+                </div>
+              </div>
+            ))
+          }
+        </Carousel>
+        {
+          navList.length > 1 && (
+            <div className={styles["lingxi-category-list-list-pagination"]} style={{ justifyContent: 'center' }}>
+              <div className={styles["lingxi-category-list-list-pagination-wrap"]} style={styles.paginationStyle}>
+                {
+                  navList.map((_: any, listIndex: number) => (
+                    <div
+                      key={`lingxi-category-list-list-pagination-item-${listIndex}`}
+                      className={cx(styles["lingxi-category-list-list-pagination-item"], currentIndex === listIndex ? styles.active : {})}
+                      onClick={(e) => handleGoSlide(e, listIndex)}
+                    />
+                  ))
+                }
+              </div>
+            </div>
+          )
+        }
+      </div>
+    ) : null
+  }
+
+  return <ConfigConsumer>{renderChildren}</ConfigConsumer>
+}
+
+MobileChannelCategory.defaultProps = {
+  dataList: [],
+  visible: true,
+}
+
+export default MobileChannelCategory

src/pages/editor/customComponents/index.ts

@@ -9,3 +9,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'

src/pages/editor/mobileSettingPanel/propsSettings/components/channelGoods/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/channelGoods/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/channelGoods/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

@@ -6,6 +6,7 @@ import QuickNav from './components/quickNav'
 import HeadBackground from './components/headBackground'
 import RecommendCommodity from './components/recommendCommodity'
 import BottomNavigation from './components/bottomNavigation'
+import MobileChannelGoods from './components/channelGoods'
 import styles from './index.less'
 import { ConsoleSqlOutlined } from '@ant-design/icons';
 
@@ -32,6 +33,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
           return <Banner {...initProps} />
         case PROPS_TYPES.mobileQuickNav:
           return <QuickNav {...initProps} />
+        case PROPS_TYPES.mobileChannelGoodsCard:
+          return <MobileChannelGoods {...initProps} />
         case PROPS_TYPES.mobileBottomNavigation:
           return <BottomNavigation {...initProps} />
         default:

src/pages/mobileTemplate/channelTemplateEdit/config.ts

@@ -97,63 +97,16 @@ export const mobileBanner = {
   }
 }
 
-export const mobileQuickNav = {
+export const mobileChannelCategory = {
   key: "4",
   "4": {
-    "componentName": "MobileQuickNav",
-    "componentType": PROPS_TYPES.mobileQuickNav,
-    "title": "导航模块",
+    "componentName": "MobileChannelCategory",
+    "componentType": PROPS_TYPES.moibileChannelCategory,
+    "title": "商品品类",
     "canEdit": false,
     "canHide": false,
     "props": {
-      "canEdit": false,
-      "style": {
-        paddingTop: '12px',
-        margin: '0 8px',
-        borderRadius: '8px',
-      },
-      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":""
-        },
-      ]
+      dataList: []
     }
   }
 }

src/pages/mobileTemplate/channelTemplateEdit/index.tsx

@@ -18,7 +18,7 @@ import {
   divWrap,
   mobileChannelHeaderNav,
   mobileBanner,
-  mobileQuickNav,
+  mobileChannelCategory,
   mobileChannelGoodsCard,
   mobileChannelInformation,
   mobileBottomNavigation,
@@ -186,6 +186,28 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
     })
   }
 
+  /**
+   * 获取品类树
+   */
+  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 getComponentsConfig = async () => {
     try {
       const appConfig = await getAppChannelConfig()
@@ -195,6 +217,11 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
       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
+      }
+
       if(appConfig?.advertBO) {
         mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
       }
@@ -204,7 +231,7 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
         ...mobileChannelHeaderNav,
         ...divWrap,
         ...mobileBanner,
-        ...mobileQuickNav,
+        ...mobileChannelCategory,
         ...mobileChannelGoodsCard,
         ...mobileChannelInformation,
         ...mobileBottomNavigation,