Skip to content

J
jinfa-platform
Commit 0eca09d3 authored by GuanHua's avatar GuanHua
Browse files
Options

feat: 添加app店铺和渠道商城装修预览页面

parent a7d73538
Hide whitespace changes
Inline Side-by-side
Showing with 907 additions and 133 deletions
src/pages/editor/components/MobileDesignPanel.tsx
View file @ 0eca09d3
......@@ -7,17 +7,24 @@
* @FilePath: /lingxi-business-paltform/src/pages/editor/components/MobileDesignPanel.tsx
*/
import React from 'react'
import { BrickDesign } from 'lingxi-design'
import MobileUIDemo from './mobileUIDemo'
import { BrickDesign, LingxiPreview } from 'lingxi-design'
// import MobileUIDemo from './mobileUIDemo'
import styles from './index.less'
const MobileDesignPanel = (props) => {
const { theme } = props
interface MobileDesignPanelPropsType {
theme: string,
isPreview?: boolean
}
const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
const { theme, isPreview } = props
return (
<div className={styles.mobileDesignContainer}>
<div className={styles.mobileDesignWrap}>
<BrickDesign theme={theme} mobile />
{
isPreview ? <LingxiPreview theme={theme} /> : <BrickDesign theme={theme} mobile />
}
{/* <MobileUIDemo /> */}
</div>
<div className={styles.appBottom}>
......@@ -27,4 +34,8 @@ const MobileDesignPanel = (props) => {
)
}
MobileDesignPanel.defaultProps = {
isPreview: false
}
export default MobileDesignPanel
src/pages/mobileTemplate/channelTemplateEdit/index.tsx
View file @ 0eca09d3
......@@ -120,53 +120,6 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
})
}
const changeData = (dataList) => {
if(dataList) {
return dataList.map((dataItem) => {
return {
categoryId: dataItem.id,
categoryName: dataItem.name,
categoryImage: dataItem.imageUrl || "",
productList: dataItem.commodityResponseList ? dataItem.commodityResponseList.map((commodityItem) => {
return {
id: commodityItem.id,
name: commodityItem.name,
sellPoints: commodityItem.sellingPoint,
min: commodityItem.min,
unitName: commodityItem.unitName,
sold: commodityItem.sold,
mainPic: commodityItem.mainPic,
}
}) : []
}
})
}
return []
}
/**
* 根据商品id，查询商品根据分类的列表
* @param idList
*/
const fetchCategoryByCommodityId = (idList: number[]) => {
return new Promise((resolve) => {
const param = {
idList
}
PublicApi.postSearchMobileShopStoreGetCategoryByCommodityId(param).then((res) => {
message.destroy()
if (res.code === 1000) {
resolve(changeData(res.data))
} else {
resolve([])
}
}).catch(() => {
resolve([])
})
})
}
/**
* 获取品类树
*/
......
src/pages/mobileTemplate/channelTemplatePreview/config.ts 0 → 100644
View file @ 0eca09d3
/*
* @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_TYPES } from 'lingxi-editor-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_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_TYPES.mobileBanner,
"title": "轮播广告",
"canEdit": true,
"canHide": false,
"props": {
dataList: []
}
}
}
export const mobileChannelCategory = {
key: "4",
"4": {
"componentName": "MobileChannelCategory",
"componentType": PROPS_TYPES.moibileChannelCategory,
"title": "商品品类",
"canEdit": false,
"canHide": false,
"props": {
dataList: []
}
}
}
export const mobileChannelGoodsCard = {
key: "5",
"5": {
"componentName": "MobileChannelGoodsCard",
"componentType": PROPS_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_TYPES.moibileChannelInformation,
"title": "行业资讯",
"canEdit": true,
"canHide": false,
"props": {
title: "行业资讯",
dataList: []
}
}
}
export const mobileBottomNavigation = {
key: "7",
"7": {
"componentName": "MobileBottomNavigation",
"componentType": PROPS_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 0 → 100644
View file @ 0eca09d3
@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 0 → 100644
View file @ 0eca09d3
/*
* @Author: ghua
* @Date: 2021-02-22 17:02:20
* @LastEditTime: 2021-03-01 11:37:34
* @LastEditors: Please set LastEditors
* @Description: app渠道商城装修预览
* @FilePath: /lingxi-business-paltform/src/pages/mobileTemplate/channelTemplateEdit/index.tsx
*/
import React, { useEffect, useState } from 'react'
import { LegoProvider } from 'lingxi-editor-core'
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 {
mallLayoutConfig,
divWrap,
mobileChannelHeaderNav,
mobileBanner,
mobileChannelCategory,
mobileChannelGoodsCard,
mobileChannelInformation,
mobileBottomNavigation,
} from './config'
import Loading from '../../editor/components/Loading'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplateAdornAppChannelFindResponse, GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse } from '@/services/TemplateApi'
import { getAuth } from '@/utils/auth'
import styles from './index.less'
interface ShopPreviewPropsType {
location: {
query: {
/**
* 模板id
*/
id: number;
/**
* 模板名称
*/
template: string;
}
}
}
const TemplateList = ['science']
const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
const { query: { id, template } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [theme, setTheme] = useState<string>('theme-mall-science')
const [componentConfigs, setComponentConfigs] = useState({})
const { memberId, memberRoleId } = getAuth() || {}
useEffect(() => {
if (!TemplateList.includes(template)) {
setTheme(`theme-mall-${TemplateList[0]}`)
} else {
setTheme(`theme-mall-${template}`)
}
getComponentsConfig()
}, [])
/**
* 获取渠道信息
*/
const fetchChannelInfo = (): Promise<GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse> => {
return new Promise((resolve) => {
PublicApi.getTemplateWebMemberChannelWebFindCurrMemberChannel().then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
}
/**
* 获取app店铺装修信息
*/
const getAppChannelConfig = (): Promise<GetTemplateAdornAppChannelFindResponse | null> => {
return new Promise((resolve, reject) => {
const param: any = {
templateId: id
}
PublicApi.getTemplateAdornAppChannelFind(param).then(res => {
if(res.code === 1000) {
resolve(res.data)
} else {
reject(res)
}
}).catch((eror) => {
reject(eror)
})
})
}
/**
* 根据选中的类型和id获取信息
* @param data
*/
const getSelectInfo = (data, channelMemberId): Promise<any[] | undefined> => {
return new Promise((resolve) => {
const param: any = {
current: 1,
pageSize: 100,
idInList: data.productIdList,
priceTypeList: [1],
channelMemberId,
}
PublicApi.postSearchMobileShopChannelGetCommodityList(param).then(res => {
message.destroy()
resolve(res.data.data)
}).catch(() => {
resolve(undefined)
})
})
}
/**
* 获取品类树
*/
const getCustomerCategoryTreeById = (channelMemberId: number) => {
return new Promise((resolve) => {
const param: any = {
channelMemberId,
}
PublicApi.getSearchMobileShopChannelGetCustomerCategoryTree(param).then((res) => {
if (res.code === 1000) {
resolve(res.data)
} else {
resolve([])
}
}).catch(() => {
resolve([])
})
})
}
const getProductInfo = async (dataList, channelMemberId) => {
const newDataList: any[] = []
for(let index = 0; index < dataList.length; index += 1) {
const item = dataList[index]
if (item.productIdList && item.productIdList.length > 0) {
item.productList = await getSelectInfo(item, channelMemberId)
}
newDataList.push(item)
}
return newDataList
}
const getInformationInfo = async (ids: number[]) => {
if (ids && ids.length > 0) {
const params: any = {
current: 1,
pageSize: 100,
idList: ids,
}
const res = await PublicApi.getManageContentInformationPageByIdIn(params, {ctlType: 'none'})
if(res.code === 1000) {
return res.data.data
}
}
return []
}
const getComponentsConfig = async () => {
try {
const appConfig = await getAppChannelConfig()
console.log(appConfig, "appConfig")
//渠道信息
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)
}
}
if (appConfig?.advertBO) {
mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
}
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?.bottomBO) {
mobileBottomNavigation[mobileBottomNavigation.key].props.dataList = appConfig?.bottomBO.bottomDetailsBOList
}
const config = {
...mallLayoutConfig,
...mobileChannelHeaderNav,
...divWrap,
...mobileBanner,
...mobileChannelCategory,
...mobileChannelGoodsCard,
...mobileChannelInformation,
...mobileBottomNavigation,
}
setComponentConfigs(config)
setLoading(false)
} catch (error) {
console.log(error)
}
}
return !loading ? (
<LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
<div className={styles['wrapper']}>
<ToolBar type={1} title="渠道商城-首页" showActions={true} layoutType={LAYOUT_TYPE.channel} templateId={id} />
<div className={styles['content']}>
<AllComponents />
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel theme={theme} isPreview />
</div>
</div>
</div>
</div>
</LegoProvider>
) : <Loading />
}
export default mobileShopTempleteEdit
src/pages/mobileTemplate/shopTemplateEdit/config.ts
View file @ 0eca09d3
......@@ -25,15 +25,7 @@ export const mobileShopHeaderNav = {
"title": "背景图编辑",
"canEdit": true,
"canHide": false,
"props": {
"shopInfo": {
memberName: "温州市龙昌皮业有限公司",
logo: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/f60693caed3f47868e5897bd1ccf40ea1610331248766.png",
creditPoint: 998,
registerYears: 2,
avgTradeCommentStar: 3,
}
},
"props": {},
}
}
......@@ -133,78 +125,7 @@ export const mobileShopCommodityList = {
"title": "商品推荐",
"canEdit": true,
"canHide": false,
"props": {
"dataList": [
{
categoryId: 1,
categoryName: "灯光照明",
categoryImage: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png",
productList: [
{
id: 11,
name: '三级抗震螺纹钢 HRB400E 25*12三钢',
sellPoints: ["硬度适中偏软", "手感舒适"],
min: 79,
unitName: "吨",
sold: 3133,
mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
},
{
id: 12,
name: '三级抗震螺纹钢 HRB400E 25*12三钢',
sellPoints: ["硬度适中偏软", "手感舒适"],
min: 79,
unitName: "吨",
sold: 3133,
mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
},
{
id: 13,
name: '三级抗震螺纹钢 HRB400E 25*12三钢',
sellPoints: ["硬度适中偏软", "手感舒适"],
min: 79,
unitName: "吨",
sold: 3133,
mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
},
{
id: 14,
name: '三级抗震螺纹钢 HRB400E 25*12三钢',
sellPoints: ["硬度适中偏软", "手感舒适"],
min: 79,
unitName: "吨",
sold: 3133,
mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
}
]
},
{
categoryId: 2,
categoryName: "灯光照明",
categoryImage: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png",
productList: [
{
id: 21,
name: '四级抗震螺纹钢 HRB400E 25*12三钢',
sellPoints: ["硬度适中偏软"],
min: 79,
unitName: "吨",
sold: 3133,
mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
},
{
id: 22,
name: '三级抗震螺纹钢 HRB400E 25*12三钢',
sellPoints: ["硬度适中偏软", "手感舒适"],
min: 79,
unitName: "吨",
sold: 3133,
mainPic: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
}
]
}
]
}
"props": {}
}
}
src/pages/mobileTemplate/shopTemplatePreview/config.ts 0 → 100644
View file @ 0eca09d3
import { PROPS_TYPES } from 'lingxi-editor-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_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_TYPES.mobileBanner,
"title": "轮播广告",
"canEdit": true,
"canHide": false,
"props": {
dataList: []
}
}
}
export const mobileQuickNav = {
key: "4",
"4": {
"componentName": "MobileQuickNav",
"componentType": PROPS_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_TYPES.mobileShopCommodity,
"title": "商品推荐",
"canEdit": true,
"canHide": false,
"props": {}
}
}
src/pages/mobileTemplate/shopTemplatePreview/index.less 0 → 100644
View file @ 0eca09d3
@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 0 → 100644
View file @ 0eca09d3
/*
* @Author: ghua
* @Date: 2021-01-14 17:03:08
* @Last Modified by: ghua
* @Last Modified time: 2021-01-15 17:47:38
* @Description app店铺主页装修预览
*/
import React, { useEffect, useState } from 'react'
import { LegoProvider } from 'lingxi-editor-core'
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 {
mallLayoutConfig,
divWrap,
mobileShopHeaderNav,
mobileBanner,
mobileQuickNav,
mobileShopCommodityList,
} from './config'
import Loading from '../../editor/components/Loading'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplateAdornAppStoreFindResponse, GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse } from '@/services/TemplateApi'
import { getAuth } from '@/utils/auth'
import styles from './index.less'
interface ShopPreviewPropsType {
location: {
query: {
/**
* 模板id
*/
id: number;
/**
* 模板名称
*/
template: string;
}
}
}
const TemplateList = ['science']
const mobileShopTempletePreview: React.FC<ShopPreviewPropsType> = (props) => {
const { query: { id, template } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [theme, setTheme] = useState<string>('theme-mall-science')
const [componentConfigs, setComponentConfigs] = useState({})
const { memberId, memberRoleId } = getAuth() || {}
useEffect(() => {
if (!TemplateList.includes(template)) {
setTheme(`theme-mall-${TemplateList[0]}`)
} else {
setTheme(`theme-mall-${template}`)
}
getComponentsConfig()
}, [])
/**
* 获取店铺信息
*/
const fetchShopInfo = (): Promise<GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse> => {
return new Promise((resolve) => {
const param: any = {
memberId,
roleId: memberRoleId
}
PublicApi.getTemplateWebMemberShopWebFindByMemberIdAndRoleId(param).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
}
/**
* 获取app店铺装修信息
*/
const getAppShopConfig = (): Promise<GetTemplateAdornAppStoreFindResponse | null> => {
return new Promise((resolve, reject) => {
const param: any = {
templateId: id
}
PublicApi.getTemplateAdornAppStoreFind(param).then(res => {
if(res.code === 1000) {
resolve(res.data)
} else {
reject(res)
}
}).catch((eror) => {
reject(eror)
})
})
}
const changeData = (dataList) => {
if(dataList) {
return dataList.map((dataItem) => {
return {
categoryId: dataItem.id,
categoryName: dataItem.name,
categoryImage: dataItem.imageUrl || "",
productList: dataItem.commodityResponseList ? dataItem.commodityResponseList.map((commodityItem) => {
return {
id: commodityItem.id,
name: commodityItem.name,
sellPoints: commodityItem.sellingPoint,
min: commodityItem.min,
unitName: commodityItem.unitName,
sold: commodityItem.sold,
mainPic: commodityItem.mainPic,
}
}) : []
}
})
}
return []
}
/**
* 根据商品id，查询商品根据分类的列表
* @param idList
*/
const fetchCategoryByCommodityId = (idList: number[]) => {
return new Promise((resolve) => {
if(!idList) {
resolve([])
return
}
const param = {
idList
}
PublicApi.postSearchMobileShopStoreGetCategoryByCommodityId(param).then((res) => {
message.destroy()
if (res.code === 1000) {
resolve(changeData(res.data))
} else {
resolve([])
}
}).catch(() => {
resolve([])
})
})
}
const getComponentsConfig = async () => {
try {
const appConfig = await getAppShopConfig()
//店铺信息
const shopInfo = await fetchShopInfo()
mobileShopHeaderNav[mobileShopHeaderNav.key].props.shopInfo = shopInfo
if(appConfig?.backdropBO) {
mobileShopHeaderNav[mobileShopHeaderNav.key].props.backdrop = appConfig?.backdropBO.backdrop
}
if(appConfig?.advertBO) {
mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
}
if(appConfig?.functionBO) {
mobileQuickNav[mobileQuickNav.key].props.dataList = appConfig?.functionBO.functionDetailsBO
}
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,
}
} else {
mobileShopCommodityList[mobileShopCommodityList.key].props.storeId = shopInfo.id
mobileShopCommodityList[mobileShopCommodityList.key].props.title = '热销商品'
}
const config = {
...mallLayoutConfig,
...mobileShopHeaderNav,
...divWrap,
...mobileBanner,
...mobileQuickNav,
...mobileShopCommodityList,
}
setComponentConfigs(config)
setLoading(false)
} catch (error) {
console.log(error)
}
}
return !loading ? (
<LegoProvider initState={{ componentConfigs: componentConfigs }} config={config}>
<div className={styles['wrapper']}>
<ToolBar type={1} title="店铺主页" showActions={true} layoutType={LAYOUT_TYPE.shop} templateId={id} />
<div className={styles['content']}>
<AllComponents />
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel theme={theme} isPreview />
</div>
</div>
</div>
</div>
</LegoProvider>
) : <Loading />
}
export default mobileShopTempletePreview
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