Skip to content

J
jinfa-platform
Commit 45d1edb2 authored by XieZhiXiong's avatar XieZhiXiong
Browse files
Options

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

parents b6692a78 b6c7a7b4
Hide whitespace changes
Inline Side-by-side
Showing with 1731 additions and 542 deletions
package.json
View file @ 45d1edb2
......@@ -100,7 +100,7 @@
"rgbaster": "^2.1.1",
"sortablejs": "^1.12.0",
"typescript": "^3.9.7",
"umi": "~3.2.28",
"umi": "^3.2.28",
"video-react": "^0.14.1",
"yorkie": "^2.0.0"
},
......
src/pages/editor/components/MobileDesignPanel.tsx
View file @ 45d1edb2
......@@ -22,14 +22,14 @@ interface MobileDesignPanelPropsType {
}
const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
const { theme, isPreview, onlyEidt } = props;
const { pageConfig: designConfig, theme, isPreview, onlyEidt } = props;
const { pageConfig } = useSelector(['pageConfig']);
console.log(pageConfig, 'pageConfig')
return (
<div className={styles.mobileDesignContainer}>
<div className={styles.mobileDesignWrap}>
{
isPreview ? <DesignPreview theme={theme} pageConfig={pageConfig} /> : <DesignPanel onlyEidt={onlyEidt} theme={theme} pageConfig={pageConfig} />
isPreview ? <DesignPreview onlyEidt={onlyEidt} theme={theme} pageConfig={designConfig} /> : <DesignPanel onlyEidt={onlyEidt} theme={theme} pageConfig={pageConfig} />
}
</div>
<div className={styles.appBottom}>
......
src/pages/mobileTemplate/channelTemplateEdit/index.tsx
View file @ 45d1edb2
......@@ -1009,7 +1009,6 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
!_mallLayoutConfig['0'].childNodes.includes('12') && _mallLayoutConfig['0'].childNodes.push('12');
_mallLayoutConfig['0'].childNodes = [..._mallLayoutConfig['0'].childNodes, '13', '14']
console.log(_suggestProductConfig, '_suggestProductConfig')
const config = {
..._mallLayoutConfig,
..._other,
......@@ -1017,7 +1016,6 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
...defaultConfig,
}
const finalConfig = resolveMappingPageConfig(config, allState)
console.log(finalConfig, 'finalConfig')
setComponentConfigs(finalConfig)
setLoading(false)
updatePageConfig(finalConfig)
......
src/pages/mobileTemplate/channelTemplatePreview/config.ts deleted 100644 → 0
View file @ b6692a78
/*
* @Author: ghua
* @Date: 2021-02-22 17:02:20
* @LastEditTime: 2021-03-01 11:47:26
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /lingxi-business-paltform/src/pages/mobileTemplate/channelTemplateEdit/config.ts
*/
import { PROPS_SETTING_TYPES } from '@lingxi-disign/core'
import styleThemeImgDefault from './imgs/style_theme_default.png'
import styleThemeImgScience from './imgs/style_theme_science.png'
export const mallLayoutConfig = {
key: "0",
"0": {
"componentName": "MallLayout",
"props": {
"style": {
"width": "100%",
"minHeight": "100%",
"background": "#F7F8FA",
"overflowX": "hidden",
"paddingBottom": "50px",
}
},
"childNodes": ["1", "2", "4", "5", "6", "7"]
},
}
export const mobileChannelHeaderNav = {
key: "1",
"1": {
"componentName": "MobileChannelHeaderNav",
"componentType": PROPS_SETTING_TYPES.mobileHeaderNav,
"title": "顶部导航栏",
"canEdit": true,
"canHide": false,
"props": {
styleTheme: 1,
dataList: [
{
name: "进货单",
content: "",
status: true,
},
{
name: "我的",
content: "",
status: true,
},
{
name: "搜索框",
content: "请输入商品名称或者品类",
status: true,
}
],
stylesThemeList: [
{
key: 0,
img: styleThemeImgDefault,
},
{
key: 1,
img: styleThemeImgScience,
}
]
},
}
}
export const divWrap = {
key: "2",
"2": {
"componentName": "div",
"props": {
"style": {
position: "relative",
marginTop: -48,
zIndex: 6,
}
},
"childNodes": ["3"]
}
}
export const mobileBanner = {
key: "3",
"3": {
"componentName": "MobileBanner",
"componentType": PROPS_SETTING_TYPES.mobileBanner,
"title": "轮播广告",
"canEdit": true,
"canHide": false,
"props": {
dataList: []
}
}
}
export const mobileChannelCategory = {
key: "4",
"4": {
"componentName": "MobileChannelCategory",
"componentType": PROPS_SETTING_TYPES.moibileChannelCategory,
"title": "商品品类",
"canEdit": false,
"canHide": false,
"props": {
dataList: []
}
}
}
export const mobileChannelGoodsCard = {
key: "5",
"5": {
"componentName": "MobileChannelGoodsCard",
"componentType": PROPS_SETTING_TYPES.mobileChannelGoodsCard,
"title": "推荐商品",
"canEdit": true,
"canHide": false,
"props": {
dataList: [
// {
// style: 0,
// title: "电气电工",
// viceTitle: "ELECTRICAL",
// },
// {
// style: 1,
// title: "机械设备",
// viceTitle: "EQUIPMENT",
// }
]
}
}
}
export const mobileChannelInformation = {
key: "6",
"6": {
"componentName": "MobileChannelInformation",
"componentType": PROPS_SETTING_TYPES.moibileChannelInformation,
"title": "行业资讯",
"canEdit": true,
"canHide": false,
"props": {
title: "行业资讯",
dataList: []
}
}
}
export const mobileBottomNavigation = {
key: "7",
"7": {
"componentName": "MobileBottomNavigation",
"componentType": PROPS_SETTING_TYPES.mobileBottomNavigation,
"title": "底部导航",
"canEdit": true,
"canHide": false,
"props": {
/** 类型：1-首页 2-积分 3-工作台 4-资讯 5-进货单 6-我的 */
dataList: [
{
name: "首页",
icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f8d1c35d735e47c187d8c0b0e12830971612351028389.png",
type: 1,
status: false,
},
{
name: "积分",
icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/d4b7e96e136e4a2eade7e0d3e441eb611612351032370.png",
type: 2,
status: false,
},
{
name: "工作台",
icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f8492d51f9234c43bf631e9f2482a6751612351036609.png",
type: 3,
status: false,
},
{
name: "进货单",
icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/50433de84ee046b19882e21c920b3f6b1612351040608.png",
type: 5,
status: false,
},
{
name: "我的",
icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/aa76edefd91f4e82b4f8fa56e169cd3f1612351044724.png",
type: 6,
status: false,
}
]
}
}
}
src/pages/mobileTemplate/channelTemplatePreview/index.less deleted 100644 → 0
View file @ b6692a78
@content-height: calc(100vh - 120px);
.wrapper {
background: white;
display: flex;
flex-direction: column;
box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
transition: all .3s;
}
.content {
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
background-color: #F2F3F5;
height: calc(100vh - 64px);
}
.app-wrapper {
display: flex;
flex: 1;
justify-content: center;
}
.app-canvas-container {
display: flex;
width: 381px;
margin-top: 40px;
margin-bottom: 52px;
justify-content: center;
background-color: #F4F5F7;
// height: calc(@content-height + 50px);
overflow: hidden;
}
.loading_wrap {
width: 100%;
height: 100vh;
justify-content: center;
flex-direction: column;
display: flex;
align-items: center;
.loading_text {
margin-top: 16px;
font-size: 14px;
font-weight: bold;
}
}
src/pages/mobileTemplate/channelTemplatePreview/index.tsx
View file @ 45d1edb2
......@@ -3,31 +3,52 @@
* @Date: 2021-02-22 17:02:20
* @LastEditTime: 2021-03-01 11:37:34
* @LastEditors: Please set LastEditors
* @Description: app渠道商城装修预览
* @Description: app渠道商城装修
* @FilePath: /lingxi-business-paltform/src/pages/mobileTemplate/channelTemplateEdit/index.tsx
*/
import React, { useEffect, useState } from 'react'
import { BrickProvider } from '@lingxi-disign/react';
import { Helmet } from 'umi'
import { BrickProvider, resolveMappingPageConfig, updatePageConfig } from '@lingxi-disign/react';
import ToolBar from '../../editor/components/toolBar'
import MobileDesignPanel from '../../editor/components/MobileDesignPanel'
import AllComponents from '../../editor/components/ComponentsPreview'
import { message } from 'antd'
import config from '../../editor/configs'
import { priceFormat } from '@/utils/numberFomat'
import { cloneDeep } from 'lodash'
import {
mallLayoutConfig,
divWrap,
mobileChannelHeaderNav,
mobileBanner,
mobileChannelCategory,
mobileChannelGoodsCard,
mobileChannelInformation,
mobileBottomNavigation,
} from './config'
defaultHeaderNavData,
channelLayoutConfig,
defaultConfig,
suggestProductConfig,
} from '../channelTemplateEdit/config'
import {
marketingConfig_1,
marketingConfig_2,
marketingConfig_3,
marketingConfig_4,
marketingConfig_5,
marketingConfig_6,
marketingConfig_7,
marketingConfig_8,
marketingConfig_9,
marketingConfig_10,
marketingConfig_11,
marketingConfig_12,
marketingConfig_13,
marketingConfig_14,
marketingConfig_15,
marketingConfig_16,
marketingConfig_17,
marketingConfig_18,
marketingConfig_19,
} from '../channelTemplateEdit/marketing_config'
import Loading from '../../editor/components/Loading'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplateAdornAppChannelFindResponse } from '@/services/TemplateApi'
import styles from './index.less'
// import { GlobalConfig } from '@/global/config'
import MobileSettingPanel from '../../editor/mobileSettingPanel'
import { getAuth } from '@/utils/auth'
import styles from '../channelTemplateEdit/index.less'
interface ShopPreviewPropsType {
location: {
......@@ -48,11 +69,12 @@ interface ShopPreviewPropsType {
const TemplateList = ['science']
const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
const { query: { id, template, type, shopId } } = props.location
const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
const { query: { id, template, type, shopId } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [theme, setTheme] = useState<string>('theme-mall-science')
const [componentConfigs, setComponentConfigs] = useState({})
const { memberId, memberRoleId } = getAuth() || {}
const headers: any = {
environment: "4",
......@@ -85,16 +107,16 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
/**
* 获取app店铺装修信息
*/
const getAppChannelConfig = (): Promise<GetTemplateAdornAppChannelFindResponse | null> => {
const getAppChannelConfig = (): Promise<any> => {
return new Promise((resolve, reject) => {
const param: any = {
templateId: id
}
PublicApi.getTemplateAdornAppChannelFind(param).then(res => {
if(res.code === 1000) {
resolve(res.data)
if(res.code === 1000 && res.data) {
resolve(res.data.adornContent)
} else {
reject(res)
resolve({})
}
}).catch((eror) => {
reject(eror)
......@@ -133,7 +155,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
channelMemberId,
}
PublicApi.getSearchMobileShopChannelGetCustomerCategoryTree(param).then((res) => {
PublicApi.getSearchMobileShopChannelGetCustomerCategoryTree(param, { headers }).then((res) => {
if (res.code === 1000) {
resolve(res.data)
} else {
......@@ -174,67 +196,847 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
return []
}
const getFirstCategoryList = () => {
return new Promise ((resolve) => {
const param: any = {
shopId,
memberId
}
PublicApi.getSearchChannelCommodityTemplateGetFirstCategoryListByMemberId(param).then((res) => {
if (res.code === 1000 && res.data) {
const list = res.data.map(item => {
return {
label: item.name,
value: item.id
}
})
resolve(list)
} else {
resolve([])
}
}).catch(() => {
resolve([])
})
})
}
const getComponentsConfig = async () => {
try {
const appConfig = await getAppChannelConfig()
//渠道信息
const channelInfo = await fetchChannelInfo()
mobileChannelHeaderNav[mobileChannelHeaderNav.key].props.name = channelInfo.memberName
if (channelInfo.memberId) {
const categoryList = await getCustomerCategoryTreeById(channelInfo.memberId)
mobileChannelCategory[mobileChannelCategory.key].props.dataList = categoryList
mobileChannelGoodsCard[mobileChannelGoodsCard.key].props.channelMemberId = channelInfo.memberId
if (appConfig?.productBO) {
mobileChannelGoodsCard[mobileChannelGoodsCard.key].props.dataList = await getProductInfo(appConfig?.productBO.productDetailsBOList, channelInfo.memberId)
}
const _mallLayoutConfig: any = cloneDeep(channelLayoutConfig)
const allState = {
top: defaultHeaderNavData,
channelName: channelInfo.memberName,
categoryList: await getFirstCategoryList(),
navList: appConfig?.navList ? appConfig?.navList.details : [],
advert: appConfig?.advert ? appConfig?.advert.details : [],
informationTitle: '8月钢市价格走势判断',
bottom: appConfig?.bottom ? appConfig?.bottom.details : [],
}
const _suggestProductConfig: any = cloneDeep(suggestProductConfig);
if (appConfig?.advertBO) {
mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
}
// 活动专区
let _other = {};
let _marketingConfig_1: any = cloneDeep(marketingConfig_1);
let _marketingConfig_2: any = cloneDeep(marketingConfig_2);
let _marketingConfig_3: any = cloneDeep(marketingConfig_3);
let _marketingConfig_4: any = cloneDeep(marketingConfig_4);
let _marketingConfig_5: any = cloneDeep(marketingConfig_5);
let _marketingConfig_6: any = cloneDeep(marketingConfig_6);
let _marketingConfig_7: any = cloneDeep(marketingConfig_7);
let _marketingConfig_8: any = cloneDeep(marketingConfig_8);
let _marketingConfig_9: any = cloneDeep(marketingConfig_9);
let _marketingConfig_10: any = cloneDeep(marketingConfig_10);
let _marketingConfig_11: any = cloneDeep(marketingConfig_11);
let _marketingConfig_12: any = cloneDeep(marketingConfig_12);
let _marketingConfig_13: any = cloneDeep(marketingConfig_13);
let _marketingConfig_14: any = cloneDeep(marketingConfig_14);
let _marketingConfig_15: any = cloneDeep(marketingConfig_15);
let _marketingConfig_16: any = cloneDeep(marketingConfig_16);
let _marketingConfig_17: any = cloneDeep(marketingConfig_17);
let _marketingConfig_18: any = cloneDeep(marketingConfig_18);
let _marketingConfig_19: any = cloneDeep(marketingConfig_19);
if (appConfig?.informationBO) {
mobileChannelInformation[mobileChannelInformation.key].props.title = appConfig?.informationBO.title
mobileChannelInformation[mobileChannelInformation.key].props.informationIdList = appConfig?.informationBO.informationIdList || []
mobileChannelInformation[mobileChannelInformation.key].props.dataList = await getInformationInfo(appConfig?.informationBO.informationIdList)
}
if (appConfig?.specialOffer) {
// 特价促销
const _details = appConfig?.specialOffer?.details;
_marketingConfig_1['11-1-1'].props.title = _details.title
_marketingConfig_1['11-1-1'].props.explain = _details.explain
_marketingConfig_1['11-1-1'].props.icon = _details.icon;
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-1-2-${Number(index) + 1}`;
!_marketingConfig_1['11-1-2'].childNodes.includes(_newKey) && _marketingConfig_1['11-1-2'].childNodes.push(_newKey)
_marketingConfig_1[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._marketingConfig_1 };
!_mallLayoutConfig['0'].childNodes.includes('11-1') && _mallLayoutConfig['0'].childNodes.push('11-1');
}
if (appConfig?.plummet) {
// 直降促销
const _details = appConfig?.plummet?.details;
_marketingConfig_2['11-2-1'].props.title = _details.title
_marketingConfig_2['11-2-1'].props.explain = _details.explain
_marketingConfig_2['11-2-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-2-2-${Number(index) + 1}`;
!_marketingConfig_2['11-2-2'].childNodes.includes(_newKey) && _marketingConfig_2['11-2-2'].childNodes.push(_newKey)
_marketingConfig_2[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '直降60元',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_2 };
!_mallLayoutConfig['0'].childNodes.includes('11-2') && _mallLayoutConfig['0'].childNodes.push('11-2');
}
if (appConfig?.fullQuantitySub) {
// 满量促销--满量减
const _details = appConfig?.fullQuantitySub?.details;
_marketingConfig_3['11-3-1'].props.title = _details.title
_marketingConfig_3['11-3-1'].props.explain = _details.explain
_marketingConfig_3['11-3-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-3-2-${Number(index) + 1}`;
!_marketingConfig_3['11-3-2'].childNodes.includes(_newKey) && _marketingConfig_3['11-3-2'].childNodes.push(_newKey)
_marketingConfig_3[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满3件减50',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_3 };
!_mallLayoutConfig['0'].childNodes.includes('11-3') && _mallLayoutConfig['0'].childNodes.push('11-3');
}
if (appConfig?.discount) {
// 折扣促销
const _details = appConfig?.discount?.details;
_marketingConfig_4['11-4-1'].props.title = _details.title
_marketingConfig_4['11-4-1'].props.explain = _details.explain
_marketingConfig_4['11-4-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-4-2-${Number(index) + 1}`;
!_marketingConfig_4['11-4-2'].childNodes.includes(_newKey) && _marketingConfig_4['11-4-2'].childNodes.push(_newKey)
_marketingConfig_4[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '5折起',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_4 };
!_mallLayoutConfig['0'].childNodes.includes('11-4') && _mallLayoutConfig['0'].childNodes.push('11-4');
}
if (appConfig?.fullQuantityDiscount) {
// 满量促销--满量折
const _details = appConfig?.fullQuantityDiscount?.details;
_marketingConfig_5['11-5-1'].props.title = _details.title
_marketingConfig_5['11-5-1'].props.explain = _details.explain
_marketingConfig_5['11-5-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-5-2-${Number(index) + 1}`;
!_marketingConfig_5['11-5-2'].childNodes.includes(_newKey) && _marketingConfig_5['11-5-2'].childNodes.push(_newKey)
_marketingConfig_5[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满3件8折',
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_5 };
!_mallLayoutConfig['0'].childNodes.includes('11-5') && _mallLayoutConfig['0'].childNodes.push('11-5');
}
if (appConfig?.fullMoneySub) {
// 满额促销--满额减
const _details = appConfig?.fullMoneySub?.details;
_marketingConfig_6['11-6-1'].props.title = _details.title
_marketingConfig_6['11-6-1'].props.explain = _details.explain
_marketingConfig_6['11-6-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-6-2-${Number(index) + 1}`;
!_marketingConfig_6['11-6-2'].childNodes.includes(_newKey) && _marketingConfig_6['11-6-2'].childNodes.push(_newKey)
_marketingConfig_6[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满100减10',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_6 };
!_mallLayoutConfig['0'].childNodes.includes('11-6') && _mallLayoutConfig['0'].childNodes.push('11-6');
}
if (appConfig?.fullMoneyDiscount) {
// 满额促销--满额折
const _details = appConfig?.fullMoneyDiscount?.details;
_marketingConfig_7['11-7-1'].props.title = _details.title
_marketingConfig_7['11-7-1'].props.explain = _details.explain
_marketingConfig_7['11-7-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-7-2-${Number(index) + 1}`;
!_marketingConfig_7['11-7-2'].childNodes.includes(_newKey) && _marketingConfig_7['11-7-2'].childNodes.push(_newKey)
_marketingConfig_7[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满100打5折',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_7 };
!_mallLayoutConfig['0'].childNodes.includes('11-7') && _mallLayoutConfig['0'].childNodes.push('11-7');
}
if (appConfig?.giveProduct) {
// 赠送促销--赠送商品(满额赠+买商品赠)
const _details = appConfig?.giveProduct?.details;
_marketingConfig_8['11-8-1'].props.title = _details.title
_marketingConfig_8['11-8-1'].props.explain = _details.explain
_marketingConfig_8['11-8-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-8-2-${Number(index) + 1}`;
!_marketingConfig_8['11-8-2'].childNodes.includes(_newKey) && _marketingConfig_8['11-8-2'].childNodes.push(_newKey)
_marketingConfig_8[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `原价${item.price}元`,
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_8 };
!_mallLayoutConfig['0'].childNodes.includes('11-8') && _mallLayoutConfig['0'].childNodes.push('11-8');
}
if (appConfig?.giveCoupon) {
// 赠送促销--赠送优惠劵(满额赠+买商品赠)
const _details = appConfig?.giveCoupon?.details;
_marketingConfig_9['11-9-1'].props.title = _details.title
_marketingConfig_9['11-9-1'].props.explain = _details.explain
_marketingConfig_9['11-9-1'].props.icon = _details.icon
if (_details.id.length > 0) {
const _couponList = _details.id?.map((item) => { return { couponType: item.belongType, id: item.id } });
const _couponListData = await PublicApi.postMarketingCouponPlatformActivityPageSelectDetail({ couponList: _couponList });
message.destroy();
if (_couponListData.code === 1000) {
_couponListData.data?.forEach((item, index) => {
const _newKey: any = `11-9-2-${Number(index) + 1}`;
!_marketingConfig_9['11-9-2'].childNodes.includes(_newKey) && _marketingConfig_9['11-9-2'].childNodes.push(_newKey)
_marketingConfig_9[_newKey] = {
key: _newKey,
title: item.name,
componentName: 'MarketingCard.CouponsItem',
props: {
...item,
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_9 };
!_mallLayoutConfig['0'].childNodes.includes('11-9') && _mallLayoutConfig['0'].childNodes.push('11-9');
}
if (appConfig?.morePiece) {
// 多件促销
const _details = appConfig?.morePiece?.details;
_marketingConfig_10['11-10-1'].props.title = _details.title
_marketingConfig_10['11-10-1'].props.explain = _details.explain
_marketingConfig_10['11-10-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-10-2-${Number(index) + 1}`;
!_marketingConfig_10['11-10-2'].childNodes.includes(_newKey) && _marketingConfig_10['11-10-2'].childNodes.push(_newKey)
_marketingConfig_10[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `第2件5折`,
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_10 };
!_mallLayoutConfig['0'].childNodes.includes('11-10') && _mallLayoutConfig['0'].childNodes.push('11-10');
}
if (appConfig?.combination) {
// 组合促销
const _details = appConfig?.combination?.details;
_marketingConfig_11['11-11-1'].props.title = _details.title
_marketingConfig_11['11-11-1'].props.explain = _details.explain
_marketingConfig_11['11-11-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-11-2-${Number(index) + 1}`;
!_marketingConfig_11['11-11-2'].childNodes.includes(_newKey) && _marketingConfig_11['11-11-2'].childNodes.push(_newKey)
_marketingConfig_11[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `99元4件`,
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_11 };
!_mallLayoutConfig['0'].childNodes.includes('11-11') && _mallLayoutConfig['0'].childNodes.push('11-11');
}
if (appConfig?.secKill) {
// 秒杀
const _details = appConfig?.secKill?.details;
_marketingConfig_12['11-12-1'].props.title = _details.title
_marketingConfig_12['11-12-1'].props.explain = _details.explain
_marketingConfig_12['11-12-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-12-2-${Number(index) + 1}`;
!_marketingConfig_12['11-12-2'].childNodes.includes(_newKey) && _marketingConfig_12['11-12-2'].childNodes.push(_newKey)
_marketingConfig_12[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
direction: 'column',
img: item.productImgUrl,
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_12 };
!_mallLayoutConfig['0'].childNodes.includes('11-12') && _mallLayoutConfig['0'].childNodes.push('11-12');
}
if (appConfig?.groupPurchase) {
// 拼团
const _details = appConfig?.groupPurchase?.details;
_marketingConfig_13['11-13-1'].props.title = _details.title
_marketingConfig_13['11-13-1'].props.explain = _details.explain
_marketingConfig_13['11-13-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-13-2-${Number(index) + 1}`;
!_marketingConfig_13['11-13-2'].childNodes.includes(_newKey) && _marketingConfig_13['11-13-2'].childNodes.push(_newKey)
_marketingConfig_13[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.CollageContainerItem',
props: {
...item,
detail: {
title: item.productName,
img: item.productImgUrl,
info: '打骨折',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
endTime: 1627372487509,
people: 1,
id: 5
},
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_13 };
!_mallLayoutConfig['0'].childNodes.includes('11-13') && _mallLayoutConfig['0'].childNodes.push('11-13');
}
if (appConfig?.fullSwap) {
// 换购-满额换购
const _details = appConfig?.fullSwap?.details;
_marketingConfig_14['11-14-1'].props.title = _details.title
_marketingConfig_14['11-14-1'].props.explain = _details.explain
_marketingConfig_14['11-14-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-14-2-${Number(index) + 1}`;
!_marketingConfig_14['11-14-2'].childNodes.includes(_newKey) && _marketingConfig_14['11-14-2'].childNodes.push(_newKey)
_marketingConfig_14[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '加20元换购',
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_14 };
!_mallLayoutConfig['0'].childNodes.includes('11-14') && _mallLayoutConfig['0'].childNodes.push('11-14');
}
if (appConfig?.buySwap) {
// 换购-买商品换购
const _details = appConfig?.buySwap?.details;
_marketingConfig_15['11-15-1'].props.title = _details.title
_marketingConfig_15['11-15-1'].props.explain = _details.explain
_marketingConfig_15['11-15-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-15-2-${Number(index) + 1}`;
!_marketingConfig_15['11-15-2'].childNodes.includes(_newKey) && _marketingConfig_15['11-15-2'].childNodes.push(_newKey)
_marketingConfig_15[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '加20元换购',
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_15 };
!_mallLayoutConfig['0'].childNodes.includes('11-15') && _mallLayoutConfig['0'].childNodes.push('11-15');
}
if (appConfig?.preSale) {
// 预售
const _details = appConfig?.preSale?.details;
_marketingConfig_16['11-16-1'].props.title = _details.title
_marketingConfig_16['11-16-1'].props.explain = _details.explain
_marketingConfig_16['11-16-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-16-2-${Number(index) + 1}`;
!_marketingConfig_16['11-16-2'].childNodes.includes(_newKey) && _marketingConfig_16['11-16-2'].childNodes.push(_newKey)
_marketingConfig_16[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '10元抵100',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_16 };
!_mallLayoutConfig['0'].childNodes.includes('11-16') && _mallLayoutConfig['0'].childNodes.push('11-16');
}
if (appConfig?.attempt) {
// 试用
const _details = appConfig?.attempt?.details;
_marketingConfig_17['11-17-1'].props.title = _details.title
_marketingConfig_17['11-17-1'].props.explain = _details.explain
_marketingConfig_17['11-17-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-17-2-${Number(index) + 1}`;
!_marketingConfig_17['11-17-2'].childNodes.includes(_newKey) && _marketingConfig_17['11-17-2'].childNodes.push(_newKey)
_marketingConfig_17[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '已送出 186 件',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_17 };
!_mallLayoutConfig['0'].childNodes.includes('11-17') && _mallLayoutConfig['0'].childNodes.push('11-17');
}
if (appConfig?.setMeal) {
// 套餐
const _details = appConfig?.setMeal?.details;
_marketingConfig_18['11-18-1'].props.title = _details.title
_marketingConfig_18['11-18-1'].props.explain = _details.explain
_marketingConfig_18['11-18-1'].props.icon = _details.icon
_marketingConfig_18['11-18-1'].props.id = _details.id
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _details.id })
message.destroy();
if (_detailData.code === 1000 && _detailData?.data[0]) {
const _detailItem: any = _detailData?.data[0];
_marketingConfig_18['11-18-2-1'].title = _detailItem.productName;
_marketingConfig_18['11-18-2-1'].props = {
..._marketingConfig_18['11-18-2-1'].props,
detail: {
img: _detailItem.productImgUrl,
title: _detailItem.productName,
discountPrice: priceFormat(_detailItem.price),
buy: 10
},
isnull: false,
tag: '购买商品'
}
_detailItem?.goodsSubList?.forEach((item: any, index) => {
const _tabKey = `11-18-2-2-${Number(index) + 1}`;
let _groupOriginalPrice = _detailItem.price;
_marketingConfig_18[_tabKey] = {
title: `套餐${item.groupNo}`,
canEdit: false,
canHide: false,
componentName: 'MarketingCard.PackageContainerTabsTabPane',
props: {
title: `套餐${item.groupNo}`,
groupPrice: priceFormat(item.groupPrice),
containerScorll: true,
type: 15,
},
childComponentName: 'MarketingCard.GoodsItem',
childNodes: [],
}
item?.list?.forEach((child, childIndex) => {
_groupOriginalPrice = _groupOriginalPrice + Number(child.price);
const _childKey = `${_tabKey}-${Number(childIndex) + 1}`;
_marketingConfig_18[_childKey] = {
title: child.productName,
canEdit: false,
canHide: false,
componentName: 'MarketingCard.GoodsItem',
props: {
...child,
mode: 'horizontal',
name: item.productName,
img: child.productImgUrl,
title: child.productName,
discountPrice: priceFormat(child.price),
isnull: false
},
}
!_marketingConfig_18[_tabKey].childNodes.includes(_childKey) && _marketingConfig_18[_tabKey].childNodes.push(_childKey);
})
_marketingConfig_18[_tabKey].props.groupOriginalPrice = priceFormat(_groupOriginalPrice);
!_marketingConfig_18['11-18-2-2'].childNodes.includes(_tabKey) && _marketingConfig_18['11-18-2-2'].childNodes.push(_tabKey);
})
}
_other = { ..._other, ..._marketingConfig_18 };
!_mallLayoutConfig['0'].childNodes.includes('11-18') && _mallLayoutConfig['0'].childNodes.push('11-18');
}
if (appConfig?.bargain) {
// 砍价
const _details = appConfig?.bargain?.details;
_marketingConfig_19['11-19-1'].props.title = _details.title
_marketingConfig_19['11-19-1'].props.explain = _details.explain
_marketingConfig_19['11-19-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-19-2-${Number(index) + 1}`;
!_marketingConfig_19['11-19-2'].childNodes.includes(_newKey) && _marketingConfig_19['11-19-2'].childNodes.push(_newKey)
_marketingConfig_19[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '已送出 186 件',
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_19 };
!_mallLayoutConfig['0'].childNodes.includes('11-19') && _mallLayoutConfig['0'].childNodes.push('11-19');
}
if (appConfig?.suggestProduct) {
// 商品推荐
const _details = appConfig?.suggestProduct?.details;
if (_details.length > 0) {
for (const index in _details) {
const item = _details[index];
const _newKey = `12-${Number(index) + 1}`;
!_suggestProductConfig['12'].childNodes.includes(_newKey) && _suggestProductConfig['12'].childNodes.push(_newKey);
_suggestProductConfig[_newKey] = {
key: _newKey,
title: item?.title || '商品容器',
componentName: 'SuggestProduct.Items',
canEdit: true,
canHide: false,
props: {
...item,
isnull: false
},
childComponentName: 'SuggestProduct.Commodity',
maxLength: item?.num ? item?.num : 50,
addBtnText: item?.type === 3 ? '添加商品' : '',
childNodes: [],
};
if (item.customize) {
const _ids = item.customize.map((item) => item.id).join(',');
const param: any = {
shopId,
idInList: _ids,
current: '1',
pageSize: '100',
memberId,
memberRoleId,
}
if (appConfig?.bottomBO) {
mobileBottomNavigation[mobileBottomNavigation.key].props.dataList = appConfig?.bottomBO.bottomDetailsBOList
const _detailsData = await PublicApi.getMarketingAdornChannelGoodsListAdorn(param)
_detailsData.data.data?.forEach((child, childIndex) => {
const _childNewKey = `${_newKey}-${Number(childIndex) + 1}`;
!_suggestProductConfig[_newKey].childNodes.includes(_childNewKey) && _suggestProductConfig[_newKey].childNodes.push(_childNewKey);
_suggestProductConfig[_childNewKey] = {
key: _childNewKey,
title: child?.name,
componentName: 'SuggestProduct.Commodity',
canEdit: true,
canHide: false,
props: {
...child,
name: child.name,
image: child.mainPic,
mode: 'vertical',
discountPrice: priceFormat(child.min),
buyBtn: false,
tags: item.customize.filter((filChild) => filChild.id === child.id)?.[0]?.tags,
},
};
});
}
}
}
}
!_mallLayoutConfig['0'].childNodes.includes('12') && _mallLayoutConfig['0'].childNodes.push('12');
_mallLayoutConfig['0'].childNodes = [..._mallLayoutConfig['0'].childNodes, '13', '14']
console.log(_suggestProductConfig, '_suggestProductConfig')
const config = {
...mallLayoutConfig,
...mobileChannelHeaderNav,
...divWrap,
...mobileBanner,
...mobileChannelCategory,
...mobileChannelGoodsCard,
...mobileChannelInformation,
...mobileBottomNavigation,
..._mallLayoutConfig,
..._other,
..._suggestProductConfig,
...defaultConfig,
}
setComponentConfigs(config)
const finalConfig = resolveMappingPageConfig(config, allState)
console.log(finalConfig, 'finalConfig')
setComponentConfigs(finalConfig)
setLoading(false)
updatePageConfig(finalConfig)
} catch (error) {
console.log(error)
}
}
return !loading ? (
<BrickProvider
config={config}
>
<Helmet>
<title>渠道装修预览-渠道主页</title>
</Helmet>
<div className={styles['wrapper']}>
<ToolBar type={2} title="渠道商城-首页" layoutType={LAYOUT_TYPE.channel} templateId={id} />
<div className={styles['content']}>
<AllComponents />
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel onlyEidt theme={theme} pageConfig={componentConfigs} isPreview />
<MobileDesignPanel onlyEidt theme={theme} isPreview pageConfig={componentConfigs} />
</div>
</div>
</div>
......@@ -243,5 +1045,4 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
) : <Loading />
}
export default mobileShopTempleteEdit
export default mobileShopTempletePreview
src/pages/mobileTemplate/shopTemplatePreview/config.ts deleted 100644 → 0
View file @ b6692a78
import { PROPS_SETTING_TYPES } from '@lingxi-disign/core'
export const mallLayoutConfig = {
key: "0",
"0": {
"componentName": "MallLayout",
"props": {
"style": {
"width": "100%",
"minHeight": "100%",
"background": "#F7F8FA",
"overflowX": "hidden",
"paddingBottom": "50px",
}
},
"childNodes": ["1", "2", "5"]
},
}
export const mobileShopHeaderNav = {
key: "1",
"1": {
"componentName": "MobileShopHeaderNav",
"componentType": PROPS_SETTING_TYPES.mobileShopHeaderNav,
"title": "背景图编辑",
"canEdit": true,
"canHide": false,
"props": {},
}
}
export const divWrap = {
key: "2",
"2": {
"componentName": "div",
"props": {
"style": {
position: "relative",
marginTop: -24,
backgroundColor: "#FFF",
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
zIndex: 6,
padding: '2px 4px',
}
},
"childNodes": ["3", "4"]
}
}
export const mobileBanner = {
key: "3",
"3": {
"componentName": "MobileBanner",
"componentType": PROPS_SETTING_TYPES.mobileBanner,
"title": "轮播广告",
"canEdit": true,
"canHide": false,
"props": {
dataList: []
}
}
}
export const mobileQuickNav = {
key: "4",
"4": {
"componentName": "MobileQuickNav",
"componentType": PROPS_SETTING_TYPES.mobileQuickNav,
"title": "导航模块",
"canEdit": true,
"canHide": false,
"props": {
dataList: [
{
"id":1,
"expand":false,
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/c5d66f1488cc47d0a73279ce1ef11c991610677462848.png",
"type":1,
"name":"商城",
"url":""
},
{
"id":2,
"expand":false,
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/9f105bdebcfb4010b5827f7b64fb53281610696444606.png",
"type":2,
"name":"分类",
"url":""
},
{
"id":3,
"expand":false,
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/d4383c684c6e4707b405f46f281796d71610696469970.png",
"type":3,
"name":"积分兑换",
"url":""
},
{
"id":4,
"expand":false,
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/d4383c684c6e4707b405f46f281796d71610696469970.png",
"type":4,
"name":"公司介绍",
"url":""
},
{
"id":5,
"expand":false,
"icon":"https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/441a66ebeb3b45e6a64ecfa9977f411c1610696489991.png",
"type":5,
"name":"成为会员",
"url":""
},
]
}
}
}
export const mobileShopCommodityList = {
key: "5",
"5": {
"componentName": "MobileShopCommodityList",
"componentType": PROPS_SETTING_TYPES.mobileShopCommodity,
"title": "商品推荐",
"canEdit": true,
"canHide": false,
"props": {}
}
}
src/pages/mobileTemplate/shopTemplatePreview/index.less deleted 100644 → 0
View file @ b6692a78
@content-height: calc(100vh - 120px);
.wrapper {
background: white;
display: flex;
flex-direction: column;
box-shadow: 2px 0 4px 0 rgba(174, 174, 174, 0.50);
transition: all .3s;
}
.content {
display: flex;
flex: 1;
flex-direction: row;
justify-content: center;
background-color: #F2F3F5;
height: calc(100vh - 64px);
}
.app-wrapper {
display: flex;
flex: 1;
justify-content: center;
}
.app-canvas-container {
display: flex;
width: 381px;
margin-top: 40px;
margin-bottom: 52px;
justify-content: center;
background-color: #F4F5F7;
// height: calc(@content-height + 50px);
overflow: hidden;
}
.loading_wrap {
width: 100%;
height: 100vh;
justify-content: center;
flex-direction: column;
display: flex;
align-items: center;
.loading_text {
margin-top: 16px;
font-size: 14px;
font-weight: bold;
}
}
src/pages/mobileTemplate/shopTemplatePreview/index.tsx
View file @ 45d1edb2
......@@ -3,29 +3,47 @@
* @Date: 2021-01-14 17:03:08
* @Last Modified by: ghua
* @Last Modified time: 2021-01-15 17:47:38
* @Description app店铺主页装修预览
* @Description app店铺主页装修
*/
import React, { useEffect, useState } from 'react'
import { BrickProvider } from '@lingxi-disign/react';
import { BrickProvider, resolveMappingPageConfig, updatePageConfig } from '@lingxi-disign/react';
import { Helmet } from 'umi'
import ToolBar from '../../editor/components/toolBar'
import MobileDesignPanel from '../../editor/components/MobileDesignPanel'
import AllComponents from '../../editor/components/ComponentsPreview'
import { cloneDeep } from 'lodash'
import { message } from 'antd'
import config from '../../editor/configs'
import { priceFormat } from '@/utils/numberFomat'
import {
mallLayoutConfig,
divWrap,
mobileShopHeaderNav,
mobileBanner,
mobileQuickNav,
mobileShopCommodityList,
} from './config'
shopLayoutConfig,
defaultConfig,
} from '../shopTemplateEdit/config'
import {
marketingConfig_1,
marketingConfig_2,
marketingConfig_3,
marketingConfig_4,
marketingConfig_5,
marketingConfig_6,
marketingConfig_7,
marketingConfig_8,
marketingConfig_9,
marketingConfig_10,
marketingConfig_11,
marketingConfig_12,
marketingConfig_13,
marketingConfig_14,
marketingConfig_15,
marketingConfig_16,
marketingConfig_17,
marketingConfig_18,
marketingConfig_19,
} from '../shopTemplateEdit/marketing_config'
import Loading from '../../editor/components/Loading'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplateAdornAppStoreFindResponse } from '@/services/TemplateApi'
import { getAuth } from '@/utils/auth'
import styles from './index.less'
import styles from '../shopTemplateEdit/index.less'
interface ShopPreviewPropsType {
location: {
......@@ -38,14 +56,14 @@ interface ShopPreviewPropsType {
* 模板名称
*/
template: string;
shopId: number;
shopId: number
}
}
}
const TemplateList = ['science']
const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
const { query: { id, template, shopId } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [theme, setTheme] = useState<string>('theme-mall-science')
......@@ -65,7 +83,7 @@ const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
getComponentsConfig()
}, [])
/**
/**
* 获取店铺信息
*/
const fetchShopInfo = (shopId: number): Promise<any> => {
......@@ -88,19 +106,19 @@ const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
/**
* 获取app店铺装修信息
*/
const getAppShopConfig = (): Promise<GetTemplateAdornAppStoreFindResponse | null> => {
return new Promise((resolve, reject) => {
const getAppShopConfig = (): Promise<any> => {
return new Promise((resolve) => {
const param: any = {
templateId: id
}
PublicApi.getTemplateAdornAppStoreFind(param, { headers }).then(res => {
if(res.code === 1000) {
resolve(res.data)
if(res.code === 1000 && res.data) {
resolve(res.data.adornContent)
} else {
reject(res)
resolve({})
}
}).catch((eror) => {
reject(eror)
resolve({})
})
})
}
......@@ -156,49 +174,850 @@ const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
})
}
const _getListByIds = (ids: number[], list: any[]) => {
const result: any = []
list && list.forEach((item) => {
if (ids.includes(item.id)) {
result.push(item)
}
})
return result
}
const _getCommodityList = async (list: any[]) => {
let listRes: any = []
if (list && Array.isArray(list) && list.length > 0) {
let commodityIds: any = []
const commodityResList: any[] = []
list.forEach((detailsItem) => {
if (commodityIds.length === 0) {
commodityIds = [...detailsItem.idList]
} else {
commodityIds = [...commodityIds, ...detailsItem.idList]
}
})
if (commodityIds && commodityIds.length > 0) {
const param: any = {
idInList: commodityIds,
shopId: shopId,
current: 1,
pageSize: 80
}
const res = await PublicApi.getMarketingAdornGoodsListAdorn(param)
let allCommodityList: any[] = []
if (res.code === 1000) {
allCommodityList = res.data.data
list.forEach((detailsItem) => {
commodityResList.push({
...detailsItem,
dataList: _getListByIds(detailsItem.idList, allCommodityList)
})
})
listRes = commodityResList
}
}
}
return listRes
}
const getComponentsConfig = async () => {
try {
const appConfig = await getAppShopConfig()
//店铺信息
const shopInfo = await fetchShopInfo(shopId)
mobileShopHeaderNav[mobileShopHeaderNav.key].props.shopInfo = shopInfo
const _mallLayoutConfig: any = cloneDeep(shopLayoutConfig)
const allState: any = {
shopInfo: shopInfo,
navList: appConfig?.navList ? appConfig?.navList.details : [],
advert: appConfig?.advert ? appConfig?.advert.details : [],
commodityList: [],
bottom: appConfig?.bottom ? appConfig?.bottom.details : [],
}
if(appConfig?.backdropBO) {
mobileShopHeaderNav[mobileShopHeaderNav.key].props.backdrop = appConfig?.backdropBO.backdrop
if (appConfig?.commodity) {
allState.commodityList = await _getCommodityList(appConfig.commodity?.details)
}
if(appConfig?.advertBO) {
mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
if (appConfig?.header) {
allState.backdrop = appConfig?.header.details.backdrop
}
if(appConfig?.functionBO) {
mobileQuickNav[mobileQuickNav.key].props.dataList = appConfig?.functionBO.functionDetailsBO
// 活动专区
let _other = {};
let _marketingConfig_1: any = cloneDeep(marketingConfig_1);
let _marketingConfig_2: any = cloneDeep(marketingConfig_2);
let _marketingConfig_3: any = cloneDeep(marketingConfig_3);
let _marketingConfig_4: any = cloneDeep(marketingConfig_4);
let _marketingConfig_5: any = cloneDeep(marketingConfig_5);
let _marketingConfig_6: any = cloneDeep(marketingConfig_6);
let _marketingConfig_7: any = cloneDeep(marketingConfig_7);
let _marketingConfig_8: any = cloneDeep(marketingConfig_8);
let _marketingConfig_9: any = cloneDeep(marketingConfig_9);
let _marketingConfig_10: any = cloneDeep(marketingConfig_10);
let _marketingConfig_11: any = cloneDeep(marketingConfig_11);
let _marketingConfig_12: any = cloneDeep(marketingConfig_12);
let _marketingConfig_13: any = cloneDeep(marketingConfig_13);
let _marketingConfig_14: any = cloneDeep(marketingConfig_14);
let _marketingConfig_15: any = cloneDeep(marketingConfig_15);
let _marketingConfig_16: any = cloneDeep(marketingConfig_16);
let _marketingConfig_17: any = cloneDeep(marketingConfig_17);
let _marketingConfig_18: any = cloneDeep(marketingConfig_18);
let _marketingConfig_19: any = cloneDeep(marketingConfig_19);
if (appConfig?.specialOffer) {
// 特价促销
const _details = appConfig?.specialOffer?.details;
_marketingConfig_1['11-1-1'].props.title = _details.title
_marketingConfig_1['11-1-1'].props.explain = _details.explain
_marketingConfig_1['11-1-1'].props.icon = _details.icon;
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-1-2-${Number(index) + 1}`;
!_marketingConfig_1['11-1-2'].childNodes.includes(_newKey) && _marketingConfig_1['11-1-2'].childNodes.push(_newKey)
_marketingConfig_1[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags
}
}
})
}
}
_other = { ..._marketingConfig_1 };
!_mallLayoutConfig['0'].childNodes.includes('11-1') && _mallLayoutConfig['0'].childNodes.push('11-1');
}
if (appConfig?.plummet) {
// 直降促销
const _details = appConfig?.plummet?.details;
_marketingConfig_2['11-2-1'].props.title = _details.title
_marketingConfig_2['11-2-1'].props.explain = _details.explain
_marketingConfig_2['11-2-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-2-2-${Number(index) + 1}`;
!_marketingConfig_2['11-2-2'].childNodes.includes(_newKey) && _marketingConfig_2['11-2-2'].childNodes.push(_newKey)
_marketingConfig_2[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '直降60元',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_2 };
!_mallLayoutConfig['0'].childNodes.includes('11-2') && _mallLayoutConfig['0'].childNodes.push('11-2');
}
if (appConfig?.fullQuantitySub) {
// 满量促销--满量减
const _details = appConfig?.fullQuantitySub?.details;
_marketingConfig_3['11-3-1'].props.title = _details.title
_marketingConfig_3['11-3-1'].props.explain = _details.explain
_marketingConfig_3['11-3-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-3-2-${Number(index) + 1}`;
!_marketingConfig_3['11-3-2'].childNodes.includes(_newKey) && _marketingConfig_3['11-3-2'].childNodes.push(_newKey)
_marketingConfig_3[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满3件减50',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_3 };
!_mallLayoutConfig['0'].childNodes.includes('11-3') && _mallLayoutConfig['0'].childNodes.push('11-3');
}
if (appConfig?.discount) {
// 折扣促销
const _details = appConfig?.discount?.details;
_marketingConfig_4['11-4-1'].props.title = _details.title
_marketingConfig_4['11-4-1'].props.explain = _details.explain
_marketingConfig_4['11-4-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-4-2-${Number(index) + 1}`;
!_marketingConfig_4['11-4-2'].childNodes.includes(_newKey) && _marketingConfig_4['11-4-2'].childNodes.push(_newKey)
_marketingConfig_4[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '5折起',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_4 };
!_mallLayoutConfig['0'].childNodes.includes('11-4') && _mallLayoutConfig['0'].childNodes.push('11-4');
}
if (appConfig?.fullQuantityDiscount) {
// 满量促销--满量折
const _details = appConfig?.fullQuantityDiscount?.details;
_marketingConfig_5['11-5-1'].props.title = _details.title
_marketingConfig_5['11-5-1'].props.explain = _details.explain
_marketingConfig_5['11-5-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-5-2-${Number(index) + 1}`;
!_marketingConfig_5['11-5-2'].childNodes.includes(_newKey) && _marketingConfig_5['11-5-2'].childNodes.push(_newKey)
_marketingConfig_5[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满3件8折',
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_5 };
!_mallLayoutConfig['0'].childNodes.includes('11-5') && _mallLayoutConfig['0'].childNodes.push('11-5');
}
if (appConfig?.fullMoneySub) {
// 满额促销--满额减
const _details = appConfig?.fullMoneySub?.details;
_marketingConfig_6['11-6-1'].props.title = _details.title
_marketingConfig_6['11-6-1'].props.explain = _details.explain
_marketingConfig_6['11-6-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-6-2-${Number(index) + 1}`;
!_marketingConfig_6['11-6-2'].childNodes.includes(_newKey) && _marketingConfig_6['11-6-2'].childNodes.push(_newKey)
_marketingConfig_6[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满100减10',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_6 };
!_mallLayoutConfig['0'].childNodes.includes('11-6') && _mallLayoutConfig['0'].childNodes.push('11-6');
}
if (appConfig?.fullMoneyDiscount) {
// 满额促销--满额折
const _details = appConfig?.fullMoneyDiscount?.details;
_marketingConfig_7['11-7-1'].props.title = _details.title
_marketingConfig_7['11-7-1'].props.explain = _details.explain
_marketingConfig_7['11-7-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-7-2-${Number(index) + 1}`;
!_marketingConfig_7['11-7-2'].childNodes.includes(_newKey) && _marketingConfig_7['11-7-2'].childNodes.push(_newKey)
_marketingConfig_7[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满100打5折',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_7 };
!_mallLayoutConfig['0'].childNodes.includes('11-7') && _mallLayoutConfig['0'].childNodes.push('11-7');
}
if (appConfig?.giveProduct) {
// 赠送促销--赠送商品(满额赠+买商品赠)
const _details = appConfig?.giveProduct?.details;
_marketingConfig_8['11-8-1'].props.title = _details.title
_marketingConfig_8['11-8-1'].props.explain = _details.explain
_marketingConfig_8['11-8-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-8-2-${Number(index) + 1}`;
!_marketingConfig_8['11-8-2'].childNodes.includes(_newKey) && _marketingConfig_8['11-8-2'].childNodes.push(_newKey)
_marketingConfig_8[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `原价${item.price}元`,
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_8 };
!_mallLayoutConfig['0'].childNodes.includes('11-8') && _mallLayoutConfig['0'].childNodes.push('11-8');
}
if (appConfig?.giveCoupon) {
// 赠送促销--赠送优惠劵(满额赠+买商品赠)
const _details = appConfig?.giveCoupon?.details;
_marketingConfig_9['11-9-1'].props.title = _details.title
_marketingConfig_9['11-9-1'].props.explain = _details.explain
_marketingConfig_9['11-9-1'].props.icon = _details.icon
if (_details.id.length > 0) {
const _couponList = _details.id?.map((item) => { return { couponType: item.belongType, id: item.id } });
const _couponListData = await PublicApi.postMarketingCouponPlatformActivityPageSelectDetail({ couponList: _couponList });
message.destroy();
if (_couponListData.code === 1000) {
_couponListData.data?.forEach((item, index) => {
const _newKey: any = `11-9-2-${Number(index) + 1}`;
!_marketingConfig_9['11-9-2'].childNodes.includes(_newKey) && _marketingConfig_9['11-9-2'].childNodes.push(_newKey)
_marketingConfig_9[_newKey] = {
key: _newKey,
title: item.name,
componentName: 'MarketingCard.CouponsItem',
props: {
...item,
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_9 };
!_mallLayoutConfig['0'].childNodes.includes('11-9') && _mallLayoutConfig['0'].childNodes.push('11-9');
}
if (appConfig?.morePiece) {
// 多件促销
const _details = appConfig?.morePiece?.details;
_marketingConfig_10['11-10-1'].props.title = _details.title
_marketingConfig_10['11-10-1'].props.explain = _details.explain
_marketingConfig_10['11-10-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-10-2-${Number(index) + 1}`;
!_marketingConfig_10['11-10-2'].childNodes.includes(_newKey) && _marketingConfig_10['11-10-2'].childNodes.push(_newKey)
_marketingConfig_10[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `第2件5折`,
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_10 };
!_mallLayoutConfig['0'].childNodes.includes('11-10') && _mallLayoutConfig['0'].childNodes.push('11-10');
}
if (appConfig?.combination) {
// 组合促销
const _details = appConfig?.combination?.details;
_marketingConfig_11['11-11-1'].props.title = _details.title
_marketingConfig_11['11-11-1'].props.explain = _details.explain
_marketingConfig_11['11-11-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-11-2-${Number(index) + 1}`;
!_marketingConfig_11['11-11-2'].childNodes.includes(_newKey) && _marketingConfig_11['11-11-2'].childNodes.push(_newKey)
_marketingConfig_11[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `99元4件`,
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_11 };
!_mallLayoutConfig['0'].childNodes.includes('11-11') && _mallLayoutConfig['0'].childNodes.push('11-11');
}
if (appConfig?.secKill) {
// 秒杀
const _details = appConfig?.secKill?.details;
_marketingConfig_12['11-12-1'].props.title = _details.title
_marketingConfig_12['11-12-1'].props.explain = _details.explain
_marketingConfig_12['11-12-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-12-2-${Number(index) + 1}`;
!_marketingConfig_12['11-12-2'].childNodes.includes(_newKey) && _marketingConfig_12['11-12-2'].childNodes.push(_newKey)
_marketingConfig_12[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
direction: 'column',
img: item.productImgUrl,
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_12 };
!_mallLayoutConfig['0'].childNodes.includes('11-12') && _mallLayoutConfig['0'].childNodes.push('11-12');
}
if (appConfig?.groupPurchase) {
// 拼团
const _details = appConfig?.groupPurchase?.details;
_marketingConfig_13['11-13-1'].props.title = _details.title
_marketingConfig_13['11-13-1'].props.explain = _details.explain
_marketingConfig_13['11-13-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-13-2-${Number(index) + 1}`;
!_marketingConfig_13['11-13-2'].childNodes.includes(_newKey) && _marketingConfig_13['11-13-2'].childNodes.push(_newKey)
_marketingConfig_13[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.CollageContainerItem',
props: {
...item,
detail: {
title: item.productName,
img: item.productImgUrl,
info: '打骨折',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
endTime: 1627372487509,
people: 1,
id: 5
},
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_13 };
!_mallLayoutConfig['0'].childNodes.includes('11-13') && _mallLayoutConfig['0'].childNodes.push('11-13');
}
if (appConfig?.fullSwap) {
// 换购-满额换购
const _details = appConfig?.fullSwap?.details;
_marketingConfig_14['11-14-1'].props.title = _details.title
_marketingConfig_14['11-14-1'].props.explain = _details.explain
_marketingConfig_14['11-14-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-14-2-${Number(index) + 1}`;
!_marketingConfig_14['11-14-2'].childNodes.includes(_newKey) && _marketingConfig_14['11-14-2'].childNodes.push(_newKey)
_marketingConfig_14[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '加20元换购',
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_14 };
!_mallLayoutConfig['0'].childNodes.includes('11-14') && _mallLayoutConfig['0'].childNodes.push('11-14');
}
if (appConfig?.buySwap) {
// 换购-买商品换购
const _details = appConfig?.buySwap?.details;
_marketingConfig_15['11-15-1'].props.title = _details.title
_marketingConfig_15['11-15-1'].props.explain = _details.explain
_marketingConfig_15['11-15-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-15-2-${Number(index) + 1}`;
!_marketingConfig_15['11-15-2'].childNodes.includes(_newKey) && _marketingConfig_15['11-15-2'].childNodes.push(_newKey)
_marketingConfig_15[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '加20元换购',
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_15 };
!_mallLayoutConfig['0'].childNodes.includes('11-15') && _mallLayoutConfig['0'].childNodes.push('11-15');
}
if (appConfig?.preSale) {
// 预售
const _details = appConfig?.preSale?.details;
_marketingConfig_16['11-16-1'].props.title = _details.title
_marketingConfig_16['11-16-1'].props.explain = _details.explain
_marketingConfig_16['11-16-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-16-2-${Number(index) + 1}`;
!_marketingConfig_16['11-16-2'].childNodes.includes(_newKey) && _marketingConfig_16['11-16-2'].childNodes.push(_newKey)
_marketingConfig_16[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '10元抵100',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_16 };
!_mallLayoutConfig['0'].childNodes.includes('11-16') && _mallLayoutConfig['0'].childNodes.push('11-16');
}
if (appConfig?.attempt) {
// 试用
const _details = appConfig?.attempt?.details;
_marketingConfig_17['11-17-1'].props.title = _details.title
_marketingConfig_17['11-17-1'].props.explain = _details.explain
_marketingConfig_17['11-17-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-17-2-${Number(index) + 1}`;
!_marketingConfig_17['11-17-2'].childNodes.includes(_newKey) && _marketingConfig_17['11-17-2'].childNodes.push(_newKey)
_marketingConfig_17[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '已送出 186 件',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_17 };
!_mallLayoutConfig['0'].childNodes.includes('11-17') && _mallLayoutConfig['0'].childNodes.push('11-17');
}
if(appConfig?.productBO) {
const dataList = await fetchCategoryByCommodityId(appConfig.productBO.productIdList)
mobileShopCommodityList[mobileShopCommodityList.key].props = {
storeId: shopInfo.id,
title: appConfig.productBO.title,
productIdList: appConfig.productBO.productIdList || [],
dataList,
if (appConfig?.setMeal) {
// 套餐
const _details = appConfig?.attempt?.details;
_marketingConfig_18['11-18-1'].props.title = _details.title
_marketingConfig_18['11-18-1'].props.explain = _details.explain
_marketingConfig_18['11-18-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-18-2-${Number(index) + 1}`;
!_marketingConfig_17['11-18-2'].childNodes.includes(_newKey) && _marketingConfig_17['11-18-2'].childNodes.push(_newKey)
_marketingConfig_17[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '已送出 186 件',
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
} else {
mobileShopCommodityList[mobileShopCommodityList.key].props.storeId = shopInfo.id
mobileShopCommodityList[mobileShopCommodityList.key].props.title = '热销商品'
_other = { ..._other, ..._marketingConfig_18 };
!_mallLayoutConfig['0'].childNodes.includes('11-19') && _mallLayoutConfig['0'].childNodes.push('11-18');
}
// if (appConfig?.setMeal) {
// // 套餐
// const _details = appConfig?.setMeal?.details;
// _marketingConfig_18['11-18-1'].props.title = _details.title
// _marketingConfig_18['11-18-1'].props.explain = _details.explain
// _marketingConfig_18['11-18-1'].props.icon = _details.icon
// _marketingConfig_18['11-18-1'].props.id = _details.id
// const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _details.id })
// message.destroy();
// if (_detailData.code === 1000 && _detailData?.data[0]) {
// const _detailItem: any = _detailData?.data[0];
// _marketingConfig_18['11-18-2-1'].title = _detailItem.productName;
// _marketingConfig_18['11-18-2-1'].props = {
// ..._marketingConfig_18['11-18-2-1'].props,
// detail: {
// img: _detailItem.productImgUrl,
// title: _detailItem.productName,
// discountPrice: priceFormat(_detailItem.price),
// buy: 10
// },
// isnull: false,
// tag: '购买商品',
// }
// _detailItem?.goodsSubList?.forEach((item: any, index) => {
// const _tabKey = `11-18-2-2-${Number(index) + 1}`;
// let _groupOriginalPrice = _detailItem.price;
// _marketingConfig_18[_tabKey] = {
// title: `套餐${item.groupNo}`,
// canEdit: false,
// canHide: false,
// componentName: 'MarketingCard.PackageContainerTabsTabPane',
// props: {
// title: `套餐${item.groupNo}`,
// groupPrice: priceFormat(item.groupPrice),
// containerScorll: true,
// type: 15,
// },
// childComponentName: 'MarketingCard.GoodsItem',
// childNodes: [],
// }
// item?.list?.forEach((child, childIndex) => {
// _groupOriginalPrice = _groupOriginalPrice + Number(child.price);
// const _childKey = `${_tabKey}-${Number(childIndex) + 1}`;
// _marketingConfig_18[_childKey] = {
// title: child.productName,
// canEdit: false,
// canHide: false,
// componentName: 'MarketingCard.GoodsItem',
// props: {
// ...child,
// mode: 'horizontal',
// name: item.productName,
// img: child.productImgUrl,
// title: child.productName,
// discountPrice: priceFormat(child.price),
// isnull: false,
// tags: _details.tags,
// },
// }
// !_marketingConfig_18[_tabKey].childNodes.includes(_childKey) && _marketingConfig_18[_tabKey].childNodes.push(_childKey);
// })
// _marketingConfig_18[_tabKey].props.groupOriginalPrice = priceFormat(_groupOriginalPrice);
// !_marketingConfig_18['11-18-2-2'].childNodes.includes(_tabKey) && _marketingConfig_18['11-18-2-2'].childNodes.push(_tabKey);
// })
// }
// _other = { ..._other, ..._marketingConfig_18 };
// !_mallLayoutConfig['0'].childNodes.includes('11-18') && _mallLayoutConfig['0'].childNodes.push('11-18');
// }
if (appConfig?.bargain) {
// 砍价
const _details = appConfig?.bargain?.details;
_marketingConfig_19['11-19-1'].props.title = _details.title
_marketingConfig_19['11-19-1'].props.explain = _details.explain
_marketingConfig_19['11-19-1'].props.icon = _details.icon
const _ids = _details.id.join(',');
if (_ids.length > 0) {
const _detailData = await PublicApi.getMarketingAdornActivityGoodsAdorn({ ids: _ids })
message.destroy();
if (_detailData.code === 1000) {
_detailData.data?.forEach((item, index) => {
const _newKey = `11-19-2-${Number(index) + 1}`;
!_marketingConfig_19['11-19-2'].childNodes.includes(_newKey) && _marketingConfig_19['11-19-2'].childNodes.push(_newKey)
_marketingConfig_19[_newKey] = {
key: _newKey,
title: item.productName,
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '已送出 186 件',
discountPrice: priceFormat(item.activityPrice),
isnull: false,
tags: _details.tags,
}
}
})
}
}
_other = { ..._other, ..._marketingConfig_19 };
!_mallLayoutConfig['0'].childNodes.includes('11-19') && _mallLayoutConfig['0'].childNodes.push('11-19');
}
_mallLayoutConfig['0'].childNodes = [..._mallLayoutConfig['0'].childNodes, '8', '6']
const config = {
...mallLayoutConfig,
...mobileShopHeaderNav,
...divWrap,
...mobileBanner,
...mobileQuickNav,
...mobileShopCommodityList,
}
setComponentConfigs(config)
..._mallLayoutConfig,
..._other,
...defaultConfig
}
const finalConfig = resolveMappingPageConfig(config, allState)
setComponentConfigs(finalConfig)
setLoading(false)
updatePageConfig(finalConfig)
} catch (error) {
console.log(error)
}
......@@ -209,13 +1028,15 @@ const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
<BrickProvider
config={config}
>
<Helmet>
<title>店铺装修预览-店铺主页</title>
</Helmet>
<div className={styles['wrapper']}>
<ToolBar type={2} title="店铺主页" layoutType={LAYOUT_TYPE.shop} templateId={id} />
<div className={styles['content']}>
<AllComponents />
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel onlyEidt theme={theme} pageConfig={componentConfigs} isPreview />
<MobileDesignPanel isPreview onlyEidt theme={theme} pageConfig={componentConfigs} />
</div>
</div>
</div>
......@@ -224,5 +1045,5 @@ const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
) : <Loading />
}
export default mobileShopTempletePreview
export default mobileShopTempleteEdit
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