Skip to content

J
jinfa-admin
Commit 35d23bc8 authored by GuanHua's avatar GuanHua
Browse files
Options

feat: 移动吨模板装修

parent ad8248f5
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 222 deletions
src/pages/pageCustomized/components/MobileDesignPanel.tsx
View file @ 35d23bc8
...@@ -9,8 +9,8 @@ const MobileDesignPanel = (props) => { ...@@ -9,8 +9,8 @@ const MobileDesignPanel = (props) => {
return ( return (
<div className={styles.mobileDesignWrap}> <div className={styles.mobileDesignWrap}>
{/* <BrickDesign theme={theme} /> */} <BrickDesign theme={theme} mobile />
<MobileUIDemo /> {/* <MobileUIDemo /> */}
<div className={styles.appBottom}> <div className={styles.appBottom}>
<div className={styles.appBottomStrip}></div> <div className={styles.appBottomStrip}></div>
</div> </div>
......
src/pages/pageCustomized/components/mobileUIDemo/edit.svg 0 → 100644
View file @ 35d23bc8
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>2-Edit/edit</title>
<defs>
<polygon id="path-1" points="0 20 20 20 20 0 0 0"></polygon>
<path d="M16.162,5.0843 L14.904,3.8263 L15.522,3.2093 L16.816,4.4283 L16.162,5.0843 L16.162,5.0843 Z M10.329,10.9353 L8.62,11.3633 L9.024,9.7063 L14.055,4.6753 L15.315,5.9343 L10.329,10.9353 L10.329,10.9353 Z M10.1077,3.5642 C10.4377,3.5642 10.7077,3.8342 10.7077,4.1642 C10.7077,4.4942 10.4377,4.7642 10.1077,4.7642 L10.1077,4.7642 L3.9997,4.7642 C3.5667,4.7642 3.1997,5.1302 3.1997,5.5642 L3.1997,5.5642 L3.1997,16.0002 C3.1997,16.4332 3.5667,16.8002 3.9997,16.8002 L3.9997,16.8002 L14.4357,16.8002 C14.8697,16.8002 15.2357,16.4332 15.2357,16.0002 L15.2357,16.0002 L15.2357,9.5922 C15.2357,9.2622 15.5057,8.9922 15.8357,8.9922 C16.1657,8.9922 16.4357,9.2622 16.4357,9.5922 L16.4357,9.5922 L16.4357,16.0002 C16.4357,17.1002 15.5357,18.0002 14.4357,18.0002 L14.4357,18.0002 L3.9997,18.0002 C2.8997,18.0002 1.9997,17.1002 1.9997,16.0002 L1.9997,16.0002 L1.9997,5.5642 C1.9997,4.4642 2.8997,3.5642 3.9997,3.5642 L3.9997,3.5642 Z M14.711,2.3223 C15.143,1.8893 15.898,1.8903 16.33,2.3223 L16.33,2.3223 L17.665,3.6573 C18.11,4.1033 18.111,4.8293 17.665,5.2763 L17.665,5.2763 L11.129,11.8113 C10.988,11.9533 10.811,12.0523 10.618,12.1003 L10.618,12.1003 L7.947,12.7683 C7.899,12.7803 7.85,12.7863 7.801,12.7863 C7.644,12.7863 7.491,12.7243 7.377,12.6103 C7.228,12.4613 7.168,12.2453 7.219,12.0403 L7.219,12.0403 L7.887,9.3673 C7.936,9.1753 8.035,9.0003 8.174,8.8593 L8.174,8.8593 Z" id="path-3"></path>
</defs>
<g id="R.-平台页面模板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="R.1.2-编辑商城模板-1" transform="translate(-912.000000, -820.000000)">
<g id="编辑" transform="translate(666.000000, 796.000000)">
<g id="Button/Icon/Secondary/Small/01-Normal" transform="translate(238.000000, 16.000000)">
<g id="icon-edit" transform="translate(6.000000, 6.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g></g>
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use fill="#A6A6A6" xlink:href="#path-3"></use>
<rect id="Color" fill="#ffffff" mask="url(#mask-4)" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
src/pages/pageCustomized/components/mobileUIDemo/index.less
View file @ 35d23bc8
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
.mall_latyout { .mall_latyout {
width: 100%; width: 100%;
min-height: 100%; min-height: 100%;
overflow: hidden;
} }
.@{prefixCls}-header-nav { .@{prefixCls}-header-nav {
...@@ -13,19 +14,42 @@ ...@@ -13,19 +14,42 @@
// 默认样式 // 默认样式
&.default { &.default {
background-color: @headerNavDefaultColor; background-color: @headerNavDefaultColor;
color: #303133;
.@{prefixCls}-status-bar { .@{prefixCls}-status-bar {
background-color: @headerNavDefaultColor; background-color: @headerNavDefaultColor;
} }
.@{prefixCls}-header-search {
&-body {
background-color: #F7F8FA;
}
}
.@{prefixCls}-header-category {
&-item {
color: #606266;
&.active {
color: #D32F2F;
}
}
}
} }
// 科技类样式 // 科技类样式
&.science { &.science {
background-color: @headerNavScienceColor; background-color: @headerNavScienceColor;
color: #FFF;
.@{prefixCls}-status-bar { .@{prefixCls}-status-bar {
// background-color: @headerNavScienceColor; background-color: @headerNavScienceColor;
color: #FFF; }
.@{prefixCls}-header-bg {
&::after {
background-color: @headerNavScienceColor;
}
} }
} }
...@@ -51,4 +75,119 @@ ...@@ -51,4 +75,119 @@
} }
} }
} }
.@{prefixCls}-header {
display: flex;
padding: 0 12px;
&-logoWrap {
padding-top: 6px;
&-logo {
width: 23px;
height: 23px;
margin-right: 4px;
}
&-shopName {
font-weight: bold;
font-size: 12px;
}
}
&-actions {
margin-left: auto;
display: flex;
&-item {
margin-left: 16px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
&-icon {
width: 20px;
height: 20px;
border: none;
outline: none;
}
&-text {
font-size: 8px;
margin-top: 2px;
}
}
}
}
.@{prefixCls}-header-search {
padding: 4px 12px;
&-body {
background-color: #FFF;
border-radius: 18px;
height: 28px;
padding: 0 10px;
display: flex;
align-items: center;
}
&-icon {
font-size: 20px;
color: #909399;
margin-right: 10px;
}
&-keyword {
font-size: 14px;
color: #909399;
margin-right: 8px;
}
}
.@{prefixCls}-header-category {
display: flex;
padding-right: 12px;
align-items: center;
height: 40px;
&-main {
display: flex;
flex: 1;
align-items: center;
}
&-item {
font-size: 14px;
padding: 0 12px;
color: rgba(255, 255, 255, 0.6);
font-weight: bold;
&.active {
color: #FFF;
}
}
&-icon {
font-size: 20px;
}
}
.@{prefixCls}-header-bg {
position: relative;
width: 100%;
height: 40px;
background: #FFF;
&::after {
content: "";
position: absolute;
width: 120%;
height: 40px;
left: -10%; //椭圆左边隐藏10%，右边隐藏10%
top: 0;
border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
}
}
} }
src/pages/pageCustomized/components/mobileUIDemo/index.tsx
View file @ 35d23bc8
import React from 'react' import React from 'react'
import { MobileHeaderNav } from 'lingxi-design-ui' import { MobileHeaderNav } from 'lingxi-design-ui'
import { createFromIconfontCN } from '@ant-design/icons' import { createFromIconfontCN, SearchOutlined } from '@ant-design/icons'
import cx from 'classnames' import cx from 'classnames'
import LogoIcon from './icon.png' import LogoIcon from './adaptive-icon.png'
import styles from './index.less' import styles from './index.less'
const MIcon = createFromIconfontCN({ const MIcon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_2245831_4qatg126x18.js', // 在 iconfont.cn 上生成 scriptUrl: '//at.alicdn.com/t/font_2245831_5lnj0j4qk5.js', // 在 iconfont.cn 上生成
}); });
const MobileUIDemo: React.FC = () => { const MobileUIDemo: React.FC = () => {
return ( return (
<div className={styles.mall_latyout}> <div className={styles.mall_latyout}>
{/* <MobileHeaderNav /> */} <MobileHeaderNav />
<div className={cx(styles["lingxi-header-nav"], styles.science)}>
<div className={styles["lingxi-status-bar"]}>
<span className={styles["lingxi-status-bar-time"]}>9:41</span>
<div className={styles["lingxi-status-bar-right"]}>
<MIcon className={styles["lingxi-status-bar-right-icon"]} type="icon-xinhao-full" />
<MIcon className={styles["lingxi-status-bar-right-icon"]} type="icon-xinhao" />
<MIcon className={styles["lingxi-status-bar-right-icon"]} type="icon-dianliang" />
</div>
</div>
<div className={styles["lingxi-header"]}>
<div className={styles["lingxi-header-logoWrap"]}>
<img className={styles["lingxi-header-logoWrap-logo"]} src={LogoIcon} />
<span className={styles["lingxi-header--shopName"]}>瓴犀商城</span>
</div>
<div className={styles["lingxi-header-actions"]}>
<div className={styles["lingxi-header-actions-item"]}>
<img className={styles["lingxi-header-actions-item-icon"]} />
<span className={styles.actionText}>我的</span>
</div>
<div className={styles.actionsItem}>
<img className={styles["lingxi-header-actions-item-icon"]} />
<span className={styles.actionText}>进货单</span>
</div>
<div className={styles.actionsItem}>
<img className={styles["lingxi-header-actions-item-icon"]} />
<span className={styles.actionText}>消息</span>
</div>
</div>
</div>
</div>
</div> </div>
) )
} }
......
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/MobileHeaderNav.ts 0 → 100644
View file @ 35d23bc8
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const MobileHeaderNav: ComponentConfigTypes = {
propsConfig: {
componentType: {
label: '编辑',
type: PROPS_TYPES.advert
},
},
};
export default MobileHeaderNav;
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/index.ts
View file @ 35d23bc8
...@@ -16,6 +16,7 @@ import ShopHeader from './ShopHeader' ...@@ -16,6 +16,7 @@ import ShopHeader from './ShopHeader'
import FindMore from './FindMore' import FindMore from './FindMore'
import Information from './Information' import Information from './Information'
import Footer from './Footer' import Footer from './Footer'
import MobileHeaderNav from './MobileHeaderNav'
export default { export default {
TopBar, TopBar,
...@@ -35,5 +36,6 @@ export default { ...@@ -35,5 +36,6 @@ export default {
ShopHeader, ShopHeader,
...FloorLine, ...FloorLine,
...ShopFloorLine, ...ShopFloorLine,
...ShowCase ...ShowCase,
MobileHeaderNav,
} }
src/pages/pageCustomized/mobileEdit/defaultData.ts
View file @ 35d23bc8
...@@ -10,10 +10,22 @@ export const mallLayoutConfig = { ...@@ -10,10 +10,22 @@ export const mallLayoutConfig = {
"background": "#FFF" "background": "#FFF"
} }
}, },
"childNodes": ["1", "3", "4", "5", "17", "18", "6"] "childNodes": ["1"]
}, },
} }
export const mobileHeaderNav = {
key: "1",
"1": {
"componentName": "MobileHeaderNav",
"title": "顶部导航",
"canEdit": true,
"props": {
styleTheme: "default"
},
}
}
export const topBarConfig = { export const topBarConfig = {
key: "1", key: "1",
"1": { "1": {
......
src/pages/pageCustomized/mobileEdit/index.tsx
View file @ 35d23bc8
...@@ -6,10 +6,11 @@ import AllComponents from '../components/ComponentsPreview' ...@@ -6,10 +6,11 @@ import AllComponents from '../components/ComponentsPreview'
import config from '../configs' import config from '../configs'
import SettingPanel from '../settingsPanel' import SettingPanel from '../settingsPanel'
import { LAYOUT_TYPE } from '@/constants' import { LAYOUT_TYPE } from '@/constants'
import { topBarConfig, topAdvertConfig, headerConfig, mainNavConfig, bannerAdvertConfig, CommonTitle1Config, mallLayoutConfig, serviceAdvertConfig, CommonTitle2Config, AboutUsConfig, InformationConfig, FooterConfig } from './defaultData' import {mallLayoutConfig, mobileHeaderNav } from './defaultData'
import { menuData } from './defaultMenu' import { menuData } from './defaultMenu'
import Loading from '../components/Loading' import Loading from '../components/Loading'
import { GlobalConfig } from '@/global/config' import { GlobalConfig } from '@/global/config'
import MobileSettingPanel from '../mobileSettingPanel'
import styles from './index.less' import styles from './index.less'
interface ShopPreviewPropsType { interface ShopPreviewPropsType {
...@@ -45,187 +46,9 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => { ...@@ -45,187 +46,9 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
}, []) }, [])
const getComponentsConfig = async () => { const getComponentsConfig = async () => {
// 导航栏
mainNavConfig[mainNavConfig.key].props.menuData = menuData
mainNavConfig[mainNavConfig.key].props.type = LAYOUT_TYPE.shop
mainNavConfig[mainNavConfig.key].props.categoryList = []
const shopList = GlobalConfig.web.shopInfo
const webMallInfo = shopList.filter(item => item.environment === 1 && item.type === 1)[0]
headerConfig[headerConfig.key].props.logoUrl = webMallInfo.logoUrl
topBarConfig[topBarConfig.key].props.shopname = webMallInfo.name
let initIndex = 100
let floorLineConfig: any = {}
const floorLineKeys: any = []
const firstCategory: any = [
{
"id": 23,
"name": "电子电器"
},
{
"id": 14,
"name": "机械设备"
}
]
const detailData = {
23: {
"categoryAdvertPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/e7d718165e5945e0a27aa668f121479e1601286205635.jpg",
"categoryBOList": [
{
"categoryId": 24,
"categoryName": "工业自动化",
"selectStatus": 1
}
],
"goodsBOList": [
{
"goodsId": 24,
"goodsName": "15/19/22/27/32寸嵌入式十指电容触摸工业触摸显示器",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/53caa906bde04a8c8d042de721a6f8e71601283425278.jpg",
"goodsPrice": "1000.0",
"categoryName": "工控设备",
"brandName": "友飞翔",
"priceType": 1
},
{
"goodsId": 21,
"goodsName": "10/15/19寸工控一体机触摸屏嵌入式全封闭防尘PLC平板电脑",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/2aa8143601ef4b0fbe736db6339e552a1601379088893.png",
"goodsPrice": "1300.0",
"categoryName": "工控设备",
"brandName": "火狐热控",
"priceType": 1
},
{
"goodsId": 22,
"goodsName": "15/17/19寸新零售触摸显示器电容触摸工业触控显示器嵌入式",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/57dd9e8027b04e24a40a26af4f5a97f01601282964802.jpg",
"goodsPrice": "987.0",
"categoryName": "工控设备",
"brandName": "友飞翔",
"priceType": 1
},
{
"goodsId": 28,
"goodsName": "穿孔式交流电流变送器霍尔直流0-5A隔离转电压4-20mA 电流变送器",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/80a5abfdae394da5ab1dc62893e1f1821601284763925.jpg",
"goodsPrice": "4.6",
"categoryName": "变送器",
"brandName": "友昌振兴",
"priceType": 1
}
]
},
14: {
"categoryAdvertPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/00b31368eacd4f24869ca40e88450bf91601281268329.jpg",
"categoryBOList": [
{
"categoryId": 15,
"categoryName": "工程机械",
"selectStatus": 1
}
],
"goodsBOList": [
{
"goodsId": 19,
"goodsName": "厂家直销挖掘装载机多功能两头忙挖掘装载机小型挖掘装载机",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a0561fc936364f969d9216027138737b1601278766489.jpg",
"goodsPrice": "10000.0",
"categoryName": "挖掘机",
"brandName": "数商云",
"priceType": 1
},
{
"goodsId": 31,
"goodsName": "新款30型小挖掘机配驾驶室带空调市政工程水利建设小型液压挖掘机",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/9c535ba9c3374307ae6afbbf535a311e1601364018708.jpeg",
"goodsPrice": "20000.0",
"categoryName": "立式包装机",
"brandName": "合能为",
"priceType": 1
},
{
"goodsId": 30,
"goodsName": "犀牛XN18挖掘机洋马发动机 农用果园",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/a748f76ebffc4912a104ad5a1e2727851601364061691.jpeg",
"goodsPrice": "30000.0",
"categoryName": "挖掘机",
"brandName": "友飞翔",
"priceType": 1
},
{
"goodsId": 26,
"goodsName": "全新微型挖掘机 犀牛XN18挖掘机洋马发动机 农用果园",
"goodsPicUrl": "https://shushangyun01.oss-cn-shenzhen.aliyuncs.com/03f5168b495b428baea67c7ad87f82361601364173457.jpeg",
"goodsPrice": "20000.0",
"categoryName": "挖掘机",
"brandName": "鹏飞宏",
"priceType": 1
}
]
}
}
for (const item of firstCategory) {
const categoryDetail: any = detailData[item.id]
let floorLineConfigItem = {}
floorLineKeys.push(String(initIndex + 1))
const FloorLine = {
[String(initIndex + 1)]: {
"componentName": "ShopFloorLine",
"props": {
title: item.name
},
"childNodes": [String(initIndex + 2), String(initIndex + 3)]
}
}
const Category = {
[String(initIndex + 2)]: {
"componentName": "ShopFloorLine.Category",
"props": {
categoryAdvertPicUrl: categoryDetail.categoryAdvertPicUrl,
categoryid: item.id,
categoryList: categoryDetail.categoryBOList
},
},
}
const Goods = {
[String(initIndex + 3)]: {
"componentName": "ShopFloorLine.Goods",
"props": {
linkdisable: true,
categoryid: item.id,
goodsList: categoryDetail.goodsBOList
},
},
}
floorLineConfigItem = { ...FloorLine, ...Category, ...Goods }
floorLineConfig = { ...floorLineConfig, ...floorLineConfigItem }
initIndex += 100
}
mallLayoutConfig["0"].childNodes = [...mallLayoutConfig["0"].childNodes, ...floorLineKeys, serviceAdvertConfig.key, FooterConfig.key]
const config = { const config = {
...mallLayoutConfig, ...mallLayoutConfig,
...topBarConfig, ...mobileHeaderNav,
...topAdvertConfig,
...headerConfig,
...mainNavConfig,
...bannerAdvertConfig,
...CommonTitle2Config,
...AboutUsConfig,
...CommonTitle1Config,
...floorLineConfig,
...serviceAdvertConfig,
...FooterConfig
} }
setComponentConfigs(config) setComponentConfigs(config)
setLoading(false) setLoading(false)
...@@ -242,10 +65,10 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => { ...@@ -242,10 +65,10 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
<MobileDesignPanel theme={theme} /> <MobileDesignPanel theme={theme} />
</div> </div>
</div> </div>
<div style={{width: 440, backgroundColor: '#FFF'}}></div> <MobileSettingPanel />
</div> </div>
</div> </div>
<SettingPanel templateId={id} /> {/* <SettingPanel templateId={id} /> */}
</LegoProvider> </LegoProvider>
) : <Loading /> ) : <Loading />
} }
......
src/pages/pageCustomized/mobileSettingPanel/index.less 0 → 100644
View file @ 35d23bc8
.mobileSettingPanel {
background-color: #FFF;
transition: width .25s;
&.hide {
width: 0;
}
&.show {
width: 440px;
}
.settingTabs {
:global {
.ant-tabs-tab {
margin: 0 32px;
.ant-tabs-tab-btn {
color: #909399;
font-weight: bold;
font-size: 14px;
}
&.ant-tabs-tab-active {
.ant-tabs-tab-btn {
color: #303133;
}
}
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/index.tsx 0 → 100644
View file @ 35d23bc8
import React, { useEffect } from 'react'
import { ComponentConfigsType, SelectedInfoType, STATE_PROPS, useSelector } from 'lingxi-editor-core';
import get from 'lodash/get';
import cx from 'classnames'
import { Tabs } from 'antd'
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'])
useEffect(() => {
console.log(selectedInfo, "selectedInfo")
}, [selectedInfo])
return (
<div className={cx(styles.mobileSettingPanel, selectedInfo ? styles.show : styles.hide)}>
<Tabs
defaultActiveKey="1"
className={styles.settingTabs}
>
<TabPane tab="编辑" key="1">
Content of Tab Pane 1
</TabPane>
<TabPane tab="样式" key="2">
Content of Tab Pane 2
</TabPane>
</Tabs>
</div>
)
}
export default MobileSettingPanel
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