Skip to content

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

fix: 店铺商城装修

parent 4a86a61a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 521 additions and 51 deletions
src/pages/editor/components/toolBar/returnSaveParams.ts
View file @ eb9d5d8a
......@@ -494,6 +494,27 @@ export const paramsShop = (
}
}
break;
// 底部导航
case '9':
propsData = get(pageConfig, ['9', 'props']) || {}
childNodes = get(pageConfig, ['9', 'childNodes']) || {}
_params.adornContent.bottom = {
style: propsData.styleTheme || 0,
status: true,
details: []
}
if (childNodes && Array.isArray(childNodes) && childNodes.length > 0) {
for (let key in childNodes) {
tempProps = pageConfig[childNodes[key]]?.props || {}
!isEmpty(tempProps) && _params.adornContent.bottom.details.push({
defaultIcon: tempProps.defaultIcon,
selectIcon: tempProps.selectIcon,
name: tempProps.name,
type: tempProps.type,
});
}
}
break
}
})
......
src/pages/editor/configs/componentConfigs/LingXiUI/BottomNavigation.ts 0 → 100644
View file @ eb9d5d8a
import {
ComponentSchemaType,
PROPS_SETTING_TYPES,
PROPS_TYPES,
} from '@lingxi-disign/core';
const BottomNavigation: ComponentSchemaType = {
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
},
};
const BottomNavigationItems: ComponentSchemaType = {
fatherNodesRule: ['BottomNavigation.children'],
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
componentType: {
type: PROPS_SETTING_TYPES.bottomNavigationItems,
},
},
};
export default {
BottomNavigation,
'BottomNavigation.Items': BottomNavigationItems,
};
src/pages/editor/configs/componentConfigs/LingXiUI/MarketingCard.ts
View file @ eb9d5d8a
......@@ -26,6 +26,19 @@ const Header: ComponentSchemaType = {
},
};
const ShopHeader: ComponentSchemaType = {
fatherNodesRule: ['MarketingCard.children'],
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
componentType: {
type: PROPS_SETTING_TYPES.marketingCardHeader,
},
},
};
const CommonContainer: ComponentSchemaType = {
fatherNodesRule: ['MarketingCard.children'],
propsConfig: {
......@@ -36,6 +49,16 @@ const CommonContainer: ComponentSchemaType = {
},
};
const VerticalContainer: ComponentSchemaType = {
fatherNodesRule: ['MarketingCard.children'],
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
},
};
const CollageContainer: ComponentSchemaType = {
fatherNodesRule: ['MarketingCard.children'],
propsConfig: {
......@@ -134,7 +157,9 @@ const CouponsItem: ComponentSchemaType = {
export default {
MarketingCard,
'MarketingCard.Header': Header,
'MarketingCard.ShopHeader': ShopHeader,
'MarketingCard.CommonContainer': CommonContainer,
'MarketingCard.VerticalContainer': VerticalContainer,
'MarketingCard.CollageContainer': CollageContainer,
'MarketingCard.PackageContainer': PackageContainer,
'MarketingCard.PackageContainerTabs': PackageContainerTabs,
......
src/pages/editor/configs/componentConfigs/LingXiUI/index.ts
View file @ eb9d5d8a
......@@ -48,7 +48,8 @@ import MobileNavCard from './MobileNavCard'
import Banner from './Banner'
import MobileShopCommodity from './MobileShopCommodity'
import CouponsModal from './CouponsModal'
import MarketingCard from './MarketingCard';
import MarketingCard from './MarketingCard'
import BottomNavigation from './BottomNavigation'
export default {
View,
......@@ -92,5 +93,6 @@ export default {
...Banner,
...MobileShopCommodity,
...CouponsModal,
...MarketingCard
...MarketingCard,
...BottomNavigation
}
src/pages/editor/mobileSettingPanel/index.tsx
View file @ eb9d5d8a
......@@ -6,15 +6,18 @@ import cx from 'classnames'
import { Tabs } from 'antd'
import StyleSettings from './styleSettings'
import PropsSettings from './propsSettings'
import { LAYOUT_TYPE } from '@/constants'
import styles from './index.less'
type SettingPanelType = {
selectedInfo: SelectedInfoType,
pageConfig: PageConfigType,
}
interface MobileSettingPanelProps {
shopId: number
shopId: number,
layoutType: LAYOUT_TYPE
}
const { TabPane } = Tabs
......@@ -25,7 +28,6 @@ const MobileSettingPanel: React.FC<MobileSettingPanelProps> = (props)=> {
const [ newSelectInfo, setNewSelectInfo ] = useState<SelectedInfoType>()
useEffect(() => {
console.log(pageConfig, 'pageConfig')
const updateSelectInfo = () => {
if(selectedInfo) {
const { props: oldProps ,selectedKey } = selectedInfo
......@@ -35,7 +37,6 @@ const MobileSettingPanel: React.FC<MobileSettingPanelProps> = (props)=> {
setNewSelectInfo(updateSelectInfo)
}
}
updateSelectInfo()
}, [selectedInfo, pageConfig])
......
src/pages/editor/mobileSettingPanel/propsSettings/components/bottomNavigationClient/index.less 0 → 100644
View file @ eb9d5d8a
@import "../../common.less";
.bottomNavigationClient {
&-box {
margin-bottom: 16px;
:global {
.ant-upload {
width: 100%;
}
}
&-label {
font-size: 12px;
color: #91959B;
margin-bottom: 8px;
}
&-icon {
height: 96px;
background-color: #FAFBFC;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
&>img {
width: 40px;
height: 40px;
}
&-add{
font-size: 40px;
}
&:hover {
.bottomNavigationClient-box-icon-cover {
display: block;
}
}
&-cover {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .1);
display: none;
z-index: 1;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
}
&-bottom {
position: absolute;
height: 24px;
line-height: 24px;
text-align: center;
background-color: rgba(0, 0, 0, 0.24);
font-size: 12px;
color: #fff;
width: 100%;
bottom: 0;
left: 0;
}
}
}
}
}
src/pages/editor/mobileSettingPanel/propsSettings/components/bottomNavigationClient/index.tsx 0 → 100644
View file @ eb9d5d8a
import React, { useMemo } from 'react';
import { Input, Select } from 'antd';
import { PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import UploadImage from '@/components/UploadImage';
import uploadImgIcon from '@/assets/icons/upload_img_icon.svg'
import styles from './index.less';
interface BottomNavigationClientProps {
// 默认icon
defaultIcon?: any,
// 选中icon
selectIcon?: any,
// 导航标题
name?: any,
// 链接类型
/** 类型：1-首页 2-分类 3-进货单 4-工作台 5-我的 6-找现货 7-找供应 8-求购 9-换积分 10-找店铺 */
type?: any,
// 当前选中组件的key
selectedKey?: any,
// 1.B端 2.C端 3.SRM
property?: 1 | 2 | 3
}
const RedirectTypeList_B = [
{
value: 1,
label: '首页',
},
{
value: 2,
label: '分类',
},
{
value: 3,
label: '进货单',
},
{
value: 4,
label: '消息',
},
{
value: 5,
label: '我的',
},
{
value: 6,
label: '找现货',
},
{
value: 7,
label: '找供应',
},
{
value: 8,
label: '换积分',
},
{
value: 9,
label: '找店铺',
},
];
const RedirectTypeList_C = [
{
value: 1,
label: '首页',
},
{
value: 2,
label: '分类',
},
{
value: 3,
label: '购物车',
},
{
value: 4,
label: '我的',
},
{
value: 5,
label: '消息',
},
{
value: 6,
label: '积分兑换',
},
{
value: 7,
label: '在线客服',
},
];
const BottomNavigationClient: React.FC<BottomNavigationClientProps> = (props: BottomNavigationClientProps) => {
const { defaultIcon, selectIcon, name, type, property = 2, selectedKey } = props;
const _isNull = (list) => {
let _number = 0;
for (let key in list) {
if (list[key]) {
_number += 1
}
}
return _number === list.length ? false : true;
}
const _onChangeName = (e: any) => {
const _val = e.target.value;
changeProps({
title: _val || '',
props: Object.assign({ ...props }, { name: _val, isnull: _isNull([defaultIcon, selectIcon, _val, type]) })
});
}
const _onChangeType = (value: any) => {
changeProps({
props: Object.assign({ ...props }, { type: value, isnull: _isNull([defaultIcon, selectIcon, name, value]) })
});
}
const _onChangeDefaultIcon = (url: any) => {
changeProps({
props: Object.assign({ ...props }, { defaultIcon: url, isnull: _isNull([url, selectIcon, name, type]) })
});
}
const _onChangeSelectIcon = (url: any) => {
changeProps({
props: Object.assign({ ...props }, { selectIcon: url, isnull: _isNull([defaultIcon, url, name, type]) })
});
}
const RedirectTypeList = useMemo(() => {
if(property === 1){
return RedirectTypeList_B
}else if(property === 2){
return RedirectTypeList_C
}
}, [property])
return (
<div className={styles['bottomNavigationClient']}>
<div className={styles['bottomNavigationClient-box']}>
<div className={styles['bottomNavigationClient-box-label']}>名称</div>
<Input key={`${selectedKey}-name`} defaultValue={name} onBlur={_onChangeName} />
</div>
<div className={styles['bottomNavigationClient-box']}>
<div className={styles['bottomNavigationClient-box-label']}>链接</div>
<Select key={`${selectedKey}-type`} defaultValue={type} onChange={_onChangeType} style={{ width: '100%' }} >
{
RedirectTypeList?.map(selectItem => <Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>)
}
</Select>
</div>
<div className={styles['bottomNavigationClient-box']}>
<div className={styles['bottomNavigationClient-box-label']}>图标-默认</div>
{defaultIcon ? (
<div className={styles['bottomNavigationClient-box-icon']}>
<img src={defaultIcon} />
<div className={styles['bottomNavigationClient-box-icon-cover']}>
<UploadImage
onChange={(url) => { _onChangeDefaultIcon(url) }}
listType="text"
>
<div className={styles['bottomNavigationClient-box-icon-cover-bottom']}>
添加图像
</div>
<DeleteOutlined className={styles['bottomNavigationClient-box-icon-cover-delete']} onClick={(e) => { e.stopPropagation(); e.preventDefault(); _onChangeDefaultIcon('') }} />
</UploadImage>
</div>
</div>
) : (
<UploadImage
onChange={(url) => { _onChangeDefaultIcon(url) }}
listType="text"
>
<div className={styles['bottomNavigationClient-box-icon']}>
<img src={uploadImgIcon} className={styles['bottomNavigationClient-box-icon-add']} />
<div className={styles['bottomNavigationClient-box-icon-cover']}>
<div className={styles['bottomNavigationClient-box-icon-cover-bottom']}>
添加图像
</div>
</div>
</div>
</UploadImage>
)}
</div>
<div className={styles['bottomNavigationClient-box']}>
<div className={styles['bottomNavigationClient-box-label']}>图标-选中</div>
{selectIcon ? (
<div className={styles['bottomNavigationClient-box-icon']}>
<img src={selectIcon} />
<div className={styles['bottomNavigationClient-box-icon-cover']}>
<UploadImage
onChange={(url) => { _onChangeSelectIcon(url) }}
listType="text"
>
<div className={styles['bottomNavigationClient-box-icon-cover-bottom']}>
添加图像
</div>
<DeleteOutlined className={styles['bottomNavigationClient-box-icon-cover-delete']} onClick={(e) => { e.stopPropagation(); e.preventDefault(); _onChangeSelectIcon('') }} />
</UploadImage>
</div>
</div>
) : (
<UploadImage
onChange={(url) => { _onChangeSelectIcon(url) }}
listType="text"
>
<div className={styles['bottomNavigationClient-box-icon']}>
<img src={uploadImgIcon} className={styles['bottomNavigationClient-box-icon-add']} />
<div className={styles['bottomNavigationClient-box-icon-cover']}>
<div className={styles['bottomNavigationClient-box-icon-cover-bottom']}>
添加图像
</div>
</div>
</div>
</UploadImage>
)}
</div>
</div>
)
}
export default BottomNavigationClient
src/pages/editor/mobileSettingPanel/propsSettings/components/marketingCardHeader/index.tsx
View file @ eb9d5d8a
......@@ -5,7 +5,7 @@ import { changeProps } from '@lingxi-disign/core';
import UploadImage from '@/components/UploadImage';
import { LAYOUT_TYPE } from '@/constants'
import ICONS_CONFIG from '../../../../components/mobileClientEditLeft/iconsConfig';
import styles from './index.less';
......@@ -21,11 +21,12 @@ interface MarketingCardHeaderProps {
icon?: any,
// 倒计时数组[时,分,秒]
countDown?: string[],
selectedKey?: any
selectedKey?: any,
layoutType: LAYOUT_TYPE
}
const MarketingCardHeader: React.FC<MarketingCardHeaderProps> = (props: MarketingCardHeaderProps) => {
const { type, title, explain, icon, selectedKey } = props;
const { type, title, explain, icon, selectedKey, layoutType } = props;
const _defaultInfo = ICONS_CONFIG.filter((item) => item.type === type)[0]
const _onChangeTitle = (e: any) => {
const _val = e.target.value;
......@@ -52,10 +53,14 @@ const MarketingCardHeader: React.FC<MarketingCardHeaderProps> = (props: Marketin
<div className={styles['marketingCardHeader-box-label']}>标题</div>
<Input key={`${selectedKey}-title`} defaultValue={title || _defaultInfo?.title} onBlur={_onChangeTitle} />
</div>
<div className={styles['marketingCardHeader-box']}>
<div className={styles['marketingCardHeader-box-label']}>标题说明</div>
<Input key={`${selectedKey}-explain`} defaultValue={explain || _defaultInfo?.explain} onBlur={_onChangeExplain} />
</div>
{
layoutType !== LAYOUT_TYPE.shop && (
<div className={styles['marketingCardHeader-box']}>
<div className={styles['marketingCardHeader-box-label']}>标题说明</div>
<Input key={`${selectedKey}-explain`} defaultValue={explain || _defaultInfo?.explain} onBlur={_onChangeExplain} />
</div>
)
}
<div className={styles['marketingCardHeader-box']}>
<div className={styles['marketingCardHeader-box-label']}>图标</div>
{icon ? (
......
src/pages/editor/mobileSettingPanel/propsSettings/index.tsx
View file @ eb9d5d8a
......@@ -13,11 +13,14 @@ import CouponsModal from './components/couponsModal'
import MarketingCardCoupon from './components/marketingCardCoupon';
import MarketingCardGood from './components/marketingCardGood'
import MarketingCardHeader from './components/marketingCardHeader'
import BottomNavigationClient from './components/bottomNavigationClient'
import { LAYOUT_TYPE } from '@/constants'
import styles from './index.less'
interface PropsSettingsPropsType {
selectedInfo: SelectedInfoType | undefined,
pageConfig: PageConfigType,
layoutType: LAYOUT_TYPE,
shopId: number,
}
......@@ -30,7 +33,6 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
const componentType = propsConfig?.componentType
if (componentType) {
console.log(componentType.type, 'componentType.type')
switch (componentType.type) {
case PROPS_SETTING_TYPES.mobileShopHeaderNav:
return <HeadBackground {..._props} />
......@@ -64,6 +66,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
const _type = pageConfig?.[_parentKey]?.props?.type;
const _exType = pageConfig?.[_parentKey]?.props?.exType;
return <MarketingCardGood {..._props} actType={_type} exType={_exType} pageConfig={pageConfig} />
case PROPS_SETTING_TYPES.bottomNavigationItems:
return <BottomNavigationClient {..._props} />
default:
return null
}
......
src/pages/mobileTemplate/shopTemplateEdit/config.ts
View file @ eb9d5d8a
......@@ -129,4 +129,25 @@ export const defaultConfig: PageConfigType = {
canEdit: true,
canHide: false,
},
// '9': {
// title: '底部标签栏',
// componentName: 'BottomNavigation',
// props: {},
// childNodes: ['10'],
// childComponentName: 'BottomNavigation.Items',
// addBtnText: '添加标签',
// maxLength: 5,
// },
// '10': {
// loop: '${bottom}',
// title: '${item.name}',
// componentName: 'BottomNavigation.Items',
// props: {
// defaultIcon: '${item.defaultIcon}',
// selectIcon: '${item.selectIcon}',
// name: '${item.name}',
// type: '${item.type}',
// isnull: false,
// },
// },
}
src/pages/mobileTemplate/shopTemplateEdit/index.tsx
View file @ eb9d5d8a
......@@ -236,7 +236,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
shopInfo: shopInfo,
navList: appConfig?.navList ? appConfig?.navList.details : [],
advert: appConfig?.advert ? appConfig?.advert.details : [],
commodityList: []
commodityList: [],
bottom: appConfig?.bottom ? appConfig?.bottom.details : [],
}
if (appConfig?.commodity) {
......@@ -289,6 +290,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
originalPrice: priceFormat(item.price),
discountPrice: priceFormat(item.activityPrice),
......@@ -321,6 +324,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '直降60元',
originalPrice: priceFormat(item.price),
......@@ -354,6 +359,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满3件减50',
originalPrice: priceFormat(item.price),
......@@ -387,6 +394,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '5折起',
originalPrice: priceFormat(item.price),
......@@ -420,6 +429,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满3件8折',
discountPrice: priceFormat(item.activityPrice),
......@@ -452,6 +463,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满100减10',
originalPrice: priceFormat(item.price),
......@@ -485,6 +498,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '满100打5折',
originalPrice: priceFormat(item.price),
......@@ -518,6 +533,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `原价${item.price}元`,
isnull: false
......@@ -578,6 +595,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `第2件5折`,
originalPrice: priceFormat(item.price),
......@@ -611,6 +630,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: `99元4件`,
discountPrice: priceFormat(item.activityPrice),
......@@ -643,6 +664,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
direction: 'column',
img: item.productImgUrl,
originalPrice: priceFormat(item.price),
......@@ -715,6 +738,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '加20元换购',
isnull: false
......@@ -746,6 +771,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '加20元换购',
isnull: false
......@@ -777,6 +804,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '10元抵100',
originalPrice: priceFormat(item.price),
......@@ -810,6 +839,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '已送出 186 件',
originalPrice: priceFormat(item.price),
......@@ -873,6 +904,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...child,
mode: 'horizontal',
name: item.productName,
img: child.productImgUrl,
title: child.productName,
discountPrice: priceFormat(child.price),
......@@ -908,6 +941,8 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
componentName: 'MarketingCard.GoodsItem',
props: {
...item,
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: '已送出 186 件',
discountPrice: priceFormat(item.activityPrice),
......@@ -952,7 +987,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
<MobileDesignPanel onlyEidt theme={theme} pageConfig={componentConfigs} />
</div>
</div>
<MobileSettingPanel shopId={shopId} />
<MobileSettingPanel shopId={shopId} layoutType={LAYOUT_TYPE.shop} />
</div>
</div>
</BrickProvider>
......
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