Skip to content

J
jinfa-platform
Commit 6e2f93c2 authored by Bill's avatar Bill
Browse files
Options

fix: 完善pc装修页

parent 2f992165
Hide whitespace changes
Inline Side-by-side
Showing with 552 additions and 291 deletions
config/routes/marketingRoute/activityManagementRoute.ts
View file @ 6e2f93c2
......@@ -43,6 +43,16 @@ export const activityPagesRoute = [
noLayout: true,
hideInMenu: true,
},
/** 装修营销活动页WEB */
{
path: '/memberCenter/marketingAbility/activityPages/management/webFixtures',
name: '营销活动页管理装修',
component: '@/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/web',
hidePageHeader: true,
noMargin: true,
noLayout: true,
hideInMenu: true,
},
]
},
];
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/components/ActivityItem/index.less
View file @ 6e2f93c2
......@@ -18,18 +18,25 @@
.infoContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-direction: column;
// justify-content: space-between;
// align-items: center;
flex: 1;
.header {
color: #303133;
font-size: 16px;
line-height: 16px;
margin-bottom: @marginBottom;
display: flex;
flex-direction: row;
}
.info {
.header {
color: #303133;
font-size: 16px;
line-height: 16px;
margin-bottom: @marginBottom;
}
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.tags {
margin-bottom: @marginBottom;
}
......@@ -46,6 +53,21 @@
margin-right: 24px;
}
}
.fixture {
display: flex;
flex-direction: row;
padding: 8px 12px;
justify-content: center;
align-items: center;
background: #F4F5F7;
color: #000;
border-radius: 4px;
img {
width: 16px;
height: 16px;
margin-right: 8px;
}
}
}
}
......@@ -54,13 +76,22 @@
// margin-right: 104px;
}
.delete {
background: #F4F5F7;
color: #000;
border-radius: 4px;
padding: 8px 12px;
}
.copyLink {
height: 32px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #d9d9d9;
background: #F4F5F7;
border-radius: 4px;
border: none;
:global {
.ant-typography {
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/components/ActivityItem/index.tsx
View file @ 6e2f93c2
import { useIntl, Link } from 'umi';
import React from 'react';
import { CopyOutlined, DeleteOutlined, EditOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { Button, Space, Popconfirm, Typography } from 'antd';
import { Button, Space, Popconfirm, Typography, Switch } from 'antd';
import moment from 'moment';
import styles from './index.less';
import { enumName, WEB } from '@/constants/environment';
import StatusTag from '@/components/StatusTag';
import fixture from '@/assets/activity/fixture.png'
const { Paragraph } = Typography;
interface Iprops {
templatePicUrl?: string,
......@@ -24,18 +26,36 @@ interface Iprops {
onChangeStatus: ((id: number, status: number) => void )| null
}
const APP_FIXTURE_LINK = `/memberCenter/marketingAbility/activityPages/management/fixtures`
const WEB_FIXTURE_LINK = `/memberCenter/marketingAbility/activityPages/management/webFixtures`
const PENDIGN_ONLINE = 1;
const ONLINE = 2;
const IN_PROGRESS = 3;
/** 下线 */
const OFFLINE = 4;
/** 借宿 */
const END = 5;
const format = 'YYYY-MM-DD HH:mm:ss';
const ActiveItem: React.FC<Iprops> = (props: Iprops) => {
const intl = useIntl();
const { title, templateName, shopName, startTime, endTime, statusName, templatePicUrl, id, onRemove, status, onChangeStatus, environment } = props;
const {
title,
templateName,
shopName,
startTime,
endTime,
statusName,
templatePicUrl,
id,
onRemove,
status,
onChangeStatus,
environment
} = props;
const handleRemove = () => {
onRemove?.(id);
......@@ -48,7 +68,7 @@ const ActiveItem: React.FC<Iprops> = (props: Iprops) => {
[ONLINE]: 0,
[IN_PROGRESS]: 0,
[OFFLINE]: 1,
};
} as const;
onChangeStatus?.(id, statusMap[status]);
};
......@@ -56,56 +76,69 @@ const ActiveItem: React.FC<Iprops> = (props: Iprops) => {
<div className={styles.section}>
<img className={styles.image} src={templatePicUrl} />
<div className={styles.infoContainer}>
<div className={styles.info}>
<div className={styles.header}>
<Link to={`/memberCenter/marketingAbility/activityPages/management/view?id=${id}`}>{title}</Link></div>
<div className={styles.tags}>
<Space>
<StatusTag type="default" title={templateName} />
<StatusTag type="warning" title={enumName[environment] || ''} />
</Space>
<div className={styles.header}>
<Link to={`/memberCenter/marketingAbility/activityPages/management/edit?id=${id}`}>{title}</Link>
<div className={styles.status}>
<StatusTag type="success" title={statusName} />
</div>
<div className={styles.mall}>
<span className={styles.label}>{intl.formatMessage({ id: 'activityPage.suitMark' })}：</span>
<span>{shopName}</span>
</div>
<div className={styles.info}>
<div>
<div className={styles.tags}>
<Space>
<StatusTag type="default" title={templateName} />
<StatusTag type="warning" title={enumName[environment] || ''} />
</Space>
</div>
<div className={styles.mall}>
<span className={styles.label}>{intl.formatMessage({ id: 'activityPage.suitMark' })}：</span>
<span>{shopName}</span>
</div>
<div className={styles.time}>
<span className={styles.startTime}>{intl.formatMessage({ id: 'activityPage.StartValidityPeriod' })}：{startTime && moment(startTime).format(format)}</span>
<span>{intl.formatMessage({ id: 'activityPage.endValidityPeriod' })}：{endTime && moment(endTime).format(format)}</span>
</div>
</div>
<div className={styles.time}>
<span className={styles.startTime}>{intl.formatMessage({ id: 'activityPage.StartValidityPeriod' })}：{startTime && moment(startTime).format(format)}</span>
<span>{intl.formatMessage({ id: 'activityPage.endValidityPeriod' })}：{endTime && moment(endTime).format(format)}</span>
<div>
<Space size={16}>
{
environment === WEB && status !== END && (
<div className={styles.copyLink}>
<Paragraph copyable={{ text: `http://b2b.lingxidev.com/activity/${id}` }} />
</div>
)
}
{
[PENDIGN_ONLINE, OFFLINE].includes(status) && (
// <Link to={`/memberCenter/marketingAbility/activityPages/management/edit?id=${id}`}>
<Link to={`${environment === WEB ? WEB_FIXTURE_LINK : APP_FIXTURE_LINK}?id=${id}`}>
{/* <Button icon={<EditOutlined />}></Button> */}
<div className={styles.fixture}>
<img src={fixture}/>
<div>活动页装修</div>
</div>
</Link>
) || null
}
{
status === PENDIGN_ONLINE && (
<Popconfirm placement="topLeft" title={intl.formatMessage({ id: 'activityPage.ifConfirmDelete' })} onConfirm={handleRemove} okText={intl.formatMessage({ id: 'common.button.confirm' })} cancelText={intl.formatMessage({ id: 'common.button.cancel' })}>
<div className={styles.delete}>
<DeleteOutlined />
</div>
</Popconfirm>
)
}
{
status !== END && (
<Switch checked={status === ONLINE || status === IN_PROGRESS} onChange={handleChangeStatus} />
// <Button onClick={handleChangeStatus} icon={<PlayCircleOutlined />} type={ status === 1 ? 'primary' : 'default' }>{statusName}</Button>
) || null
}
</Space>
</div>
</div>
<Space size={16}>
<div className={styles.status}>
<StatusTag type="success" title={statusName} />
</div>
{
environment === WEB && (
<div className={styles.copyLink}>
<Paragraph copyable={{ text: `http://b2b.lingxidev.com:6002/activity/${id}` }} />
</div>
)
}
{
[PENDIGN_ONLINE, OFFLINE].includes(status) && (
<Link to={`/memberCenter/marketingAbility/activityPages/management/edit?id=${id}`}>
<Button icon={<EditOutlined />}></Button>
</Link>
) || null
}
{
status === PENDIGN_ONLINE && (
<Popconfirm placement="topLeft" title={intl.formatMessage({ id: 'activityPage.ifConfirmDelete' })} onConfirm={handleRemove} okText={intl.formatMessage({ id: 'common.button.confirm' })} cancelText={intl.formatMessage({ id: 'common.button.cancel' })}>
<Button icon={<DeleteOutlined />}></Button>
</Popconfirm>
)
}
{
status !== END && (
<Button onClick={handleChangeStatus} icon={<PlayCircleOutlined />} type={ status === 1 ? 'primary' : 'default' }>{statusName}</Button>
) || null
}
</Space>
</div>
</div>
);
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/configs/webSchema.tsx
View file @ 6e2f93c2
......@@ -65,6 +65,13 @@ const WebCommodity = {
}
}
const WebCustomCommodity = {
propsConfig: {
title: PROPS_TYPES.string,
children: PROPS_TYPES.objectArray
}
}
export default {
WebLayout,
WebAdvertise,
......@@ -73,5 +80,6 @@ export default {
WebCouponContainer,
WebCoupon,
WebCommodityContainer,
WebCommodity
WebCommodity,
WebCustomCommodity
}
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/hooks/useGetWebLayout.tsx
View file @ 6e2f93c2
......@@ -85,7 +85,7 @@ const COMPONENT_NAME = {
preSale: "WebCommodityContainer",
setMeal: "WebCommodityContainer",
attempt: "WebCommodityContainer",
suggestProduct: "WrapCommodityList",
suggestProduct: "WebCustomCommodity",
};
/** key 对应子节点ComponentName */
......@@ -111,7 +111,7 @@ const CHILD_COMPONENT_NAME = {
preSale: "WebCommodity",
setMeal: "CommodityList.CommodityTab",
attempt: "WebCommodity",
suggestProduct: "CommodityList",
suggestProduct: "WebCommodityContainer",
};
/**
......@@ -245,12 +245,13 @@ function useGetWebLayout() {
const props = _row.key === 'top' ? {
imageUrl: currentProps.imageUrl
} : {
visible: currentProps.visible ?? true,
status: currentProps.visible ?? true,
theme: currentProps.theme || 0,
title: currentProps.title,
};
const suggestProductSonProps = _row.key === 'suggestProduct' ? {
childComponentName: `CommodityList.Item`,
childComponentName: `WebCommodity`,
hideAction: true,
addBtnText: `${intl.formatMessage({ id: 'marketingAbility.tianjiashangpinjiedian'})}`,
childProps: {
otherProps: {
......@@ -269,9 +270,12 @@ function useGetWebLayout() {
},
};
let tempConfig = {
hideAction: true,
componentName: COMPONENT_NAME[_row.key],
title: title[_row.key] || currentProps.title,
props: props,
props: {
...props,
},
otherProps: {
type: _row.key
},
......@@ -310,7 +314,7 @@ function useGetWebLayout() {
const keyNum = `${startKey}-${++_index}`;
childNodesKeys.push(keyNum);
const suggestConfig = {
componentName: 'CommodityList',
componentName: 'WebCommodityContainer',
title: _item.title,
props: {
title: _item.title,
......@@ -320,7 +324,7 @@ function useGetWebLayout() {
type: _row.key
},
childNodes: [],
childComponentName: `CommodityList.Item`,
childComponentName: `WebCommodity`,
addBtnText: `${intl.formatMessage({ id: 'marketingAbility.tianjiazijiedian'})}`,
childProps: {
otherProps: {
......@@ -339,7 +343,7 @@ function useGetWebLayout() {
const sonKeyNum = `${keyNum}-${_itemIndex + 1}`;
suggestSonKeys.push(sonKeyNum);
const sonConfig = {
componentName: `CommodityList.Item`,
componentName: `WebCommodity`,
title: _item?.productName || _item.name,
props: {
..._item,
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/common/hooks/useGetWebLayoutBack.tsx deleted 100644 → 0
View file @ 2f992165
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: [],
otherProps: {
type: 'top'
},
},
2: {
componentName: 'WebHotCommoditySwiper',
title: '每日推荐',
props: {},
childNodes: ['2-1', '2-2', '2-3', '2-4', '2-5'],
otherProps: {
type: 'hot'
},
},
'2-1': {
componentName: 'WebHotCommodityItem',
title: '每日推荐',
props: {},
childNodes: [],
otherProps: {
type: 'hotItem'
},
},
'2-2': {
componentName: 'WebHotCommodityItem',
title: '每日推荐',
props: {},
childNodes: [],
otherProps: {
type: 'hotItem'
},
},
'2-3': {
componentName: 'WebHotCommodityItem',
title: '每日推荐',
props: {},
childNodes: [],
},
'2-4': {
componentName: 'WebHotCommodityItem',
title: '每日推荐',
props: {},
childNodes: [],
},
'2-5': {
componentName: 'WebHotCommodityItem',
title: '每日推荐',
props: {},
childNodes: [],
otherProps: {
type: 'hotItem'
},
},
3: {
componentName: 'WebCouponContainer',
title: '优惠券',
props: {},
childNodes: ['3-1', '3-2'],
otherProps: {
type: 'coupon'
},
},
'3-1': {
componentName: 'WebCoupon',
title: '商品',
props: {},
childNodes: [],
otherProps: {
type: 'couponItem'
},
},
'3-2': {
componentName: 'WebCoupon',
title: '商品',
props: {},
childNodes: [],
otherProps: {
type: 'coupon'
},
},
4: {
componentName: 'WebCommodityContainer',
title: '商品',
props: {},
childNodes: ['4-1', '4-2', '4-3', '4-4', '4-5'],
otherProps: {
type: 'fullSwap'
},
},
'4-1': {
componentName: 'WebCommodity',
title: '商品',
props: {},
childNodes: [],
otherProps: {
type: 'fullSwapItem'
},
},
'4-2': {
componentName: 'WebCommodity',
title: '商品',
props: {},
childNodes: [],
otherProps: {
type: 'fullSwapItem'
},
},
'4-3': {
componentName: 'WebCommodity',
title: '商品',
props: {},
childNodes: [],
otherProps: {
type: 'fullSwapItem'
},
},
'4-4': {
componentName: 'WebCommodity',
title: '商品',
props: {},
childNodes: [],
otherProps: {
type: 'fullSwapItem'
},
},
'4-5': {
componentName: 'WebCommodity',
title: '商品',
props: {},
childNodes: [],
otherProps: {
type: 'fullSwapItem'
},
},
// 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/common/mock/web.json
View file @ 6e2f93c2
......@@ -44,7 +44,7 @@
"sort":4,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"直降促销",
"childrenData": []
}
......@@ -53,7 +53,7 @@
"sort":6,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"折扣促销",
"childrenData": []
}
......@@ -62,7 +62,7 @@
"sort":7,
"props": {
"theme":1,
"visible": false,
"visible": true,
"title":"满量促销--满量减",
"childrenData": []
}
......@@ -71,7 +71,7 @@
"sort":8,
"props": {
"theme":1,
"visible": false,
"visible": true,
"title":"满量促销--满量折",
"childrenData": []
}
......@@ -80,7 +80,7 @@
"sort":9,
"props": {
"theme":1,
"visible": false,
"visible": true,
"title":"满额促销--满额减",
"childrenData": []
}
......@@ -89,7 +89,7 @@
"sort":10,
"props": {
"theme":1,
"visible": false,
"visible": true,
"title":"满额促销--满额折",
"childrenData": []
}
......@@ -98,7 +98,7 @@
"sort":11,
"props": {
"theme":3,
"visible": false,
"visible": true,
"title":"赠送促销--赠送商品(满额赠+买商品赠)",
"childrenData":[]
}
......@@ -107,7 +107,7 @@
"sort":12,
"props": {
"theme": 4,
"visible": false,
"visible": true,
"title":"赠送促销--赠送优惠劵(满额赠+买商品赠)",
"childrenData":[]
}
......@@ -116,7 +116,7 @@
"sort":13,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"多件促销",
"childrenData": []
}
......@@ -125,7 +125,7 @@
"sort":14,
"props": {
"theme": 2,
"visible": false,
"visible": true,
"title":"组合促销",
"childrenData": []
}
......@@ -134,7 +134,7 @@
"sort":15,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"拼团",
"childrenData":[]
}
......@@ -143,7 +143,7 @@
"sort":16,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"砍价",
"childrenData":[]
}
......@@ -152,7 +152,7 @@
"sort":17,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"秒杀",
"childrenData": []
}
......@@ -161,7 +161,7 @@
"sort":18,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"换购-满额换购",
"childrenData":[]
}
......@@ -170,7 +170,7 @@
"sort":19,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"换购-买商品换购",
"childrenData":[]
}
......@@ -179,7 +179,7 @@
"sort": 20,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"预售",
"childrenData":[]
}
......@@ -197,7 +197,7 @@
"sort":22,
"props": {
"theme":0,
"visible": false,
"visible": true,
"title":"试用",
"childrenData":[]
}
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/ComponentTree/web.tsx 0 → 100644
View file @ 6e2f93c2
import React, { useMemo } from 'react';
import { useSelector } from '@linkseeks/design-react';
import { addChildComponent, changeProps, deleteComponentByKey } from '@linkseeks/design-core';
import ComponentModule from './ComponentModule';
import { Switch } from 'antd'
import styles from './index.less';
import attemptImg from '@/assets/activity/attempt.png';
import bargainImg from '@/assets/activity/bargain.png';
import buySwapImg from '@/assets/activity/buySwap.png';
import combinationImg from '@/assets/activity/combination.png';
import fullMoneyDiscountImg from '@/assets/activity/fullMoneyDiscount.png';
import fullMoneySubImg from '@/assets/activity/fullMoneySub.png';
import fullQuantityDiscountImg from '@/assets/activity/fullQuantityDiscount.png';
import fullQuantitySubImg from '@/assets/activity/fullQuantitySub.png';
import fullSwapImg from '@/assets/activity/fullSwap.png';
import giveProductImg from '@/assets/activity/giveProduct.png';
import groupPurchaseImg from '@/assets/activity/groupPurchase.png';
import morePieceImg from '@/assets/activity/morePiece.png';
import plummetImg from '@/assets/activity/plummet.png';
import preSaleImg from '@/assets/activity/preSale.png';
import secKillImg from '@/assets/activity/secKill.png';
import setMealImg from '@/assets/activity/setMeal.png';
import discountImg from '@/assets/activity/discount.png';
import specialOfferImg from '@/assets/activity/specialOffer.png';
import giveCouponImg from '@/assets/activity/giveCoupon.png';
const ACTIVITYS = [
"specialOffer",
"plummet",
"discount",
"fullQuantitySub",
"fullQuantityDiscount",
"fullMoneySub",
"fullMoneyDiscount",
"giveProduct",
"giveCoupon",
"morePiece",
"combination",
"groupPurchase",
"bargain",
"secKill",
"fullSwap",
"buySwap",
"preSale",
"setMeal",
"attempt"
] as const;
const ACTIVITYS_MAP = {
"specialOffer": {
title: '特价促销',
image: specialOfferImg
},
"plummet": {
title: '直降促销',
image: plummetImg
},
"discount": {
title: '折扣促销',
image: discountImg
},
"fullQuantitySub": {
title: '满量促销--满量减"',
image: fullQuantitySubImg
},
"fullQuantityDiscount": {
title: '满量促销--满量折',
image: fullQuantityDiscountImg
},
"fullMoneySub": {
title: '满额促销--满额减',
image: fullMoneySubImg
},
"fullMoneyDiscount": {
title: '满额促销--满额折"',
image: fullMoneyDiscountImg
},
"giveProduct": {
title: '赠送促销--赠送商品',
image: giveProductImg
},
"giveCoupon": {
title: '赠送促销--赠送优惠劵',
image: giveCouponImg
},
"morePiece": {
title: '多件促销',
image: morePieceImg
},
"combination": {
title: '组合促销',
image: combinationImg
},
"groupPurchase": {
title: '拼团',
image: groupPurchaseImg
},
"bargain": {
title: '砍价',
image: bargainImg
},
"secKill": {
title: '秒杀',
image: secKillImg
},
"fullSwap": {
title: '换购-满额换购',
image: fullSwapImg
},
"buySwap": {
title: '换购-买商品换购',
image: buySwapImg
},
"preSale": {
title: '预售',
image: preSaleImg
},
"setMeal": {
title: '套装',
image: setMealImg
},
"attempt": {
title: '试用',
image: attemptImg
}
} as const;
type ModuleType = {
// title: string,
// visible: boolean,
// dataIndex: string,
treeKey: string,
}
type Turple<T extends readonly string[], P> = {
[key in T[number]]: P
}
const WebComponentModule = () => {
const { pageConfig } = useSelector(['pageConfig']);
console.log("pageConfig", pageConfig)
const modules = useMemo(() => {
const config = pageConfig;
const res: Turple<typeof ACTIVITYS, ModuleType> = {} as Turple<typeof ACTIVITYS, ModuleType>;
Object.keys(config).forEach((_item) => {
const { props = {} } = config[_item];
const dataIndex = config[_item]?.otherProps?.type;
if (ACTIVITYS.includes(dataIndex)) {
// const visible = props.visible ?? true
res[dataIndex] = {
treeKey: _item
}
}
});
return res;
}, [pageConfig]);
// const onModuleVisibleChange = (checked: boolean, option) => {
// const props = pageConfig[option.treeKey];
// changeProps({
// treeKey: option.treeKey,
// props: {
// ...props,
// visible: checked
// }
// });
// };
const handleChange = (isChecked: boolean, _item: keyof typeof ACTIVITYS_MAP) => {
console.log(modules, (isChecked), "_item", _item)
if (!isChecked) {
deleteComponentByKey({
key: modules[_item].treeKey,
parentKey: '0',
parentPropName: ''
})
return;
}
const newKey = Object.keys(pageConfig).length + 1
addChildComponent({
newKey: `${newKey}`,
componentName: 'WebCommodityContainer',
parentPropName: '',
parentKey: '0',
childProps: {
addBtnText: "添加子节点",
canDelete: false,
childComponentName: "WebCommodity",
childNodes: [],
childProps: {
otherProps: {
type: `${_item}Item`
}
},
otherProps: {type: _item},
props: {visible: true, theme: 0, title: ACTIVITYS_MAP[_item].title},
title: ACTIVITYS_MAP[_item].title,
}
})
}
return (
<div className={styles.module}>
{
Object.keys(ACTIVITYS_MAP).map((_item: keyof typeof ACTIVITYS_MAP) => {
// const { visible, title, dataIndex } = _item;
const { title, image } = ACTIVITYS_MAP[_item]
const isChecked = modules[_item] ? true : false
return (
<div className={styles.moduleItem} key={_item}>
<div style={{ height: '160px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<img style={{width: '24px', height: '24px'}} src={image} />
<div style={{margin: '8px 0'}}>{title}</div>
<div>
<Switch size="small" checked={isChecked} onChange={() => handleChange(!isChecked, _item)} />
</div>
</div>
</div>
);
})
}
</div>
);
};
export default WebComponentModule;
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCommodity/index.tsx
View file @ 6e2f93c2
......@@ -8,6 +8,8 @@ import classNames from 'classnames'
interface Iprops {
title: string,
children: React.ReactNode,
/** 控制显示隐藏 */
status: boolean,
/** 以下是装修容器提供的属性 */
className: string,
onMouseOver: () => void,
......@@ -15,12 +17,17 @@ interface Iprops {
}
const WebCommodityContainer: React.FC<Iprops> = (props: Iprops) => {
const { title, children, className, onMouseOver, onClick } = props;
const { title, children, className, onMouseOver, onClick, status } = props;
const visible = status ?? true
const designProps = {
onMouseOver,
onClick
}
if (!visible) {
return null;
}
const renderChildren = () => {
return React.Children.map(children, (_child: any, _index) => {
return (
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCommodity/item.tsx
View file @ 6e2f93c2
......@@ -22,7 +22,9 @@ type ActivityListType = {
type ProductType = GetMarketingAdornMerchantActivityListAdornResponseDetail['goodsList'][0] & {
hasSold: number,
activityList: ActivityListType[]
activityList: ActivityListType[],
/** 自定义标签 */
label: string[]
}
......@@ -46,15 +48,17 @@ const WebCommodity: React.FC<Iprops> = (props: Iprops) => {
}
const renderLabels = () => {
const labels = productData.activityList.map((_item: ActivityListType) => _item.label).concat(productData.label).filter(Boolean);
console.log(labels);
return (
<div className={styles['commodity-info-tags']}>
{
productData.activityList.map((_item: ActivityListType) => {
labels.map((_item: string, key: number) => {
return (
<div className={styles['commodity-info-tags-item']} key={_item.id}>
<div className={styles['commodity-info-tags-item']} key={`${_item}_${key}`}>
<CustomizeTag
type={'danger'}
name={_item.label}
name={_item}
/>
</div>
)
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCoupon/webCouponContainer.tsx
View file @ 6e2f93c2
......@@ -7,6 +7,7 @@ import classNames from 'classnames';
interface Iprops {
title: string,
children: React.ReactNode,
status: boolean,
/** 以下是装修容器提供的属性 */
className: string,
onMouseOver: () => void,
......@@ -14,12 +15,17 @@ interface Iprops {
}
const WebCouponContainer: React.FC<Iprops> = (props: Iprops) => {
const { title, children, className, onMouseOver, onClick } = props;
const { title, children, className, onMouseOver, onClick, status } = props;
const visible = status
const designProps = {
onMouseOver,
onClick
}
if (!visible) {
return null
}
const renderChildren = () => {
return React.Children.map(children, (_child: any, _index) => {
return (
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebCustomCommodity/index.tsx 0 → 100644
View file @ 6e2f93c2
import React, { useState } from 'react';
import cx from 'classnames';
import { Tooltip } from 'antd';
import { getIntl } from 'umi'
const intl = getIntl();
interface Iprops {
children: React.ReactNode
/** 以下是装修容器提供的属性 */
className: string,
onMouseOver: () => void,
onClick: () => void
}
const WebCustomCommodity: React.FC<Iprops> = (props: Iprops) => {
// const intl = useIntl();
const { children, className, ...other } = props;
const classNameStr = cx(className);
const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState } = other as any;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver,
};
const renderComponent = () => {
return (
<div>
{
React.Children.map(children, (_child: any) => {
if (_child) {
return React.cloneElement(_child, {title: '', ..._child?.props || {}});
}
return null;
})
}
</div>
);
};
return (
<Tooltip placement="topLeft" title={intl.formatMessage({ id: 'activityPage.customArea' })} arrowPointAtCenter>
<div className={classNameStr} style={{width: '1200px', margin: '0 auto', minHeight: '50px'}} {...divProps}>
{
renderComponent()
}
</div>
</Tooltip>
);
};
export default WebCustomCommodity;
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WebHotCommoditySwiper/index.tsx
View file @ 6e2f93c2
......@@ -9,6 +9,8 @@ import classNames from 'classnames';
interface Iprops {
title: string,
children: React.ReactNode,
/** 控制显示隐藏 */
status: boolean
/** 以下是装修容器提供的属性 */
className: string,
onMouseOver: () => void,
......@@ -21,14 +23,19 @@ const SCREEN_WIDTH = 1200;
const OFFSET_WIDTH = 16
const HotCommoditySwiper: React.FC<Iprops> = (props: Iprops) => {
const { title, children, className, onMouseOver, onClick } = props;
const { title, children, className, onMouseOver, onClick, status } = props;
const count = React.Children.count(children)
const visible = status;
const { current, onPrev, onNext } = useSwiper({ count: count });
const designProps = {
onMouseOver,
onClick
}
if (!visible) {
return null;
}
const renderChildren = () => {
return React.Children.map(children, (_child: any, _index) => {
return (
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Layouts/index.tsx
View file @ 6e2f93c2
......@@ -13,6 +13,7 @@ import WebCoupon from './WebCoupon';
import WebCouponContainer from './WebCoupon/webCouponContainer';
import WebCommodityContainer from './WebCommodity';
import WebCommodity from './WebCommodity/item'
import WebCustomCommodity from './WebCustomCommodity';
export default {
Advertisement,
......@@ -27,5 +28,6 @@ export default {
WebCouponContainer,
WebCoupon,
WebCommodityContainer,
WebCommodity
WebCommodity,
WebCustomCommodity
};
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/components/Toolbar/index.tsx
View file @ 6e2f93c2
......@@ -48,7 +48,11 @@ const Toolbar: React.FC<Iprops> = (props: Iprops) => {
<div className={styles.title}>
{title}
</div>
<Color onChange={handleChangeColor} color={color} />
{
color && (
<Color onChange={handleChangeColor} color={color} />
)
}
<div className={styles.extra}>{extra}</div>
</div>
);
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/web.less
View file @ 6e2f93c2
......@@ -36,6 +36,7 @@
.module-tree {
position: relative;
height: 100%;
overflow: auto;
.expand-icon {
position: absolute;
......@@ -67,18 +68,27 @@
// background-color: yellow;
z-index: 4;
.screen-view-inner {
width: 2800px;
height: 1600px;
height: 100%;
width: 100%;
// width: 2800px;
// height: 1600px;s
position: relative;
}
.screen-view-content {
width: 1920px;
height: 100%;
height: 1600px;
// height: 100%;
background-color: #ccc;
position: absolute;
left: 300px;
top: 68px;
top: 50px;
left: 310px;
right: 400px;
transform: scale(0.65);
// position: absolute;
// left: 50%;
// top: 50%;
transform-origin: 0 0;
}
}
......
src/pages/transaction/marketingAbility/marketingActivitiesManagement/activePage/fixtures/web.tsx
View file @ 6e2f93c2
import React, { useRef, useState } from 'react';
import { message, Spin } from 'antd'
import { message, Spin, Tabs } from 'antd'
import { BrickProvider, ModuleTree } from '@linkseeks/design-react';
import className from 'classnames'
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
......@@ -18,12 +18,15 @@ import WebScale from './components/WebScale';
import { omit, pick } from 'lodash';
import { usePageStatus } from '@/hooks/usePageStatus';
import { postTemplateWebActivityPageAdorn } from '@/services/TemplateV2Api';
import Module from './components/ComponentTree/web';
const TabPane = Tabs.TabPane
const Web = () => {
const el = useRef<HTMLDivElement>(null);
useDraggable(el);
// useDraggable(el);
const { id } = usePageStatus();
const [scale, setScale] = useState(0.75);
// const [scale, setScale] = useState(0.75);
const [leftBarVisible, setLeftBarVisible] = useState<boolean>(true);
const { detail, loading } = useGetWebLayout();
......@@ -68,7 +71,8 @@ const Web = () => {
result = generaterData(result, dataIndex, {
sort: sort,
props: {
...pick(props, ['theme', 'visible']),
...pick(props, ['theme']),
visible: props.status ?? true,
childrenData: childrenData
}
});
......@@ -82,7 +86,8 @@ const Web = () => {
result = generaterData(result, dataIndex, {
sort: sort,
props: {
...pick(otherProps, ['theme', 'visible', 'title']),
...pick(otherProps, ['theme', 'title']),
visible: props.status ?? true,
childrenData: childrenData
}
});
......@@ -92,7 +97,7 @@ const Web = () => {
const temp = {
sort: sort,
props: {
visible: true,
visible: otherProps.status ?? true,
childrenData: childNodes?.filter((_record) => /\d+-\d+/.test(_record)).map((_row) => {
const childrenNodeTarget = pageConfig[_row];
const { ...childRestProps } = childrenNodeTarget?.props;
......@@ -122,7 +127,6 @@ const Web = () => {
}
}
}
const { data, code } = await postTemplateWebActivityPageAdorn({
id: +id,
adornContent: withThemeStyle
......@@ -133,9 +137,9 @@ const Web = () => {
}
}
const onChangeScale = (value: number) => {
setScale(value);
}
// const onChangeScale = (value: number) => {
// setScale(value);
// }
return (
<Spin spinning={loading}>
......@@ -159,19 +163,40 @@ const Web = () => {
}
/>
</div>
<div className={className(styles.leftBar, {
[styles['left-bar-show']]: leftBarVisible
})}>
<div
className={className(styles.leftBar, {
[styles['left-bar-show']]: leftBarVisible
})}
>
<div className={styles['module-tree']}>
<ModuleTree />
<div className={styles['expand-icon']} onClick={() => setLeftBarVisible(!leftBarVisible)}>
<Tabs >
<TabPane tab={intl.formatMessage({ id: 'activityPage.alreadyAdd' })} key="1">
<ModuleTree />
</TabPane>
<TabPane tab={intl.formatMessage({ id: 'activityPage.allModules' })} key="2">
<div className={styles.module}>
<Module />
</div>
</TabPane>
</Tabs>
{/* <ModuleTree /> */}
{/* <div className={styles['expand-icon']} onClick={() => setLeftBarVisible(!leftBarVisible)}>
{leftBarVisible ? <LeftOutlined /> : <RightOutlined />}
</div>
</div> */}
</div>
</div>
<div className={styles['screen-view']} ref={el}>
<div className={styles['screen-view-inner']} >
<div className={styles['screen-view-content']} style={{transform: `scale(${scale})`}}>
<div
className={styles['screen-view-content']}
// style={
// {
// transform: `scale(${scale})`,
// marginLeft: `-${(SCREEN_VIEW_WIDTH * scale) / 2}px`,
// marginTop: `-${(1600 * scale) / 2}px`
// }
// }
>
<WebDesignPanel theme={'theme-mall-science'} />
</div>
</div>
......@@ -181,7 +206,7 @@ const Web = () => {
<WebEditPanel />
</RenovationProvider>
</div>
<WebScale scaleValue={scale as 0.75} onChange={onChangeScale} />
{/* <WebScale scaleValue={scale as 0.75} onChange={onChangeScale} /> */}
</div>
</BrickProvider>
</Spin>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment