feat: 添加自营商城移动端页面

src/pages/mobileTemplate/ownMallTemplateEdit/config.ts

+/*
+ * @Author: ghua
+ * @Date: 2021-02-22 17:02:20
+ * @LastEditTime: 2021-03-01 11:47:26
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /lingxi-business-paltform/src/pages/mobileTemplate/channelTemplateEdit/config.ts
+ */
+import { PageConfigType } from '@lingxi-disign/core'
+import categoryNavTemplateDefault from '../shopTemplateEdit/img/category_template_default.png'
+import RED_PACKAGE from '../shopTemplateEdit/img/red_package.png';
+
+export const defaultHeaderNavData = [
+  {
+    name: "我的",
+    content: "",
+    status: true,
+    type: 1
+  },
+]
+
+export const channelLayoutConfig : PageConfigType = {
+  '0': {
+    componentName: 'MallLayout',
+    props: {
+      style: {
+        "width": "100%",
+        "minHeight": "100%",
+        "background": "#F7F8FA",
+        "overflowX": "hidden",
+        "paddingBottom": "50px",
+      }
+    },
+    childNodes: ['1', '3', '5', '7']
+  },
+  '1': {
+    title: '头部导航栏',
+    canDelete: false,
+    componentName: 'ChannelHeaderNav',
+    canEdit: false,
+    props: {
+      styleTheme: '${topStyle}',
+      title: '${channelName}',
+      categoryList: '${categoryList}',
+    },
+    childNodes: ['2'],
+    childComponentName: 'ChannelHeaderNav.ActionItem',
+  },
+  '2': {
+    loop: '${top}',
+    title: '${item.name}',
+    hideActions: true,
+    componentName: 'ChannelHeaderNav.ActionItem',
+    props: {
+      data: '${item}'
+    },
+  },
+  '3': {
+    title: '广告图',
+    canDelete: false,
+    componentName: 'Banner',
+    props: {
+      style: {
+        margin: '8px',
+      },
+    },
+    childNodes: ['4'],
+    childComponentName: 'Banner.Items',
+    addBtnText: '添加广告',
+  },
+  '4': {
+    loop: '${advert}',
+    title: '${item.name}',
+    componentName: 'Banner.Items',
+    props: {
+      id: '${item.id}',
+      type: '${item.type}',
+      img: '${item.img}',
+      name: '${item.name}',
+      isnull: false,
+    },
+  },
+  '5': {
+    title: '分类导航',
+    canDelete: false,
+    hideAction: true,
+    componentName: 'MobileNavCard',
+    props: {
+      style: {
+        margin: '8px',
+      },
+      status: true,
+      stylesthemelist: [
+        {
+          key: 0,
+          width: 320,
+          height: 148,
+          img: categoryNavTemplateDefault,
+        },
+      ]
+    },
+    childNodes: ['6'],
+    childComponentName: 'MobileNavCard.NavItem',
+    addBtnText: '添加导航',
+  },
+  '6': {
+    loop: '${navList}',
+    title: '${item.name}',
+    componentName: 'MobileNavCard.NavItem',
+    props: {
+      id: '${item.id}',
+      name: '${item.name}',
+      type: '${item.type}',
+      url: '${item.url}',
+      icon: '${item.icon}',
+      empty: false,
+    },
+  },
+  '7': {
+    title: '资讯',
+    canDelete: false,
+    componentName: 'InformationCard',
+    props: {
+      title: '${informationTitle}'
+    },
+    childNodes: [],
+    canEdit: false,
+    addBtnText: '添加资讯',
+  },
+}
+
+export const defaultConfig: PageConfigType = {
+  '14': {
+    title: '底部标签栏',
+    canDelete: false,
+    componentName: 'BottomNavigation',
+    props: {},
+    childNodes: ['15'],
+    childComponentName: 'BottomNavigation.Items',
+    addBtnText: '添加标签',
+    maxLength: 5,
+  },
+  '15': {
+    loop: '${bottom}',
+    title: '${item.name}',
+    componentName: 'BottomNavigation.Items',
+    props: {
+      defaultIcon: '${item.defaultIcon}',
+      selectIcon: '${item.selectIcon}',
+      name: '${item.name}',
+      type: '${item.type}',
+      isnull: false,
+    },
+  },
+}
+
+export const suggestProductConfig = {
+  '12': {
+    title: '推荐商品',
+    canDelete: false,
+    componentName: 'SuggestProduct',
+    props: {},
+    childNodes: [],
+    childComponentName: 'SuggestProduct.Items',
+    addBtnText: '添加分类',
+    canEdit: true,
+    canHide: false,
+    maxLength: 4,
+    childProps: {
+      title: '商品容器',
+      canEdit: true,
+      canHide: false,
+      componentName: 'SuggestProduct.Items',
+      props: {},
+      childComponentName: 'SuggestProduct.Commodity',
+      maxLength: 50,
+      // addBtnText: '添加商品',
+      childNodes: [],
+    },
+  },
+};
+
+export const couponsModalConfig = {
+  '13': {
+    title: '优惠券弹窗',
+    componentName: 'CouponsModal',
+    props: {
+      style: {
+        position: 'absolute',
+        display: 'none',
+        backgroundImage: `url(${RED_PACKAGE})`,
+        width: 312,
+        height: 425,
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        margin: 'auto',
+        zIndex: 1,
+      },
+    },
+    childNodes: [],
+    childComponentName: 'CouponsModal.CouponsItem',
+    addBtnText: '添加优惠券',
+    canEdit: true,
+    canHide: false,
+    canDelete: false,
+    canDrag: false,
+  },
+};

