feat: B端APP商城装修开发

src/pages/pageCustomized/components/toolBar/returnSaveParams.ts

@@ -579,6 +579,26 @@ export const paramsBusiness = (
             inner: tempProps.inner,
           })
           break
+        case PROPS_SETTING_TYPES.mobileRecommentShops:
+            tempProps = configItem.props
+            _params.adornContent['recommendShops'] = contactList(_params.adornContent['recommendShops'], {
+              productIdList: tempProps.productIdList || [],
+              id: tempProps.id,
+              registerYears: tempProps.registerYears,
+              creditPoint: tempProps.creditPoint,
+              memberName: tempProps.name || tempProps.memberName,
+              logo: tempProps.logo,
+            })
+            break
+        case PROPS_SETTING_TYPES.bottomNavigationItems:
+          tempProps = configItem.props
+          _params.adornContent['bottomNavigation'] = contactList(_params.adornContent['bottomNavigation'], {
+            defaultIcon: tempProps.defaultIcon,
+            selectIcon: tempProps.selectIcon,
+            name: tempProps.name,
+            type: tempProps.type,
+          })
+          break
       }
     }
   });

src/pages/pageCustomized/mobileEdit/config.ts

@@ -4,6 +4,7 @@ import styleThemeImgDefault from './imgs/style_theme_default.png'
 import styleThemeImgScience from './imgs/style_theme_science.png'
 import categoryNavTemplateDefault from './imgs/category_template_default.png'
 import showCaseTemplateDefault from './imgs/showcase_template_default.jpg'
+import recommendShopTemplateDefault from './imgs/recommend_shop_template_default.jpg'
 
 export const defaultHeaderNavData = [
   {
@@ -45,7 +46,7 @@ export const defaultConfig: PageConfigType = {
         position: 'relative',
       },
     },
-    childNodes: ['1', '3', '5', '7', '9', '10']
+    childNodes: ['1', '3', '5', '7', '9', '10', '15']
   },
   '1': {
     title: '头部导航栏',
@@ -175,9 +176,50 @@ export const defaultConfig: PageConfigType = {
   '10': {
     title: '店铺推荐',
     componentName: 'RecommendShop',
-    props: {},
-    childNodes: [],
+    props: {
+      stylesthemelist: [
+        {
+          key: 0,
+          width: 320,
+          height: 204,
+          img: recommendShopTemplateDefault,
+        },
+      ]
+    },
+    childNodes: ['11'],
     childComponentName: 'RecommendShop.Item',
     addBtnText: '添加店铺',
   },
+  '11': {
+    loop: '${recommendShops}',
+    title: '${item.memberName}',
+    componentName: 'RecommendShop.Item',
+    props: {
+      id: '${item.id}',
+      registerYears: '${item.registerYears}',
+      creditPoint: '${item.creditPoint}',
+      memberName: '${item.memberName}',
+      logo: '${item.logo}',
+    },
+  },
+  '15': {
+    title: '底部标签栏',
+    componentName: 'BottomNavigation',
+    props: {},
+    childNodes: ['16'],
+    childComponentName: 'BottomNavigation.Items',
+    addBtnText: '添加标签',
+  },
+  '16': {
+    loop: '${bottomNavigation}',
+    title: '底部标签栏',
+    componentName: 'BottomNavigation.Items',
+    props: {
+      defaultIcon: '${item.defaultIcon}',
+      selectIcon: '${item.selectIcon}',
+      name: '${item.name}',
+      type: '${item.type}',
+      isnull: false,
+    },
+  },
 }

src/pages/pageCustomized/mobileEdit/index.tsx

@@ -196,6 +196,8 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
         navList: appConfig?.navList ? appConfig?.navList : [],
         showCase: appConfig?.showCase ? appConfig?.showCase : [],
         informationTitle: '8月钢市价格走势判断',
+        recommendShops: appConfig?.recommendShops ? appConfig?.recommendShops : [],
+        bottomNavigation: appConfig?.bottomNavigation ? appConfig?.bottomNavigation : [],
       }
       const finalConfig = resolveMappingPageConfig(defaultConfig, allState)
       console.log(finalConfig, 'finalConfig')
@@ -205,7 +207,6 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
     } catch (error) {
       console.log(error);
     }
-
   };
 
   return !loading ? (

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bottomNavigationClient/index.less

@@ -30,6 +30,7 @@
         width: 40px;
         height: 40px;
       }
+
       &-add{
         font-size: 40px;
       }

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/index.tsx

@@ -121,7 +121,7 @@ const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
   }
 
   const _onChangeByKey = (val: any, key: string, title?: string) => {
-    if (key === 'type' && Number(val) === 4) {
+    if (key === 'type' && Number(val) === 3) {
       getFirstCategoryList()
     }
     const newProps: any = {

src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/shops/index.less

-@import "../../../../../../global//styles/utils.less";
 @import "../../common.less";
 
-.selectBtn {
-  display: block;
-  width: 100%;
-  background-color: #FAFBFC;
-  border: 1px dashed #D8DDE6;
-}
+.banner {
+  &-box {
+    margin-bottom: 16px;
+
+    :global {
+      .ant-upload {
+        width: 100%;
+      }
+    }
+
+    &-label {
+      font-size: 12px;
+      color: #91959B;
+      margin-bottom: 8px;
+    }
+
+    &-icon {
+      height: 96px;
+      background-color: #FAFBFC;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+
+      &>img {
+        width: 100%;
+      }
+
+      &-add {
+        width: 24px;
+        height: 24px;
+      }
+
+      &:hover {
+        .banner-box-icon-cover {
+          display: block;
+        }
+      }
+
+      &-cover {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background-color: rgba(0, 0, 0, .1);
+        display: none;
+        z-index: 1;
+
+        &-delete {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          font-size: 20px;
+          color: #fff;
+        }
+
+        &-bottom {
+          position: absolute;
+          height: 24px;
+          line-height: 24px;
+          text-align: center;
+          background-color: rgba(0, 0, 0, 0.24);
+          font-size: 12px;
+          color: #fff;
+          width: 100%;
+          bottom: 0;
+          left: 0;
+        }
+      }
+
+    }
+  }
+
+  &-record {
+    &-shop {
+      height: 56px;
+      border: 1px solid #EDEEEF;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
+
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 8px;
+      }
+
+      span {
+        flex: 1;
+        color: #303133;
+        font-size: 12px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+
+    &-integral {
+      height: 56px;
+      border: 1px solid #EDEEEF;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
+
+      img {
+        width: 40px;
+        height: 40px;
+        margin-right: 8px;
+      }
+
+      &-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+
+        &-top {
+          flex: 1;
+          color: #303133;
+          font-size: 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        &-bottom {
+          flex: 1;
+          color: #EA8000;
+          font-size: 12px;
+        }
+      }
+    }
+
+    &-activity {
+      height: 56px;
+      border: 1px solid #EDEEEF;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      padding: 0 8px;
+      position: relative;
+
+      img {
+        width: 40px;
+        height: 40px;
+        border-radius: 4px;
+        margin-right: 8px;
+      }
+
+      &-right {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+
+        &-top {
+          flex: 1;
+          color: #303133;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
 
-.uploadPreview {
-  border: 1px solid #EBECF0;
+        &-bottom {
+          flex: 1;
+          color: #91959B;
+        }
+      }
+      &-tag{
+        position: absolute;
+        right: 0;
+        top: -3px;
+      }
+    }
+  }
 }