Skip to content

J
jinfa-platform
Commit 042464df authored by GuanHua's avatar GuanHua
Browse files
Options

feat: app店铺模板装修

parent fe3f8ec9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 249 additions and 137 deletions
src/pages/editor/components/toolBar/index.tsx
View file @ 042464df
......@@ -16,7 +16,7 @@ interface ToolBarPropsType {
}
const ToolBar: React.FC<ToolBarPropsType> = (props) => {
const { type = 1, title = "首页", showActions, templateId } = props
const { type = 1, title = "首页", showActions, templateId, layoutType } = props
const [saveLoading, setSaveLoading] = useState<boolean>(false)
const { componentConfigs } = useSelector<ComponentConfigsType, STATE_PROPS>(['componentConfigs'])
......@@ -39,54 +39,36 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
const handleSave = useCallback(() => {
const param: any = {
templateId: Number(templateId),
appEnterpriseBO: {},
}
if(layoutType === LAYOUT_TYPE.shop) {
param.appStoreBO = {}
Object.keys(componentConfigs).forEach(key => {
const componentConfigsItem = componentConfigs[key]
if(componentConfigsItem.componentType) {
switch(componentConfigsItem.componentType) {
case PROPS_TYPES.mobileHeaderNav:
param.appEnterpriseBO.topBO = {
style: componentConfigsItem.props.styleTheme || 0,
status: true,
topDetailsBOList: componentConfigsItem.props.dataList || []
case PROPS_TYPES.mobileShopHeaderNav:
param.appStoreBO.backdropBO = {
status: false,
backdrop: componentConfigsItem.props.backdrop || ''
}
break
case PROPS_TYPES.mobileBanner:
param.appEnterpriseBO.advertBO = {
status: componentConfigsItem.props.visible || true,
param.appStoreBO.advertBO = {
status: false,
advertDetailsBOList: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileQuickNav:
param.appEnterpriseBO.functionBO = {
status: componentConfigsItem.props.visible || true,
param.appStoreBO.functionBO = {
status: false,
functionDetailsBO: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileShowCase:
param.appEnterpriseBO.showcaseBO = {
style: componentConfigsItem.props.styleTheme || 0,
status: componentConfigsItem.props.visible || true,
showcaseDetailsBO: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileRecommentShops:
param.appEnterpriseBO.storeBO = {
status: componentConfigsItem.props.visible || true,
storeIdList: componentConfigsItem.props.dataList ? componentConfigsItem.props.dataList.map(item => item.selectId) : []
}
break
case PROPS_TYPES.mobileQuality:
param.appEnterpriseBO.excellentBO = {
status: componentConfigsItem.props.visible || true,
excellentDetailsBO: componentConfigsItem.props.dataList || []
}
break
case PROPS_TYPES.mobileBottomNavigation:
param.appEnterpriseBO.bottomBO = {
status: true,
bottomDetailsBOList: componentConfigsItem.props.dataList || []
case PROPS_TYPES.mobileShopCommodity:
param.appStoreBO.productBO = {
status: false,
title: componentConfigsItem.props.title,
productIdList: componentConfigsItem.props.productIdList,
}
break
default:
......@@ -94,18 +76,30 @@ const ToolBar: React.FC<ToolBarPropsType> = (props) => {
}
}
})
} else if(layoutType=== LAYOUT_TYPE.channel) {
param.appChannelBO = {}
}
console.log(JSON.stringify(param), "param")
saveAppEnterprise(param)
}, [componentConfigs])
const saveAppEnterprise = (param) => {
PublicApi.postTemplateAdornAppEnterpriseSave(param).then(res => {
let postFn
if(layoutType=== LAYOUT_TYPE.shop) {
postFn = PublicApi.postTemplateAdornAppStoreSave
} else if(layoutType=== LAYOUT_TYPE.channel) {
postFn = PublicApi.postTemplateAdornAppChannelSave
}
if(postFn) {
postFn(param).then(res => {
if(res.code === 1000) {
message.destroy()
message.success("保存成功")
}
})
}
}
return (
<div className={styles.toolbar}>
......
src/pages/editor/mobileSettingPanel/propsSettings/components/banner/index.tsx
View file @ 042464df
......@@ -51,14 +51,6 @@ const RedirectTypeList = [
label: '积分详情',
},
{
value: 3,
label: '店铺主页',
},
{
value: 4,
label: '资讯详情',
},
{
value: 5,
label: '不跳转',
},
......
src/pages/editor/mobileSettingPanel/propsSettings/components/quickNav/index.tsx
View file @ 042464df
......@@ -29,50 +29,27 @@ interface QuickNavPropsType {
visible: boolean,
}
// 跳转类型：1-商品 2-分类 3-积分兑换 4-公司介绍 5-成为会员 12-外部链接(可多个)
const RedirectTypeList = [
{
value: 1,
label: '找现货',
label: '商品',
},
{
value: 2,
label: '找供应',
label: '分类',
},
{
value: 3,
label: '发布求购',
label: '积分兑换',
},
{
value: 4,
label: '求购列表',
label: '公司介绍',
},
{
value: 5,
label: '换积分',
},
{
value: 6,
label: '找店铺',
},
{
value: 7,
label: '看资讯',
},
{
value: 8,
label: '授信申请',
},
{
value: 9,
label: '人气店铺',
},
{
value: 10,
label: '求购动态',
},
{
value: 11,
label: '最新成交',
label: '成为会员',
},
{
value: 12,
......@@ -234,6 +211,26 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
}
/**
* 修改广告链接
* @param value
* @param id
*/
const handleUrlChange = (value: string, id: number) => {
console.log(value, "value")
const newList = [...list]
newList.map(item => {
if (item.id === id) {
item.url = `https://${value}`
}
})
setList(newList)
changeProps({
props:Object.assign({ ...props }, { dataList: newList })
})
}
/**
* 添加广告
*/
const handleAddItem = () => {
......@@ -253,6 +250,14 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
})
}
const judgedItemNotInList = (item, type: number) => {
if(item.value === type) {
return true
}
return list.every(listItem => listItem.type !== item.value)
}
return (
<div className={styles.setting}>
{/* <div className={styles.hideModule}>
......@@ -308,11 +313,21 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
<div className={styles.setting_line_addItem_line_brief}>
<Select style={{ width: '100%' }} value={item.type || undefined} onChange={(value) => handleTypeChange(value, item.id)}>
{
RedirectTypeList.map(item => (<Select.Option value={item.value} key={`redirect_type_${item.value}`}>{item.label}</Select.Option>))
RedirectTypeList.map(selectItem => judgedItemNotInList(selectItem, item.type) && (<Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>))
}
</Select>
</div>
</div>
{
item.type === 12 && (
<div className={styles.setting_line_addItem_line}>
<div className={styles.setting_line_addItem_line_label}>链接地址：</div>
<div className={styles.setting_line_addItem_line_brief}>
<Input addonBefore="https://" value={item.url} onChange={(e) => handleUrlChange(e.target.value, item.id)} />
</div>
</div>
)
}
<div className={styles.setting_line_addItem_line}>
<div className={styles.setting_line_addItem_line_label}>图标：</div>
<div className={styles.setting_line_addItem_line_brief}>
......@@ -340,7 +355,9 @@ const QuickNav: React.FC<QuickNavPropsType> = (props) => {
</div>
))}
</ReactSortable>
<Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={handleAddItem}>添加功能模块</Button>
{
list.length <=5 && <Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={handleAddItem}>添加功能模块</Button>
}
</div>
)
}
......
src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/contant/column.tsx 0 → 100644
View file @ 042464df
import React from 'react'
import { numFormat, priceFormat } from '@/utils/numberFomat'
import ImageBox from '@/components/ImageBox'
const showMainPic = (mainPic: string) => <ImageBox width={32} height={32} imgUrl={mainPic} />
export const promptCommodityColumn = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
},
{
title: "商品图片",
dataIndex: "mainPic",
render: (mainPic: string) => showMainPic(mainPic)
},
{
title: "商品名称",
dataIndex: "name",
width: 280,
ellipsis: true,
},
{
title: "品类",
render: (_, record) => record.customerCategory ? record.customerCategory.name : "",
ellipsis: true,
},
{
title: "品牌",
render: (_, record) => record.brand ? record.brand.name : "",
ellipsis: true,
},
{
title: "价格",
dataIndex: "min",
render: (_, record) => `¥${priceFormat(record.min)}`
},
]
export default promptCommodityColumn
src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/contant/schema.ts 0 → 100644
View file @ 042464df
import { ISchema } from '@formily/antd'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import { PublicApi } from '@/services/api'
export const formProduct: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '搜索',
align: 'flex-left',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
style: {
marginRight: 0
}
},
colStyle: {
marginTop: 20,
},
},
properties: {
customerCategoryId: {
type: 'string',
"x-component": 'SearchSelect',
"x-component-props": {
placeholder: '请选择品类',
className: 'fixed-ant-selected-down', // 该类强制将显示的下拉框出现在select下, 只有这里出现问题, ??
queryParams: {
storeId: 2,
},
fetchSearch: PublicApi.getProductSelectGetSelectCategory,
style: {
width: 160
}
}
},
brandId: {
type: 'string',
"x-component": 'SearchSelect',
"x-component-props": {
placeholder: '请选择品牌',
queryParams: {
storeId: 2,
},
fetchSearch: PublicApi.getSearchMobileShopStoreGetBrand,
style: {
width: 160
}
}
},
submit: {
"x-component": 'Submit',
"x-mega-props": {
span: 1
},
"x-component-props": {
children: '查询'
}
}
}
}
}
}
export const basicSchema: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
align: 'flex-left',
},
},
}
}
src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/index.less 0 → 100644
View file @ 042464df
@import "../../../../../../global//styles/utils.less";
@import "../../common.less";
.selectBtn {
display: block;
width: 100%;
background-color: #FAFBFC;
border: 1px dashed #D8DDE6;
}
.uploadPreview {
border: 1px solid #EBECF0;
}
src/pages/editor/mobileSettingPanel/propsSettings/index.tsx
View file @ 042464df
......@@ -3,6 +3,8 @@ import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES } from 'lingxi-edito
import HeaderNav from './components/headerNav'
import Banner from './components/banner'
import QuickNav from './components/quickNav'
import HeadBackground from './components/headBackground'
import RecommendCommodity from './components/recommendCommodity'
import BottomNavigation from './components/bottomNavigation'
import styles from './index.less'
......@@ -19,6 +21,10 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
if (componentType) {
switch (componentType.type) {
case PROPS_TYPES.mobileShopHeaderNav:
return <HeadBackground {...initProps} />
case PROPS_TYPES.mobileShopCommodity:
return <RecommendCommodity {...initProps} />
case PROPS_TYPES.mobileHeaderNav:
return <HeaderNav {...initProps} />
case PROPS_TYPES.mobileBanner:
......
src/pages/editor/settingsPanel/propsSettings/components/GoodsSetting/index.tsx
View file @ 042464df
......@@ -5,7 +5,6 @@ import SettingList from '../../../../components/SettingList'
import GoodsItem from './GoodsItem'
import SettingPanel from '../../../../components/SettingPanel'
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons'
import { GetTemplatePlatformFindGoodsListResponseDetail } from '@/services/TemplateApi'
import { PublicApi } from '@/services/api'
import { filterProps } from '../../../../utils'
import styles from './index.less'
......@@ -37,7 +36,7 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
const { templateid, categoryid, goodsList = [], templateType } = props
const [current, setCurrent] = useState<number>(1)
const [pageSize, setPageSize] = useState<number>(10)
const [noSelectGoods, setNoSelectGoods] = useState<GetTemplatePlatformFindGoodsListResponseDetail[]>([])
const [noSelectGoods, setNoSelectGoods] = useState<any[]>([])
const [selectList, setSelectList] = useState<any>([])
const [selectGoodsList, setSelectGoodsList] = useState<any>(goodsList)
const [goodsIds, setGoodsIds] = useState<any>([])
......@@ -240,7 +239,7 @@ const GoodsSetting: React.FC<GoodsSettingPropsType> = (props) => {
postFn(param).then(res => {
if (res.code === 1000) {
resolve()
resolve(true)
} else {
reject()
}
......
src/pages/mobileTemplate/shopTemplateEdit/config.ts
View file @ 042464df
......@@ -21,6 +21,7 @@ export const mobileShopHeaderNav = {
key: "1",
"1": {
"componentName": "MobileShopHeaderNav",
"componentType": PROPS_TYPES.mobileShopHeaderNav,
"title": "背景图编辑",
"canEdit": true,
"canHide": false,
......
src/pages/mobileTemplate/shopTemplateEdit/index.tsx
View file @ 042464df
......@@ -25,7 +25,7 @@ import {
import Loading from '../../editor/components/Loading'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplateAdornAppStoreFindResponse } from '@/services/TemplateApi'
import { GetTemplateAdornAppStoreFindResponse, GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse } from '@/services/TemplateApi'
// import { GlobalConfig } from '@/global/config'
import MobileSettingPanel from '../../editor/mobileSettingPanel'
import { getAuth } from '@/utils/auth'
......@@ -67,7 +67,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
/**
* 获取店铺信息
*/
const fetchShopInfo = () => {
const fetchShopInfo = (): Promise<GetTemplateWebMemberShopWebFindByMemberIdAndRoleIdResponse> => {
return new Promise((resolve) => {
const param: any = {
memberId,
......@@ -191,73 +191,35 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
const getComponentsConfig = async () => {
try {
// const appConfig = await getAppShopConfig()
// console.log(appConfig, "appConfig")
const appConfig = await getAppShopConfig()
console.log(appConfig, "appConfig")
//店铺信息
const shopInfo = await fetchShopInfo()
mobileShopHeaderNav[mobileShopHeaderNav.key].props.shopInfo = shopInfo
// if(appConfig?.topBO) {
// // 顶部导航
// mobileHeaderNav[mobileHeaderNav.key].props.styleTheme = appConfig?.topBO.style
// mobileHeaderNav[mobileHeaderNav.key].props.dataList = appConfig?.topBO.topDetailsBOList
// }
// if(appConfig?.advertBO) {
// // 轮播广告
// mobileBanner[mobileBanner.key].props = {
// visible: appConfig.advertBO.status,
// dataList: appConfig.advertBO.advertDetailsBOList
// }
// }
mobileShopCommodityList[mobileShopCommodityList.key].props.storeId = shopInfo.id
// if(appConfig?.functionBO) {
// // 功能入口
// mobileQuickNav[mobileQuickNav.key].props = {
// visible: appConfig.functionBO.status,
// dataList: appConfig.functionBO.functionDetailsBO,
// }
// }
// if(appConfig?.showcaseBO) {
// // 橱窗推荐
// mobileShowCase[mobileShowCase.key].props = {
// visible: appConfig?.showcaseBO.status,
// dataList: appConfig?.showcaseBO.showcaseDetailsBO,
// }
// }
// if(appConfig?.storeBO) {
// const storeBOParam = {
// current: 1,
// pageSize: 100,
// idList: appConfig?.storeBO.storeIdList || [],
// }
// console.log(storeBOParam, "storeBOParam")
// const storeBORes = await getRecommendShopList(storeBOParam)
if(appConfig?.backdropBO) {
mobileShopHeaderNav[mobileShopHeaderNav.key].props.backdrop = appConfig?.backdropBO.backdrop
}
// // 推荐店铺
// mobileRecommendShops[mobileRecommendShops.key].props = {
// visible: appConfig?.storeBO.status,
// dataList: getStoreBOList(storeBORes),
// }
// }
if(appConfig?.advertBO) {
mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
}
// if(appConfig?.excellentBO) {
// // 优质推荐
// mobileQuality[mobileQuality.key].props = {
// visible: appConfig?.excellentBO.status,
// dataList: await getExcellentDetailsBO(appConfig?.excellentBO.excellentDetailsBO),
// }
// }
if(appConfig?.functionBO) {
mobileQuickNav[mobileQuickNav.key].props.dataList = appConfig?.functionBO.functionDetailsBO
}
// if(appConfig?.bottomBO) {
// // 底部导航
// mobileBottomNavigation[mobileBottomNavigation.key].props = {
// visible: appConfig?.bottomBO.status,
// dataList: appConfig?.bottomBO.bottomDetailsBOList,
// }
// }
if(appConfig?.productBO) {
mobileShopCommodityList[mobileShopCommodityList.key].props = {
title: appConfig.productBO.title,
productIdList: appConfig.productBO.productIdList
}
} else {
mobileShopCommodityList[mobileShopCommodityList.key].props.title = '热销商品'
}
const config = {
...mallLayoutConfig,
......
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