feat: app店铺装修

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

-import React, { useState, useEffect } from 'react'
-import { Button, Input, Select, Checkbox, message } from 'antd'
+import React, { useState } from 'react'
+import { Button, Input, message } from 'antd'
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
 import { changeProps } from 'lingxi-editor-core'
-import { ReactSortable } from "react-sortablejs"
 import ImageBox from '@/components/ImageBox'
-import cx from 'classnames'
 import isEmpty from 'lodash/isEmpty'
 import ModalTable from '@/components/ModalTable'
-import UploadImage from '@/components/UploadImage'
 import { PublicApi } from '@/services/api'
 import { FORM_FILTER_PATH } from '@/formSchema/const'
-import { numFormat, priceFormat } from '@/utils/numberFomat'
+import { priceFormat } from '@/utils/numberFomat'
 import { useRowSelectionTable } from '@/hooks/useRowSelectionTable'
 import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch'
 import SearchSelect from '@/components/NiceForm/components/SearchSelect'
 import Search from '@/components/NiceForm/components/Search'
 import Submit from '@/components/NiceForm/components/Submit'
-import { formProduct, basicSchema } from './contant/schema'
+import { basicSchema } from './contant/schema'
 import promptCommodityColumn from './contant/column'
 import arrowRightIcon from '@/assets/icons/arrow_right.png'
 import arrowLeftIcon from '@/assets/icons/arrow_left.png'
-import arrowUpIcon from '@/assets/icons/arrow_up.png'
-import arrowDownIcon from '@/assets/icons/arrow_down.png'
-import sortIcon from '@/assets/icons/sort_icon.png'
 
 import styles from './index.less'
 
@@ -44,63 +38,16 @@ interface BannerPropsType {
   title: string,
 }
 
-const RedirectTypeList = [
-  {
-    value: 1,
-    label: '商品详情',
-  },
-  {
-    value: 2,
-    label: '积分详情',
-  },
-  {
-    value: 5,
-    label: '不跳转',
-  },
-]
-
-const modalWidthMap = {
-  1: 960,
-  2: 960,
-  3: 600,
-  4: 600
-}
-
 const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
 
-  const { selectInfo, title, storeId, productIdList } = props
+  const { title, storeId, productIdList, dataList } = props
   const [expandState, setExpandState] = useState<boolean>(true)
   const [list, setList] = useState<DataItemType[]>([])
   const [modalVisible, setModalVisible] = useState<boolean>(false)
-  const [currentInfo, setCurrentInfo] = useState<DataItemType>()
   const [recommendTitle, setRecommendTitle] = useState<string>(title)
   const [productRowSelection, productRowCtl] = useRowSelectionTable()
 
   /**
-   * 根据选中的类型和id获取信息
-   * @param data
-   */
-  const getSelectInfo = (data: DataItemType) => {
-    return new Promise((resolve) => {
-      let getFn: any = null
-      const param: any = {}
-      switch(data.type) {
-        case 1:
-        case 2:
-          param.commodityId = data.id
-          getFn = PublicApi.getSearchMobileShopStoreGetCommodityDetail
-          break
-        default:
-          break
-      }
-      getFn && getFn(param).then(res => {
-        resolve(res.data)
-      })
-    })
-
-  }
-
-  /**
   * 修改名称
   * @param value
   * @param id
@@ -112,21 +59,48 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
     })
   }
 
+  const getDataListByList = (list) => {
+    let result: any = []
+    if(list) {
+      list.forEach((listItem) => {
+        if (listItem.productList && listItem.productList.length > 0) {
+          result = [...result, ...listItem.productList]
+        }
+      })
+    }
+    return result
+  }
+
   /**
-   * 删除跳转选项
-   * @param sort
+   * 删除已选商品
    */
