Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into v2

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/add/index.tsx

@@ -5,7 +5,7 @@ import { Button, Space, message, Modal } from 'antd';
 import { history , useLocation, Link } from 'umi';
 import { BgColorsOutlined, CheckCircleOutlined, SaveOutlined } from '@ant-design/icons';
 import { FormEffectHooks, createFormActions, FormPath } from '@formily/antd';
-import moment from 'moment';
+import moment, { Moment } from 'moment';
 import schema from './schema';
 import styles from './index.less';
 import FormilyTemplateDrawer from '../components/TemplateDrawer/formilyTemplateDrawer';
@@ -15,8 +15,9 @@ import { GlobalConfig } from '@/global/config';
 import ReutrnEle from '@/components/ReturnEle';
 import RangeTime  from '@/components/RangeTime/FormilyRangeTime';
 import NiceForm from '@/components/NiceForm';
-import { getTemplateWebActivityPageGet, postTemplateWebActivityPageAdd, postTemplateWebActivityPageUpdate } from '@/services/TemplateV2Api';
+import { getTemplateWebActivityPageGet, GetTemplateWebActivityPageGetResponse, postTemplateWebActivityPageAdd, postTemplateWebActivityPageUpdate } from '@/services/TemplateV2Api';
 import { postManageWebShopWebAll } from '@/services/ManageV2Api';
+import { WEB } from '@/constants/environment';
 
 const actions = createFormActions();
 
@@ -42,15 +43,28 @@ type SubmitType = {
   }
 }
 
