Commit e578bcdf authored by 前端-许佳敏's avatar 前端-许佳敏
parents 2cfb8c6a 494d5a58
registry="http://npm.shushangyun.com"
registry = "https://registry.npmjs.org/"
@linkseeks:registry="http://npm.shushangyun.com"
......@@ -63,7 +63,7 @@
"@linkseeks/design-core": "^1.0.0",
"@linkseeks/design-react": "^1.0.2",
"@linkseeks/design-react-web": "^1.0.0",
"@linkseeks/design-ui": "^1.0.9",
"@linkseeks/design-ui": "^1.0.11",
"@linkseeks/design-utils": "^1.0.0",
"@linkseeks/god": "^1.0.0",
"@types/crypto-js": "^4.0.1",
......
......@@ -102,9 +102,9 @@ const CommodityList = {
"CommodityList.SwapProduct": {
propsConfig: {}
},
"CommodityList.CombineSale": {
propsConfig: {}
},
// "CommodityList.CombineSale": {
// propsConfig: {}
// },
"CommodityList.FlashSale": {
propsConfig: {}
}
......
......@@ -6,6 +6,7 @@ import { getTemplateWebActivityPageGet, GetTemplateWebActivityPageGetResponse }
import { usePageStatus } from '@/hooks/usePageStatus';
import { arrayToMap } from '@/utils';
import { getMarketingAdornActivityGoodsAdorn, postMarketingCouponPlatformActivityPageSelectDetail } from '@/services/MarketingV2Api';
import { ACTIVITY_LIST } from '@/constants/const/activity';
type DataSourceItemType = {
sort: number,
......@@ -25,38 +26,38 @@ type DetailType = Omit<GetTemplateWebActivityPageGetResponse, "adornContent"> &
adornContent: DataSourceType
}
/** 请求钱处理 */
const formatData = {
coupon: (data: { id: number, type: 1 | 2 | number & {} }[]) => {
return {
couponList: data.map((_item) => ({
belongType: _item.type,
couponId: _item.id
})).filter((_item) => _item.couponId)
};
},
hot: (data: number[]) => ({ids: data}),
specialOffer: (data: number[]) => ({ids: data}),
plummet: (data: number[]) => ({ids: data}),
discount: (data: number[]) => ({ids: data}),
fullQuantitySub: (data: number[]) => ({ids: data}),
fullQuantityDiscount: (data: number[]) => ({ids: data}),
fullMoneySub: (data: number[]) => ({ids: data}),
fullMoneyDiscount: (data: number[]) => ({ids: data}),
giveProduct: (data: number[]) => ({ids: data}),
giveCoupon: (data: number[]) => ({ids: data}),
morePiece: (data: number[]) => ({ids: data}),
combination: (data: number[]) => ({ids: data}),
groupPurchase: (data: number[]) => ({ids: data}),
bargain: (data: number[]) => ({ids: data}),
secKill: (data: number[]) => ({ids: data}),
fullSwap: (data: number[]) => ({ids: data}),
buySwap: (data: number[]) => ({ids: data}),
preSale: (data: number[]) => ({ids: data}),
setMeal: (data: number[]) => ({ids: data}),
attempt: (data: number[]) => ({ids: data}),
// suggestProductItem: (data: number[]) => ({ids: data.map((_item))}),
};
// /** 请求钱处理 */
// const formatData = {
// coupon: (data: { id: number, type: 1 | 2 | number & {} }[]) => {
// return {
// couponList: data.map((_item) => ({
// belongType: _item.type,
// couponId: _item.id
// })).filter((_item) => _item.couponId)
// };
// },
// hot: (data: number[]) => ({ids: data}),
// specialOffer: (data: number[]) => ({ids: data}),
// plummet: (data: number[]) => ({ids: data}),
// discount: (data: number[]) => ({ids: data}),
// fullQuantitySub: (data: number[]) => ({ids: data}),
// fullQuantityDiscount: (data: number[]) => ({ids: data}),
// fullMoneySub: (data: number[]) => ({ids: data}),
// fullMoneyDiscount: (data: number[]) => ({ids: data}),
// giveProduct: (data: number[]) => ({ids: data}),
// giveCoupon: (data: number[]) => ({ids: data}),
// morePiece: (data: number[]) => ({ids: data}),
// combination: (data: number[]) => ({ids: data}),
// groupPurchase: (data: number[]) => ({ids: data}),
// bargain: (data: number[]) => ({ids: data}),
// secKill: (data: number[]) => ({ids: data}),
// fullSwap: (data: number[]) => ({ids: data}),
// buySwap: (data: number[]) => ({ids: data}),
// preSale: (data: number[]) => ({ids: data}),
// setMeal: (data: number[]) => ({ids: data}),
// attempt: (data: number[]) => ({ids: data}),
// // suggestProductItem: (data: number[]) => ({ids: data.map((_item))}),
// };
/** key 对应组件名 */
const COMPONENT_NAME = {
......@@ -73,7 +74,7 @@ const COMPONENT_NAME = {
giveProduct: "CommodityList",
giveCoupon: "CommodityList",
morePiece: "CommodityList",
combination: "Combination",
combination: "CommodityList",
groupPurchase: "CommodityList",
bargain: "CommodityList",
secKill: "CommodityList",
......@@ -99,7 +100,7 @@ const CHILD_COMPONENT_NAME = {
giveProduct: "CommodityList.SwapProduct",
giveCoupon: "CommodityList.SwapCoupon",
morePiece: "CommodityList.Item",
combination: "Combination.Item",
combination: "Combination",
groupPurchase: "CommodityList.Item",
bargain: "CommodityList.Item",
secKill: "CommodityList.FlashSale",
......@@ -111,67 +112,67 @@ const CHILD_COMPONENT_NAME = {
suggestProduct: "CommodityList",
};
/**
* key 对应接口
*/
const service = {
coupon: postMarketingCouponPlatformActivityPageSelectDetail,
hot: getMarketingAdornActivityGoodsAdorn,
specialOffer: getMarketingAdornActivityGoodsAdorn,
plummet: getMarketingAdornActivityGoodsAdorn,
discount: getMarketingAdornActivityGoodsAdorn,
fullQuantitySub: getMarketingAdornActivityGoodsAdorn,
fullQuantityDiscount: getMarketingAdornActivityGoodsAdorn,
fullMoneySub: getMarketingAdornActivityGoodsAdorn,
fullMoneyDiscount: getMarketingAdornActivityGoodsAdorn,
giveProduct: getMarketingAdornActivityGoodsAdorn,
giveCoupon: getMarketingAdornActivityGoodsAdorn,
morePiece: getMarketingAdornActivityGoodsAdorn,
combination: getMarketingAdornActivityGoodsAdorn,
groupPurchase: getMarketingAdornActivityGoodsAdorn,
bargain: getMarketingAdornActivityGoodsAdorn,
secKill: getMarketingAdornActivityGoodsAdorn,
fullSwap: getMarketingAdornActivityGoodsAdorn,
buySwap: getMarketingAdornActivityGoodsAdorn,
preSale: getMarketingAdornActivityGoodsAdorn,
setMeal: getMarketingAdornActivityGoodsAdorn,
attempt: getMarketingAdornActivityGoodsAdorn,
suggestProductItem: getMarketingAdornActivityGoodsAdorn,
};
// /**
// * key 对应接口
// */
// const service = {
// coupon: postMarketingCouponPlatformActivityPageSelectDetail,
// hot: getMarketingAdornActivityGoodsAdorn,
// specialOffer: getMarketingAdornActivityGoodsAdorn,
// plummet: getMarketingAdornActivityGoodsAdorn,
// discount: getMarketingAdornActivityGoodsAdorn,
// fullQuantitySub: getMarketingAdornActivityGoodsAdorn,
// fullQuantityDiscount: getMarketingAdornActivityGoodsAdorn,
// fullMoneySub: getMarketingAdornActivityGoodsAdorn,
// fullMoneyDiscount: getMarketingAdornActivityGoodsAdorn,
// giveProduct: getMarketingAdornActivityGoodsAdorn,
// giveCoupon: getMarketingAdornActivityGoodsAdorn,
// morePiece: getMarketingAdornActivityGoodsAdorn,
// combination: getMarketingAdornActivityGoodsAdorn,
// groupPurchase: getMarketingAdornActivityGoodsAdorn,
// bargain: getMarketingAdornActivityGoodsAdorn,
// secKill: getMarketingAdornActivityGoodsAdorn,
// fullSwap: getMarketingAdornActivityGoodsAdorn,
// buySwap: getMarketingAdornActivityGoodsAdorn,
// preSale: getMarketingAdornActivityGoodsAdorn,
// setMeal: getMarketingAdornActivityGoodsAdorn,
// attempt: getMarketingAdornActivityGoodsAdorn,
// suggestProductItem: getMarketingAdornActivityGoodsAdorn,
// };
const DEFAULT_RES = [];
const COMMON_FORMAT = ({code, data}) => {
if (code === 1000) {
return data;
}
return DEFAULT_RES;
};
/**
* 请求后处理
*/
const afterRequestFormat = {
coupon: COMMON_FORMAT,
hot: COMMON_FORMAT,
specialOffer: COMMON_FORMAT,
plummet: COMMON_FORMAT,
discount: COMMON_FORMAT,
fullQuantitySub: COMMON_FORMAT,
fullQuantityDiscount: COMMON_FORMAT,
fullMoneySub: COMMON_FORMAT,
fullMoneyDiscount: COMMON_FORMAT,
giveProduct: COMMON_FORMAT,
giveCoupon: COMMON_FORMAT,
morePiece: COMMON_FORMAT,
combination: COMMON_FORMAT,
groupPurchase: COMMON_FORMAT,
bargain: COMMON_FORMAT,
secKill: COMMON_FORMAT,
fullSwap: COMMON_FORMAT,
buySwap: COMMON_FORMAT,
preSale: COMMON_FORMAT,
setMeal: COMMON_FORMAT,
suggestProductItem: COMMON_FORMAT,
};
// const DEFAULT_RES = [];
// const COMMON_FORMAT = ({code, data}) => {
// if (code === 1000) {
// return data;
// }
// return DEFAULT_RES;
// };
// /**
// * 请求后处理
// */
// const afterRequestFormat = {
// coupon: COMMON_FORMAT,
// hot: COMMON_FORMAT,
// specialOffer: COMMON_FORMAT,
// plummet: COMMON_FORMAT,
// discount: COMMON_FORMAT,
// fullQuantitySub: COMMON_FORMAT,
// fullQuantityDiscount: COMMON_FORMAT,
// fullMoneySub: COMMON_FORMAT,
// fullMoneyDiscount: COMMON_FORMAT,
// giveProduct: COMMON_FORMAT,
// giveCoupon: COMMON_FORMAT,
// morePiece: COMMON_FORMAT,
// combination: COMMON_FORMAT,
// groupPurchase: COMMON_FORMAT,
// bargain: COMMON_FORMAT,
// secKill: COMMON_FORMAT,
// fullSwap: COMMON_FORMAT,
// buySwap: COMMON_FORMAT,
// preSale: COMMON_FORMAT,
// setMeal: COMMON_FORMAT,
// suggestProductItem: COMMON_FORMAT,
// };
const title = {
top: '广告图',
......@@ -179,6 +180,137 @@ const title = {
hot: '活动推荐'
};
type ComponentConfigType<T = any> = {
props: T,
title: string,
componentName: string,
otherProps: {
/** 组件类型, 做区别用, 可以用组件名 */
type: string
},
childNodes: string[],
rest?: any,
}
const createComponentConfig = (
{
props,
title,
componentName,
otherProps,
childNodes,
rest,
}: ComponentConfigType
) => {
return {
componentName:componentName,
title: title,
props: props,
otherProps: otherProps,
childNodes: childNodes,
...rest,
}
}
type ComponentParamsType = {
/** 组件名, 数组的一项代表的是递归深度所创建的component */
componentName: string[],
/**
* 如果childrenDataItem 包含childrenData 且为数组,那么符合进入递归条件
* 两种表示方式 [1, 2, 3] 活动商品id,
* [
* {title: string, childrenData: [1,2,3]}
* ]
* */
childrenData: any[],
/** 这是活动商品或者是优惠券请求回来的数据, 已经做key/value 转换对应 */
dataSource: any,
/** 生成pageConfig 的startKey, 1 / 1-1 这样表示, 递归会变成 1-1-1 */
startKey: string | number,
/** 主键, childrenData[i][primaryKey], */
primaryKey: string | null,
otherProps: {
/** 组件类型, 做区别用, 可以用组件名 */
type: string
}[],
/** 用于给suggestProduct, 添加label用 */
specialKey: string | null,
/** suggestProduct 的label */
labels: any,
}
/** 根据childrenData 递归创建子元素 */
const createComponent = (
{
componentName,
childrenData,
startKey,
dataSource,
primaryKey,
otherProps,
specialKey,
labels,
}: ComponentParamsType
) => {
const childNodesKeys: string[] = [];
let result = {};
const floor = `${startKey}`.split("-").length;
for (let i = 0; i < childrenData.length; i++) {
const keyNum = `${startKey}-${i + 1}`;
const current = childrenData[i];
const isDept = typeof current.childrenData !== 'undefined' && Array.isArray(current.childrenData);
let parentChildKeys: string[] = [];
let parentChildConfig = {};
let configRest = {};
console.log(isDept, "isDept: " + isDept);
if (isDept) {
const sonConfig = createComponent(
{
componentName,
childrenData: current.childrenData,
startKey: keyNum,
dataSource,
primaryKey,
otherProps,
specialKey,
labels
}
);
parentChildKeys = sonConfig.keys;
parentChildConfig = sonConfig.config
configRest = {
childComponentName: componentName[floor],
addBtnText: '添加子节点',
childProps: {
otherProps: otherProps[floor],
}
}
}
const key = primaryKey ? current[primaryKey] : current
childNodesKeys.push(keyNum);
let childProps = dataSource[key]
const [startString, ...rest] = keyNum.split("-");
const config = createComponentConfig({
componentName: componentName[floor - 1],
title: childProps?.name || childProps?.productName || `子集${keyNum}`,
props: isDept
? omit(current, ['childrenData'])
: specialKey && specialKey === otherProps[floor - 1].type
? { label: labels[`${childProps}-${rest.join("-")}`] || [] , ...childProps }
: childProps,
otherProps: otherProps[floor - 1],
childNodes: parentChildKeys,
rest: configRest
})
result = {
...result,
[keyNum]: config,
...parentChildConfig
}
}
return { config: result, keys: childNodesKeys}
}
function useGetLayout() {
const { id } = usePageStatus();
const [detail, setDetail] = useState<DetailType | null>(null);
......@@ -234,41 +366,137 @@ function useGetLayout() {
});
});
const sortedList = dataSourceList.sort((a, b) => a.sort - b.sort).filter((_item) => _item.key !== 'themeStyle');
/** 优惠券请求体 */
const couponRequestData = adornContent.coupon.props.childrenData || [];
/** 获取自定义区域请求体 */
const customizeAreaRequestData = adornContent!.suggestProduct!.props?.childrenData?.reduce((prev, next, _index) => {
const labelsWithId = {};
const result = next.childrenData.map((_item, _key) => {
labelsWithId[`${_index + 1}-${_key + 1}-${_item.id}`] = _item.label;
return _item.id
});
prev = {
ids: [...prev.ids, ...result],
labelsWithId: labelsWithId,
}
return prev
}, { ids: [], label: {} })
/** 获取组合促销请求体 */
console.log(adornContent)
const combinationRequestData = adornContent.combination?.props?.childrenData?.reduce((prev, next, _index) => {
prev = [...prev, ...(next.childrenData || [])]
return prev
}, []) || []
/** 获取其他活动的请求体 */
const activityRequestData = Object.keys(adornContent).reduce((all: any, _item) => {
if (ACTIVITY_LIST.includes(_item as any) && _item !== 'combination') {
all = [...all, ...((adornContent[_item] as any).props.childrenData)]
}
return all;
}, []);
const getCouponData = async (couponData) => {
if (couponData.length === 0) {
return [];
}
const formated = couponData.map((_item) => ({
belongType: _item.type,
couponId: _item.id
}))
const { code, data } = await postMarketingCouponPlatformActivityPageSelectDetail({ couponList: formated });
return data;
}
const getActivityData = async (datas) => {
const { code, data } = await getMarketingAdornActivityGoodsAdorn({ ids: datas })
return data;
}
const getResponseData = await Promise.all([
getCouponData(couponRequestData),
getActivityData(Array.from(new Set([...customizeAreaRequestData.ids, ...activityRequestData, ...combinationRequestData])))
]);
const activityDataResponse = arrayToMap(getResponseData[1] || [], "id");
const couponResponseData = arrayToMap(getResponseData[0] || [], "id")
for (const _row of sortedList) {
startKey = startKey + 1;
firstChildKeys.push(startKey.toString());
const target = adornContent[_row.key];
const currentProps = target.props;
const childrenData = currentProps.childrenData || [];
const props = _row.key === 'top' ? {
imageUrl: currentProps.imageUrl
} : {
/** 当前组件的props */
let props = {};
/** 设置左边菜单栏 属性,是否允许隐藏,是否允许删除,添加子节点信息等等 */
let sideControllerData = {}
/** 点击左侧菜单添加按钮时, 创建子节点的组件信息 */
let childrenComponentInfo = {}
/** 如果为顶部活动图 */
if (_row.key === 'top') {
props = {
imageUrl: currentProps.imageUrl
}
} else {
/** 优惠券,活动等等 */
props = {
/** 是否显示 */
status: currentProps.visible ?? true,
theme: currentProps.theme || 0,
title: currentProps.title,
};
const suggestProductSonProps = _row.key === 'suggestProduct' ? {
hideAction: true,
childComponentName: `CommodityList.Item`,
addBtnText: '添加商品节点',
childProps: {
otherProps: {
type: `suggestProductItem`
},
}
} : {};
const childPropsData = _row.key === 'top' ? {} : {
childComponentName: `${CHILD_COMPONENT_NAME[_row.key]}`,
addBtnText: '添加子节点',
childProps: {
otherProps: {
type: _row.key === 'suggestProduct' ? 'suggestProduct' : `${_row.key}Item`
/** 第三层节点信息 */
let thirdFloorData = {};
if (_row.key === 'suggestProduct') {
thirdFloorData = {
hideAction: true,
childComponentName: `CommodityList.Item`,
addBtnText: `添加商品节点`,
childProps: {
otherProps: {
type: `suggestProductItem`
},
}
}
} else if (_row.key === 'combination') {
thirdFloorData = {
hideAction: true,
childComponentName: `Combination.Item`,
addBtnText: `添加组合促销商品`,
childProps: {
otherProps: {
type: `combinationItem`
},
}
}
}
/** 组件类型,selectInfo 时判断显示的装修类容 */
const otherPropsType = _row.key === 'suggestProduct'
? 'suggestProduct'
: _row.key === 'combination'
? 'combinationItemProduct'
: `${_row.key}Item`
/** 点击左侧菜单添加按钮时, 创建子节点的组件信息 */
childrenComponentInfo = {
/** 儿子组件 */
childComponentName: `${CHILD_COMPONENT_NAME[_row.key]}`,
addBtnText: `添加子节点`,
childProps: {
otherProps: {
type: otherPropsType
},
...thirdFloorData,
},
...suggestProductSonProps,
},
};
let tempConfig = {
}
// console.log(sideControllerData, "sideControllerData")
}
/** 设置左边菜单栏属性 */
sideControllerData = {
hideAction: true,
/** 当前组件名, 需要注册schema, 以及组件 */
componentName: COMPONENT_NAME[_row.key],
title: title[_row.key] || currentProps.title,
props: props,
......@@ -276,115 +504,98 @@ function useGetLayout() {
type: _row.key
},
canDelete: false,
...childPropsData,
childNodes: [],
};
const childNodesKeys: string[] = [];
if ( childrenData.length > 0 && _row.key !== 'suggestProduct') {
const formatedData = formatData[_row.key]?.(childrenData.filter(Boolean));
const length = typeof formatedData.ids !== 'undefined' ? formatedData?.ids?.length : formatedData?.couponList.length;
if (length > 0) {
const requestData = await service[_row.key]?.(formatedData, { ctlType: 'none' });
const afterRequestFormatedData = afterRequestFormat[_row.key]?.(requestData);
afterRequestFormatedData?.forEach((_item, _index) => {
const keyNum = `${startKey}-${_index + 1}`;
childNodesKeys.push(keyNum);
const sonConfig = {
componentName: `${CHILD_COMPONENT_NAME[_row.key]}`,
title: _item?.productName || _item.name,
props: {
..._item,
},
otherProps: {
type: `${_row.key}Item`
},
childNodes: []
};
pageConfig[keyNum] = sonConfig;
});
...childrenComponentInfo
}
// 创建当前组件内容
pageConfig[startKey] = sideControllerData
/** 创建子节点信息 */
let childNodesKeys: string[] = [];
if (childrenData.length === 0) {
continue;
}
if(_row.key === 'coupon') {
const { config, keys } = createComponent({
componentName: [`${CHILD_COMPONENT_NAME[_row.key]}`],
childrenData: childrenData,
startKey: startKey,
dataSource: couponResponseData,
primaryKey: "id",
otherProps: [{
type: `${_row.key}Item`
}],
specialKey: null,
labels: {},
})
childNodesKeys = [...childNodesKeys, ...keys];
pageConfig = {
...pageConfig,
...config,
}
} else if (_row.key === 'combination') {
// 组合促销时
const { config, keys } = createComponent({
componentName: [`Combination`, `Combination.Item`],
childrenData: childrenData,
startKey: startKey,
dataSource: activityDataResponse,
primaryKey: null,
otherProps: [
{ type: `combinationItemProduct` },
{ type: `${_row.key}Item` }
],
specialKey: null,
labels: {},
})
childNodesKeys = [...childNodesKeys, ...keys];
pageConfig = {
...pageConfig,
...config,
}
} else if (_row.key === 'suggestProduct') {
// const suggestDataKeys: string[] = [];
let _index = 0;
for (const _item of childrenData) {
const keyNum = `${startKey}-${++_index}`;
childNodesKeys.push(keyNum);
const suggestConfig = {
componentName: 'CommodityList',
title: _item.title,
props: {
title: _item.title,
theme: _item.theme,
},
otherProps: {
type: _row.key
},
childNodes: [],
childComponentName: `CommodityList.Item`,
addBtnText: '添加子节点',
childProps: {
otherProps: {
type: `suggestProductItem`
},
}
};
const suggestSonKeys: string[] = [];
if (_item.childrenData?.length > 0) {
const requestData = await service["suggestProductItem"]?.({ids: _item.childrenData.map((_u) => _u.id)}, { ctlType: 'none'});
const arrayToMapData = arrayToMap(_item.childrenData, "id");
// console.log(requestData, _item.childrenData, arrayToMapData);
const afterRequestFormatedData = afterRequestFormat["suggestProductItem"]?.(requestData);
// console.log(afterRequestFormatedData, arrayToMapData);
afterRequestFormatedData?.forEach((_item, _itemIndex) => {
const sonKeyNum = `${keyNum}-${_itemIndex + 1}`;
suggestSonKeys.push(sonKeyNum);
const sonConfig = {
componentName: `CommodityList.Item`,
title: _item?.productName || _item.name,
props: {
..._item,
label: arrayToMapData[_item.id]?.label
},
otherProps: {
type: `suggestProductItem`
},
childNodes: []
};
pageConfig[sonKeyNum] = sonConfig;
});
}
pageConfig[keyNum] = {
...suggestConfig,
childNodes: suggestSonKeys,
};
} else if (_row.key !== 'suggestProduct') {
const { config, keys } = createComponent({
componentName: [`${CHILD_COMPONENT_NAME[_row.key]}`],
childrenData: childrenData,
startKey: startKey,
dataSource: activityDataResponse,
primaryKey: null,
otherProps: [{
type: `${_row.key}Item`
}],
specialKey: null,
labels: {},
})
childNodesKeys = [...childNodesKeys, ...keys];
pageConfig = {
...pageConfig,
...config,
}
} else {
const { config, keys } = createComponent({
componentName: [`CommodityList`, 'CommodityList.Item'],
childrenData: childrenData,
startKey: startKey,
dataSource: activityDataResponse,
primaryKey: "id",
otherProps: [
{ type: `${_row.key}` },
{ type: `${_row.key}Item` }
],
specialKey: `${_row.key}Item`,
labels: customizeAreaRequestData.labelsWithId,
})
childNodesKeys = [...childNodesKeys, ...keys];
pageConfig = {
...pageConfig,
...config,
}
// childNodesKeys
}
tempConfig = {
...tempConfig,
childNodes: childNodesKeys
};
pageConfig[startKey] = tempConfig;
pageConfig[startKey].childNodes = childNodesKeys
}
// pageConfig = {
// 0: {
// "componentName": "div",
// title: '组件树',
// "props": {
// "style": {
// "width": "100%",
// "minHeight": "100%",
// "background": "#DD3041",
// "overflowX": "hidden",
// "paddingBottom": "50px",
// }
// },
// "childNodes": firstChildKeys
// },
// ...pageConfig,
// };
pageConfig = {
0: {
"componentName": "MobileLayout",
......
......@@ -80,10 +80,26 @@ const useGetSameKeys = () => {
result[dataIndex] = [];
}
if (dataIndex === 'combination') {
/** combination 单独处理, 这里不使用递归了 */
childNodes?.forEach((_son, _index) => {
const sonElement = pageConfig[_son];
result[`combination_${_index}`] = [];
sonElement?.childNodes?.forEach((_row) => {
const rowData = pageConfig[_row];
result[`combination_${_index}`].push(
`${rowData?.props?.id}_${rowData?.props?.activityId}`
);
});
});
return;
}
if (dataIndex !== 'suggestProduct') {
childNodes?.forEach((_son) => {
const sonElement = pageConfig[_son];
const formatedData = formatProps[dataIndex]?.(sonElement.props);
const formatedData = formatProps[dataIndex]?.(sonElement.props || {});
if (formatProps) {
result[dataIndex].push(formatedData);
}
......
......@@ -102,7 +102,7 @@ function useSaveData(options: Options) {
childrenData: childrenData
}
});
} else if (ACTIVITY_LIST.includes( dataIndex as ACTIVITY_KEYS )) {
} else if (ACTIVITY_LIST.includes( dataIndex as ACTIVITY_KEYS ) && dataIndex !== 'combination') {
const { ...otherProps } = props || {};
const childrenData = childNodes.map((_record) => {
const childTargetProps = pageConfig[_record].props;
......@@ -117,31 +117,37 @@ function useSaveData(options: Options) {
childrenData: childrenData
}
});
} else if (dataIndex === 'suggestProduct') {
} else if (dataIndex === 'suggestProduct' || dataIndex === 'combination') {
const { ...otherProps } = props || {};
const { childNodes } = target;
const temp = {
sort: sort,
props: {
visible: otherProps.status ?? true,
title: otherProps.title,
childrenData: childNodes?.filter((_record) => /\d+-\d+/.test(_record)).map((_row) => {
const childrenNodeTarget = pageConfig[_row];
const { ...childRestProps } = childrenNodeTarget?.props;
const childrenData = childrenNodeTarget.childNodes?.map((_listItem) => {
const sonNodeTarget = pageConfig[_listItem];
if (dataIndex === 'suggestProduct') {
return {
id: sonNodeTarget?.props.id,
label: sonNodeTarget?.props?.label || []
};
}
return sonNodeTarget?.props.id
})
return {
title: childRestProps.title,
theme: childRestProps.theme || 0,
childrenData: childrenNodeTarget.childNodes?.map((_listItem) => {
const sonNodeTarget = pageConfig[_listItem];
return {
id: sonNodeTarget?.props.id,
label: sonNodeTarget?.props?.label || []
};
})
childrenData: childrenData
};
})
}
};
result = generaterData(result, 'suggestProduct', temp);
result = generaterData(result, dataIndex, temp);
}
});
const withThemeStyle = {
......
import React, { useEffect, useState } from 'react';
import { Switch } from 'antd';
import { useSelector } from '@linkseeks/design-react';
interface Iprops {
image?: string,
title: string,
visible: boolean,
onChange?: ((checked: boolean, option: { dataIndex: string, treeKey: string, }) => void) | null,
dataIndex: string,
treeKey: string
}
const ComponentModule: React.FC<Iprops> = (props: Iprops) => {
const { image, title, visible, onChange = null, dataIndex, treeKey } = props;
const [innerVisible, setInnerVisible] = useState<boolean>(false);
const { pageConfig } = useSelector(['pageConfig']);
useEffect(() => {
setInnerVisible(visible);
}, [visible]);
const handleChange = (checked: boolean) => {
const props = pageConfig[treeKey].props;
onChange?.(checked, { dataIndex: dataIndex, treeKey: treeKey, props });
};
return (
<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={innerVisible} onChange={handleChange} />
</div>
</div>
);
};
export default ComponentModule;
import React, { useMemo } from 'react';
import { useSelector, changeProps } from '@linkseeks/design-react';
import ComponentModule from './ComponentModule';
import styles from './index.less';
import attemptImg from '@/asserts/activity/attempt.png';
import bargainImg from '@/asserts/activity/bargain.png';
import buySwapImg from '@/asserts/activity/buySwap.png';
import combinationImg from '@/asserts/activity/combination.png';
import fullMoneyDiscountImg from '@/asserts/activity/fullMoneyDiscount.png';
import fullMoneySubImg from '@/asserts/activity/fullMoneySub.png';
import fullQuantityDiscountImg from '@/asserts/activity/fullQuantityDiscount.png';
import fullQuantitySubImg from '@/asserts/activity/fullQuantitySub.png';
import fullSwapImg from '@/asserts/activity/fullSwap.png';
import giveProductImg from '@/asserts/activity/giveProduct.png';
import groupPurchaseImg from '@/asserts/activity/groupPurchase.png';
import morePieceImg from '@/asserts/activity/morePiece.png';
import plummetImg from '@/asserts/activity/plummet.png';
import preSaleImg from '@/asserts/activity/preSale.png';
import secKillImg from '@/asserts/activity/secKill.png';
import setMealImg from '@/asserts/activity/setMeal.png';
import discountImg from '@/asserts/activity/discount.png';
import specialOfferImg from '@/asserts/activity/specialOffer.png';
import giveCouponImg from '@/asserts/activity/giveCoupon.png';
const ACTIVITYS = ["specialOffer", "plummet", "discount", "fullQuantitySub", "fullQuantityDiscount", "fullMoneySub", "fullMoneyDiscount", "giveProduct", "giveCoupon", "morePiece", "combination", "groupPurchase", "bargain", "secKill", "fullSwap", "buySwap", "preSale", "setMeal", "attempt"];
type ModuleType = {
title: string,
visible: boolean,
dataIndex: string,
treeKey: string,
}
const ModuleContainer = () => {
const { pageConfig } = useSelector(['pageConfig']);
const modules = useMemo(() => {
const config = pageConfig;
const res: ModuleType[] = [];
Object.keys(config).forEach((_item) => {
const { props = {} } = config[_item];
const dataIndex = config[_item]?.otherProps?.type;
if (ACTIVITYS.includes(dataIndex)) {
const visible = typeof props.visible === 'undefined' ? true : (props as any)?.visible;
res.push({
title: (props as any)?.title || _item,
visible: visible,
dataIndex: 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 imgMap = {
"attempt": attemptImg,
"bargain": bargainImg,
"buySwap": buySwapImg,
"combination": combinationImg,
"fullMoneyDiscount": fullMoneyDiscountImg,
"fullMoneySub": fullMoneySubImg,
"fullQuantityDiscount": fullQuantityDiscountImg,
"fullQuantitySub": fullQuantitySubImg,
"fullSwap": fullSwapImg,
"giveProduct": giveProductImg,
"groupPurchase": groupPurchaseImg,
"morePiece": morePieceImg,
"plummet": plummetImg,
"preSale": preSaleImg,
"secKill": secKillImg,
"setMeal": setMealImg,
"discount": discountImg,
"specialOffer": specialOfferImg,
"giveCoupon": giveCouponImg,
};
return (
<div className={styles.module}>
{
modules.map((_item) => {
const { visible, title, dataIndex } = _item;
return (
<div className={styles.moduleItem} key={dataIndex}>
<ComponentModule image={imgMap[dataIndex]} treeKey={_item.treeKey} title={title} visible={visible} onChange={onModuleVisibleChange} dataIndex={dataIndex} />
</div>
);
})
}
</div>
);
};
export default ModuleContainer;
......@@ -208,8 +208,8 @@ const COMPONENT_NAME = {
// combination: "Combination",
[ACTIVITY_COMBINATION]: {
mobile: {
container: 'Combination',
childContainer: 'Combination.Item'
container: 'CommodityList',
childContainer: 'Combination'
},
web: {
container: 'WebCommodityContainer',
......@@ -348,6 +348,38 @@ const WebComponentModule: React.FC<Iprops> = (props: Iprops) => {
const newKey = childNodes[childNodes.length - 1] + 1
if (platform === 'mobile' && _item === 'combination') {
addChildComponent({
newKey: `${newKey}`,
componentName: COMPONENT_NAME[_item][platform]['container'],
parentPropName: '',
parentKey: '0',
childProps: {
addBtnText: "添加子节点",
canDelete: true,
childComponentName: COMPONENT_NAME[_item][platform]['childContainer'],
childNodes: [],
childProps: {
addBtnText: "添加组合促销节点",
canDelete: true,
childComponentName: 'Combination.Item',
otherProps: {
type: `combinationItemProduct`
},
childProps: {
otherProps: {
type: `combinationItem`
},
}
},
otherProps: { type: _item },
props: {visible: true, theme: 0, title: ACTIVITYS_MAP[_item].title},
title: ACTIVITYS_MAP[_item].title,
}
})
return;
}
addChildComponent({
newKey: `${newKey}`,
componentName: COMPONENT_NAME[_item][platform]['container'],
......
......@@ -93,6 +93,11 @@ const EditPanelForm = () => {
}
const componentType = (selectedInfo as any)?.otherProps?.type;
if (componentType === 'combinationItemProduct') {
handleOnClose();
return;
}
const propsMapToValue = {
top: {
imageUrl: [{ name: '广告图', url: selectedInfo?.props?.imageUrl }]
......@@ -139,14 +144,18 @@ const EditPanelForm = () => {
const activityType = ACTIVITY_MAP[componentType] ? { activityType: ACTIVITY_MAP[componentType] } : {};
const isWithLabels = componentType === 'suggestProductItem' ? { isWithLabels: true } : { isWithLabels: false };
const isWithMinType = minTypeToOne.includes(componentType) ? 1 : minTypeToTwo.includes(componentType) ? 2 : null
console.log("isWithMinType", isWithMinType);
// console.log(hotItem".substring(0, 1));
formActions.setFieldState('product', (fieldState) => {
const [, parentKey] = selectedInfo.parentKey.split('-');
const disabledKeys = componentType === 'suggestProductItem'
? sameKeys[`suggestProduct_${parseInt(parentKey) - 1}`]
: componentType === 'combinationItem'
? sameKeys[`combination_${parseInt(parentKey) - 1}`]
: sameKeys[`${componentType?.substring(0, componentType.length - 4)}`] || [];
FormPath.setIn(fieldState, 'props.x-component-props', {
activityImage: activityImage,
...activityType,
disabledKeys: componentType === 'suggestProductItem' ? sameKeys[`suggestProduct_${parseInt(parentKey) - 1}`] : sameKeys[`${componentType?.substring(0, componentType.length - 4)}`] || [],
disabledKeys: disabledKeys,
...isWithLabels,
minType: isWithMinType,
});
......
.combiantion {
margin-top: 24px;
padding: 0 8px;
margin-bottom: 12px;
padding: 0 0px;
.title {
font-size: 20px;
color: #fff;
......
......@@ -18,7 +18,10 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props:
const { children, className, title, theme, status = true, ...other } = props;
const visible = status
const classNameStr = cx(styles.combiantion, className, { [styles.hide]: !visible });
const { onClick, onMouseOver, getOperateState } = props as any;
const divProps = {
onClick, onMouseOver
};
// const { onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, getOperateState } = other as any;
const count = React.Children.count(children);
const renderChildren = () => {
......@@ -37,8 +40,8 @@ const Combination: React.FC<Iprops> & { Item: typeof CombinationItem } = (props:
};
return (
<div className={classNameStr} {...other}>
<p className={styles.title}>{title}</p>
<div className={classNameStr} {...divProps}>
{/* <p className={styles.title}>{title}</p> */}
<div className={styles.container}>
<div className={styles['container-title']}>以下商品认选2件,只需800元</div>
{renderChildren()}
......
.commodityGroupEmpty {
min-height: 430px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 12px;
border: 1px dashed #C8CACD;
}
.section {
// padding: 12px;
background: #fff;
border-radius: 8px;
margin-bottom: 8px;
.mainCommodity {
padding: 4px;
}
.content {
padding: 0 12px 12px 12px;
.title {
color: #252D37;
font-size: 16px;
font-weight: 600;
margin-bottom: 14px;
}
}
.list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-right: -12px;
.item {
padding-right: 12px;
flex-basis: 33.33%;
}
}
}
import React, { useMemo } from 'react';
import { Commodity, Progress } from '@linkseeks/design-ui';
import { identifier } from '@babel/types';
import { PlusOutlined } from '@ant-design/icons';
import cs from 'classnames';
import styles from './combineSale.less';
import TabFooter from './tabFooter';
interface Iprops {
className: string,
onClick: () => void,
onDrag: () => void,
onDragEnd: () => void,
onDragEnter: () => void,
onDragStart: () => void,
onMouseOver: () => void,
draggable?: boolean,
getOperateState: any,
productImgUrl?: string,
productName?: string,
productId?: number,
id?: number,
price?: number,
activityPrice?: number,
}
const CombineSale: React.FC<Iprops> = (props: Iprops) => {
const { className, onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver, ...other } = props;
const divProps = {
onClick, onDrag, onDragEnd, onDragEnter, onDragStart, onMouseOver,
};
const isEmpty = useMemo(() => other.id, [other]);
if (!isEmpty) {
return (
<div className={cs(styles.commodityGroupEmpty, className)} {...divProps}>
<div><PlusOutlined style={{color: '#C8CACD'}} /></div>
</div>
);
}
return (
<div className={className} {...divProps}>
<div className={styles.section}>
<div className={styles.mainCommodity}>
<Commodity
name={other.productName}
image={other.productImgUrl}
mode="horizontal"
discountPrice={other.activityPrice}
tags={["组合促销"]}
buyBtn={false}
/>
</div>
<div className={styles.content}>
<div className={styles.title}>超值换购区(3选1)</div>
<div className={styles.list}>
{
[1].map((_item) => {
return (
<div className={styles.item} key={_item}>
<Commodity
name={"例子: 后端数据未确定"}
image={"https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/src=http___photo.16pic.com_00_49_30_16pic_4930729_b.jpg&refer=http___photo.16picd098747f66234351b47d95ab5fc16f90.jpg"}
mode="vertical"
footer={<div></div>}
tags={["满300减20"]}
style={{padding: '0'}}
/>
</div>
);
})
}
</div>
<TabFooter discountPrice={60} originalPrice={50} />
</div>
</div>
</div>
);
};
export default CombineSale;
......@@ -9,7 +9,7 @@ import TabFooter from './tabFooter';
import styles from './index.less';
import SwapCoupon from './swapCoupon';
import SwapProduct from './swapProduct';
import CombineSale from './combineSale';
// import CombineSale from './combineSale';
import FlashSale from './flashSale';
const { TabPane } = Tabs;
......@@ -27,7 +27,7 @@ const CommodityList: React.FC<Iprops> & {
CommodityTab: typeof CommodityTab,
SwapCoupon: typeof SwapCoupon,
SwapProduct: typeof SwapProduct
CombineSale: typeof CombineSale,
// CombineSale: typeof CombineSale,
FlashSale: typeof FlashSale
} =
(props: Iprops) => {
......@@ -120,8 +120,12 @@ const CommodityItem: React.FC<Iprops> = (props: Iprops) => {
plummetPrice,
...otherRestProps
} = rest as any;
const activityLabel = activityList?.find((_item) => _item.id === activityId);
const withLabel = activityLabel && activityLabel.label ? {tags: [activityLabel.label]} : {};
const tags = {
tags: otherRestProps?.label || []
}
const withLabel = activityLabel && activityLabel.label ? {tags: [activityLabel.label, ...tags.tags]} : tags;
const horizontalData = {
name,
image,
......@@ -262,7 +266,7 @@ CommodityList.CommodityTab = CommodityGroup;
CommodityList.SwapCoupon = SwapCoupon;
CommodityList.SwapProduct = SwapProduct;
CommodityList.CombineSale = CombineSale;
// CommodityList.CombineSale = CombineSale;
CommodityList.FlashSale = FlashSale;
export default CommodityList;
......@@ -2,17 +2,6 @@
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { ISchema } from '@formily/antd';
const commonTimeList = [
{ label: '今天', value: 1},
{ label: '一周内', value: 2},
{ label: '一个月内', value: 3},
{ label: '三个月内', value: 4},
{ label: '六个月内', value: 5},
{ label: '一年内', value: 6 },
{ label: '一年前', value: 7}
];
const orderTime = [{label: '下单时间(所有)', value: 0}].concat(commonTimeList);
const payTime = [{label: '支付时间(所有)', value: 0}].concat(commonTimeList);
/**
* 应收账款管理--物流单结算明细详情, 生产通知单结算明细
......
......@@ -1823,10 +1823,10 @@
react-dom "^17.0.2"
sortablejs "^1.10.2"
"@linkseeks/design-ui@^1.0.9":
version "1.0.9"
resolved "http://npm.shushangyun.com/@linkseeks%2fdesign-ui/-/design-ui-1.0.9.tgz#fffef978a0846366ebc59fe951b1089affedbd40"
integrity sha512-230k00FsXrV+x5yXWXukyJZWcWi0ht11zPEtalGGHZAK894NauvGhK7pUQDrvfesABlO+lCrlRv49+NsXDDhgw==
"@linkseeks/design-ui@^1.0.11":
version "1.0.11"
resolved "http://npm.shushangyun.com/@linkseeks%2fdesign-ui/-/design-ui-1.0.11.tgz#184fc802a76121ed58e6c0b60604d7068355f0ec"
integrity sha512-0GXhzAEUUmO3a0XmTSe2Z/zBaABZhJ6ajJc1bPifZxLQJV0q2zTUD2xLg9kB3bZjXYdovkOQ3Fc+OTW4dhj33Q==
dependencies:
"@linkseeks/design-utils" "^1.0.0"
antd "^4.15.1"
......
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