-  const handleDeleteSelectItem = (sort: number) => {
-    const newList = [...list]
-    newList.map(item => {
-      if (item.sort === sort) {
-        item.id = 0,
-        item.selectInfo = null
+  const handleDeleteItem = (id: number) => {
+    let productIds = [...productIdList]
+    productIds = productIds.filter(item => item !== id)
+
+    const commodityList = []
+
+    dataList.forEach((listItem: any) => {
+      if (listItem.productList && listItem.productList.length > 0) {
+         const temp = listItem
+        const tempProductList = []
+        listItem.productList.forEach((productItem) => {
+          if(productItem.id !== id) {
+            tempProductList.push(productItem)
+          }
+        })
+        if(tempProductList.length > 0) {
+          temp.productList = tempProductList
+          commodityList.push(temp)
+        }
       }
     })
-    setList(newList)
+
     changeProps({
-      props:Object.assign({ ...props }, { dataList: newList })
+      props:Object.assign({ ...props }, {
+        productIdList: productIds,
+        dataList: commodityList,
+      })
     })
   }
 
@@ -134,11 +108,13 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
    * 根据类型显示选择的信息
    * @param type 1-商品详情 2-积分详情 3-店铺主页 4-资讯详情 5-不跳转
    */
-  const renderSelectItemByType = (dataList: any[]) => {
+  const renderSelectItemByType = (list: any[]) => {
+    const selectList = getDataListByList(list)
+
     return (
       <div>
         {
-          dataList && dataList.map(selectItem => (
+          selectList && selectList.map(selectItem => (
             <div className={styles.setting_line_addItem_line} key={selectItem.id}>
               <div className={styles.setting_line_addItem_line_label}></div>
               <div className={styles.setting_line_addItem_line_brief}>
@@ -148,7 +124,7 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
                     <div className={styles.selectInfo_name}>{selectItem.name}</div>
                     <div className={styles.selectInfo_price}>￥{priceFormat(selectItem.min)}</div>
                   </div>
-                  <div className={styles.selectInfoBox_delete}>
+                  <div className={styles.selectInfoBox_delete} onClick={() => handleDeleteItem(selectItem.id)}>
                     <DeleteOutlined />
                   </div>
                 </div>
@@ -175,9 +151,14 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
         idList
       }
       PublicApi.postSearchMobileShopStoreGetCategoryByCommodityId(param).then((res) => {
+        message.destroy()
         if (res.code === 1000) {
           resolve(changeData(res.data))
+        } else {
+          resolve([])
         }
+      }).catch(() => {
+         resolve([])
       })
     })
   }
@@ -207,17 +188,17 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
   }
 
   const handleModalOk = async () => {
-    const selectResult = productRowCtl.selectRow
-    if (!selectResult || isEmpty(selectResult)) {
+    let selectedRowKeys = productRowCtl.selectedRowKeys
+    if (!selectedRowKeys || isEmpty(selectedRowKeys)) {
       message.info("请选择")
       return null
     }
-    const commodityList = await fetchCategoryByCommodityId(productRowCtl.selectedRowKeys)
+    selectedRowKeys = [...productIdList, ...selectedRowKeys]
+    const commodityList = await fetchCategoryByCommodityId(selectedRowKeys)
     changeProps({
       props:Object.assign({ ...props }, {
-        productIdList: productRowCtl.selectedRowKeys,
+        productIdList: selectedRowKeys,
         dataList: commodityList,
-        selectInfo: selectResult
       })
     })
     setModalVisible(false)
@@ -276,7 +257,7 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
                   </div>
                 </div>
                 {
-                  (selectInfo && selectInfo.length > 0) ? renderSelectItemByType(selectInfo) : null
+                  (dataList && dataList.length > 0) ? renderSelectItemByType(dataList) : null
                 }
               </div>
             )

src/pages/mobileTemplate/shopTemplateEdit/index.tsx

@@ -189,6 +189,52 @@ 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([])
+      })
+    })
+  }
+
   const getComponentsConfig = async () => {
     try {
       const appConfig = await getAppShopConfig()
@@ -211,10 +257,12 @@ const  mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
       }
 
       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
+          productIdList: appConfig.productBO.productIdList,
+          dataList,
         }
       } else {
         mobileShopCommodityList[mobileShopCommodityList.key].props.storeId = shopInfo.id