Skip to content

J
jinfa-admin
Commit d37fd01e authored by 卢均锐's avatar 卢均锐
Browse files
Options

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

* 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-system: fix: 修改装修页，自定义组件 fix: APP B端商城装修修改 # Conflicts: # src/pages/pageCustomized/mobileClientEdit/config.ts
parents 83d31168 f0759bf9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1004 additions and 191 deletions
config/routes/index.ts
View file @ d37fd01e
......@@ -109,7 +109,7 @@ const router = [
// ...routeList,
// merchantMarketingRoute,
// ruleSettingRoutes,
marketingRoutes,
// marketingRoutes,
// platformCouponManageRoute,
...asyncRoutes,
// purchaseBidRoute,
......
src/asserts/icons/upload_img_icon.svg 0 → 100644
View file @ d37fd01e
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="design-iconfont">
<path d="M12,2 C17.5228475,2 22,6.4771525 22,12 C22,17.5228475 17.5228475,22 12,22 C6.4771525,22 2,17.5228475 2,12 C2,6.4771525 6.4771525,2 12,2 Z M12,7 C11.4477153,7 11,7.44771525 11,8 L11,8 L11,11 L8,11 C7.44771525,11 7,11.4477153 7,12 C7,12.5522847 7.44771525,13 8,13 L8,13 L11,13 L11,16 C11,16.5522847 11.4477153,17 12,17 C12.5522847,17 13,16.5522847 13,16 L13,16 L13,13 L16,13 C16.5522847,13 17,12.5522847 17,12 C17,11.4477153 16.5522847,11 16,11 L16,11 L13,11 L13,8 C13,7.44771525 12.5522847,7 12,7 Z" fill="#C8CACD" fill-rule="evenodd"/>
</svg>
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/common/configs/index.tsx
View file @ d37fd01e
......@@ -19,7 +19,7 @@ const mallLayoutConfig: PageConfigType = {
"paddingBottom": "50px",
}
},
"childNodes": ["1", "2", "3", "4", "5"]
"childNodes": ["1", "2", "3", "4", "5", "23"]
},
};
......@@ -71,28 +71,19 @@ const activityContainer: PageConfigType = {
props: {
title: '活动推荐',
},
childNodes: ['3-1'],
// childNodes: ['3-1'],
childComponentName: "CommodityList.Item",
addBtnText: '添加'
addBtnText: '添加商品',
childProps: {
dataIndex: 'hotItem',
title: '活动推荐商品'
}
},
"3-1": {
dataIndex: 'hotItem',
componentName: 'CommodityList.Item',
title: '活动推荐商品',
props: {
// name: "轩妈家蛋黄酥6枚 雪媚娘糕点点心网红零食休闲小吃食品早餐下午茶",
// image: "https://img2.baidu.com/it/u=4073850171,2776482768&fm=26&fmt=auto&gp=0.jpg",
// mode:"horizonal",
// discountPrice:289.28,
// tags:[{
// type: 'purple',
// // icon: <TagOutlined />,
// name: "满300减20"
// }],
// buyBtn:false,
// originalPrice:300,
},
props: {},
},
"4": {
dataIndex: 'specialOffer',
......@@ -100,26 +91,27 @@ const activityContainer: PageConfigType = {
title: "促销组合",
props: {
title: '促销组合',
theme: 2,
},
childNodes: ["4-1"],
// addBtnText: '添加',
// childComponentName: "CommodityList.CommodityTab",
// childNodes: ["4-1"],
childComponentName: "CommodityList.CommodityTab",
addBtnText: '添加商品'
},
"4-1": {
componentName: 'CommodityList.CommodityTab',
props: {},
},
"5": {
dataIndex: 'plummet',
componentName: 'CommodityList',
title: '特价促销',
childComponentName: "CommodityList.Item",
addBtnText: '添加商品',
props: {
title: '特价促销',
theme: 1,
},
childNodes: ['5-1', "5-2"],
// childNodes: ['5-1'],
},
"5-1": {
componentName: 'CommodityList.Item',
......@@ -140,23 +132,17 @@ const activityContainer: PageConfigType = {
},
addBtnText: '添加'
},
"5-2": {
componentName: 'CommodityList.Item',
title: '活动推荐商品',
props: {
empty: "true",
},
addBtnText: '添加'
},
"6": {
dataIndex: 'discount',
componentName: 'CommodityList',
childComponentName: "CommodityList.Item",
addBtnText: '添加商品',
title: '折扣促销',
props: {
title: '折扣促销',
theme: 1
},
childNodes: ["6-1"]
// childNodes: ["6-1"]
},
"6-1": {
componentName: 'CommodityList.Item',
......@@ -167,12 +153,14 @@ const activityContainer: PageConfigType = {
"7": {
dataIndex: 'fullQuantitySub',
componentName: 'CommodityList',
childComponentName: "CommodityList.Item",
addBtnText: '添加商品',
title: '满量促销--满量减',
props: {
title: '满量促销--满量减',
theme: 1
},
childNodes: ["7-1"]
// childNodes: ["7-1"]
},
"7-1": {
componentName: 'CommodityList.Item',
......@@ -183,28 +171,31 @@ const activityContainer: PageConfigType = {
"8": {
dataIndex: 'fullQuantityDiscount',
componentName: 'CommodityList',
childComponentName: "CommodityList.Item",
addBtnText: '添加商品',
title: '满量促销--满量折',
props: {
title: '满量促销--满量折',
theme: 0
},
childNodes: ["8-1"]
// childNodes: ["8-1"]
},
"8-1": {
componentName: 'CommodityList.Item',
title: '满量促销--满量折',
props: {},
addBtnText: '添加'
},
"9": {
dataIndex: 'fullMoneySub',
componentName: 'CommodityList',
childComponentName: "CommodityList.Item",
addBtnText: '添加商品',
title: '满额促销--满额减',
props: {
title: '满额促销--满额减',
theme: 0
},
childNodes: ["9-1"]
// childNodes: ["9-1"]
},
"9-1": {
componentName: 'CommodityList.Item',
......@@ -215,12 +206,14 @@ const activityContainer: PageConfigType = {
"10": {
dataIndex: 'fullMoneyDiscount',
componentName: 'CommodityList',
childComponentName: "CommodityList.Item",
addBtnText: '添加商品',
title: '满额促销--满额折',
props: {
title: '满额促销--满额折',
theme: 0
},
childNodes: ["10-1"]
// childNodes: ["10-1"]
},
"10-1": {
componentName: 'CommodityList.Item',
......@@ -231,12 +224,14 @@ const activityContainer: PageConfigType = {
"11": {
dataIndex: 'giveProduct',
componentName: 'CommodityList',
childComponentName: "CommodityList.Item",
addBtnText: '添加商品',
title: '赠送促销--赠送商品(满额赠+买商品赠)',
props: {
title: '赠送促销--赠送商品(满额赠+买商品赠)',
theme: 0
},
childNodes: ["11-1"]
// childNodes: ["11-1"]
},
"11-1": {
componentName: 'CommodityList.Item',
......@@ -252,7 +247,7 @@ const activityContainer: PageConfigType = {
title: '赠送促销--赠送商品(满额赠+买商品赠)',
theme: 0
},
childNodes: ["12-1"]
// childNodes: ["12-1"]
},
"12-1": {
componentName: 'CommodityList.Item',
......@@ -268,7 +263,7 @@ const activityContainer: PageConfigType = {
title: '多件促销',
theme: 0
},
childNodes: ["13-1"]
// childNodes: ["13-1"]
},
"13-1": {
componentName: 'CommodityList.Item',
......@@ -284,7 +279,7 @@ const activityContainer: PageConfigType = {
title: '组合促销',
theme: 0
},
childNodes: ["14-1"]
// childNodes: ["14-1"]
},
"14-1": {
componentName: 'CommodityList.Item',
......@@ -300,7 +295,7 @@ const activityContainer: PageConfigType = {
title: '拼团',
theme: 0
},
childNodes: ["15-1"]
// childNodes: ["15-1"]
},
"15-1": {
componentName: 'CommodityList.Item',
......@@ -316,7 +311,7 @@ const activityContainer: PageConfigType = {
title: '砍价',
theme: 1
},
childNodes: ["16-1"]
// childNodes: ["16-1"]
},
"16-1": {
componentName: 'CommodityList.Item',
......@@ -332,7 +327,7 @@ const activityContainer: PageConfigType = {
title: '组合促销',
theme: 0
},
childNodes: ["17-1"]
// childNodes: ["17-1"]
},
"17-1": {
componentName: 'CommodityList.Item',
......@@ -348,7 +343,7 @@ const activityContainer: PageConfigType = {
title: '换购-满额换购',
theme: 0
},
childNodes: ["18-1"]
// childNodes: ["18-1"]
},
"18-1": {
componentName: 'CommodityList.Item',
......@@ -364,7 +359,7 @@ const activityContainer: PageConfigType = {
title: '组合促销',
theme: 0
},
childNodes: ["19-1"]
// childNodes: ["19-1"]
},
"19-1": {
componentName: 'CommodityList.Item',
......@@ -380,7 +375,7 @@ const activityContainer: PageConfigType = {
title: '预售',
theme: 0
},
childNodes: ["20-1"]
// childNodes: ["20-1"]
},
"20-1": {
componentName: 'CommodityList.Item',
......@@ -396,7 +391,7 @@ const activityContainer: PageConfigType = {
title: '套餐',
theme: 0
},
childNodes: ["21-1"]
// childNodes: ["21-1"]
},
"21-1": {
componentName: 'CommodityList.Item',
......@@ -412,7 +407,7 @@ const activityContainer: PageConfigType = {
title: '试用',
theme: 0
},
childNodes: ["22-1"]
// childNodes: ["22-1"]
},
"22-1": {
componentName: 'CommodityList.Item',
......@@ -422,6 +417,34 @@ const activityContainer: PageConfigType = {
},
};
const customizeActiveProducts: PageConfigType = {
"23": {
componentName: 'WrapCommodityList',
title: '自定义区域',
dataIndex: 'suggestProduct',
// childNodes: ["23-1"],
childComponentName: "CommodityList",
addBtnText: '添加活动',
},
"23-1": {
componentName: 'CommodityList',
addBtnText: '添加商品',
childComponentName: "CommodityList.Item",
title: 'test',
props: {
title: 'test',
theme: 0
},
// childNodes: ["23-1-1"]
},
"23-1-1": {
componentName: 'CommodityList.Item',
title: '试用-商品',
props: {},
addBtnText: '添加'
},
};
......@@ -429,7 +452,8 @@ const configs = {
...mallLayoutConfig,
...divWrap,
...couponContainer,
...activityContainer
...activityContainer,
...customizeActiveProducts,
};
export default configs;
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/common/configs/schema.ts
View file @ d37fd01e
......@@ -12,7 +12,7 @@ const View: ComponentSchemaType = {
const Advertisement: ComponentSchemaType = {
propsConfig: {
componentType: {
type: "Advertisement",
type: "Advertisement" as any,
},
imageUrl: {
label: '图片链接',
......@@ -98,8 +98,19 @@ const CommodityList = {
}
};
const WrapCommodityList = {
WrapCommodityList: {
propsConfig: {
componentType: {
type: "WrapCommodityList",
},
}
}
};
export default {
Commodity,
WrapCommodityList,
Advertisement,
...Coupon,
View,
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/common/hooks/useGetData.tsx
View file @ d37fd01e
......@@ -5,7 +5,6 @@ import cloneDeep from 'lodash/cloneDeep';
import { PublicApi } from '@/services/api';
import { PostMarketingCouponPlatformActivityPageSelectDetailResponse } from '@/services/MaketingV2Api';
import mock from '../mock/index.json';
import dataMock from '../mock/data.json';
type PageConfigType = {
[key: string]: {
......@@ -80,15 +79,38 @@ const SERVICE_MAP = {
products: res,
};
}
},
"suggestProduct": {
prefixFormat: (data) => {
const postData = data.reduce((prev, current) => {
prev = prev.concat(
current.childrenData.map((_item) => {
return _item.id;
}
));
return prev;
}, []);
return { ids: postData };
},
service: PublicApi.getMarketingPlatformActivityGoodsAdorn,
propsName: 'products',
format: (res) => {
return {
products: res,
};
}
}
};
const ACTIVITYS = ["specialOffer", "plummet", "discount", "fullQuantitySub", "fullQuantityDiscount", "fullMoneySub", "fullMoneyDiscount", "giveProduct", "giveCoupon", "morePiece", "combination", "groupPurchase", "bargain", "secKill", "fullSwap", "buySwap", "preSale", "setMeal", "attempt"];
function useGetData(pageConfig: PageConfigType) {
const [dataSource, setDataSource] = useState<null | DataSourceType>(null);
const [loading, setLoading] = useState<boolean>(true);
// const [pageConfigData, setPageConfigData] = useState(pageConfig);
const [modules, setModules] = useState({});
useEffect(() => {
async function fetchData() {
......@@ -134,6 +156,7 @@ function useGetData(pageConfig: PageConfigType) {
});
const newSortChild: string[] = [];
const newModule = {};
/** _item: "top" | "coupon" | string */
for (const _item of sortedArray) {
if(prevSortMap[_item]) {
......@@ -144,15 +167,21 @@ function useGetData(pageConfig: PageConfigType) {
...props,
...targetPageConfig.props,
};
if (ACTIVITYS.includes(_item)) {
newModule[_item] = {
title: props?.title || _item,
visible: props?.visible,
};
}
/** 如果包含children， 那么給他的children 设置props, @toReview 只支持一层 */
if (typeof sortedChildren[_item].props.children !== 'undefined') {
if (typeof sortedChildren[_item].props.childrenData !== 'undefined') {
/** 先拿一层儿子的config */
const defaultChildConfig = newPageConfig[`${current}-1`];
const newChildKeys: string[] = [];
const { service = null, format, prefixFormat, propsName } = SERVICE_MAP[_item] || {};
/** @request */
if (service && sortedChildren[_item]?.props?.children?.length > 0) {
const postData = prefixFormat && prefixFormat(sortedChildren[_item].props.children);
if (service && sortedChildren[_item]?.props?.childrenData?.length > 0) {
const postData = prefixFormat && prefixFormat(sortedChildren[_item].props.childrenData);
const { data, code } = await service(postData, {ctlType: 'none'});
if (code === 1000) {
const formatedData = format(data);
......@@ -163,8 +192,7 @@ function useGetData(pageConfig: PageConfigType) {
}
}
sortedChildren[_item].props.children?.forEach((_row, _index: number) => {
sortedChildren[_item].props.childrenData?.forEach((_row, _index: number) => {
if (typeof newPageConfig[`${current}-${_index + 1}`] === 'undefined') {
newPageConfig[`${current}-${_index + 1}`] = {
...defaultChildConfig,
......@@ -172,11 +200,35 @@ function useGetData(pageConfig: PageConfigType) {
};
}
const childrenProps = newPageConfig[`${current}-${_index + 1}`].props;
const requestData = typeof _row.childrenData === 'undefined' ? newPageConfig[`${current}`]?.props?.[propsName]?.[_index] || {} : { [propsName]: newPageConfig[`${current}`]?.props?.[propsName]};
newPageConfig[`${current}-${_index + 1}`].props = {
...childrenProps,
..._row,
...newPageConfig[`${current}`]?.props?.[propsName]?.[_index] || {},
...requestData,
};
/** 这里不考虑扩展递归情况， 直接写死算了@toReview 有时间再优化 */
if (typeof _row.childrenData !== 'undefined') {
const copyConfig = newPageConfig[`${current}-1-1`];
const tempChildrenKeys: any = [];
_row.childrenData.forEach((_record, _childrenIndex) => {
if (typeof newPageConfig[`${current}-${_index + 1}-${_childrenIndex + 1}`] === 'undefined') {
newPageConfig[`${current}-${_index + 1}-${_childrenIndex + 1}`] = {
...copyConfig,
props: {}
};
}
const tempProps = newPageConfig[`${current}-${_index + 1}-${_childrenIndex + 1}`].props;
newPageConfig[`${current}-${_index + 1}-${_childrenIndex + 1}`].props = {
...tempProps,
..._record,
...newPageConfig[`${current}`]?.props?.[propsName]?.[_index] || {},
};
tempChildrenKeys.push(`${current}-${_index + 1}-${_childrenIndex + 1}`);
});
newPageConfig[`${current}-${_index + 1}`].childNodes = tempChildrenKeys;
}
newChildKeys.push(`${current}-${_index + 1}`);
});
if(newChildKeys.length > 0) {
......@@ -187,20 +239,18 @@ function useGetData(pageConfig: PageConfigType) {
newSortChild.push(current);
}
}
// sortedArray.forEach((_item: "top" | "coupon" | string) => {
// });
/** 添加剩余的子节点进去 */
const restNode = childrenNodes?.filter((_item) => !newSortChild.includes(_item));
newPageConfig[0]["childNodes"] = newSortChild.concat(restNode as string[]);
// setPageConfigData(newPageConfig);
setLoading(false);
setModules(newModule);
updatePageConfig(newPageConfig);
}
setPageConfigData();
}, [dataSource]);
return { dataSource, loading};
return { dataSource, loading, modules};
}
export default useGetData;
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/common/mock/index.json
View file @ d37fd01e
......@@ -3,7 +3,7 @@
"sort":1,
"props": {
"theme":0,
"visible": "true",
"visible": 1,
"imageUrl": "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f1554b3d35c9419b8b9fa0efbd0965721610953764867.png"
}
},
......@@ -12,7 +12,7 @@
"props": {
"theme":0,
"visible": 1,
"children": [
"childrenData": [
{"id": 4, "type": 1},
{"id": 57, "type": 2}
]
......@@ -23,18 +23,18 @@
"props": {
"theme":0,
"visible": 1,
"children": [22]
"childrenData": [22]
}
},
"specialOffer":{
"sort":4,
"props": {
"theme":2,
"visible": 1,
"visible": 0,
"title":"特价促销",
"explain":"爆款限时特价",
"icon":"xxx.png",
"children": [1]
"childrenData": [1]
}
},
"plummet":{
......@@ -45,7 +45,7 @@
"title":"直降促销",
"explain":"大牌商品最高直降100元",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children": [1, 2, 3]
"childrenData": [1, 2, 3]
}
},
"discount":{
......@@ -56,7 +56,7 @@
"title":"折扣促销",
"explain":"大牌商品低至5折起",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children": [1, 2, 3]
"childrenData": [1, 2, 3]
}
},
"fullQuantitySub":{
......@@ -67,7 +67,7 @@
"title":"满量促销--满量减",
"explain":"大牌商品多买最高减100元",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children": [1]
"childrenData": [1]
}
},
"fullQuantityDiscount":{
......@@ -78,7 +78,7 @@
"title":"满量促销--满量折",
"explain":"大牌商品多买最高5折起",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children": [1]
"childrenData": [1]
}
},
"fullMoneySub":{
......@@ -88,7 +88,7 @@
"title":"满额促销--满额减",
"explain":"大牌商品买满299元最高减100元",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children": [1]
"childrenData": [1]
}
},
"fullMoneyDiscount":{
......@@ -99,7 +99,7 @@
"title":"满额促销--满额折",
"explain":"大牌商品买满199元最高5折起",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children": [1]
"childrenData": [1]
}
},
"giveProduct":{
......@@ -110,7 +110,7 @@
"title":"赠送促销--赠送商品(满额赠+买商品赠)",
"explain":"买满199元即有机会获赠以下商品",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"giveCoupon":{
......@@ -121,7 +121,7 @@
"title":"赠送促销--赠送优惠劵(满额赠+买商品赠)",
"explain":"买满199元即有机会获赠以下商品",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"morePiece":{
......@@ -132,7 +132,7 @@
"title":"多件促销",
"explain":"以下商品第二件5折起",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"combination":{
......@@ -143,7 +143,7 @@
"title":"组合促销",
"explain":"任选3件，只需99元",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"groupPurchase":{
......@@ -154,7 +154,7 @@
"title":"拼团",
"explain":"时令水果拼团专场",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"bargain":{
......@@ -165,7 +165,7 @@
"title":"砍价",
"explain":"砍一砍，免费拿",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"secKill":{
......@@ -176,7 +176,7 @@
"title":"秒杀",
"explain":"今日大牌秒杀",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"fullSwap":{
......@@ -187,7 +187,7 @@
"title":"换购-满额换购",
"explain":"买满199元即可换购下面商品",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"buySwap":{
......@@ -198,7 +198,7 @@
"title":"换购-买商品换购",
"explain":"买了这台苹果18元即可换购下面商品",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"preSale":{
......@@ -209,7 +209,7 @@
"title":"预售",
"explain":"大牌新品火爆预售",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"setMeal":{
......@@ -220,7 +220,7 @@
"title":"套餐",
"explain":"超级搭配套餐",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"attempt":{
......@@ -231,7 +231,22 @@
"title":"试用",
"explain":"大牌新品免费试用",
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/7a7edf5a086346c2bc6f7c123181023a1611024003828.png",
"children":[1]
"childrenData":[1]
}
},
"suggestProduct":{
"sort":23,
"props": {
"theme":0,
"visible":true,
"childrenData":[
{
"title":"应季爆款1",
"childrenData": [
{"id": 22, "label":["特价", "满299减30"]}
]
}
]
}
}
}
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ActivityAreaSetting/index.tsx
View file @ d37fd01e
......@@ -62,6 +62,10 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
getListType();
}, []);
const handleInputChange = (e) => {
setInnerTitle(e.target.value);
};
const onSelectedChange = (value: number) => {
setSelectedType(value);
};
......@@ -70,7 +74,6 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
if (!visible) {
return;
}
console.log(products);
setInnerProducts(products as any);
}, [visible, products]);
......@@ -88,13 +91,13 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
const onConfirm = () => {
const selectedKey = selectedInfo.selectedKey;
const { theme } = selectedInfo.props;
const elements: any = innerProducts.map((_item, index) => {
return {
key: `${selectedKey}-${index + 1}`,
title: _item.productName,
props: _item,
componentName: 'CommodityList.Item'
componentName: theme === 2 ? 'CommodityList.CommodityTab' : 'CommodityList.Item'
};
});
resetCurrentComponent({
......@@ -106,18 +109,9 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
products: innerProducts,
},
});
// changeProps({
// props: {
// ...rest,
// children: innerProducts.map((_item) => _item.id),
// products: innerProducts,
// },
// });
};
const onRemove = (data: { id: number, activityId: number }) => {
console.log(data);
const newData = innerProducts.filter((_item) => (_item.activityId !== data.activityId || _item.id !== data.id));
setInnerProducts(newData);
};
......@@ -130,7 +124,7 @@ const ActivityAreaSetting: React.FC<Iprops> = (props: Iprops) => {
<div className={styles.container}>
<div className={styles.name}>
<span className={styles.label}>名称</span>
<Input value={innerTitle} />
<Input value={innerTitle} onChange={handleInputChange} />
</div>
{
withTypeSelect && (
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ComponentTree/ComponentModule.tsx
View file @ d37fd01e
import React from 'react';
import React, { useEffect, useState } from 'react';
import { Switch } from 'antd';
const ComponentModule = () => {
interface Iprops {
image?: React.ReactNode,
title: string,
visible: boolean,
onChange?: ((checked: boolean) => void) | null
}
const ComponentModule: React.FC<Iprops> = (props: Iprops) => {
const { image, title, visible, onChange = null, } = props;
const [innerVisible, setInnerVisible] = useState<boolean>(false);
useEffect(() => {
setInnerVisible(visible);
}, [visible])
const handleChange = (checked: boolean) => {
onChange?.(checked);
};
return (
<div style={{ height: '160px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
<img style={{width: '24px', height: '24px'}} />
<div style={{margin: '8px 0'}}>特价促销</div>
<div style={{margin: '8px 0'}}>{title}</div>
<div>
<Switch size="small" />
<Switch size="small" checked={innerVisible} onChange={handleChange} />
</div>
</div>
);
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/Layouts/CommodityList/index.tsx
View file @ d37fd01e
......@@ -39,7 +39,10 @@ const CommodityList: React.FC<Iprops> & { Item: typeof CommodityItem, CommodityT
<div className={styles.twoColumns}>
{
React.Children.map(children, (_child: any) => {
return React.cloneElement(_child, {..._child.props, customizeClassName: styles.commodityItem, mode: 'vertical'});
if (_child === null) {
return null;
}
return React.cloneElement(_child, {..._child?.props || {}, customizeClassName: styles.commodityItem, mode: 'vertical'});
})
}
</div>
......@@ -51,6 +54,9 @@ const CommodityList: React.FC<Iprops> & { Item: typeof CommodityItem, CommodityT
<div>
{
React.Children.map(children, (_child: any) => {
if (_child === null) {
return null;
}
return React.cloneElement(_child, {..._child.props});
})
}
......
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/Layouts/WrapCommodityList/index.tsx 0 → 100644
View file @ d37fd01e
import React, { useState } from 'react';
import cx from 'classnames';
import _omit from 'lodash/omit';
interface Iprops {
className: any,
children: any
}
const WrapCommodityList: React.FC<Iprops> = (props: Iprops) => {
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, getOperateState,
};
const renderComponent = () => {
return (
<div>
{
React.Children.map(children, (_child: any) => {
console.log(_child);
return React.cloneElement(_child, {title: '123', ..._child.props || {}});
})
}
</div>
);
};
return (
<div className={classNameStr} {...divProps}>
{
renderComponent()
}
</div>
);
};
export default WrapCommodityList;
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/Layouts/index.tsx
View file @ d37fd01e
import Advertisement from './Advertisement';
import Coupon from './Coupon';
import CommodityList from './CommodityList';
import WrapCommodityList from './WrapCommodityList';
export default {
Advertisement,
Coupon,
CommodityList
CommodityList,
WrapCommodityList
};
src/pages/marketing/marketingActivitiesManagement/activePage/fixtures/index.tsx
View file @ d37fd01e
import React from 'react';
import React, { useEffect } from 'react';
import { Spin, message , Tabs } from 'antd';
import { BrickProvider, ModuleTree, useSelector } from '@lingxi-disign/react';
// import MobileDesignPanel from '@/pages/pageCustomized/components/MobileDesignPanel';
......@@ -28,9 +28,15 @@ interface Iprops {
}
const Fixtures: React.FC<Iprops> = (props: Iprops) => {
const { dataSource, loading } = useGetData(componentConfigs as any);
const { dataSource, loading, modules } = useGetData(componentConfigs as any);
console.log(modules);
const onModuleVisibleChange = (checked) => {
console.log(checked);
}
return (
<Spin spinning={false}>
<Spin spinning={loading}>
<BrickProvider
config={configs}
warn={(msg: string) => {
......@@ -49,10 +55,11 @@ const Fixtures: React.FC<Iprops> = (props: Iprops) => {
<TabPane tab="全部模块" key="2">
<div className={styles.module}>
{
[1,2,3].map((_item) => {
Object.keys(modules).map((_item) => {
const { visible, title } = modules[_item];
return (
<div className={styles.moduleItem} key={_item}>
<ComponentModule />
<ComponentModule title={title} visible={visible} onChange={onModuleVisibleChange} />
</div>
);
})
......@@ -63,9 +70,7 @@ const Fixtures: React.FC<Iprops> = (props: Iprops) => {
</div>
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel theme={'theme-mall-science'} onlyEidt />
</div>
</div>
<EditPanel />
......
src/pages/pageCustomized/components/DesignPanel.tsx
View file @ d37fd01e
import React from 'react';
import { PageConfigType } from '@lingxi-disign/core';
import { BrickDesign } from '@lingxi-disign/react';
import { PageConfigType } from '@lingxi-disign/core';
import { BrickDesign, useSelector } from '@lingxi-disign/react';
interface DesignPanelPropsType {
pageConfig: PageConfigType,
pageConfig?: PageConfigType,
theme: string,
onlyEidt?: boolean,
pageName?: string
}
const DesignPanel: React.FC<DesignPanelPropsType> = (props) => {
const { pageConfig, theme, pageName = 'index', onlyEidt } = props;
const { theme, pageName = 'index', onlyEidt } = props;
const { pageConfig } = useSelector(['pageConfig']);
return <BrickDesign
pageName={pageName}
initState={{ pageConfig }}
......
src/pages/pageCustomized/components/DesignPreview.tsx
View file @ d37fd01e
......@@ -3,7 +3,7 @@ import { PageConfigType } from '@lingxi-disign/core';
import { BrickPreview } from '@lingxi-disign/react';
interface DesignPanelPropsType {
pageConfig: PageConfigType,
pageConfig?: PageConfigType,
theme: string,
onlyEidt?: boolean,
pageName?: string
......
src/pages/pageCustomized/components/MobileDesignPanel.tsx
View file @ d37fd01e
......@@ -6,20 +6,21 @@ import DesignPreview from './DesignPreview';
import styles from './index.less';
import { useSelector } from '@lingxi-disign/react';
interface MobileDesignPanelPropsType {
pageConfig: PageConfigType,
pageConfig?: PageConfigType,
theme: string,
isPreview?: boolean,
onlyEidt?: boolean,
}
const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
const { theme, isPreview, pageConfig, onlyEidt } = props;
const { theme, isPreview, onlyEidt } = props;
return (
<div className={styles.mobileDesignContainer}>
<div className={styles.mobileDesignWrap}>
{
isPreview ? <DesignPreview theme={theme} pageConfig={pageConfig} /> : <DesignPanel onlyEidt={onlyEidt} theme={theme} pageConfig={pageConfig} />
isPreview ? <DesignPreview theme={theme} /> : <DesignPanel onlyEidt={onlyEidt} theme={theme} />
}
</div>
<div className={styles.appBottom}>
......
src/pages/pageCustomized/components/mobileEditLeft/index.less 0 → 100644
View file @ d37fd01e
.allcomponents_container {
width: 320px;
background-color: #FFF;
.header {
height: 48px;
padding: 0 20px;
line-height: 48px;
color: #303133;
font-size: 16px;
font-weight: bold;
border-bottom: 1px solid #EEF0F3;
}
.components_list {
padding: 16px 0;
display: flex;
flex-direction: column;
}
}
src/pages/pageCustomized/components/mobileEditLeft/index.tsx 0 → 100644
View file @ d37fd01e
import React from 'react';
import { ModuleTree } from '@lingxi-disign/react'
import styles from './index.less';
const MobileEditLeft = () => {
return (
<div className={styles.allcomponents_container}>
<div className={styles.header}>
<span>我的模块</span>
</div>
<div className={styles.components_list}>
<ModuleTree />
</div>
</div>
);
};
export default MobileEditLeft;
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/HeaderNav.ts
View file @ d37fd01e
......@@ -6,6 +6,10 @@ import {
const HeaderNav: ComponentSchemaType = {
propsConfig: {
styleType: {
label: "样式",
type: PROPS_TYPES.objectArray
},
children: {
label: '内容',
type: PROPS_TYPES.string,
......@@ -20,6 +24,10 @@ const ActionItem: ComponentSchemaType = {
label: '内容',
type: PROPS_TYPES.string,
},
componentType: {
label: '内容',
type: PROPS_SETTING_TYPES.mobileHeaderNavAction
},
},
};
......
src/pages/pageCustomized/mobileEdit/config.ts
View file @ d37fd01e
import { PROPS_SETTING_TYPES } from '@lingxi-disign/core'
import { PROPS_SETTING_TYPES, PageConfigType } from '@lingxi-disign/core'
import { resolveMappingPageConfig } from '@lingxi-disign/react'
import styleThemeImgDefault from './imgs/style_theme_default.png'
import styleThemeImgScience from './imgs/style_theme_science.png'
......@@ -6,70 +7,78 @@ import mineIcon from './imgs/mine_icon.png'
import orderIcon from './imgs/order_icon.png'
import kefuIcon from './imgs/kefu_icon.png'
export const mallLayoutConfig = {
key: "0",
"0": {
"componentName": "MallLayout",
"props": {
"style": {
"width": "100%",
"minHeight": "100%",
"background": "#F7F8FA",
"overflowX": "hidden",
"paddingBottom": "50px",
}
},
"childNodes": ["1", "5", "6", "7", "8", "9", "10"]
const categoryList = [
{
value: 1,
label: "建材"
},
}
{
value: 2,
label: "热卷"
},
{
value: 3,
label: "冷镀"
},
{
value: 4,
label: "中厚板"
},
{
value: 5,
label: "型管"
}
]
export const divWrap = {
key: "1",
"1": {
"componentName": "div",
"props": {
"style": {
"width": "100%",
"background": "#FFF",
}
},
"childNodes": ["2", "3"]
const defaultHeaderNavData = [
{
name: "我的",
content: "",
status: true,
type: 1
},
{
name: "进货单",
content: "",
status: true,
type: 2
},
{
name: "客服",
content: "",
status: true,
type: 3
},
{
name: "搜索框",
content: "灯具",
status: true,
type: 4
}
}
]
export const mobileHeaderNav = {
key: "2",
"2": {
"componentName": "MobileHeaderNav",
"componentType": PROPS_SETTING_TYPES.mobileHeaderNav,
"title": "顶部导航",
"canEdit": true,
"canHide": false,
"props": {
styleTheme: 0,
dataList: [
{
name: "我的",
content: mineIcon,
status: true,
},
{
name: "进货单",
content: orderIcon,
status: true,
},
{
name: "客服",
content: kefuIcon,
status: true,
},
{
name: "搜索框",
content: "",
status: true,
}
],
stylesThemeList: [
export const defaultConfig: PageConfigType = {
'0': {
componentName: 'MallLayout',
props: {
style: {
width: '100%',
minHeight: '100%',
background: '#F7F8FA',
overflowX: 'hidden',
paddingBottom: '56px',
position: 'relative',
},
},
childNodes: ["1"]
},
'1': {
title: '头部导航栏',
componentName: 'HeaderNav',
props: {
styleTheme: 1,
categoryList: categoryList,
stylesthemelist: [
{
key: 0,
img: styleThemeImgDefault,
......@@ -80,9 +89,68 @@ export const mobileHeaderNav = {
}
]
},
childNodes: ['2'],
childComponentName: 'HeaderNav.ActionItem',
},
'2': {
loop: '${headerNav}',
title: '${item.name}',
hideActions: true,
componentName: 'HeaderNav.ActionItem',
props: {
data: '${item}'
},
},
}
const allState = { headerNav: defaultHeaderNavData }
export const moduleConfig = resolveMappingPageConfig(defaultConfig, allState)
console.log(moduleConfig, 'moduleConfig')
export const mallLayoutConfig = {
'0': {
componentName: 'MallLayout',
props: {
style: {
width: '100%',
minHeight: '100%',
background: '#F7F8FA',
overflowX: 'hidden',
paddingBottom: '56px',
position: 'relative',
},
},
childNodes: ["1", "5", "6", "7", "8", "9", "10"]
}
}
export const divWrap = {
1: {
componentName: "div",
props: {
style: {
width: "100%",
background: "#FFF",
}
},
childNodes: ["2", "3"]
}
}
export const mobileHeaderNav = {
2: {
title: '头部导航栏',
canEdit: false,
canHide: true,
componentName: 'HeaderNav',
props: {},
childNodes: [],
childComponentName: 'HeaderNav.ActionItem',
},
}
export const bannerWrap = {
key: "3",
"3": {
......
src/pages/pageCustomized/mobileEdit/index.tsx
View file @ d37fd01e
import React, { useEffect, useState } from 'react';
import { BrickProvider } from '@lingxi-disign/react';
import { updatePageConfig } from '@lingxi-disign/core'
import { message } from 'antd';
import { PublicApi } from '@/services/api';
import { GetTemplateAdornAppEnterpriseFindResponse } from '@/services/TemplateApi';
import {
moduleConfig,
mallLayoutConfig,
divWrap,
bannerWrap,
......@@ -19,7 +21,7 @@ import {
import styles from './index.less';
import ToolBar from '../components/toolBar';
import MobileDesignPanel from '../components/MobileDesignPanel';
import AllComponents from '../components/ComponentsPreview';
import MobileEditLeft from '../components/mobileEditLeft'
import config from '../configs';
import Loading from '../components/Loading';
// import { GlobalConfig } from '@/global/config'
......@@ -54,14 +56,24 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
};
useEffect(() => {
if (!TemplateList.includes(template)) {
setTheme(`theme-mall-${TemplateList[0]}`);
} else {
setTheme(`theme-mall-${template}`);
}
getComponentsConfig();
initConfig()
// getComponentsConfig();
}, []);
const initConfig = () => {
setTimeout(() => {
setLoading(false)
updatePageConfig(moduleConfig)
}, 2000);
}
/**
* 获取app企业商城装修信息
*/
......@@ -268,10 +280,10 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
<div className={styles['wrapper']}>
<ToolBar type={1} title="APP首页" showActions={true} templateId={id} />
<div className={styles['content']}>
<AllComponents />
<MobileEditLeft />
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel theme={theme} onlyEidt pageConfig={componentConfigs} />
<MobileDesignPanel theme={theme} onlyEidt />
</div>
</div>
<MobileSettingPanel />
......
src/pages/pageCustomized/mobileSettingPanel/index.tsx
View file @ d37fd01e
......@@ -21,6 +21,7 @@ const MobileSettingPanel: React.FC = ()=> {
const [ newSelectInfo, setNewSelectInfo ] = useState<SelectedInfoType>();
useEffect(() => {
console.log(pageConfig, 'pageConfig')
const updateSelectInfo = () => {
if(selectedInfo) {
const { props: oldProps ,selectedKey } = selectedInfo;
......@@ -40,9 +41,13 @@ const MobileSettingPanel: React.FC = ()=> {
defaultActiveKey="1"
className={styles.settingTabs}
>
<TabPane tab="编辑" key="props">
<PropsSettings selectedInfo={newSelectInfo} pageConfig={pageConfig} />
</TabPane>
{
(propsConfig && propsConfig.componentType) && (
<TabPane tab={propsConfig.componentType.label || '编辑'} key="props">
<PropsSettings selectedInfo={newSelectInfo} pageConfig={pageConfig} />
</TabPane>
)
}
{
(propsConfig && propsConfig.styleType) && (
<TabPane tab="样式" key="style">
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/headerNavAction/index.less 0 → 100644
View file @ d37fd01e
@import "../../common.less";
.banner {
&-box {
margin-bottom: 16px;
:global {
.ant-upload {
width: 100%;
}
}
&-label {
font-size: 12px;
color: #91959B;
margin-bottom: 8px;
}
&-icon {
height: 96px;
background-color: #FAFBFC;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
&>img {
width: 100%;
}
&-add {
width: 24px;
height: 24px;
}
&:hover {
.banner-box-icon-cover {
display: block;
}
}
&-cover {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .1);
display: none;
z-index: 1;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
}
&-bottom {
position: absolute;
height: 24px;
line-height: 24px;
text-align: center;
background-color: rgba(0, 0, 0, 0.24);
font-size: 12px;
color: #fff;
width: 100%;
bottom: 0;
left: 0;
}
}
}
}
&-record {
&-shop {
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
img {
width: 40px;
height: 40px;
margin-right: 8px;
}
span {
flex: 1;
color: #303133;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&-integral {
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
img {
width: 40px;
height: 40px;
margin-right: 8px;
}
&-right {
flex: 1;
display: flex;
flex-direction: column;
&-top {
flex: 1;
color: #303133;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-bottom {
flex: 1;
color: #EA8000;
font-size: 12px;
}
}
}
&-activity {
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
position: relative;
img {
width: 40px;
height: 40px;
border-radius: 4px;
margin-right: 8px;
}
&-right {
flex: 1;
display: flex;
flex-direction: column;
font-size: 12px;
&-top {
flex: 1;
color: #303133;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-bottom {
flex: 1;
color: #91959B;
}
}
&-tag{
position: absolute;
right: 0;
top: -3px;
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/headerNavAction/index.tsx 0 → 100644
View file @ d37fd01e
import React, { useMemo, useState, useEffect } from 'react';
import { Input, Select, Row, Col, Button, Tooltip } from 'antd';
import { PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import { PublicApi } from '@/services/api';
import UploadImage from '@/components/UploadImage';
import StatusTag from '@/components/StatusTag'
import { priceFormat } from '@/utils/numberFomat';
import MixDrawer from '@/pages/pageCustomized/Drawers/MixDrawer';
import ActivityDrawer from '@/pages/pageCustomized/Drawers/ActivityDrawer';
import uploadImgIcon from '@/asserts/icons/upload_img_icon.svg'
import styles from './index.less';
interface BannerClientProps {
// 名称
name?: string,
// 图片
img?: any,
// 跳转类型
type?: any,
// 跳转类型的id
id?: any,
// 当前选中组件的key
selectedKey?: any,
// 1.B端 2.C端 3.SRM
property?: 1 | 2 | 3
}
const RedirectTypeList_C = [
{
value: 1,
label: '商品详情',
},
{
value: 2,
label: '活动主页',
},
{
value: 3,
label: '积分详情',
},
{
value: 4,
label: '店铺主页',
},
{
value: 5,
label: '不跳转',
},
];
const RedirectTypeList_B = [
{
value: 1,
label: '商品详情',
},
{
value: 2,
label: '活动主页',
},
{
value: 3,
label: '积分详情',
},
{
value: 4,
label: '店铺主页',
},
{
value: 5,
label: '资讯详情',
},
{
value: 6,
label: '不跳转',
},
];
const HeaderNavAction: React.FC<BannerClientProps> = (props: BannerClientProps) => {
const { name, img, id, type, property = 2, selectedKey } = props;
const [mixVisible, setMixVisible] = useState<boolean>(false);
const [actVisible, setActVisible] = useState<boolean>(false);
const [record, setRecord] = useState<any>();
const _fetch: any = useMemo(() => {
switch (type) {
case 1:
case 3:
return PublicApi.getProductCommodityGetCommodity
case 2:
return PublicApi.getTemplateWebActivityPageGet
case 4:
return PublicApi.getTemplateWebMemberShopWebFindById
}
return async () => { }
}, [type])
const _isNull = (list) => {
let _flag = true;
for (let key in list) {
if (list[key]) {
_flag = false
}
}
return _flag;
}
useEffect(() => {
switch (type) {
case 1:
case 2:
case 3:
case 4:
id && _fetch?.({ id: id }).then((res) => {
if (res.code === 1000) {
setRecord(res.data)
}
}).catch(_ => setRecord(''));
break;
default:
setRecord('')
break;
}
}, [_fetch, id, type])
const _selectOption = useMemo(() => {
if (property === 1) {
return RedirectTypeList_B
}
if (property === 2) {
return RedirectTypeList_C
}
}, [property])
const _recordDetail = useMemo(() => {
if (record) {
if (type === 2) {
return (
<div className={styles['banner-record-activity']}>
<img src={record?.templatePicUrl} />
<div className={styles['banner-record-activity-right']}>
<Tooltip title={record?.name}>
<div className={styles['banner-record-activity-right-top']}>{record?.name}</div>
</Tooltip>
{record?.type === 2 && <div className={styles['banner-record-activity-right-bottom']}>{record?.memberName}</div>}
</div>
<div className={styles['banner-record-activity-tag']}><StatusTag title={record?.type === 1 ? '平台' : '商家'} type={record?.type === 1 ? 'success' : 'primary'} /></div>
</div>
)
}
if (type === 3) {
return (
<div className={styles['banner-record-integral']}>
<img src={record?.mainPic} />
<div className={styles['banner-record-integral-right']}>
<Tooltip title={record?.name}>
<div className={styles['banner-record-integral-right-top']}>{record?.name}</div>
</Tooltip>
<div className={styles['banner-record-integral-right-bottom']}>{priceFormat(record?.unitPrice?.['0-0'])} 积分</div>
</div>
</div>
)
}
if (type === 4) {
return (
<div className={styles['banner-record-shop']}>
<img src={record?.logo} />
<Tooltip title={record?.memberName}>
<span>{record?.memberName}</span>
</Tooltip>
</div>
)
}
}
}, [type, record])
const _showChoose = useMemo(() => {
if (property === 1 && type === 6) {
return false
}
if (property === 2 && type === 5) {
return false
}
return true;
}, [type, property])
const _onChangeName = (e: any) => {
const _val = e.target.value;
changeProps({
title: _val || '',
props: Object.assign({ ...props }, { name: _val, isnull: _isNull([_val, img, type]) })
});
}
const _onChangeType = (value: any) => {
changeProps({
props: Object.assign({ ...props }, { type: value, isnull: _isNull([name, img, value]) }, !_showChoose ? { id: '' } : {})
});
}
const _onChangeImg = (url: any) => {
changeProps({
props: Object.assign({ ...props }, { img: url, isnull: _isNull([name, url, type]) })
});
}
const _onShopClose = () => {
setMixVisible(false);
}
const _onActClose = () => {
setActVisible(false);
}
const _onChoose = () => {
switch (type) {
case 2:
setActVisible(true);
break;
case 3:
case 4:
setMixVisible(true);
break;
}
}
const _onChooseConfirm = (record) => {
setRecord(record);
switch (type) {
case 2:
changeProps({
props: Object.assign({ ...props }, { id: record.id, isnull: _isNull([name, img, type]) })
});
_onActClose();
break;
case 3:
case 4:
changeProps({
props: Object.assign({ ...props }, { id: record.id, isnull: _isNull([name, img, type]) })
});
_onShopClose()
break;
}
}
return (
<div className={styles['banner']}>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>名称</div>
<Input key={`${selectedKey}-name`} defaultValue={name} onChange={_onChangeName} />
</div>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>图片</div>
{img ? (
<div className={styles['banner-box-icon']}>
<img src={img} />
<div className={styles['banner-box-icon-cover']}>
<UploadImage
onChange={(url) => { _onChangeImg(url) }}
listType="text"
>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
</div>
</UploadImage>
<DeleteOutlined className={styles['banner-box-icon-cover-delete']} onClick={() => { _onChangeImg('') }} />
</div>
</div>
) : (
<UploadImage
onChange={(url) => { _onChangeImg(url) }}
listType="text"
>
<div className={styles['banner-box-icon']}>
<img src={uploadImgIcon} className={styles['banner-box-icon-add']} />
<div className={styles['banner-box-icon-cover']}>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
</div>
</div>
</div>
</UploadImage>
)}
</div>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>跳转链接</div>
<Row gutter={20} style={{ marginBottom: 16 }}>
<Col span={18}>
<Select key={`${selectedKey}-type`} defaultValue={type} onChange={_onChangeType} style={{ width: '100%' }} >
{
_selectOption?.map(selectItem => <Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>)
}
</Select>
</Col>
{_showChoose && <Col span={6}>
<Button block onClick={_onChoose}>选择</Button>
</Col>}
</Row>
{_recordDetail}
</div>
<MixDrawer
onClose={_onShopClose}
property={property}
type={type}
onConfirm={_onChooseConfirm}
visible={mixVisible}
/>
<ActivityDrawer
selectId={id}
visible={actVisible}
onClose={_onActClose}
onConfirm={_onChooseConfirm}
/>
</div>
)
}
export default HeaderNavAction
src/pages/pageCustomized/mobileSettingPanel/propsSettings/index.tsx
View file @ d37fd01e
import React from 'react';
import { SelectedInfoType, PROPS_SETTING_TYPES, PageConfigType } from '@lingxi-disign/core';
import HeaderNav from './components/headerNav';
import HeaderNavAction from './components/headerNavAction'
import Banner from './components/banner';
import QuickNav from './components/quickNav';
import ShowCase from './components/showCase';
......@@ -61,6 +62,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return <BannerClient {..._props} />
case PROPS_SETTING_TYPES.suggestProductItems:
return <SuggestProduct {..._props} />
case PROPS_SETTING_TYPES.mobileHeaderNavAction:
return <HeaderNavAction {..._props} />
case PROPS_SETTING_TYPES.suggestProductCommodity:
return <SuggestProductCommodity {..._props} />
default:
......
src/pages/pageCustomized/mobileSettingPanel/styleSettings/index.tsx
View file @ d37fd01e
......@@ -28,7 +28,7 @@ const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
<div className={styles.styleSettings}>
<div className={styles.styleList}>
{
(selectProps && selectProps.stylesThemeList) && selectProps.stylesThemeList.map(item => (
(selectProps && selectProps.stylesthemelist) && selectProps.stylesthemelist.map(item => (
<div className={cx(styles.styleItem, selectKey === item.key ? styles.active : {})} key={item.key} onClick={() => handleChangeStyleTheme(item.key)}>
<img className={styles.themeImg} src={item.img} title={item.key} />
</div>
......
src/theme/style/colors.less
View file @ d37fd01e
......@@ -10,7 +10,7 @@
--category_content_title_text: #303133;
--category_content_title_text_hover: #00B37A;
--category_content_sub_title_text: #606266;
overflow-x: hidden;
}
// 渠道科技类模板
......
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