Skip to content

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

feat: 渠道商装修页面开发

parent d800911d
Hide whitespace changes
Inline Side-by-side
Showing with 434 additions and 252 deletions
package.json
View file @ 6e9f33e7
......@@ -60,7 +60,7 @@
"immutability-helper": "^3.1.1",
"lingxi-design": "^1.0.8",
"lingxi-design-ui": "^1.1.21",
"lingxi-editor-core": "^1.0.6",
"lingxi-editor-core": "^1.0.8",
"lingxi-web": "^1.0.6",
"lint-staged": "^10.0.7",
"lodash": "^4.17.20",
......
src/pages/editor/components/MobileDesignPanel.tsx
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-01-28 10:32:29
* @LastEditTime: 2021-02-26 10:26:02
* @LastEditTime: 2021-03-01 10:33:50
* @LastEditors: Please set LastEditors
* @Description: 移动端装修面板
* @FilePath: /lingxi-business-paltform/src/pages/editor/components/MobileDesignPanel.tsx
......@@ -17,8 +17,8 @@ const MobileDesignPanel = (props) => {
return (
<div className={styles.mobileDesignContainer}>
<div className={styles.mobileDesignWrap}>
{/* <BrickDesign theme={theme} mobile /> */}
<MobileUIDemo />
<BrickDesign theme={theme} mobile />
{/* <MobileUIDemo /> */}
</div>
<div className={styles.appBottom}>
<div className={styles.appBottomStrip}></div>
......
src/pages/editor/components/mobileUIDemo/index.tsx
View file @ 6e9f33e7
......@@ -216,7 +216,7 @@ const MobileUIDemo: React.FC = () => {
return (
<div className={styles.mall_latyout}>
<MobileChannelHeaderNav />
<MobileChannelHeaderNav name="" />
{/* <MobileShopHeaderNav shopInfo={shopInfo} /> */}
<div style={{ position: "relative", marginTop: -48, zIndex: 6, }}>
<MobileBanner dataList={[]} className={styles.nomar} />
......
src/pages/editor/configs/componentConfigs/LingXiUI/MobileBottomNavigation.ts 0 → 100644
View file @ 6e9f33e7
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const MobileBottomNavigation: ComponentConfigTypes = {
propsConfig: {
componentType: {
label: '编辑',
type: PROPS_TYPES.mobileBottomNavigation
},
},
};
export default MobileBottomNavigation;
src/pages/editor/configs/componentConfigs/LingXiUI/MobileChannelGoodsCard.ts 0 → 100644
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-02-26 11:00:24
* @LastEditTime: 2021-03-01 10:16:31
* @LastEditors: Please set LastEditors
* @Description: app渠道商城商品列表组件
* @FilePath: /lingxi-business-paltform/src/pages/editor/configs/componentConfigs/LingXiUI/MobileChannelHeaderNav.ts
*/
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const MobileChannelHeaderNav: ComponentConfigTypes = {
propsConfig: {
componentType: {
label: '编辑',
type: PROPS_TYPES.mobileChannelGoodsCard
},
},
};
export default MobileChannelHeaderNav;
src/pages/editor/configs/componentConfigs/LingXiUI/MobileChannelHeaderNav.ts
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-02-26 11:00:24
* @LastEditTime: 2021-02-26 11:01:23
* @LastEditTime: 2021-03-01 10:41:16
* @LastEditors: Please set LastEditors
* @Description: app渠道商城头部组件
* @FilePath: /lingxi-business-paltform/src/pages/editor/configs/componentConfigs/LingXiUI/MobileChannelHeaderNav.ts
......@@ -12,8 +12,12 @@ const MobileChannelHeaderNav: ComponentConfigTypes = {
propsConfig: {
componentType: {
label: '编辑',
type: PROPS_TYPES.mobileShopHeaderNav
type: PROPS_TYPES.mobileHeaderNav
},
styleType: {
label: "样式",
type: PROPS_TYPES.objectArray
}
},
};
......
src/pages/editor/configs/componentConfigs/LingXiUI/MobileChannelInformation.ts 0 → 100644
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-02-26 11:00:24
* @LastEditTime: 2021-03-01 10:15:04
* @LastEditors: Please set LastEditors
* @Description: app渠道商城行业资讯组件
* @FilePath: /lingxi-business-paltform/src/pages/editor/configs/componentConfigs/LingXiUI/MobileChannelHeaderNav.ts
*/
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const MobileChannelInformation: ComponentConfigTypes = {
propsConfig: {
componentType: {
label: '编辑',
type: PROPS_TYPES.moibileChannelInformation
},
},
};
export default MobileChannelInformation;
src/pages/editor/configs/componentConfigs/LingXiUI/index.ts
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-01-28 10:32:29
* @LastEditTime: 2021-02-26 11:03:42
* @LastEditTime: 2021-03-01 11:39:28
* @LastEditors: Please set LastEditors
* @Description: 瓴犀装修组件配置集合
* @FilePath: /lingxi-business-paltform/src/pages/editor/configs/componentConfigs/LingXiUI/index.ts
......@@ -28,7 +28,10 @@ import MobileBanner from './MobileBanner'
import MobileQuickNav from './MobileQuickNav'
import MobileShopCommodityList from './MobileShopCommodityList'
import MobileShopHeaderNav from './MobileShopHeaderNav'
import MobileBottomNavigation from './MobileBottomNavigation'
import MobileChannelHeaderNav from './MobileChannelHeaderNav'
import MobileChannelGoodsCard from './MobileChannelGoodsCard'
import MobileChannelInformation from './MobileChannelInformation'
export default {
TopBar,
......@@ -51,7 +54,10 @@ export default {
MobileShopCommodityList,
MobileShopHeaderNav,
MobileChannelHeaderNav,
MobileChannelGoodsCard,
MobileChannelInformation,
MobileBottomNavigation,
...FloorLine,
...ShopFloorLine,
...ShowCase
...ShowCase,
}
src/pages/editor/customComponents/ChannelGoodsCard/index.less
View file @ 6e9f33e7
......@@ -6,6 +6,7 @@
.@{prefixCls}-goods-list {
position: relative;
padding: 0 8px;
min-height: 50px;
&-item {
background-color: #FFF;
......@@ -94,7 +95,7 @@
&-tag {
height: 24px;
width: 57px;
width: 60px;
display: flex;
justify-content: center;
align-items: center;
......
src/pages/editor/customComponents/ChannelGoodsCard/index.tsx
View file @ 6e9f33e7
......@@ -13,10 +13,25 @@ import ImageBox from '@/components/ImageBox'
import youzhiIcon from '@/assets/mobileIcons/youzhi.svg'
import styles from './index.less'
export interface DataItemType {
export interface ProductItemType {
id: number,
/**
* 商品主图
*/
mainPic: string,
name: string,
content: string,
status: boolean,
min: number,
max:number,
priceType: number,
unitName: string,
sold: number,
}
export interface DataItemType {
style: number,
title: string,
viceTitle: boolean,
productList: ProductItemType[]
}
interface ChannelGoodsCardPropsType {
......@@ -41,80 +56,68 @@ const ChannelGoodsCard: React.FC<ChannelGoodsCardPropsType> = (props) => {
return (
<div className={classNameString} {...others}>
<div className={styles["lingxi-goods-list"]}>
<div className={styles["lingxi-goods-list-item"]}>
<div className={styles["lingxi-goods-list-item-title"]}>
<div className={styles["lingxi-goods-list-item-title-left"]}>
<div className={styles["lingxi-goods-list-item-title-left-title"]}>电气电工</div>
<label className={styles["lingxi-goods-list-item-title-left-vicetitle"]}>ELECTRICAL</label>
</div>
<div className={styles["lingxi-goods-list-item-more"]}>
<span>更多 &gt;</span>
</div>
</div>
<div className={styles["lingxi-goods-list-item-main"]}>
<div className={styles["lingxi-goods-list-item-main-recommend"]}>
<ImageBox
imgUrl="https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
width={104}
height={104}
/>
<div className={styles["lingxi-goods-list-item-main-recommend-info"]}>
<div className={styles["lingxi-goods-list-item-main-recommend-info-name"]}>三级抗震螺纹钢 HRB400E 25*12三抗震螺纹钢</div>
<div className={styles["lingxi-goods-list-item-main-recommend-info-tag"]}>
<img className={styles["lingxi-goods-list-item-main-recommend-info-tag-icon"]} src={youzhiIcon} />
<span>推荐</span>
{
dataList && dataList.map((dataItem, dataIndex) => (
<div className={styles["lingxi-goods-list-item"]} key={`goods-list-item-${dataIndex}`}>
<div className={styles["lingxi-goods-list-item-title"]}>
<div className={styles["lingxi-goods-list-item-title-left"]}>
<div className={styles["lingxi-goods-list-item-title-left-title"]}>{dataItem.title}</div>
<label className={styles["lingxi-goods-list-item-title-left-vicetitle"]}>{dataItem.viceTitle}</label>
</div>
<div className={styles["lingxi-goods-list-item-main-recommend-info-bottom"]}>
<div className={styles["lingxi-price-wrap"]}>
<span className={styles.price}>￥79.00</span>
<span className={styles.unit}>/吨</span>
</div>
<div className={styles["lingxi-goods-list-item-main-recommend-info-bottom-sold"]}>3133成交</div>
<div className={styles["lingxi-goods-list-item-more"]}>
<span>更多 &gt;</span>
</div>
</div>
</div>
<div className={styles["lingxi-goods-list-item-main-scrollview"]}>
<div className={styles["lingxi-goods-list-item-main-scrollview-list"]}>
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item"]}>
<ImageBox
imgUrl="https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
width={112}
height={112}
/>
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item-name"]}>黑色手折纹胎水色黑色手折纹胎水色</div>
<div className={styles["lingxi-price-wrap"]}>
<span className={styles.price}>￥79.00</span>
<span className={styles.unit}>/吨</span>
</div>
</div>
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item"]}>
<ImageBox
imgUrl="https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
width={112}
height={112}
/>
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item-name"]}>黑色手折纹胎水色黑色手折纹胎水色</div>
<div className={styles["lingxi-price-wrap"]}>
<span className={styles.price}>￥79.00</span>
<span className={styles.unit}>/吨</span>
</div>
</div>
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item"]}>
<ImageBox
imgUrl="https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/19466a6f8a5448c5b1a2011f642126611610677625949.png"
width={112}
height={112}
/>
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item-name"]}>黑色手折纹胎水色黑色手折纹胎水色</div>
<div className={styles["lingxi-price-wrap"]}>
<span className={styles.price}>￥79.00</span>
<span className={styles.unit}>/吨</span>
<div className={styles["lingxi-goods-list-item-main"]}>
{
(dataItem.productList && dataItem.productList.length > 0) && (
<div className={styles["lingxi-goods-list-item-main-recommend"]}>
<ImageBox
imgUrl={dataItem.productList[0].mainPic}
width={104}
height={104}
/>
<div className={styles["lingxi-goods-list-item-main-recommend-info"]}>
<div className={styles["lingxi-goods-list-item-main-recommend-info-name"]}>{dataItem.productList[0].name}</div>
<div className={styles["lingxi-goods-list-item-main-recommend-info-tag"]}>
<img className={styles["lingxi-goods-list-item-main-recommend-info-tag-icon"]} src={youzhiIcon} />
<span>推荐</span>
</div>
<div className={styles["lingxi-goods-list-item-main-recommend-info-bottom"]}>
<div className={styles["lingxi-price-wrap"]}>
<span className={styles.price}>￥{dataItem.productList[0].min}</span>
<span className={styles.unit}>/{dataItem.productList[0].unitName}</span>
</div>
<div className={styles["lingxi-goods-list-item-main-recommend-info-bottom-sold"]}>{dataItem.productList[0].sold}成交</div>
</div>
</div>
</div>
)
}
<div className={styles["lingxi-goods-list-item-main-scrollview"]}>
<div className={styles["lingxi-goods-list-item-main-scrollview-list"]}>
{
(dataItem.productList && dataItem.productList.length > 1) && dataItem.productList.map((productItem, productIndex) => productIndex > 0 && (
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item"]} key={`lingxi-goods-list-item-main-scrollview-list-item-${productIndex}-${productItem.id}`}>
<ImageBox
imgUrl={productItem.mainPic}
width={112}
height={112}
/>
<div className={styles["lingxi-goods-list-item-main-scrollview-list-item-name"]}>{productItem.name}</div>
<div className={styles["lingxi-price-wrap"]}>
<span className={styles.price}>￥{productItem.min}</span>
<span className={styles.unit}>/{productItem.unitName}</span>
</div>
</div>
))
}
</div>
</div>
</div>
</div>
</div>
</div>
))
}
</div>
</div>
)
......
src/pages/editor/customComponents/ChannelHeaderNav/index.less
View file @ 6e9f33e7
......@@ -18,17 +18,9 @@
}
}
.@{prefixCls}-header-category {
&-item {
color: #606266;
&.active {
color: #D32F2F;
}
}
&-icon {
color: #606266;
.@{prefixCls}-header-bg {
&::after {
background-color: #FFF;
}
}
}
......@@ -47,12 +39,6 @@
background-color: @headerNavScienceColor;
}
}
.@{prefixCls}-header-category {
&-icon {
color: #FFF;
}
}
}
.@{prefixCls}-status-bar {
......
src/pages/editor/customComponents/ChannelHeaderNav/index.tsx
View file @ 6e9f33e7
......@@ -39,6 +39,7 @@ export interface MobileHeaderNavPropsType {
/** 样式主题 */
styleTheme?: number,
stylesThemeList?: any[],
name: string,
dataList?: DataItemType[],
}
......@@ -48,7 +49,7 @@ const STYLE_THEME_List = {
}
const MobileChannelHeaderNav: React.FC<MobileHeaderNavPropsType> = (props) => {
const { children, className, styleTheme, dataList, ...others } = props
const { children, className, name, styleTheme, dataList, ...others } = props
const [searchPlaceHolder, setSearchPlaceHolder] = useState<string>('')
useEffect(() => {
......@@ -121,7 +122,6 @@ const MobileChannelHeaderNav: React.FC<MobileHeaderNavPropsType> = (props) => {
}
}
return (
<div className={classNameString} {...others}>
<div className={styles["lingxi-status-bar"]}>
......@@ -134,7 +134,7 @@ const MobileChannelHeaderNav: React.FC<MobileHeaderNavPropsType> = (props) => {
</div>
<div className={styles["lingxi-header"]}>
<div className={styles["lingxi-header-logoWrap"]}>
<span className={styles["lingxi-header-logoWrap-shopName"]}>广东美政建材股份有限公司</span>
<span className={styles["lingxi-header-logoWrap-shopName"]}>{name}</span>
</div>
<div className={styles["lingxi-header-actions"]}>
{
......
src/pages/editor/customComponents/ChannelInformation/index.less
View file @ 6e9f33e7
......@@ -13,7 +13,6 @@
}
&-scrollview {
overflow-x: auto;
&::-webkit-scrollbar {
......@@ -26,11 +25,11 @@
white-space: nowrap;
&-item {
display: inline-block;
width: 280px;
border-radius: 8px;
overflow: hidden;
margin-right: 12px;
display: inline-block;
background-color: #FFF;
&-main {
......@@ -40,13 +39,20 @@
color: #303133;
font-size: 14px;
line-height: 20px;
text-overflow: -o-ellipsis-lastline;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
&-bottom {
display: flex;
color: #909399;
font-size: 12px;
margin-top: 10px;
&>.read {
margin-left: auto;
}
}
}
}
......
src/pages/editor/customComponents/ChannelInformation/index.tsx
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-02-26 17:18:57
* @LastEditTime: 2021-02-26 17:55:12
* @LastEditTime: 2021-03-01 09:52:07
* @LastEditors: Please set LastEditors
* @Description: app渠道商城行业资讯组件
* @FilePath: /lingxi-business-paltform/src/pages/editor/customComponents/ChannelInformation/index.tsx
......@@ -10,14 +10,24 @@ import React from 'react'
import { ConfigConsumer } from '../Generator'
import cx from 'classnames'
import ImageBox from '@/components/ImageBox'
import { getDateDiff, dateFormat } from '@/utils/date'
import styles from './index.less'
export interface InformationItemType {
id: number,
title: string,
readCount: number,
imageUrl: string,
createTime: number,
}
interface MobileChannelInformationPropsType {
className?: string,
dataList: InformationItemType[]
}
const MobileChannelInformation: React.FC<MobileChannelInformationPropsType> = (props) => {
const { className, ...others} = props
const { className, dataList, ...others} = props
const renderChildren = ({ getPrefixCls }: any) => {
const prefixCls = getPrefixCls("channel-information");
......@@ -30,23 +40,24 @@ const MobileChannelInformation: React.FC<MobileChannelInformationPropsType> = (p
</div>
<div className={styles["lingxi-channel-information-scrollview"]}>
<div className={styles["lingxi-channel-information-list"]}>
<div className={styles["lingxi-channel-information-list-item"]}>
<ImageBox
width={280}
height={186}
imgUrl="https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/67ddeff87f6140069813dc59ae08cf4d1611738206717.jpg_430x430q90"
/>
<div className={styles["lingxi-channel-information-list-item-main"]}>
<div className={styles["lingxi-channel-information-list-item-main-title"]}>B2B供应链电商系统平台解决案，如何实现全网整合B2B供应链</div>
</div>
</div>
<div className={styles["lingxi-channel-information-list-item"]}>
<ImageBox
width={280}
height={186}
imgUrl="https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/67ddeff87f6140069813dc59ae08cf4d1611738206717.jpg_430x430q90"
/>
</div>
{
dataList && dataList.map((dataItem) => (
<div className={styles["lingxi-channel-information-list-item"]} key={`lingxi-channel-information-list-item-${dataItem.id}`}>
<ImageBox
width={280}
height={186}
imgUrl={dataItem.imageUrl}
/>
<div className={styles["lingxi-channel-information-list-item-main"]}>
<div className={styles["lingxi-channel-information-list-item-main-title"]}>{dataItem.title}</div>
<div className={styles["lingxi-channel-information-list-item-main-bottom"]}>
<div className={styles.time}>{getDateDiff(dateFormat(new Date(dataItem.createTime)))}</div>
<div className={styles.read}>{dataItem.readCount} 浏览</div>
</div>
</div>
</div>
))
}
</div>
</div>
</div>
......
src/pages/editor/customComponents/index.ts
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-02-26 16:25:44
* @LastEditTime: 2021-02-26 16:27:08
* @LastEditTime: 2021-03-01 10:32:38
* @LastEditors: Please set LastEditors
* @Description: 自定义组件
* @FilePath: /lingxi-business-paltform/src/pages/editor/customComponents/index.ts
*/
export { default as MobileChannelHeaderNav } from './ChannelHeaderNav'
export { default as MobileChannelGoodsCard } from './ChannelGoodsCard'
export { default as MobileChannelInformation } from './ChannelInformation'
src/pages/editor/mobileSettingPanel/propsSettings/components/headerNav/index.tsx
View file @ 6e9f33e7
......@@ -32,6 +32,7 @@ const HeaderNav: React.FC<HeaderNavPropsType> = (props) => {
const [list, setList] = useState<DataItemType[]>([])
useEffect(() => {
console.log(111111)
initDataList()
}, [dataList])
......
src/pages/editor/mobileSettingPanel/propsSettings/index.tsx
View file @ 6e9f33e7
......@@ -7,6 +7,7 @@ import HeadBackground from './components/headBackground'
import RecommendCommodity from './components/recommendCommodity'
import BottomNavigation from './components/bottomNavigation'
import styles from './index.less'
import { ConsoleSqlOutlined } from '@ant-design/icons';
interface PropsSettingsPropsType {
selectedInfo: SelectedInfoType | undefined,
......@@ -26,7 +27,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
case PROPS_TYPES.mobileShopCommodity:
return <RecommendCommodity {...initProps} />
case PROPS_TYPES.mobileHeaderNav:
return <HeaderNav {...initProps} />
return <HeaderNav {...initProps} />
case PROPS_TYPES.mobileBanner:
return <Banner {...initProps} />
case PROPS_TYPES.mobileQuickNav:
......
src/pages/mobileTemplate/channelTemplateEdit/config.ts
View file @ 6e9f33e7
/*
* @Author: your name
* @Author: ghua
* @Date: 2021-02-22 17:02:20
* @LastEditTime: 2021-02-26 11:04:18
* @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",
......@@ -21,7 +23,7 @@ export const mallLayoutConfig = {
"paddingBottom": "50px",
}
},
"childNodes": ["1", "2", "5"]
"childNodes": ["1", "2", "4", "5", "6", "7"]
},
}
......@@ -29,18 +31,39 @@ export const mobileChannelHeaderNav = {
key: "1",
"1": {
"componentName": "MobileChannelHeaderNav",
"componentType": PROPS_TYPES.mobileShopHeaderNav,
"title": "背景图编辑",
"componentType": PROPS_TYPES.mobileHeaderNav,
"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,
}
styleTheme: 1,
dataList: [
{
name: "进货单",
content: "",
status: true,
},
{
name: "我的",
content: "",
status: true,
},
{
name: "搜索框",
content: "请输入商品名称或者品类",
status: true,
}
],
stylesThemeList: [
{
key: 0,
img: styleThemeImgDefault,
},
{
key: 1,
img: styleThemeImgScience,
}
]
},
}
}
......@@ -52,15 +75,11 @@ export const divWrap = {
"props": {
"style": {
position: "relative",
marginTop: -24,
backgroundColor: "#FFF",
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: -48,
zIndex: 6,
padding: '2px 4px',
}
},
"childNodes": ["3", "4"]
"childNodes": ["3"]
}
}
......@@ -84,9 +103,15 @@ export const mobileQuickNav = {
"componentName": "MobileQuickNav",
"componentType": PROPS_TYPES.mobileQuickNav,
"title": "导航模块",
"canEdit": true,
"canEdit": false,
"canHide": false,
"props": {
"canEdit": false,
"style": {
paddingTop: '12px',
margin: '0 8px',
borderRadius: '8px',
},
dataList: [
{
"id":1,
......@@ -133,86 +158,87 @@ export const mobileQuickNav = {
}
}
export const mobileShopCommodityList = {
export const mobileChannelGoodsCard = {
key: "5",
"5": {
"componentName": "MobileShopCommodityList",
"componentType": PROPS_TYPES.mobileShopCommodity,
"title": "商品推荐",
"componentName": "MobileChannelGoodsCard",
"componentType": PROPS_TYPES.mobileChannelGoodsCard,
"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"
}
]
dataList: [
{
style: 0,
title: "电气电工",
viceTitle: "ELECTRICAL",
},
{
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"
}
]
style: 1,
title: "机械设备",
viceTitle: "EQUIPMENT",
}
]
}
}
}
export const mobileChannelInformation = {
key: "6",
"6": {
"componentName": "MobileChannelInformation",
"componentType": PROPS_TYPES.mobileBanner,
"title": "行业资讯",
"canEdit": true,
"canHide": false,
"props": {
dataList: []
}
}
}
export const mobileBottomNavigation = {
key: "7",
"7": {
"componentName": "MobileBottomNavigation",
"componentType": PROPS_TYPES.mobileBottomNavigation,
"title": "底部导航",
"canEdit": true,
"canHide": false,
"props": {
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: 4,
status: false,
},
{
name: "进货单",
icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/50433de84ee046b19882e21c920b3f6b1612351040608.png",
type: 3,
status: false,
},
{
name: "我的",
icon: "https://shushangyun-lingxi.oss-cn-shenzhen.aliyuncs.com/aa76edefd91f4e82b4f8fa56e169cd3f1612351044724.png",
type: 5,
status: false,
}
]
}
}
}
src/pages/mobileTemplate/channelTemplateEdit/index.tsx
View file @ 6e9f33e7
/*
* @Author: ghua
* @Date: 2021-02-22 17:02:20
* @LastEditTime: 2021-02-26 11:04:34
* @LastEditTime: 2021-03-01 11:37:34
* @LastEditors: Please set LastEditors
* @Description: app渠道商城装修
* @FilePath: /lingxi-business-paltform/src/pages/mobileTemplate/channelTemplateEdit/index.tsx
......@@ -19,13 +19,14 @@ import {
mobileChannelHeaderNav,
mobileBanner,
mobileQuickNav,
mobileShopCommodityList,
mobileChannelGoodsCard,
mobileChannelInformation,
mobileBottomNavigation,
} from './config'
import Loading from '../../editor/components/Loading'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetTemplateAdornAppStoreFindResponse, GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse } from '@/services/TemplateApi'
import { GetTemplateAdornAppChannelFindResponse, GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse } from '@/services/TemplateApi'
// import { GlobalConfig } from '@/global/config'
import MobileSettingPanel from '../../editor/mobileSettingPanel'
import { getAuth } from '@/utils/auth'
......@@ -69,10 +70,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
*/
const fetchChannelInfo = (): Promise<GetTemplateWebMemberChannelWebFindCurrMemberChannelResponse> => {
return new Promise((resolve) => {
const param: any = {
memberId,
}
PublicApi.getTemplateWebMemberChannelWebFindCurrMemberChannel(param).then(res => {
PublicApi.getTemplateWebMemberChannelWebFindCurrMemberChannel().then(res => {
if (res.code === 1000) {
resolve(res.data)
}
......@@ -83,12 +81,12 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
/**
* 获取app店铺装修信息
*/
const getAppShopConfig = (): Promise<GetTemplateAdornAppStoreFindResponse | null> => {
const getAppChannelConfig = (): Promise<GetTemplateAdornAppChannelFindResponse | null> => {
return new Promise((resolve, reject) => {
const param: any = {
templateId: id
}
PublicApi.getTemplateAdornAppStoreFind(param).then(res => {
PublicApi.getTemplateAdornAppChannelFind(param).then(res => {
if(res.code === 1000) {
resolve(res.data)
} else {
......@@ -190,45 +188,26 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
const getComponentsConfig = async () => {
try {
const appConfig = await getAppShopConfig()
const appConfig = await getAppChannelConfig()
console.log(appConfig, "appConfig")
//渠道信息
const shopInfo = await fetchChannelInfo()
mobileChannelHeaderNav[mobileChannelHeaderNav.key].props.shopInfo = shopInfo
if(appConfig?.backdropBO) {
mobileChannelHeaderNav[mobileChannelHeaderNav.key].props.backdrop = appConfig?.backdropBO.backdrop
}
const channelInfo = await fetchChannelInfo()
mobileChannelHeaderNav[mobileChannelHeaderNav.key].props.name = channelInfo.memberName
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,
...mobileChannelHeaderNav,
...divWrap,
...mobileBanner,
...mobileQuickNav,
...mobileShopCommodityList,
...mobileChannelGoodsCard,
...mobileChannelInformation,
...mobileBottomNavigation,
}
setComponentConfigs(config)
setLoading(false)
......
src/utils/date.ts 0 → 100644
View file @ 6e9f33e7
// 如果时间格式为2020/07/09 21:43:19.000 需要去掉.000 不然ios和firefox会有问题
const getDateTimeStamp = (dateStr: string) => Date.parse(dateStr.replace(/-/gi, "/"))
/**
* 时间格式化
* @param date 时间
* @param fmt 时间格式，默认YYYY-MM-DD HH:mm:ss
*/
export const dateFormat = (date: Date, fmt = "YYYY-MM-DD HH:mm:ss"): string => {
let ret;
const opt: { [key: string]: string } = {
"Y+": date.getFullYear().toString(), // 年
"M+": (date.getMonth() + 1).toString(), // 月
"D+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时
"m+": date.getMinutes().toString(), // 分
"s+": date.getSeconds().toString(), // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串
};
let newfmt = fmt
Object.keys(opt).forEach((k) => {
ret = new RegExp(`(${k})`).exec(fmt);
if (ret) {
newfmt = newfmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
}
})
return newfmt;
}
/**
* 把时间转化成对应的时间描述
* @param dateStr
*/
export const getDateDiff = (dateStr: string): string => {
if (!dateStr) return ""
const publishTime = getDateTimeStamp(dateStr) / 1000;
const timeNow = parseInt(String(new Date().getTime() / 1000), 10);
const date = new Date(publishTime * 1000);
const Y = date.getFullYear();
let M: number | string = date.getMonth() + 1;
let D: number | string = date.getDate();
let H: number | string = date.getHours();
let m: number | string = date.getMinutes();
let s: number | string = date.getSeconds();
// 小于10的在前面补0
if (M < 10) {
M = `0${M}`;
}
if (D < 10) {
D = `0${D}`;
}
if (H < 10) {
H = `0${H}`;
}
if (m < 10) {
m = `0${m}`;
}
if (s < 10) {
s = `0${s}`;
}
const d = timeNow - publishTime;
const days = parseInt(String(d / 86400), 10);
const hours = parseInt(String(d / 3600), 10);
const minutes = parseInt(String(d / 60), 10);
const seconds = parseInt(String(d), 10);
if (days > 0 && days < 3) {
return `${days}天前`;
} if (days <= 0 && hours > 0) {
return `${hours}小时前`;
} if (hours <= 0 && minutes > 0) {
return `${minutes}分钟前`;
} if (seconds < 60) {
if (seconds <= 0) {
return '刚刚';
}
return `${seconds}秒前`;
} if (days >= 3 && days < 30) {
return `${M}-${D} ${H}:${m}`;
} if (days >= 30) {
return `${Y}-${M}-${D} ${H}:${m}`;
}
return dateStr
}
/**
* 计算剩余的时间
* @param completeTime 截止时间
*/
export const interval = (completeTime: string | number | Date) => {
const faultDate = new Date().getTime();
const stime = Date.parse(String(new Date(faultDate)));
const etime = Date.parse(String(new Date(completeTime)));
const usedTime = etime - stime; // 两个时间戳相差的毫秒数
const days = Math.floor(usedTime / (24 * 3600 * 1000)) > 0 ? Math.floor(usedTime / (24 * 3600 * 1000)) : 0;
// 计算出小时数
const leave1 = usedTime % (24 * 3600 * 1000); // 计算天数后剩余的毫秒数
const hours = Math.floor(leave1 / (3600 * 1000)) > 0 ? Math.floor(leave1 / (3600 * 1000)) : 0;
// 计算相差分钟数
const leave2 = leave1 % (3600 * 1000); // 计算小时数后剩余的毫秒数
const minutes = Math.floor(leave2 / (60 * 1000)) > 0 ? Math.floor(leave2 / (60 * 1000)) : 0;
const time = `${days}天${hours}时${minutes}分`;
return time;
}
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