Commit d71e783c authored by GuanHua's avatar GuanHua

feat: 移动端顶部导航装修

parent 35d23bc8
......@@ -39,7 +39,9 @@ const AllComponents = () => {
return (
<div className={cx(styles.components_item, (selectedInfo && selectedInfo.selectedKey === item.key) ? styles.active : {})} key={item.title} onClick={() => handleSelectComponent(item.key)}>
<span className={styles.components_item_text}>{item.title}</span>
<EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />
{
item.canHide && <EyeInvisibleOutlined className={cx(styles.components_item_icon, styles.disable)} />
}
</div>
)
}
......
import React from 'react'
import { BrickDesign } from 'lingxi-design';
// import { useSelector } from 'lingxi-editor-core';
import MobileUIDemo from './mobileUIDemo'
import { BrickDesign } from 'lingxi-design'
// import MobileUIDemo from './mobileUIDemo'
import styles from './index.less'
const MobileDesignPanel = (props) => {
......@@ -10,7 +9,6 @@ const MobileDesignPanel = (props) => {
return (
<div className={styles.mobileDesignWrap}>
<BrickDesign theme={theme} mobile />
{/* <MobileUIDemo /> */}
<div className={styles.appBottom}>
<div className={styles.appBottomStrip}></div>
</div>
......
......@@ -5,10 +5,6 @@ import cx from 'classnames'
import LogoIcon from './adaptive-icon.png'
import styles from './index.less'
const MIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2245831_5lnj0j4qk5.js', // 在 iconfont.cn 上生成
});
const MobileUIDemo: React.FC = () => {
return (
......
......@@ -4,8 +4,12 @@ const MobileHeaderNav: ComponentConfigTypes = {
propsConfig: {
componentType: {
label: '编辑',
type: PROPS_TYPES.advert
type: PROPS_TYPES.mobileHeaderNav
},
styleType: {
label: "样式",
type: PROPS_TYPES.objectArray
}
},
};
......
......@@ -116,8 +116,10 @@ const MallEdit: React.FC<MallEditPropsType> = (props) => {
*/
const fetchLeadNews = () => {
return new Promise((resolve) => {
//@ts-ignore
PublicApi.getManageContentInformationFindAllByRecommendLabel({ recommendLabel: 1 }).then(res => {
const param: any = {
recommendLabel: 1
}
PublicApi.getManageContentInformationFindAllByRecommendLabel(param).then(res => {
if (res.code === 1000) {
const leadNewsList: any = res.data || []
if (leadNewsList.length >= 2) {
......
import styleThemeImgDefault from './imgs/style_theme_default.png'
import styleThemeImgScience from './imgs/style_theme_science.png'
export const mallLayoutConfig = {
key: "0",
......@@ -7,7 +9,8 @@ export const mallLayoutConfig = {
"style": {
"width": "100%",
"minHeight": "100%",
"background": "#FFF"
"background": "#FFF",
"overflowX": "hidden",
}
},
"childNodes": ["1"]
......@@ -20,8 +23,20 @@ export const mobileHeaderNav = {
"componentName": "MobileHeaderNav",
"title": "顶部导航",
"canEdit": true,
"canHide": false,
"props": {
styleTheme: "default"
styleTheme: 0,
// dataList: [],
stylesThemeList: [
{
key: 0,
img: styleThemeImgDefault,
},
{
key: 1,
img: styleThemeImgScience,
}
]
},
}
}
......
......@@ -68,7 +68,6 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
<MobileSettingPanel />
</div>
</div>
{/* <SettingPanel templateId={id} /> */}
</LegoProvider>
) : <Loading />
}
......
......@@ -3,21 +3,20 @@ import { ComponentConfigsType, SelectedInfoType, STATE_PROPS, useSelector } from
import get from 'lodash/get';
import cx from 'classnames'
import { Tabs } from 'antd'
import StyleSettings from './styleSettings'
import PropsSettings from './propsSettings'
import styles from './index.less'
type SettingPanelType = {
selectedInfo: SelectedInfoType,
componentConfigs: ComponentConfigsType,
templateId: number,
}
const { TabPane } = Tabs
const MobileSettingPanel: React.FC = () => {
const { selectedInfo, componentConfigs } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'componentConfigs'])
// const [activeKey, setActiveKey] = useState('2');
const { props: selectProps, selectedKey } = selectedInfo || {}
const style = get(componentConfigs, [selectedKey, 'props', 'style'])
const MobileSettingPanel: React.FC = ()=> {
const { selectedInfo } = useSelector<SettingPanelType, STATE_PROPS>(['selectedInfo', 'componentConfigs'])
const { propsConfig } = selectedInfo || {}
useEffect(() => {
console.log(selectedInfo, "selectedInfo")
......@@ -29,12 +28,16 @@ const MobileSettingPanel: React.FC = () => {
defaultActiveKey="1"
className={styles.settingTabs}
>
<TabPane tab="编辑" key="1">
Content of Tab Pane 1
<TabPane tab="编辑" key="props">
<PropsSettings selectedInfo={selectedInfo} />
</TabPane>
<TabPane tab="样式" key="2">
Content of Tab Pane 2
{
(propsConfig && propsConfig.styleType) && (
<TabPane tab="样式" key="style">
<StyleSettings selectedInfo={selectedInfo} />
</TabPane>
)
}
</Tabs>
</div>
)
......
.setting {
.setting_title {
position: relative;
height: 32px;
line-height: 32px;
}
.setting_line {
margin-bottom: 24px;
display: flex;
&_main {
position: relative;
flex: 1;
}
&_addItem {
flex: 1;
padding: 24px 12px 0 12px;
&_input {
width: 100%;
}
&_line {
display: flex;
margin-bottom: 16px;
align-items: center;
font-size: 14px;
&_label {
width: 80px;
color: #909399;
}
&_brief {
flex: 1;
}
}
}
&_sort {
width: 32px;
background-color: #FAFBFC;
height: 32px;
line-height: 32px;
text-align: center;
margin-right: 8px;
}
&_name {
display: flex;
flex: 1;
font-size: 14px;
height: 32px;
color: #303133;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #FAFBFC;
padding: 0 8px;
&>.icon {
cursor: pointer;
width: 16px;
height: 16px;
font-size: 12px;
margin-right: 8px;
}
}
&_operation {
margin-left: auto;
&_btn {
margin-left: 16px;
width: 16px;
&_icon {
width: 16px;
height: 16px;
}
}
}
}
.add_btn {
width: 100%;
border: 1px dashed #DFE1E6;
}
}
import React, { useState, Fragment, useEffect } from 'react'
import { Button, Input } from 'antd'
import arrowRightIcon from '@/asserts/icons/arrow_right.png'
import arrowLeftIcon from '@/asserts/icons/arrow_left.png'
import arrowUpIcon from '@/asserts/icons/arrow_up.png'
import arrowDownIcon from '@/asserts/icons/arrow_down.png'
import sortIcon from '@/asserts/icons/sort_icon.png'
import styles from './index.less'
interface DataItemType {
name: string,
content: string,
status: boolean,
sort: number,
expand: boolean
}
interface HeaderNavPropsType {
dataList: DataItemType[]
}
const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
const { dataList } = props
const [list, setList] = useState<DataItemType[]>([])
const defaultDataList: DataItemType[] = [
{
name: "我的",
content: "",
status: true,
sort: 1,
expand: false,
},
{
name: "进货单",
content: "",
status: true,
sort: 2,
expand: false,
},
{
name: "客服",
content: "",
status: true,
sort: 3,
expand: false,
},
{
name: "搜索框",
content: "",
status: true,
sort: 4,
expand: false,
}
]
useEffect(() => {
console.log(dataList, "dataList")
initDataList()
}, [dataList])
const initDataList = () => {
if(!dataList) {
setList(defaultDataList)
} else {
const newDataList = dataList.map((item: DataItemType, index: number) => {
item.sort = index + 1
item.expand = false
return item
})
setList(newDataList)
}
}
const handleExpand = (sort: number, expand: boolean) => {
const newList = [...list]
newList.map(item => {
if (item.sort === sort) {
item.expand = expand
} else {
item.expand = false
}
})
setList(newList)
}
const sortUp = (index: number, item: DataItemType) => {
console.log('sortUp')
}
const sortDown = (index: number, item: DataItemType) => {
console.log('sortDown')
}
const handleDeleteItem = (index: number) => {
console.log('handleDeleteItem')
}
return (
<div className={styles.setting}>
{
(list && list.length > 0) ? list.map((item, index) => (
<div className={styles.setting_line} key={`setting_${index}`}>
<div className={styles.setting_line_main}>
<div className={styles.setting_line_name} onClick={() => handleExpand(item.sort, !item.expand)}>
{
item.expand ? <img className={styles.icon} src={arrowLeftIcon} /> : <img className={styles.icon} src={arrowRightIcon} />
}
<span>{item.name}</span>
<div className={styles.setting_line_operation}>
<Button type="link" disabled={index === 0} onClick={() => sortUp(index, item)} className={styles.setting_line_operation_btn} icon={<img className={styles.setting_line_operation_btn_icon} src={arrowUpIcon} />}></Button>
<Button type="link" disabled={index === list.length - 1} onClick={() => sortDown(index, item)} className={styles.setting_line_operation_btn} icon={<img className={styles.setting_line_operation_btn_icon} src={arrowDownIcon} />}></Button>
<Button type="link" className={styles.setting_line_operation_btn} onClick={() => handleDeleteItem(index)} icon={<img className={styles.setting_line_operation_btn_icon} src={sortIcon} />}></Button>
</div>
</div>
{
!!item.expand && (
<div className={styles.setting_line_addItem}>
<div className={styles.setting_line_addItem_line}>
<div className={styles.setting_line_addItem_line_label}>名称:</div>
<div className={styles.setting_line_addItem_line_brief}>
{item.name}
{/* <Input className={styles.setting_line_addItem_input} value={item.name} onChange={(e) => handleKeyChange(e.target.value, item.sort, 'name')} maxLength={15} /> */}
</div>
</div>
{
item.name === "搜索框" ? (
<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 />
</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}>
{/* <UploadImage
imgUrl={item.picUrl}
size={getImgSize()}
fileMaxSize={500}
onChange={(val) => handleKeyChange(val, item.sort, 'picUrl')}
/> */}
</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}>
{/* <Input className={styles.setting_line_addItem_input} value={item.link} onChange={(e) => handleKeyChange(e.target.value, item.sort, 'link')} /> */}
</div>
</div>
</div>
)
}
</div>
</div>
)) : null
}
</div>
)
}
export default HeaderNav
.propsSettingsWrapper {
padding: 8px 24px 24px 24px;
}
import React from 'react'
import { SelectedInfoType, clearSelectedStatus, PROPS_TYPES } from 'lingxi-editor-core';
import HeaderNav from './components/headerNav'
import styles from './index.less'
interface PropsSettingsPropsType {
selectedInfo?: SelectedInfoType,
}
const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
const { selectedInfo } = props
const renderSettingItem = () => {
const { props: initProps, propsConfig } = selectedInfo || {};
const componentType = propsConfig?.componentType
if (componentType) {
switch (componentType.type) {
case PROPS_TYPES.mobileHeaderNav:
return <HeaderNav {...initProps} />
default:
return null
}
}
}
return (
<div className={styles.propsSettingsWrapper}>
<div className={styles.propsSettingsBody}>
{renderSettingItem()}
</div>
</div>
)
}
export default PropsSettings
.styleSettings {
padding-top: 8px;
.styleList {
display: flex;
padding: 0 12px;
flex-wrap: wrap;
.styleItem {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 184px;
height: 138px;
border: 1px solid #E4E6EB;
margin: 0 12px;
margin-bottom: 24px;
cursor: pointer;
&.active {
border: 1px solid #00B382;
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-bottom: 12px solid #00B37A;
border-left: 12px solid transparent;
bottom: 0;
right: 0;
z-index: 5;
}
}
}
.themeImg {
width: 152px;
height: 105px;
}
}
}
import React, { useState } from 'react'
import cx from 'classnames'
import { SelectedInfoType, changeProps } from 'lingxi-editor-core'
import styles from './index.less'
interface StyleSettingsPropsType {
selectedInfo: SelectedInfoType,
}
const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
const { props: selectProps } = selectedInfo
const [ selectKey, setSelectKey ] = useState<number>(0)
/**
* 更换样式模板
* @param key
*/
const handleChangeStyleTheme = (key: number) => {
if(selectKey !== key) {
setSelectKey(key)
changeProps({
props: {
styleTheme: key
}
})
}
}
return (
<div className={styles.styleSettings}>
<div className={styles.styleList}>
{
(selectProps && selectProps.stylesThemeList) && selectProps.stylesThemeList.map(item => (
<div className={cx(styles.styleItem, selectKey === item.key ? styles.active : {})} key={item.key} onClick={() => handleChangeStyleTheme(item.key)}>
<img className={styles.themeImg} src={item.img} title={item.key} />
</div>
))
}
</div>
</div>
)
}
export default StyleSettings
......@@ -5,7 +5,7 @@ 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'
import { GetTemplatePlatformFindGoodsListResponseDetail } from '@/services/TemplateApi'
import { PublicApi } from '@/services/api'
import { filterProps } from '../../../../utils'
import styles from './index.less'
......
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