+type InitialValueType = Omit<GetTemplateWebActivityPageGetResponse, 'startTime' | 'endTime' | 'templateId' | 'templateName' | 'templatePicUrl'> & {
+  startTime: Moment,
+  endTime: Moment,
+  template: {
+    templateId: number,
+    templateName: string,
+    templatePicUrl: string
+  }
+}
+
+const APP_FIXTURE_LINK = '/memberCenter/marketingAbility/activityPages/management/fixtures';
+const WEB_FIXTURE_LINK = '/memberCenter/marketingAbility/activityPages/management/webFixtures';
+
+
 const Add = () => {
   const intl = useIntl();
-
   const { id, } = usePageStatus();
   const { pathname } = useLocation();
   const isEdit = useMemo(() => id !== '' && pathname.includes("edit"), [id]);
   const isView = useMemo(() => id !== '' && pathname.includes("view"), [id]);
 
-  const [initialValue, setInitialValue] = useState<any>(null);
+  const [initialValue, setInitialValue] = useState<InitialValueType | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
 
   const onSubmit = async (values: SubmitType) => {
@@ -86,7 +100,7 @@ const Add = () => {
           okText: intl.formatMessage({ id: 'activityPage.decorationImmediate' }),
           cancelText: intl.formatMessage({ id: 'activityPage.waitMin' }),
           onOk: () => {
-            history.push(`/memberCenter/marketingAbility/activityPages/management/fixtures?id=${data}`);
+            history.push(`${rest.environment === WEB ? WEB_FIXTURE_LINK : APP_FIXTURE_LINK}?id=${data}`);
           },
           onCancel: () => {
             history.goBack();
@@ -109,7 +123,7 @@ const Add = () => {
         setInitialValue({
           ...rest,
           template: {
-            templateId,
+            templateId: templateId,
             templateName,
             templatePicUrl,
           },
@@ -174,7 +188,7 @@ const Add = () => {
           <Space>
             {
               isEdit && (
-                <Link to={`/memberCenter/marketingAbility/activityPages/management/fixtures?id=${id}`}>
+                <Link to={`${initialValue?.environment === WEB ? WEB_FIXTURE_LINK : APP_FIXTURE_LINK}?id=${id}`}>
                   <Button icon={<BgColorsOutlined />}>{intl.formatMessage({ id: 'activityPage.activityPageDecorate' })}</Button>
                 </Link>
               ) || null

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/configs/pageConfigs.ts

@@ -3,11 +3,14 @@ import { ConfigType } from '@linkseeks/design-react';
 import schema from './schema';
 import HTML from './html';
 import CustomLayouts from '../../components/Layouts';
-// import MobileQuickNav from '@/pages/pageCustomized/configs/componentConfigs/LingXiUI/MobileQuickNav';
+import webScheam from './webSchema';
+/** web 组件 */
+import WebLayout from '../../components/WebDesignPanel/components/WebLayout';
 
-
-const originalComponents = {  ...LxUI, ...CustomLayouts };
-const componentSchemasMap = { ...schema, ...HTML };
+/** 组件注册 */
+const originalComponents = {  ...LxUI, ...CustomLayouts, WebLayout };
+/** 组件schema 注册 */
+const componentSchemasMap = { ...schema, ...HTML, ...webScheam };
 
 // /**
 //  * 容器组件分类

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/configs/schema.ts

@@ -136,27 +136,11 @@ const CommodityWithProcess = {
   }
 }
 
-const MallLayout = {
-  propsConfig: {},
-}
-
-
-const HeaderNav = {
-  propsConfig: {},
-}
-
-
-const CustomizeTabs = {
-  propsConfig: {},
-}
 
 export default {
-  MallLayout,
   Commodity,
   Advertisement,
   View,
-  HeaderNav,
-  CustomizeTabs,
   ...CommodityWithProcess,
   ...Coupon,
   ...MarketingCard,

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/configs/webSchema.tsx

+import { ComponentSchemaType, PROPS_SETTING_TYPES, PROPS_TYPES } from '@linkseeks/design-core';
+import { getIntl} from 'umi'
+const intl = getIntl();
+
+/**
+ * * web 装修页布局
+ */
+const WebLayout = {
+  propsConfig: {
+    children: {
+      type: PROPS_TYPES.string,
+    }
+  },
+}
+
+/**
+ * web 装修页广告图
+ */
+const WebAdvertise = {
+  propsConfig: {
+    imageUrl: PROPS_TYPES.string
+  },
+}
+
+/** web 装修页 每日推荐 */
+const WebHotCommoditySwiper = {
+  propsConfig: {
+
+  }
+}
+
+const WebHotCommodityItem = {
+  propsConfig: {}
+}
+
+/** web 装修页 优惠券容器 */
+const WebCouponContainer = {
+  propsConfig: {
+    title: PROPS_TYPES.string,
+    /** 该容器下的children 只能是 WebCoupon 组件*/
+    children: PROPS_TYPES.objectArray
+  }
+}
+
+/** web 装修页 优惠券 */
+const WebCoupon = {
+  propsConfig: {
+
+  }
+}
+
+/** web 装修页 活动商品容器，包含 */
+const WebCommodityContainer = {
+  propsConfig: {
+    title: PROPS_TYPES.string,
+    /** 该容器下的children 只能是 WebCommodity 组件*/
+    children: PROPS_TYPES.objectArray
+  }
+}
+
+const WebCommodity = {
+  propsConfig: {
+    title: PROPS_TYPES.string,
+    children: PROPS_TYPES.objectArray
+  }
+}
+
+export default {
+  WebLayout,
+  WebAdvertise,
+  WebHotCommoditySwiper,
+  WebHotCommodityItem,
+  WebCouponContainer,
+  WebCoupon,
+  WebCommodityContainer,
+  WebCommodity
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/hooks/useDrag.tsx

+// import React, { useRef } from 'react';
+
+// function useDrag() {
+//   const ref = useRef<HTMLElement | null>(null);
+
+//   const on
+// }
+
+// export default useDrag

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/hooks/useGetWebLayoutBack.tsx

+import { updatePageConfig } from '@linkseeks/design-react';
+import React, { useEffect, useState } from 'react';
+
+const useGetWebLayoutBack = () => {
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    async function init() {
+      setLoading(true);
+      const pageConfig = {
+        0: {
+          "componentName": "WebLayout",
+          title: '布局',
+          "props": {},
+          "childNodes": ['1', '2', "3", '4', '5']
+        },
+        1: {
+          componentName: 'WebAdvertise',
+          title: '广告图',
+          props: {
+            imageUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01560b611258af11013f4720297ffe.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643252429&t=f45eaf304aaf55dc1829ba53b2a39a14'
+          },
+          childNodes: [],
+        },
+        2: {
+          componentName: 'WebHotCommoditySwiper',
+          title: '每日推荐',
+          props: {},
+          childNodes: ['2-1', '2-2', '2-3', '2-4', '2-5'],
+        },
+        '2-1': {
+          componentName: 'WebHotCommodityItem',
+          title: '每日推荐',
+          props: {},
+          childNodes: [],
+        },
+        '2-2': {
+          componentName: 'WebHotCommodityItem',
+          title: '每日推荐',
+          props: {},
+          childNodes: [],
+        },
+        '2-3': {
+          componentName: 'WebHotCommodityItem',
+          title: '每日推荐',
+          props: {},
+          childNodes: [],
+        },
+        '2-4': {
+          componentName: 'WebHotCommodityItem',
+          title: '每日推荐',
+          props: {},
+          childNodes: [],
+        },
+        '2-5': {
+          componentName: 'WebHotCommodityItem',
+          title: '每日推荐',
+          props: {},
+          childNodes: [],
+        },
+        3: {
+          componentName: 'WebCouponContainer',
+          title: '优惠券',
+          props: {},
+          childNodes: ['3-1', '3-2'],
+        },
+        '3-1': {
+          componentName: 'WebCoupon',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        },
+        '3-2': {
+          componentName: 'WebCoupon',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        },
+        4: {
+          componentName: 'WebCommodityContainer',
+          title: '商品',
+          props: {},
+          childNodes: ['4-1', '4-2', '4-3', '4-4', '4-5'],
+        },
+        '4-1': {
+          componentName: 'WebCommodity',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        },
+        '4-2': {
+          componentName: 'WebCommodity',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        },
+        '4-3': {
+          componentName: 'WebCommodity',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        },
+        '4-4': {
+          componentName: 'WebCommodity',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        },
+        '4-5': {
+          componentName: 'WebCommodity',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        },
+        5: {
+          componentName: 'WebCommodityContainer',
+          title: '商品',
+          props: {},
+          childNodes: [],
+        }
+      };
+      console.log("pageConfig", pageConfig);
+      updatePageConfig(pageConfig);
+      setLoading(false);
+    }
+    init();
+  }, [])
+
+  return { loading }
+}
+
+export default useGetWebLayoutBack;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebAdvertise/index.tsx

+import React from 'react';
+
+interface Iprops {
+  /** 广告图 */
+  imageUrl: string,
+}
+
+/** WEB装修页 广告图 */
+const WebAdvertise: React.FC<Iprops> = (props: Iprops) => {
+  const { imageUrl, ...other } = props;
+  const { onClick, onMouseOver, className, getOperateState} = other as any;
+  const divProps = {
+    onClick,
+    onMouseOver,
+  };
+  return (
+    <div style={{height: '460px', width: '1920px'}} className={className} {...divProps}>
+      <img src={imageUrl} style={{width: '100%', height: '100%'}} />
+    </div>
+  )
+}
+
+export default WebAdvertise

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCard/index.less

+.card {
+  display: flex;
+  flex-direction: column;
+
+  .card-header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .card-header-title {
+    color: #fff;
+    font-size: 38px;
+    line-height: 53px;
+    margin-bottom: 16px;
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCard/index.tsx

+import React from 'react';
+import styles from './index.less';
+import classNames from 'classnames'
+
+interface Iprops {
+  extra?: React.ReactNode,
+  title: string | React.ReactNode,
+  children: React.ReactNode,
+  /** 以下属性是装修自带的属性 */
+  onMouseOver?: () => void,
+  onClick?: () => void,
+  className?: string,
+}
+
+const WebCard: React.FC<Iprops> = (props: Iprops) => {
+  const { extra, title, children, className, ...other } = props;
+  return (
+    <div className={classNames(styles.card, className)} {...other}>
+      <div className={styles['card-header']}>
+        {
+          typeof title === 'string' && (
+            <span className={styles['card-header-title']}>每日推荐</span>
+          ) || title
+        }
+        {extra}
+      </div>
+      <div className={styles['card-content']}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default WebCard

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCommodity/index.less

+.container {
+  width: 1200px;
+  margin: 40px auto;
+}
+
+.commodityList {
+  display: flex;
+  flex-direction: row;
+  // justify-content: center;
+
+  .commodityItem {
+    margin-right: 16px;
+
+    &:last-of-type {
+      margin-right: 0px;
+    }
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCommodity/index.tsx

+import React from 'react';
+import WebCard from '../WebCard';
+import styles from './index.less'
+import classNames from 'classnames'
+
+/** web 装修页活动商品容器 */
+
+interface Iprops {
+  title: string,
+  children: React.ReactNode,
+  /** 以下是装修容器提供的属性 */
+  className: string,
+  onMouseOver: () => void,
+  onClick: () => void
+}
+
+const WebCommodityContainer: React.FC<Iprops> = (props: Iprops) => {
+  const { title, children, className, onMouseOver, onClick } = props;
+  const designProps = {
+    onMouseOver,
+    onClick
+  }
+
+  const renderChildren = () => {
+    return React.Children.map(children, (_child: any, _index) => {
+      return (
+        <div className={styles.commodityItem} key={_index}>
+          {
+            React.cloneElement(_child, {..._child.props})
+          }
+        </div>
+      )
+    })
+  }
+
+  return (
+    <div className={classNames(styles.container, className)} {...designProps}>
+      <WebCard title="特价促销">
+        <div className={styles.commodityList}>
+          {renderChildren()}
+        </div>
+      </WebCard>
+    </div>
+  )
+}
+
+export default WebCommodityContainer

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCommodity/item.less

+.commodity {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: 8px;
+  background-color: #fff;
+  width: 227px;
+
+  &-image {
+    width: 100%;
+    height: 227px;
+  }
+
+  .commodity-info {
+    padding: 16px;
+
+    .commodity-info-name {
+      font-size: 14px;
+      line-height: 20px;
+      color: #252D37;
+      margin-bottom: 8px;
+    }
+
+    .commodity-info-tags {
+      margin-bottom: 8px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex-wrap: wrap;
+
+      .commodity-info-tags-item {
+        margin-right: 4px;
+        margin-top: 4px;
+      }
+    }
+
+    .commodity-info-progress {
+      .buyBtn {
+        background-color: #EF3346;
+        color: #fff;
+        padding: 6px 12px;
+        margin-left: 8px;
+        border-radius: 8px;
+      }
+    }
+
+    .commodity-info-hasBuy {
+      font-size: 12px;
+      color: #91959B;
+    }
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCommodity/item.tsx

+import React from 'react';
+import styles from './item.less'
+import { Progress, CustomizeTag } from '@linkseeks/design-ui';
+import { TagOutlined } from '@ant-design/icons';
+import classNames from 'classnames'
+import Price from '../../Price';
+// import Label from '../Label';
+
+interface Iprops {
+  productName: string,
+  productImage: string,
+  /** 以下是装修容器提供的属性 */
+  className: string,
+  onMouseOver: () => void,
+  onClick: () => void
+}
+
+const WebCommodity: React.FC<Iprops> = (props: Iprops) => {
+  const {  className, onMouseOver, onClick } = props;
+  const designProps = {
+    onMouseOver,
+    onClick
+  }
+  // const { }
+  return (
+    <div className={classNames(styles.commodity, className)} {...designProps}>
+      <img className={styles['commodity-image']} src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw640h450%2F20180224%2F43e0-fyrwsqh7241650.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643272841&t=13f5f5cf6b34d2ea199ba51544f1fafd" />
+      <div className={styles['commodity-info']}>
+        <div className={styles['commodity-info-name']}>
+          0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹 硬度适...
+        </div>
+        <div className={styles['commodity-info-tags']}>
+          <div className={styles['commodity-info-tags-item']}>
+            <CustomizeTag
+              icon={<TagOutlined />}
+              type="success"
+              name="满200减20"
+            />
+          </div>
+          <div className={styles['commodity-info-tags-item']}>
+            <CustomizeTag
+              mode="doubleColor"
+              icon={<TagOutlined />}
+              type="main"
+            >
+            success
+          </CustomizeTag>
+          </div>
+        </div>
+        <div className={styles['commodity-info-price']}>
+          <Price />
+        </div>
+        <div className={styles['commodity-info-progress']}>
+          <Progress
+            progressTips='剩余33%'
+            extra={
+              <div className={styles.buyBtn}>去抢购</div>
+            }
+          />
+        </div>
+        <div className={styles['commodity-info-hasBuy']}>
+          已抢 0
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WebCommodity;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCoupon/index.less

+.container {
+  width: 1200px;
+  margin: 40px auto;
+  .couponList {
+    display: flex;
+    flex-direction: row;
+    // justify-content: center;
+    .couponItem {
+      margin-right: 16px;
+      flex-basis: 25%;
+
+      &:last-of-type {
+        margin-right: 0px;
+      }
+    }
+
+  }
+}
+
+.coupon {
+  display: flex;
+  flex-direction: row;
+  background-color: #fff;
+  align-items: center;
+  padding: 16px;
+  border-radius: 8px;
+
+  &-conditions-wrap {
+    display: flex;
+    flex-direction: column;
+    padding-right: 16px;
+    position: relative;
+    .coupon-money {
+      color: #EF3346;
+      font-size: 48px;
+      line-height: 56px;
+
+      .coupon-currency {
+        font-size: 18px;
+        line-height: 25px;
+      }
+    }
+
+    .coupon-condition {
+      color: #606266;
+      font-size: 12px;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      height: 100%;
+      width: 1px;
+      background-color: #F4F5F7;
+    }
+  }
+
+  .coupon-info {
+    padding-left: 16px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+
+    .coupon-info-typeName {
+      color: #303133;
+      font-size: 14px;
+      line-height: 20px;
+      margin-bottom: 4px;
+      font-weight: 600;
+    }
+
+    .coupon-info-date {
+      color: #606266;
+      font-size: 12px;
+      line-height: 16px;
+      margin-bottom: 8px;
+    }
+
+    .coupon-info-btn {
+      background-color: #EF3346;
+      color: #fff;
+      font-size: 14px;
+      padding: 8px;
+      border-radius: 8px;
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .coupon-info-btn-disabled {
+      background-color: #BABCC0;
+      color: #fff;
+      cursor: not-allowed;
+      padding: 8px;
+      border-radius: 8px;
+      font-size: 14px;
+      text-align: center;
+    }
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCoupon/index.tsx

+import React from 'react';
+import styles from './index.less';
+import classNames from 'classnames';
+
+interface Iprops {
+  /** 以下是装修容器提供的属性 */
+  className: string,
+  onMouseOver: () => void,
+  onClick: () => void
+}
+
+const WebCoupon: React.FC<Iprops> = (props: Iprops) => {
+  const {  className, onMouseOver, onClick } = props;
+  const designProps = {
+    onMouseOver,
+    onClick
+  }
+  return (
+    <div className={classNames(styles.coupon, className)} {...designProps}>
+      <div className={styles['coupon-conditions-wrap']}>
+        <span className={styles['coupon-money']}>
+          <span className={styles['coupon-currency']}>￥</span>
+          10
+        </span>
+        <span className={styles['coupon-condition']}>全场满199立减</span>
+      </div>
+      <div className={styles['coupon-info']}>
+        <span className={styles['coupon-info-typeName']}>平台优惠券</span>
+        <span className={styles['coupon-info-date']}>2021.08.10至2021.10</span>
+        <div className={styles['coupon-info-btn-disabled']}>立即领取</div>
+      </div>
+    </div>
+  )
+}
+
+export default WebCoupon;
+

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCoupon/webCouponContainer.tsx

+import React from 'react';
+import Coupon from '.';
+import WebCard from '../WebCard';
+import styles from './index.less'
+import classNames from 'classnames';
+
+interface Iprops {
+  title: string,
+  children: React.ReactNode,
+  /** 以下是装修容器提供的属性 */
+  className: string,
+  onMouseOver: () => void,
+  onClick: () => void
+}
+
+const WebCouponContainer: React.FC<Iprops> = (props: Iprops) => {
+  const { title, children, className, onMouseOver, onClick } = props;
+  const designProps = {
+    onMouseOver,
+    onClick
+  }
+
+  const renderChildren = () => {
+    return React.Children.map(children, (_child: any, _index) => {
+      return (
+        <div className={styles.couponItem} key={_index}>
+          {
+            React.cloneElement(_child, {..._child.props})
+          }
+        </div>
+      )
+    })
+  }
+
+  return (
+    <div className={classNames(styles.container, className)} {...designProps}>
+      <WebCard title={"优惠好券"}>
+        <div className={styles.couponList}>
+          {renderChildren()}
+        </div>
+      </WebCard>
+    </div>
+  )
+}
+
+export default WebCouponContainer

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebHotCommoditySwiper/hotCommodityItem.tsx

+import React from 'react';
+import { Progress, CustomizeTag } from '@linkseeks/design-ui';
+import styles from './index.less';
+import classNames from 'classnames'
+import Price from '../../Price';
+
+
+interface Iprops {
+  /** 以下是装修容器提供的属性 */
+  className: string,
+  onMouseOver: () => void,
+  onClick: () => void
+}
+
+const HotCommodityItem: React.FC<Iprops> = (props: Iprops) => {
+  const { className, onMouseOver, onClick } = props;
+  const designProps = {
+    onMouseOver,
+    onClick
+  }
+
+  return (
+    <div className={classNames(styles['hot-commodity'], className)} {...designProps}>
+      <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wendangwang.com%2Fpic%2F2e3a5f94786b79121a8ac434%2F3-409-png_6_0_0_570_606_212_221_892.979_1262.879-393-0-4196-393.jpg&refer=http%3A%2F%2Fimg.wendangwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643339867&t=6f6f9c8302069fdbb170431d23d1ee62" />
+      <div className={styles['hot-commodity-info']}>
+        <div className={styles['hot-commodity-info-name']}>0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹 硬度适...</div>
+        <div className={styles['hot-commodity-info-tags']}>
+          <div className={styles['hot-commodity-info-tags-item']}>
+            <CustomizeTag type="main" name="第二件半价" mode="monotone" />
+          </div>
+          <div className={styles['hot-commodity-info-tags-item']}>
+            <CustomizeTag type />
+          </div>
+        </div>
+        <div className={styles['hot-commodity-info-price']}>
+          <Price />
+        </div>
+        <div className={styles['commodity-info-hasSold']}>
+          已抢 0
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HotCommodityItem

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebHotCommoditySwiper/index.less

+.container {
+  width: 1300px;
+  margin: 40px auto 0px auto;
+
+  &-title {
+    margin-left: 50px;
+    font-size: 38px;
+    line-height: 53px;
+    margin-bottom: 16px;
+    color: #fff;
+  }
+}
+
+.swiper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  .swiper-view {
+    width: 1200px;
+    overflow: hidden;
+
+    .commodityList {
+      display: flex;
+      flex-direction: row;
+      transition: all 1s;
+
+      .commodity-item {
+        margin-right: 16px;
+
+      }
+    }
+  }
+  .swiper-prev,
+  .swiper-next {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #fff;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+}
+
+
+.hot-commodity {
+  display: inline-flex;
+  flex-direction: row;
+  padding: 8px;
+  background-color: #fff;
+  border-radius: 8px;
+  width: 389px;
+
+  img {
+    width: 134px;
+    height: 134px;
+  }
+
+  .hot-commodity-info {
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+
+    .hot-commodity-info-name {
+      font-size: 14px;
+      line-height: 20px;
+      color: #252D37;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      /*! autoprefixer: off */
+      -webkit-box-orient: vertical;
+    }
+
+    .hot-commodity-info-tags {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+
+      .hot-commodity-info-tags-item {
+        margin: 4px 4px 0 0;
+      }
+    }
+
+    .hot-commodity-info-price {
+      margin-top: auto;
+    }
+
+    .commodity-info-hasSold {
+      font-size: 12px;
+      color: #91959B;
+      margin-top: 8px;
+    }
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebHotCommoditySwiper/index.tsx

+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import React from 'react';
+import styles from './index.less';
+import useSwiper from './useSwiper';
+import HotCommodity from './hotCommodityItem';
+import WebCard from '../WebCard';
+import classNames from 'classnames';
+
+interface Iprops {
+  title: string,
+  children: React.ReactNode,
+  /** 以下是装修容器提供的属性 */
+  className: string,
+  onMouseOver: () => void,
+  onClick: () => void
+}
+
+/** 当前屏幕的swiper 一页的宽度 */
+const SCREEN_WIDTH = 1200;
+/** 每个 HotCommodityItem 间隔看度 */
+const OFFSET_WIDTH = 16
+
+/**
+ * TODO 这里需要用React.children.map, 以及 cloneElement 修改，先写静态页面，搞完装修后回来修改
+ * */
+const HotCommoditySwiper: React.FC<Iprops> = (props: Iprops) => {
+  const { title, children, className, onMouseOver, onClick } = props;
+  const count = React.Children.count(children)
+  const { current, onPrev, onNext } = useSwiper({ count: count });
+  const designProps = {
+    onMouseOver,
+    onClick
+  }
+
+  const renderChildren = () => {
+    return React.Children.map(children, (_child: any, _index) => {
+      return (
+        <div className={styles['commodity-item']} key={_index}>
+          {
+            React.cloneElement(_child, {..._child.props})
+          }
+        </div>
+      )
+    })
+  }
+
+  return (
+    <div className={classNames(styles.container, className)} {...designProps}>
+      <WebCard title={<div className={styles['container-title']}>每日推荐</div>}>
+        <div className={styles.swiper}>
+          <div className={styles['swiper-prev']} onClick={onPrev}>
+            <LeftOutlined style={{fontSize: '20px', color: 'red'}}/>
+          </div>
+          <div className={styles['swiper-view']}>
+            <div className={styles.commodityList} style={{ transform: `translateX(${((-current * SCREEN_WIDTH) + -(current * OFFSET_WIDTH))}px)` }}>
+              {renderChildren()}
+            </div>
+          </div>
+          <div className={styles['swiper-next']}  onClick={onNext}>
+            <RightOutlined style={{fontSize: '20px', color: 'red'}} />
+          </div>
+        </div>
+      </WebCard>
+    </div>
+  )
+}
+
+export default HotCommoditySwiper;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebHotCommoditySwiper/useSwiper.tsx

+import { useState } from 'react';
+
+type Options = {
+  /** swiper 子组件数量， 我们已3个一组 */
+  count: number,
+}
+
+function useSwiper(options: Options) {
+  const { count } = options;
+  const [current, setCurrent] = useState(0);
+
+  const onPrev = () => {
+    if (current === 0) {
+      return;
+    }
+    setCurrent(current - 1)
+  }
+
+  const onNext = () => {
+    if ((current + 1) * 3 >= count) {
+      return;
+    }
+    setCurrent(current + 1)
+  }
+
+  return {
+    current,
+    onNext,
+    onPrev
+  }
+}
+
+export default useSwiper;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/index.tsx

@@ -3,7 +3,16 @@ import Coupon from './Coupon';
 import CommodityList from './CommodityList';
 import WrapCommodityList from './WrapCommodityList';
 import Combination from './Combination';
-import CommodityWithProcess from './CommodityWithProcess'
+import CommodityWithProcess from './CommodityWithProcess';
+
+/** WEB */
+import WebAdvertise from './WebAdvertise';
+import WebHotCommoditySwiper from './WebHotCommoditySwiper';
+import WebHotCommodityItem from './WebHotCommoditySwiper/hotCommodityItem'
+import WebCoupon from './WebCoupon';
+import WebCouponContainer from './WebCoupon/webCouponContainer';
+import WebCommodityContainer from './WebCommodity';
+import WebCommodity from './WebCommodity/item'
 
 export default {
   Advertisement,
@@ -11,5 +20,12 @@ export default {
   CommodityList,
   WrapCommodityList,
   Combination,
-  CommodityWithProcess
+  CommodityWithProcess,
+  WebAdvertise,
+  WebHotCommoditySwiper,
+  WebHotCommodityItem,
+  WebCouponContainer,
+  WebCoupon,
+  WebCommodityContainer,
+  WebCommodity
 };

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/MobileDesignPanel/index.less

@@ -77,7 +77,6 @@
     margin-top: 0;
     z-index: 99;
 
-
     .appBottomStrip {
       position: relative;
       width: 134px;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Price/index.less

+.price {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .originalPrice {
+    font-size: 16px;
+    line-height: 18px;
+    color: #EF3346;
+
+    .currency {
+      font-size: 12px;
+    }
+  }
+
+  .discountPrice {
+    color: #91959B;
+    font-size: 12px;
+    margin-left: 8px;
+    text-decoration: line-through;
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Price/index.tsx

+import React from "react";
+import styles from './index.less'
+
+const Price = () => {
+  return (
+    <div className={styles.price}>
+      <div className={styles.originalPrice}>
+        <span className={styles.currency}>￥</span>
+        <span>49.00/件</span>
+      </div>
+      <div className={styles.discountPrice}>
+        ￥59.00/件
+      </div>
+    </div>
+  )
+}
+
+export default Price

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/index.less

+.layout {
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    margin-bottom: 8px;
+  }
+
+  .content {
+    padding: 0px 0px 24px 0;
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/index.tsx

+import React from 'react';
+import TopBar from './topbar';
+import Search from './search'
+import styles from './index.less'
+import Tabs from './tabs';
+
+/**
+ * WEB 装修页布局组件
+ */
+interface Iprops {
+  children: React.ReactNode
+}
+
+const WebLayout: React.FC<Iprops> = (props: Iprops) => {
+  const { children } = props
+  return (
+    <div className={styles.layout}>
+      <div className={styles.header}>
+        <TopBar />
+        <Search />
+        <Tabs />
+      </div>
+      <div className={styles.content} style={{background: '#E80047'}}>
+        {children}
+      </div>
+      <div className={styles.footer}></div>
+    </div>
+  )
+}
+
+export default WebLayout;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/search.less

+.header {
+  display: flex;
+  flex-direction: row;
+  background-color: #fff;
+  // justify-content: center;
+  width: 1200px;
+  margin: 0 auto;
+  padding: 30px 0;
+
+  .site-logo {
+    width: 200px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: center;
+    margin-right: 30px;
+    img {
+      width: 44px;
+      height: 44px;
+    }
+  }
+
+  .search {
+    // width: 628px;
+    flex: 1;
+    .search-type {
+      font-size: 12px;
+      margin-bottom: 8px;
+
+      span {
+        padding: 0 12px;
+        border-left: 1px solid #f5f6f7;
+        color: #909399;
+
+        &:first-child {
+          padding-left: 0;
+          border-left: none;
+          color: #00a98f;
+        }
+      }
+    }
+
+    .search-input {
+      display: flex;
+      flex-direction: row;
+      border: 2px solid #00a98f;
+      border-radius: 8px;
+      overflow: hidden;
+
+      .search-input-inner {
+        flex: 1;
+
+        :global {
+          .ant-input {
+            border: none;
+          }
+        }
+      }
+
+      .search-btn {
+        background-color: #00a98f;
+        font-size: 14px;
+        color: #fff;
+        padding: 4px 12px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+
+  .header-right {
+    width: 200px;
+    margin-left: 24px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: flex-end;
+  }
+
+  .btn {
+    padding: 8px 16px;
+    background-color: #f5f6f7;
+    color: #252d37;
+    font-size: 14px;
+    border-radius: 8px;
+    cursor: pointer;
+
+    &-text {
+      margin-left: 8px;
+    }
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/search.tsx

+import React from 'react';
+import styles from './search.less';
+import { Input } from 'antd'
+import { CarOutlined } from '@ant-design/icons';
+
+const Search = () => {
+  return (
+    <div className={styles.header}>
+      <div className={styles['site-logo']}>
+        <img  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fd.paper.i4.cn%2Fmax%2F2017%2F04%2F10%2F13%2F1491802535979_693807.jpg&refer=http%3A%2F%2Fd.paper.i4.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643428290&t=78ef7ff08b23774f0d5c0074f4bc7f64" />
+      </div>
+      <div className={styles.search}>
+        <div className={styles['search-type']}>
+          <span>商品</span>
+          <span>店铺</span>
+        </div>
+        <div className={styles['search-input']}>
+          <div className={styles['search-input-inner']}>
+            <Input placeholder='请输入关键字' />
+          </div>
+          <div className={styles['search-btn']}>
+            搜索
+          </div>
+        </div>
+      </div>
+      <div className={styles['header-right']}>
+        <div className={styles.btn}>
+          <CarOutlined style={{fontSize: '14px'}}/>
+          <span className={styles['btn-text']}>进货单</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Search;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/tabs.less

+.tabList {
+  display: flex;
+  flex-direction: row;
+  color: #303133;
+  font-size: 14px;
+  font-weight: 500;
+  width: 1200px;
+  margin: 0 auto;
+
+  .tabItem {
+    padding: 0 24px;
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/tabs.tsx

+import React from 'react';
+import styles from './tabs.less';
+
+const Tabs = () => {
+  const tabList = [
+    { title: '商城首页' },
+    { title: '现货商品' },
+    { title: '询价商品' },
+    { title: '优选店铺' },
+    { title: '积分商品' },
+    { title: '行情资讯' },
+  ]
+  return (
+    <div className={styles.tabList}>
+      {
+        tabList.map((_item, _key) => {
+          return (
+            <div className={styles.tabItem} key={_key}>{_item.title}</div>
+          )
+        })
+      }
+      <span></span>
+    </div>
+  )
+}
+
+export default Tabs

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/topbar.less

+.topBar {
+  width: 100%;
+  background-color: #FAFBFC;
+  border-bottom: 1px solid #F4F5F7;
+
+  &-content {
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 1200px;
+    margin: 0 auto;
+  }
+
+  .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-left: auto;
+
+    .toLogin {
+      color: #00a98f;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      &-item {
+        padding: 0 12px;
+        border-right: 1px solid #e5e5e5;
+
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+  }
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/components/WebLayout/topbar.tsx

+import React from 'react';
+import styles from './topbar.less';
+
+const TopBar = () => {
+  const rightLayoutList = [
+    { title: '免费注册' },
+    { title: '会员中心' },
+    { title: '我的消息' },
+    { title: '客户服务' }
+  ]
+
+  return (
+    <div className={styles.topBar}>
+      <div className={styles['topBar-content']}>
+        <div>
+          <div>瓴犀企业商城</div>
+        </div>
+        <div className={styles.right}>
+          <div className={styles.toLogin}>你好，请登录</div>
+          <div className={styles.list}>
+            {
+              rightLayoutList.map((_item, _key) => {
+                return (
+                  <div className={styles['list-item']} key={_key}>{_item.title}</div>
+                )
+              })
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopBar

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/index.less

+.container {
+  height: 100%;
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/WebDesignPanel/index.tsx

+import React from 'react';
+import { PageConfigType } from '@linkseeks/design-core';
+// import MobileUIDemo from './mobileUIDemo'
+import { BrickPreview, useSelector, BrickDesign } from '@linkseeks/design-react';
+
+import styles from './index.less';
+
+interface WebDesignPanelPropsType {
+  theme: string,
+  isPreview?: boolean,
+}
+
+const WebDesignPanel: React.FC<WebDesignPanelPropsType> = (props) => {
+  const { theme, isPreview } = props;
+  const { pageConfig } = useSelector(['pageConfig']);
+  const Component = isPreview ? BrickPreview : BrickDesign;
+
+  return (
+    <div className={styles.container}>
+      <Component
+        pageName={"index"}
+        initState={{ pageConfig }}
+        themeName={theme}
+      />
+    </div>
+  );
+};
+
+WebDesignPanel.defaultProps = {
+  isPreview: false
+};
+
+export default WebDesignPanel;

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/index.tsx

@@ -101,9 +101,9 @@ const Fixtures = () => {
       }
     });
     const { data, code } = await postTemplateWebActivityPageAdorn({
-      id: id,
+      id: +id,
       adornContent: result
-    });
+    } as any);
     setSubmitLoading(false);
     if (code === 1000) {
       history.goBack();

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/web.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;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  .page {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    background-color: #F2F3F5;
+
+
+    .tree {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 300px;
+      overflow-y: auto;
+      background: #fff;
+      height: calc(100vh - 64px);
+      z-index: 88;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: row;
+      height: calc(100vh - 64px);
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+
+      .contentPanel {
+        width: 1920px;
+        // height: 1800px;
+        position: relative;
+        // min-width: calc(100vw - 300px - 32px - 300px);
+
+        .screen {
+          width: 1920px;
+          height: 100%;
+          // height: 1200px;
+          transform-origin: 0 0 0;
+          transform: scale(1);
+          margin: 0 auto;
+          position: absolute;
+          top: 0;
+          left: 300px;
+        }
+      }
+    }
+
+    .right {
+      width: 300px;
+      height: calc(100vh - 64px);
+      position: fixed;
+      top: 48px;
+      right: 0px;
+      background-color: #fff;
+    }
+  }
+
+
+}

src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/web.tsx

+import React, { useState } from 'react';
+import { message, Spin } from 'antd'
+import { BrickProvider, ModuleTree } from '@linkseeks/design-react';
+import Toolbar from './components/Toolbar';
+import styles from './web.less';
+import { useIntl } from 'umi';
+import ToolbarSubmit from './components/Toolbar/toolbarSubmit';
+import useGetLayout from './common/hooks/useGetLayout';
+import configs from './common/configs/pageConfigs';
+import WebDesignPanel from './components/WebDesignPanel';
+import useGetWebLayoutBack from './common/hooks/useGetWebLayoutBack';
+
+const Web = () => {
+  // const getDragProps = useDrag();
+  // console.log(getDragProps);
+  // const { detail, loading } = useGetLayout();
+  const { loading } = useGetWebLayoutBack();
+  const [submitLoading, setSubmitLoading] = useState<boolean>(false);
+  const intl  = useIntl();
+  const onSave = () => {
+
+  }
+  return (
+    <Spin spinning={loading}>
+      <BrickProvider
+        config={configs}
+        warn={(msg: string) => {
+          message.warning(msg);
+        }}
+      >
+        <div className={styles['wrapper']}>
+          <Toolbar
+            title={intl.formatMessage({ id: 'activityPage.editingShopActivityPage' })}
+            extra={
+              <ToolbarSubmit
+                loading={submitLoading}
+                onSubmit={onSave}
+              >
+              { intl.formatMessage({ id: 'activePage.save'}) }
+              </ToolbarSubmit>
+            }
+          />
+          <div className={styles.page}>
+            <div className={styles.tree}>
+              <ModuleTree />
+            </div>
+            <div className={styles['content']}>
+              <div className={styles.contentPanel} >
+                <div className={styles.screen}>
+                  <WebDesignPanel theme={'theme-mall-science'} />
+                </div>
+              </div>
+            </div>
+            {/* <div className={styles.right}>
+
+            </div> */}
+          </div>
+
+
+        </div>
+
+      </BrickProvider>
+    </Spin>
+  )
+}
+
+export default Web;