src/pages/mobileTemplate/ownMallTemplateEdit/index.less

+@content-height: calc(100vh - 120px);
+
+.wrapper {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
+  transition: all .3s;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  justify-content: center;
+  background-color: #F2F3F5;
+  height: calc(100vh - 64px);
+}
+
+.app-wrapper {
+  display: flex;
+  flex: 1;
+  justify-content: center;
+}
+
+.app-canvas-container {
+  display: flex;
+  width: 381px;
+  margin-top: 40px;
+  margin-bottom: 52px;
+  justify-content: center;
+  background-color: #F4F5F7;
+  // height: calc(@content-height + 50px);
+  overflow: hidden;
+
+}
+
+.loading_wrap {
+  width: 100%;
+  height: 100vh;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+
+  .loading_text {
+    margin-top: 16px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+}

src/pages/ownMall/ownMallManager/components/useModal/index.less

-.selectBox {
-  width: 100%;
-}
-
-.text_line {
-  margin-bottom: 8px;
-
-  &>span {
-    color: #909399;
-
-  }
-
-  &>label {
-    color: #303133;
-    margin: 0 3px;
-  }
-}
\ No newline at end of file
+.selectBox {
+  width: 100%;
+}
+
+.text_line {
+  margin-bottom: 8px;
+
+  &.use {
+    background-color: #FAFBFC;
+    display: flex;
+    flex-direction: column;
+    padding: 12px;
+  }
+
+  &>span {
+    color: #909399;
+
+  }
+
+  &>label {
+    color: #303133;
+    margin: 0 3px;
+  }
+}

src/pages/ownMall/ownMallManager/components/useModal/index.tsx

-import React from 'react'
-import { Modal, Form, Select, Checkbox } from 'antd'
-import styles from './index.less'
-import detailInfo from '@/pages/logistics/components/orderSearchDetail'
-
-interface UseModalPropsType {
-  visible: boolean;
-  onOk: Function;
-  onCancel: Function;
-  title: string;
-  dataInfo: any;
-  confirmLoading?: boolean;
-}
-
-const UseModal: React.FC<UseModalPropsType> = (props) => {
-  const { visible, onOk, onCancel, title, dataInfo = {}, confirmLoading = false } = props
-
-
-  return (
-    <Modal
-      width={576}
-      title={title}
-      visible={visible}
-      confirmLoading={confirmLoading}
-      onOk={() => onOk()}
-      centered
-      onCancel={() => onCancel()}
-    >
-      {
-        dataInfo.inUseTemplateName ? (
-          <>
-            <div className={styles.text_line}>
-              <span>您选择的站点</span>
-              <label>{dataInfo.siteName}-{dataInfo.shopName}</label>
-              <span>现在使用的模板是</span>
-              <label>“{dataInfo.inUseTemplateName}”</label>
-              <span>模板，</span>
-            </div>
-            <div className={styles.text_line}>
-              <span>您是否使用</span>
-              <label>“{dataInfo.templateName}”</label>
-              <span>模板，来替换您正在使用的模板</span>
-            </div>
-          </>
-        ) : (
-            <div className={styles.text_line}>
-              <span>您是否使用</span>
-              <label>“{dataInfo.templateName}”</label>
-              <span>模板?</span>
-            </div>
-          )
-      }
-
-    </Modal>
-  )
-}
-
-export default UseModal
+import React from 'react'
+import { Modal, Form, Select, Checkbox } from 'antd'
+import styles from './index.less'
+import cx from 'classnames'
+import detailInfo from '@/pages/logistics/components/orderSearchDetail'
+
+interface UseModalPropsType {
+  visible: boolean;
+  onOk: Function;
+  onCancel: Function;
+  title: string;
+  dataInfo: any;
+  confirmLoading?: boolean;
+}
+
+const UseModal: React.FC<UseModalPropsType> = (props) => {
+  const { visible, onOk, onCancel, title, dataInfo = {}, confirmLoading = false } = props
+
+
+  return (
+    <Modal
+      width={576}
+      title={title}
+      visible={visible}
+      confirmLoading={confirmLoading}
+      onOk={() => onOk()}
+      centered
+      onCancel={() => onCancel()}
+    >
+      {
+        dataInfo.inUseTemplateName ? (
+          <>
+            <div className={styles.text_line}>
+              <span>您选择的站点</span>
+              <label>{dataInfo.siteName}-{dataInfo.shopName}</label>
+              <span>现在使用的模板是</span>
+              <label>“{dataInfo.inUseTemplateName}”</label>
+              <span>模板，</span>
+            </div>
+            <div className={cx(styles.text_line, styles.use)}>
+              <span>您是否使用</span>
+              <label>”{dataInfo.templateName}”</label>
+              <span>来替换您正在使用的模板</span>
+            </div>
+          </>
+        ) : (
+            <div className={cx(styles.text_line)}>
+              <span>您是否使用</span>
+              <label>“{dataInfo.templateName}”</label>
+              <span>模板?</span>
+            </div>
+          )
+      }
+
+    </Modal>
+  )
+}
+
+export default UseModal

src/pages/ownMall/ownMallManager/templateDetail/index.tsx

@@ -128,10 +128,14 @@ const TemplateDetail: React.FC<TemplateDetailPropsType> = (props) => {
           <LayoutOutlined />
           <label>商城装修</label>
         </div>
-        <div className={cx(styles.btn, styles.fit)} onClick={() => handleCategoryJump()}>
-          <LayoutOutlined />
-          <label>品类导航页装修</label>
-        </div>
+        {
+          detailInfo?.environment === 4 && (
+            <div className={cx(styles.btn, styles.fit)} onClick={() => handleCategoryJump()}>
+              <LayoutOutlined />
+              <label>品类导航页装修</label>
+            </div>
+          )
+        }
         <div className={cx(styles.btn, detailInfo?.use === 1 ? styles.use : '')} onClick={() => detailInfo?.use !== 1 ? setUseModalVisible(true) : {}}>
           <PushpinOutlined />
           <label>{detailInfo?.use === 1 ? '使用中' : '使用'}</label>