Skip to content

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

feat: APP装修B端品类导航开发

parent 46e7f8c5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 540 additions and 30 deletions
src/components/ImageBox/index.less
View file @ fe084a88
// .image_box {
// overflow: hidden;
// &_img {
// background-size: 100% auto;
// background-repeat: no-repeat;
// background-position: center center;
// }
// &.column {
// .image_box_img {
// background-size: auto 100%;
// }
// }
// }
.image_box {
overflow: hidden;
position: relative;
display: inline-block;
&_img {
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
position: relative;
overflow: hidden;
display: table-cell;
vertical-align: middle;
& > img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
}
&.column {
.image_box_img {
background-size: auto 100%;
& > img {
height: 100%;
// width: auto;
}
}
}
&.circle {
.image_box_img {
border-radius: 50%;
}
}
}
src/components/ImageBox/index.tsx
View file @ fe084a88
// import React from 'react'
// import styles from './index.less'
// import cx from 'classnames'
// interface ImageBoxPropsType {
// width?: number | string;
// height?: number;
// style?: any,
// imgUrl: string;
// className?: any;
// direction?: "column" | "row",
// borderRadius?: number
// }
// const ImageBox: React.FC<ImageBoxPropsType> = (props) => {
// const { width = 120, height = 80, imgUrl = "", className, borderRadius, style, direction = "row" } = props
// const newStyle = {
// ...style,
// borderRadius: borderRadius || 0
// }
// return (
// <div className={cx(styles.image_box, direction === 'column' ? styles.column : '')} style={newStyle}>
// <div className={cx(styles.image_box_img, className)} style={{ backgroundImage: `url(${imgUrl})`, width: `${width}px`, height: `${height}px`, ...style }}></div>
// </div>
// )
// }
// export default ImageBox
import React from 'react'
import styles from './index.less'
import cx from 'classnames'
import styles from './index.less'
interface ImageBoxPropsType {
width?: number | string;
height?: number;
style?: any,
imgUrl: string;
className?: any;
direction?: "column" | "row",
borderRadius?: number
direction?: "column" | "row";
circle?: boolean;
style?: React.CSSProperties,
alt?: string,
title?: string,
}
const ImageBox: React.FC<ImageBoxPropsType> = (props) => {
const { width = 120, height = 80, imgUrl = "", className, borderRadius, style, direction = "row" } = props
const newStyle = {
...style,
borderRadius: borderRadius || 0
}
const { width = 120, height = 80, imgUrl = "", className, direction = "row", alt, circle = false, title, style } = props
return (
<div className={cx(styles.image_box, direction === 'column' ? styles.column : '')} style={newStyle}>
<div className={cx(styles.image_box_img, className)} style={{ backgroundImage: `url(${imgUrl})`, width: `${width}px`, height: `${height}px`, ...style }}></div>
<div className={cx(styles.image_box, direction === 'column' ? styles.column : '', circle ? styles.circle : '')} style={style}>
<div className={cx(styles.image_box_img, className)} style={{ width: `${width}px`, height: `${height}px` }}>
<img src={imgUrl} alt={alt} title={title} style={{ maxHeight: height, maxWidth: width }} />
</div>
</div>
)
}
......
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/MobileNavCard.ts
View file @ fe084a88
......@@ -10,6 +10,10 @@ const MobileNavCard: ComponentSchemaType = {
label: '内容',
type: PROPS_TYPES.string,
},
styleType: {
label: "样式",
type: PROPS_TYPES.number,
},
},
};
......@@ -21,6 +25,7 @@ const MobileNavCardNavItem: ComponentSchemaType = {
type: PROPS_TYPES.string,
},
componentType: {
label: '内容',
type: PROPS_SETTING_TYPES.mobileNavCardNavItem,
},
},
......
src/pages/pageCustomized/mobileEdit/config.ts
View file @ fe084a88
......@@ -2,6 +2,7 @@ import { PROPS_SETTING_TYPES, PageConfigType } from '@lingxi-disign/core'
import { resolveMappingPageConfig } from '@lingxi-disign/react'
import styleThemeImgDefault from './imgs/style_theme_default.png'
import styleThemeImgScience from './imgs/style_theme_science.png'
import categoryNavTemplateDefault from './imgs/category_template_default.png'
import mineIcon from './imgs/mine_icon.png'
import orderIcon from './imgs/order_icon.png'
......@@ -10,11 +11,11 @@ import kefuIcon from './imgs/kefu_icon.png'
const categoryList = [
{
value: 1,
label: "建材"
label: "test"
},
{
value: 2,
label: "热卷"
label: "智能手机"
},
{
value: 3,
......@@ -22,7 +23,7 @@ const categoryList = [
},
{
value: 4,
label: "中厚板"
label: "床前明月光"
},
{
value: 5,
......@@ -70,13 +71,13 @@ export const defaultConfig: PageConfigType = {
position: 'relative',
},
},
childNodes: ["1"]
childNodes: ['1', '3', '4']
},
'1': {
title: '头部导航栏',
componentName: 'HeaderNav',
props: {
styleTheme: 1,
styleTheme: 0,
categoryList: categoryList,
stylesthemelist: [
{
......@@ -101,6 +102,38 @@ export const defaultConfig: PageConfigType = {
data: '${item}'
},
},
'3': {
title: '广告图',
componentName: 'Banner',
props: {
style: {
margin: '8px',
},
},
childNodes: [],
childComponentName: 'Banner.Items',
addBtnText: '添加广告',
},
'4': {
title: '分类导航',
componentName: 'MobileNavCard',
props: {
style: {
margin: '8px',
},
stylesthemelist: [
{
key: 0,
width: 320,
height: 148,
img: categoryNavTemplateDefault,
},
]
},
childNodes: [],
childComponentName: 'MobileNavCard.NavItem',
addBtnText: '添加导航',
},
}
const allState = { headerNav: defaultHeaderNavData }
......
src/pages/pageCustomized/mobileEdit/index.tsx
View file @ fe084a88
......@@ -3,7 +3,7 @@ import { BrickProvider } from '@lingxi-disign/react';
import { updatePageConfig } from '@lingxi-disign/core'
import { message } from 'antd';
import { PublicApi } from '@/services/api';
import { GetTemplateAdornAppEnterpriseFindResponse } from '@/services/TemplateApi';
import { GetTemplateAdornAppEnterpriseFindResponse } from '@/services/Template2Api';
import {
moduleConfig,
mallLayoutConfig,
......@@ -67,7 +67,7 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
}, []);
const initConfig = () => {
getAppEnterpriseConfig()
setTimeout(() => {
setLoading(false)
updatePageConfig(moduleConfig)
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bannerClient/index.less
View file @ fe084a88
......@@ -31,7 +31,8 @@
}
&-add {
font-size: 40px;
width: 24px;
height: 24px;
}
&:hover {
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bannerClient/index.tsx
View file @ fe084a88
......@@ -11,6 +11,8 @@ import { priceFormat } from '@/utils/numberFomat';
import MixDrawer from '@/pages/pageCustomized/components/drawers/mixDrawer';
import ActivityDrawer from '@/pages/pageCustomized/components/drawers/activityDrawer';
import uploadImgIcon from '@/asserts/icons/upload_img_icon.svg'
import styles from './index.less';
......@@ -280,7 +282,7 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
listType="text"
>
<div className={styles['banner-box-icon']}>
<PlusCircleOutlined className={styles['banner-box-icon-add']} />
<img src={uploadImgIcon} className={styles['banner-box-icon-add']} />
<div className={styles['banner-box-icon-cover']}>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/index.less 0 → 100644
View file @ fe084a88
@import "../../common.less";
.banner {
&-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: 100%;
}
&-add {
width: 24px;
height: 24px;
}
&:hover {
.banner-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;
}
}
}
}
&-record {
&-shop {
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
img {
width: 40px;
height: 40px;
margin-right: 8px;
}
span {
flex: 1;
color: #303133;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
&-integral {
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
img {
width: 40px;
height: 40px;
margin-right: 8px;
}
&-right {
flex: 1;
display: flex;
flex-direction: column;
&-top {
flex: 1;
color: #303133;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-bottom {
flex: 1;
color: #EA8000;
font-size: 12px;
}
}
}
&-activity {
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
position: relative;
img {
width: 40px;
height: 40px;
border-radius: 4px;
margin-right: 8px;
}
&-right {
flex: 1;
display: flex;
flex-direction: column;
font-size: 12px;
&-top {
flex: 1;
color: #303133;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-bottom {
flex: 1;
color: #91959B;
}
}
&-tag{
position: absolute;
right: 0;
top: -3px;
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/cardNavItem/index.tsx 0 → 100644
View file @ fe084a88
import React, { useMemo } from 'react';
import { Input, Row, Col, Select, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import UploadImage from '@/components/UploadImage';
import ImageBox from '@/components/ImageBox'
import uploadImgIcon from '@/asserts/icons/upload_img_icon.svg'
import styles from './index.less';
interface CardNavItemProps {
name: string,
/** 跳转类型：1-商城导航 2-活动导航 3-店铺首页导航 4.品类导航 5.频道导航 6.外部链接 */
type: number,
url: string,
icon: string,
// 频道 1: 店铺中心; 2:人气店铺; 3:行情资讯; 4:积分兑换
channel: number, //
// 当前选中组件的key
selectedKey?: any,
// 1.B端 2.C端 3.SRM
property?: 1 | 2 | 3
}
const ChannelTyleList_B = [
{
value: 1,
label: '店铺中心',
},
{
value: 2,
label: '人气店铺',
},
{
value: 3,
label: '行情资讯',
},
{
value: 4,
label: '积分兑换',
},
]
const ChannelTyleList_C = [
{
value: 1,
label: '店铺中心',
},
{
value: 2,
label: '人气店铺',
},
{
value: 4,
label: '积分兑换',
},
]
const RedirectTypeList = [
{
value: 1,
label: '商城导航',
},
{
value: 2,
label: '活动导航',
},
{
value: 3,
label: '店铺首页导航',
},
{
value: 4,
label: '品类导航',
},
{
value: 5,
label: '频道导航',
},
{
value: 6,
label: '外部链接',
},
];
const CardNavItem: React.FC<CardNavItemProps> = (props: CardNavItemProps) => {
const { name, type, url, icon, channel, property = 1, selectedKey } = props;
const _onChangeByKey = (val: any, key: string, title?: string) => {
changeProps({
title: title ? title : name,
props: Object.assign({ ...props }, { [key]: val, empty: key === 'icon' ? false : true })
});
}
const _showChoose = useMemo(() => {
if (type === 6 || type === 5) {
return false
}
if(!type){
return false
}
return true;
}, [type])
const _selectOption = useMemo(() => {
if (property === 1) {
return ChannelTyleList_B
}
if (property === 2) {
return ChannelTyleList_C
}
return []
}, [property])
const _onChoose = () => {
}
return (
<div className={styles['banner']}>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>名称</div>
<Input key={`${selectedKey}-name`} defaultValue={name} onChange={(e) => _onChangeByKey(e.target.value, 'name', e.target.value)} />
</div>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>图片</div>
{ icon ? (
<div className={styles['banner-box-icon']}>
{/* <img src={icon} /> */}
<ImageBox width='100%' height={96} imgUrl={icon} direction='column' />
<div className={styles['banner-box-icon-cover']}>
<UploadImage
onChange={(url) => { _onChangeByKey(url, 'icon') }}
listType="text"
>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
</div>
</UploadImage>
<DeleteOutlined className={styles['banner-box-icon-cover-delete']} onClick={() => { _onChangeByKey('', 'icon') }} />
</div>
</div>
) : (
<UploadImage
onChange={(url) => { _onChangeByKey(url, 'icon') }}
listType="text"
>
<div className={styles['banner-box-icon']}>
<img src={uploadImgIcon} className={styles['banner-box-icon-add']} />
<div className={styles['banner-box-icon-cover']}>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
</div>
</div>
</div>
</UploadImage>
)}
</div>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>导航链接</div>
<Row gutter={20} style={{ marginBottom: 16 }}>
<Col span={_showChoose ? 18 : 24}>
<Select key={`${selectedKey}-type`} defaultValue={type} onChange={(value) => _onChangeByKey(value, 'type')} style={{ width: '100%' }} >
{
RedirectTypeList.map(selectItem => <Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>)
}
</Select>
</Col>
{_showChoose && <Col span={6}>
<Button block onClick={_onChoose}>选择</Button>
</Col>}
</Row>
{/* {_recordDetail} */}
</div>
{
type === 5 && (
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>频道</div>
<Row gutter={20} style={{ marginBottom: 16 }}>
<Col span={24}>
<Select key={`${selectedKey}-type`} defaultValue={channel} onChange={(value) => _onChangeByKey(value, 'channel')} style={{ width: '100%' }} >
{
_selectOption.map(selectItem => (
<Select.Option value={selectItem.value} key={`redirect_type_${selectItem.value}`}>{selectItem.label}</Select.Option>
))
}
</Select>
</Col>
</Row>
</div>
)
}
{
type === 6 && (
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>链接地址</div>
<Input key={`${selectedKey}-name`} defaultValue={url} onChange={(e) => _onChangeByKey(e.target.value, 'url')} />
</div>
)
}
</div>
)
}
export default CardNavItem
src/pages/pageCustomized/mobileSettingPanel/propsSettings/index.tsx
View file @ fe084a88
......@@ -16,6 +16,7 @@ import CouponsModal from './components/couponsModal';
import BannerClient from './components/bannerClient';
import SuggestProduct from './components/suggestProduct';
import SuggestProductCommodity from './components/suggestProductCommodity';
import CardNavItem from './components/cardNavItem'
import styles from './index.less';
interface PropsSettingsPropsType {
......@@ -66,6 +67,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return <HeaderNavAction {..._props} />
case PROPS_SETTING_TYPES.suggestProductCommodity:
return <SuggestProductCommodity {..._props} />
case PROPS_SETTING_TYPES.mobileNavCardNavItem:
return <CardNavItem {..._props} />
default:
return null;
}
......
src/pages/pageCustomized/mobileSettingPanel/styleSettings/index.less
View file @ fe084a88
......@@ -11,8 +11,9 @@
display: flex;
align-items: center;
justify-content: center;
width: 184px;
height: 138px;
flex: 1;
// width: 184px;
// height: 138px;
border: 1px solid #E4E6EB;
margin: 0 12px;
margin-bottom: 24px;
......
src/pages/pageCustomized/mobileSettingPanel/styleSettings/index.tsx
View file @ fe084a88
......@@ -29,8 +29,18 @@ const StyleSettings: React.FC<StyleSettingsPropsType> = ({ selectedInfo }) => {
<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
className={cx(styles.styleItem, selectKey === item.key ? styles.active : {})}
key={item.key}
// style={{ width: item.width || 184, height: item.height || 138 }}
onClick={() => handleChangeStyleTheme(item.key)}
>
<img
className={styles.themeImg}
src={item.img}
title={item.key}
style={{ width: item.width || 152, height: item.height || 105 }}
/>
</div>
))
}
......
src/pages/user/login/index.tsx
View file @ fe084a88
......@@ -133,7 +133,7 @@ class Index extends Component<{}, IndexState> {
<Col span={12} className="myCol">
<Carousel autoplay>
{
sceneList && sceneList.map(item => <ImageBox key={item.id} direction={"column"} style={{ width: "100%" }} height={447} imgUrl={item.imageUrl} />)
sceneList && sceneList.map(item => <ImageBox key={item.id} direction={"column"} style={{ width: "100%" }} width='100%' height={447} imgUrl={item.imageUrl} />)
}
</Carousel>
</Col>
......
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