feat: app店铺装修

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

@@ -38,6 +38,7 @@ interface DataItemType {
 
 interface BannerPropsType {
   dataList: DataItemType[],
+  selectInfo?: any,
   productIdList: number[],
   storeId: number,
   title: string,
@@ -67,7 +68,7 @@ const modalWidthMap = {
 
 const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
 
-  const { dataList, title, storeId, productIdList } = props
+  const { selectInfo, title, storeId, productIdList } = props
   const [expandState, setExpandState] = useState<boolean>(true)
   const [list, setList] = useState<DataItemType[]>([])
   const [modalVisible, setModalVisible] = useState<boolean>(false)
@@ -133,81 +134,30 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
    * 根据类型显示选择的信息
    * @param type 1-商品详情 2-积分详情 3-店铺主页 4-资讯详情 5-不跳转
    */
-  const renderSelectItemByType = (type: number, item: DataItemType) => {
-    switch(type) {
-      case 1:
-        return (
-          <div className={styles.setting_line_addItem_line}>
-            <div className={styles.setting_line_addItem_line_label}></div>
-            <div className={styles.setting_line_addItem_line_brief}>
-              <div className={styles.selectInfoBox}>
-                <ImageBox direction="column" width={60} height={60} imgUrl={item.selectInfo.mainPic} />
-                <div className={styles.selectInfo}>
-                  <div className={styles.selectInfo_name}>{item.selectInfo.name}</div>
-                  <div className={styles.selectInfo_price}>￥{priceFormat(item.selectInfo.min)}</div>
-                </div>
-                <div className={styles.selectInfoBox_delete} onClick={() => handleDeleteSelectItem(item.sort)}>
-                  <DeleteOutlined />
-                </div>
-              </div>
-            </div>
-          </div>
-        )
-      case 2:
-        return (
-          <div className={styles.setting_line_addItem_line}>
-            <div className={styles.setting_line_addItem_line_label}></div>
-            <div className={styles.setting_line_addItem_line_brief}>
-              <div className={styles.selectInfoBox}>
-                <ImageBox direction="column" width={60} height={60} imgUrl={item.selectInfo.mainPic} />
-                <div className={cx(styles.selectInfo, styles.integral)}>
-                  <div className={styles.selectInfo_name}>{item.selectInfo.name}</div>
-                  <div className={styles.selectInfo_price}>{numFormat(item.selectInfo.min)} 积分</div>
-                </div>
-                <div className={styles.selectInfoBox_delete} onClick={() => handleDeleteSelectItem(item.sort)}>
-                  <DeleteOutlined />
-                </div>
-              </div>
-            </div>
-          </div>
-        )
-      case 3:
-        return (
-          <div className={styles.setting_line_addItem_line}>
-            <div className={styles.setting_line_addItem_line_label}></div>
-            <div className={styles.setting_line_addItem_line_brief}>
-              <div className={styles.selectInfoBox}>
-                <ImageBox direction="column" width={60} height={60} imgUrl={item.selectInfo.logo} />
-                <div className={cx(styles.selectInfo, styles.shop)}>
-                  <div className={styles.selectInfo_name}>{item.selectInfo.memberName}</div>
-                </div>
-                <div className={styles.selectInfoBox_delete} onClick={() => handleDeleteSelectItem(item.sort)}>
-                  <DeleteOutlined />
-                </div>
-              </div>
-            </div>
-          </div>
-        )
-      case 4:
-        return (
-          <div className={styles.setting_line_addItem_line}>
-            <div className={styles.setting_line_addItem_line_label}></div>
-            <div className={styles.setting_line_addItem_line_brief}>
-              <div className={styles.selectInfoBox}>
-                <ImageBox direction="column" width={60} height={60} imgUrl={item.selectInfo.imageUrl} />
-                <div className={cx(styles.selectInfo, styles.information)}>
-                  <div className={styles.selectInfo_name}>{item.selectInfo.title}</div>
-                </div>
-                <div className={styles.selectInfoBox_delete} onClick={() => handleDeleteSelectItem(item.sort)}>
-                  <DeleteOutlined />
+  const renderSelectItemByType = (dataList: any[]) => {
+    return (
+      <div>
+        {
+          dataList && dataList.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}>
+                <div className={styles.selectInfoBox}>
+                  <ImageBox direction="column" width={60} height={60} imgUrl={selectItem.mainPic}/>
+                  <div className={styles.selectInfo}>
+                    <div className={styles.selectInfo_name}>{selectItem.name}</div>
+                    <div className={styles.selectInfo_price}>￥{priceFormat(selectItem.min)}</div>
+                  </div>
+                  <div className={styles.selectInfoBox_delete}>
+                    <DeleteOutlined />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        )
-      default:
-        return null
-    }
+          ))
+        }
+      </div>
+    )
   }
 
   /**
@@ -226,15 +176,35 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
       }
       PublicApi.postSearchMobileShopStoreGetCategoryByCommodityId(param).then((res) => {
         if (res.code === 1000) {
-          resolve(res.data)
+          resolve(changeData(res.data))
         }
       })
     })
   }
 
-  // const changeData = (dataList) => {
-
-  // }
+  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 []
+  }
 
   const handleModalOk = async () => {
     const selectResult = productRowCtl.selectRow
@@ -242,18 +212,13 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
       message.info("请选择")
       return null
     }
-    console.log(productRowCtl.selectedRowKeys, "productRowCtl.selectedRowKeys")
-    fetchCategoryByCommodityId(productRowCtl.selectedRowKeys)
-    // const newList = [...list]
-    // newList.map(item => {
-    //   if (item.sort === currentInfo?.sort) {
-    //     item.id = selectResult.id
-    //     item.selectInfo = selectResult
-    //   }
-    // })
-    // setList(newList)
+    const commodityList = await fetchCategoryByCommodityId(productRowCtl.selectedRowKeys)
     changeProps({
-      props:Object.assign({ ...props }, { productIdList: productRowCtl.selectedRowKeys })
+      props:Object.assign({ ...props }, {
+        productIdList: productRowCtl.selectedRowKeys,
+        dataList: commodityList,
+        selectInfo: selectResult
+      })
     })
     setModalVisible(false)
   }
@@ -275,6 +240,7 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
     }
 
     const res = await PublicApi.postSearchMobileShopStoreGetCommodityList(params, {ctlType: 'none'})
+    message.destroy()
     return res.data
   }
 
@@ -309,9 +275,9 @@ const RecommendCommodity: React.FC<BannerPropsType> = (props) => {
                     <Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={() => handleOpenSelectModal()}>选择商品</Button>
                   </div>
                 </div>
-                {/* {
-                  item.selectInfo ? renderSelectItemByType(item.type, item) : null
-                } */}
+                {
+                  (selectInfo && selectInfo.length > 0) ? renderSelectItemByType(selectInfo) : null
+                }
               </div>
             )
           }