Skip to content

J
jinfa-admin
Commit 67af0ae4 authored by 卢均锐's avatar 卢均锐
Browse files
Options

feat: c端装修新增活动商品设置

parent 240c84e8
Hide whitespace changes
Inline Side-by-side
Showing with 1693 additions and 27 deletions
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/Commodity.ts 0 → 100644
View file @ 67af0ae4
import {
ComponentSchemaType,
PROPS_SETTING_TYPES,
PROPS_TYPES,
} from '@lingxi-disign/core';
const Commodity: ComponentSchemaType = {
fatherNodesRule: ['SuggestProduct.Items.children'],
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
componentType: {
type: PROPS_SETTING_TYPES.clientCommodity,
},
},
};
export default {
Commodity,
};
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/SuggestProduct.ts
View file @ 67af0ae4
......@@ -26,7 +26,21 @@ const SuggestProductItems: ComponentSchemaType = {
},
};
const SuggestProductCommodity: ComponentSchemaType = {
fatherNodesRule: ['SuggestProduct.Items.children'],
propsConfig: {
children: {
label: '内容',
type: PROPS_TYPES.string,
},
componentType: {
type: PROPS_SETTING_TYPES.suggestProductCommodity,
},
},
};
export default {
SuggestProduct,
'SuggestProduct.Items': SuggestProductItems,
'SuggestProduct.Commodity' : SuggestProductCommodity
};
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/index.ts
View file @ 67af0ae4
......@@ -47,6 +47,7 @@ import Banner from './Banner';
import HeaderNav from './HeaderNav';
import MobileNavCard from './MobileNavCard';
import SuggestProduct from './SuggestProduct';
import Commodity from './Commodity';
export default {
View,
......@@ -97,5 +98,6 @@ export default {
...Banner,
...HeaderNav,
...MobileNavCard,
...SuggestProduct
...SuggestProduct,
...Commodity
};
src/pages/pageCustomized/drawers/activityDrawer/index.tsx 0 → 100644
View file @ 67af0ae4
import React, { useState, useRef, useMemo, useEffect } from 'react';
import { history } from 'umi';
import { Drawer, Button, Radio, message, Space, Typography } from 'antd';
import { PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons';
import { StandardTable } from 'god';
import { PublicApi } from '@/services/api';
import { formatTimeString } from '@/utils'
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import Search from '@/components/NiceForm/components/Search';
import DateRangePickerUnix from '@/components/NiceForm/components/DateRangePickerUnix'
import Submit from '@/components/NiceForm/components/Submit'
import StatusTag from '@/components/StatusTag'
import * as tableSchemas from './schema';
const options = [
{ label: '平台', value: 1 },
{ label: '商家', value: 2 },
];
interface ActivityDrawerProps {
visible: boolean,
onClose: () => void,
onConfirm?: (record) => void,
selectId?: string
}
const ActivityDrawer: React.FC<ActivityDrawerProps> = (props: ActivityDrawerProps) => {
const { visible, onClose, onConfirm, selectId } = props;
const { query: { shopId, environment } }: any = history.location
const [type, setType] = useState(1);
const [selectedRowKeys, setSelectedRowKeys] = useState<any>(selectId ? [selectId] : []);
const [selectedRows, setSelectedRows] = useState<any>([]);
const ref = useRef<any>({});
const _schema = useMemo(() => {
return tableSchemas[`ActivitySchema${type}`]
}, [type])
useEffect(() => {
setSelectedRowKeys(selectId ? [selectId] : []);
},[selectId])
const columns = [
{
title: '活动信息',
dataIndex: 'name',
key: 'name',
render: (text: any, record: any) => (
<Space direction='horizontal' style={{ width: 300 }}>
<img src={record.templatePicUrl} style={{ width: 40, height: 40, borderRadius: 4 }} />
<Space direction='vertical' style={{ width: 300 }}>
{text}
<Typography.Text type='secondary'>ID:{record.id}</Typography.Text>
</Space>
</Space>
)
},
{
title: '类型',
dataIndex: 'templateName',
key: 'templateName'
},
{
title: '有效期',
dataIndex: 'startTime',
key: 'startTime',
render: (_: any, record: any) => <>
<div><PlayCircleOutlined />&nbsp;{formatTimeString(record.startTime,'YYYY-MM-DD HH:mm')}</div>
<div><PoweroffOutlined />&nbsp;{formatTimeString(record.endTime,'YYYY-MM-DD HH:mm')}</div>
</>
},
{
title: '所属',
dataIndex: 'memberName',
key: 'memberName',
render: (text: any, record: any) => (
<Space direction='vertical'>
<StatusTag title={record.type === 1 ? '平台' : '商家'} type={record.type === 1 ? 'success' : 'primary'} />
{record.type === 2 && <Typography.Text type='secondary'>{text}</Typography.Text>}
</Space>
)
},
]
const _onConfirm = () => {
if (selectedRows.length > 0) {
onConfirm?.(selectedRows[0]);
} else {
message.warning('请选择一条记录')
}
}
const _onRadioChange = (e: any) => {
setType(e.target.value);
ref?.current?.reload();
}
const fetchTableData = async (params: any) => {
const _params = { ...params, environment, type, shopId }
const { data } = await PublicApi.getTemplateWebActivityPageListAdorn(_params);
return data;
}
const rowSelection: any = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRows(selectedRows);
setSelectedRowKeys(selectedRowKeys)
},
type: 'radio'
}
return (
<Drawer
width={1200}
title={'选择活动'}
visible={visible}
onClose={onClose}
footer={
<div style={{ textAlign: 'right', }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
<Button onClick={_onConfirm} type="primary">确定</Button>
</div>
}
>
<StandardTable
keepAlive={false}
fetchTableData={params => fetchTableData(params)}
columns={columns}
currentRef={ref}
rowSelection={rowSelection}
rowKey={'id'}
formilyLayouts={{
justify: 'space-between'
}}
formilyProps={{
ctx: {
inline: false,
schema: _schema,
effects: ($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'name',
FORM_FILTER_PATH,
);
},
components: { ModalSearch: Search, DateRangePickerUnix, Submit },
},
layouts: {
order: 1,
span: 16
}
}}
formilyChilds={{
children: (
<div style={{ textAlign: 'right' }}>
<Radio.Group
options={options}
onChange={_onRadioChange}
value={type}
optionType="button"
/>
</div>
),
layouts: {
order: 2,
span: 8
}
}}
/>
</Drawer>
)
}
export default ActivityDrawer;
src/pages/pageCustomized/drawers/activityDrawer/schema.ts 0 → 100644
View file @ 67af0ae4
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const ActivitySchema1: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '搜索',
allowClear: true,
align: 'flex-start',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
justifyContent: 'flex-start',
},
colStyle: {
marginRight: 20,
},
},
properties: {
'[startTime,endTime]': {
type: 'array',
'x-component': 'DateRangePickerUnix',
'x-component-props': {
placeholder: ['开始时间','结束时间'],
allowClear: true,
},
},
sumbit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
};
export const ActivitySchema2: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '搜索',
allowClear: true,
align: 'flex-start',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
justifyContent: 'flex-start',
},
colStyle: {
marginRight: 20,
},
},
properties: {
memberName: {
type: 'string',
'x-component-props': {
placeholder: '商家名称',
allowClear: true,
},
},
'[startTime,endTime]': {
type: 'array',
'x-component': 'DateRangePickerUnix',
'x-component-props': {
placeholder: ['开始时间','结束时间'],
allowClear: true,
},
},
sumbit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
};
src/pages/pageCustomized/drawers/couponsDrawer/index.tsx 0 → 100644
View file @ 67af0ae4
import React, { useState, useRef, useMemo, useEffect } from 'react';
import { history } from 'umi';
import { Drawer, Button, Radio, message, Space, Typography } from 'antd';
import { PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons';
import { StandardTable } from 'god';
import { PublicApi } from '@/services/api';
import { formatTimeString } from '@/utils'
import { priceFormat } from '@/utils/numberFomat'
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import Search from '@/components/NiceForm/components/Search';
import Submit from '@/components/NiceForm/components/Submit'
import StatusTag from '@/components/StatusTag'
import CouponPlatformIcon from '@/pages/pageCustomized/icons/coupon_platform.png';
import CouponShopIcon from '@/pages/pageCustomized/icons/coupon_shop.png';
import * as tableSchemas from './schema';
const options = [
{ label: '平台', value: 1 },
{ label: '商家', value: 2 },
];
interface CouponsDrawerProps {
visible: boolean,
onClose: () => void,
onConfirm?: (record) => void,
selectId?: number
}
const CouponsDrawer: React.FC<CouponsDrawerProps> = (props: CouponsDrawerProps) => {
const { visible, onClose, onConfirm, selectId } = props;
const { query: { shopId } }: any = history.location
const [type, setType] = useState(1);
const [selectedRowKeys, setSelectedRowKeys] = useState<any>(selectId ? [selectId] : []);
const [selectedRows, setSelectedRows] = useState<any>([]);
const ref = useRef<any>({});
const _schema = useMemo(() => {
return tableSchemas[`CouponSchema${type}`]
}, [type])
useEffect(() => {
setSelectedRowKeys(selectId ? [selectId] : []);
}, [selectId])
// useEffect(() => {
// ref?.current?.reload();
// }, [type, ref?.current])
const columns = [
{
title: '优惠券信息',
dataIndex: 'name',
key: 'name',
render: (text: any, record: any) => (
<Space direction='horizontal' style={{ width: 300 }}>
<img src={record.type === 1 ? CouponPlatformIcon : CouponShopIcon} style={{ width: 40, height: 40, borderRadius: 4 }} />
<Space direction='vertical' style={{ width: 300 }}>
{text}
<Typography.Text type='secondary'>ID:{record.id}</Typography.Text>
</Space>
</Space>
)
},
{
title: '类型',
dataIndex: 'typeName',
key: 'typeName'
},
{
title: '领劵方式',
dataIndex: 'getWayName',
key: 'getWayName'
},
{
title: '面额',
dataIndex: 'denomination',
key: 'denomination',
render: (text: any) => (
<span style={{ color: '#D32F2F' }}>¥ {priceFormat(text)}</span>
)
},
{
title: '使用条件',
dataIndex: 'useConditionMoney',
key: 'useConditionMoney',
render: (text: any) => (
`满 ${text} 元使用`
)
},
{
title: '有效期',
dataIndex: 'releaseTimeEnd',
key: 'releaseTimeEnd',
render: (_: any, record: any) => <>
<div><PlayCircleOutlined />&nbsp;{formatTimeString(record.releaseTimeStart, 'YYYY-MM-DD HH:mm')}</div>
<div><PoweroffOutlined />&nbsp;{formatTimeString(record.releaseTimeEnd, 'YYYY-MM-DD HH:mm')}</div>
</>
},
{
title: '所属',
dataIndex: 'belongName',
key: 'belongName',
render: (text: any, record: any) => (
<Space direction='vertical'>
<StatusTag title={record.type === 1 ? '平台' : '商家'} type={record.type === 1 ? 'success' : 'primary'} />
{record.type === 2 && <Typography.Text type='secondary'>{text}</Typography.Text>}
</Space>
)
},
]
const _onConfirm = () => {
if (selectedRows.length > 0) {
onConfirm?.({ ...selectedRows[0] });
} else {
message.warning('请选择一条记录')
}
}
const _onRadioChange = (e: any) => {
setType(e.target.value);
ref?.current?.reload();
}
const fetchTableData = async (params: any) => {
const _params = { ...params, shopId };
let _fetch: any;
switch (type) {
case 1:
_fetch = PublicApi.getMarketingCouponPlatformActivityPageSelectPage
break;
case 2:
_fetch = PublicApi.getMarketingCouponPlatformActivityPageSelectMerchantPage
break;
}
const { data } = await _fetch(_params);
return data;
}
const rowSelection: any = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRows(selectedRows);
setSelectedRowKeys(selectedRowKeys)
},
type: 'radio'
}
return (
<Drawer
width={1200}
title={'选择优惠券'}
visible={visible}
onClose={onClose}
footer={
<div style={{ textAlign: 'right', }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
<Button onClick={_onConfirm} type="primary">确定</Button>
</div>
}
>
<StandardTable
keepAlive={false}
fetchTableData={params => fetchTableData(params)}
columns={columns}
currentRef={ref}
rowSelection={rowSelection}
rowKey={'id'}
formilyLayouts={{
justify: 'space-between'
}}
formilyProps={{
ctx: {
inline: false,
schema: _schema,
effects: ($, actions) => {
useStateFilterSearchLinkageEffect(
$,
actions,
'id',
FORM_FILTER_PATH,
);
},
components: { ModalSearch: Search, Submit },
},
layouts: {
order: 1,
span: 16
}
}}
formilyChilds={{
children: (
<div style={{ textAlign: 'right' }}>
<Radio.Group
options={options}
onChange={_onRadioChange}
value={type}
optionType="button"
/>
</div>
),
layouts: {
order: 2,
span: 8
}
}}
/>
</Drawer>
)
}
export default CouponsDrawer;
src/pages/pageCustomized/drawers/couponsDrawer/schema.ts 0 → 100644
View file @ 67af0ae4
import { ISchema } from '@formily/antd';
import { FORM_FILTER_PATH } from '@/formSchema/const';
export const CouponSchema1: ISchema = {
type: 'object',
properties: {
id: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '搜索',
allowClear: true,
align: 'flex-start',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
justifyContent: 'flex-start',
},
colStyle: {
marginRight: 20,
},
},
properties: {
name: {
type: 'string',
'x-component-props': {
placeholder: '优惠劵名称',
allowClear: true,
},
},
sumbit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
};
export const CouponSchema2: ISchema = {
type: 'object',
properties: {
id: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '搜索',
allowClear: true,
align: 'flex-start',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
justifyContent: 'flex-start',
},
colStyle: {
marginRight: 20,
},
},
properties: {
name: {
type: 'string',
'x-component-props': {
placeholder: '优惠劵名称',
allowClear: true,
},
},
memberName: {
type: 'string',
'x-component-props': {
placeholder: '商家名称',
allowClear: true,
},
},
sumbit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
};
src/pages/pageCustomized/drawers/mixDrawer/index.less 0 → 100644
View file @ 67af0ae4
.shopName {
display: flex;
flex-direction: column;
&-top {
flex: 1;
display: flex;
flex-direction: row;
color: #252D37;
font-size: 14px;
&-tag {
display: inline-block;
background: #FFF0F2;
border-radius: 2px;
font-size: 12px;
color: #EF3346;
padding: 2px 4px;
}
}
&-bottom {
color: #909399;
font-size: 12px;
}
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
&-title {
flex: 1;
font-size: 14px;
color: #252D37;
}
&-bottom {
flex: 1;
display: flex;
flex-direction: row;
font-size: 12px;
align-items: center;
justify-content: center;
&-tag {
display: inline-block;
padding: 2px 4px;
border-radius: 2;
background-color: #EBF9F6;
color: #00A98F;
}
&-time {
flex: 1;
color: #909399;
text-align: right;
}
}
}
src/pages/pageCustomized/drawers/mixDrawer/index.tsx 0 → 100644
View file @ 67af0ae4
import React, { useState, useEffect, useMemo } from 'react';
import { Drawer, Input, Table, Button, Row, Col, message } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import moment from 'moment';
import { priceFormat } from '@/utils/numberFomat';
import { PublicApi } from '@/services/api';
import styles from './index.less';
interface MixDrawerProps {
visible: boolean,
// 1商城，3积分商品，4店铺，5资讯
type: 1 | 3 | 4 | 5,
// 1.B端 2.C端 3.SRM
property: 1 | 2 | 3,
onConfirm: (record: any) => void,
onClose?: () => void
}
const Environment_MAPS = {
1: 'web',
2: 'H5',
3: '小程序',
4: 'APP'
}
const Property_MAPS = {
1: 'B端商城',
2: 'C端商城',
3: 'SRM商城',
}
const Title_MAPS = {
1: '选择商城',
3: '选择积分商品',
4: '选择店铺',
5: '选择资讯'
}
const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
const { visible, type, property, onConfirm, onClose } = props;
const [dataSource, setDataSource] = useState<any>([]);
const [totalCount, setTotalCount] = useState<number>(0);
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
const [selectedRows, setSelectedRows] = useState<any>([]);
const [keyWord, setKeyWord] = useState<string>('');
const [current, setCurrent] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(20);
const _search = (current: number, pageSize: number, keyWord?: string) => {
setCurrent(current);
setPageSize(pageSize);
let _params: any = {
current,
pageSize
}
let _fetch;
switch (type) {
case 1:
_params.type = 1;
_params.environment = 4;
_params.property = property;
if (keyWord) {
_params.name = keyWord
}
_fetch = PublicApi.getManageShopListAdorn;
break;
case 3:
_params.priceTypeList = [3];
if (keyWord) {
_params.name = keyWord
}
_fetch = PublicApi.postProductCommodityCommonGetCommodityListByPlatform;
break;
case 4:
if (keyWord) {
_params.memberName = keyWord
}
_fetch = PublicApi.getTemplateWebMemberShopWebMemberShopListAdorn;
break;
case 5:
if (keyWord) {
_params.title = keyWord
}
_fetch = PublicApi.getManageContentInformationListAdorn;
break;
}
_fetch && _fetch(_params).then((res) => {
if (res.code === 1000) {
setDataSource(res.data?.data ?? res.data);
setTotalCount(res.data?.totalCount ?? res.data.length);
} else {
setDataSource([])
setTotalCount(0);
}
}).catch(err => console.log(err))
}
const _onInputChange = (e) => {
const _val = e.target.value;
setKeyWord(_val);
}
const _onPageChange = (page, pageSize) => {
_search(page, pageSize)
}
const _onConfirm = () => {
if (selectedRows.length > 0) {
onConfirm(selectedRows[0]);
} else {
message.warning('请选择一条记录')
}
}
const columns = useMemo(() => {
if (type === 1) {
return (
[
{
title: 'logoUrl',
dataIndex: 'logoUrl',
width: 64,
render: (text: string) => {
return (
<img src={text} style={{ width: 64, height: 64 }} />
)
},
},
{
title: 'name',
dataIndex: 'name',
render: (text: string, record: any) => {
return (
<div className={styles['shopName']}>
<div className={styles['shopName-top']}>
{text}
<div className={styles['shopName-top-tag']}>{Property_MAPS[record?.property]}</div>
</div>
<div className={styles['shopName-bottom']}>
{record?.describe}
</div>
</div>
)
},
},
{
title: 'environment',
dataIndex: 'environment',
render: (text: any) => {
return (
<span style={{ color: '#007BFC', background: '#E9F3FF', borderRadius: 2, display: 'inline-block', padding: '2px 4px' }}>{Environment_MAPS[text]}</span>
)
},
},
]
)
}
if (type === 3) {
return (
[
{
title: 'mainPic',
dataIndex: 'mainPic',
render: (text: string) => {
return (
<img src={text} style={{ width: 40, height: 40 }} />
)
},
},
{
title: 'name',
dataIndex: 'name',
},
{
title: 'unitPrice',
dataIndex: 'unitPrice',
render: (_: any, record: any) => {
return (
<span style={{ color: '#EA8000' }}>{priceFormat(record?.unitPrice?.['0-0'])} 积分</span>
)
},
},
]
)
}
if (type === 4) {
return (
[
{
title: 'logo',
dataIndex: 'logo',
render: (text: string) => {
return (
<img src={text} style={{ width: 40, height: 40 }} />
)
},
},
{
title: 'memberName',
dataIndex: 'memberName',
}
]
)
}
if (type === 5) {
return (
[
{
title: 'imageUrl',
dataIndex: 'imageUrl',
width: 72,
render: (text: string) => {
return (
<img src={text} style={{ width: 72, height: 48 }} />
)
},
},
{
title: 'title',
dataIndex: 'title',
render: (text: string, record: any) => {
return (
<div className={styles['info']}>
<div className={styles['info-title']}>{text}</div>
<div className={styles['info-bottom']}>
<div className={styles['info-bottom-tag']}>{record?.columnName}</div>
<div className={styles['info-bottom-time']}>{moment(record?.createTime).format('YYYY-MM-DD')}</div>
</div>
</div>
)
},
}
]
)
}
}, [type]);
const rowSelection: any = {
selectedRowKeys,
onChange: (selectedRowKeys, selectedRows) => {
setSelectedRows(selectedRows);
setSelectedRowKeys(selectedRowKeys)
},
type: 'radio'
}
useEffect(() => {
setDataSource([]);
setKeyWord('');
}, [type])
useEffect(() => {
if (visible) {
_search(current, pageSize);
}
}, [visible])
const _showTotal = (total) => {
return `共 ${total} 条`
}
return (
<Drawer
width={800}
title={Title_MAPS[type]}
visible={visible}
onClose={onClose}
footer={
<div style={{ textAlign: 'right', }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
<Button onClick={_onConfirm} type="primary">确定</Button>
</div>
}
>
<div>
<Row style={{ marginBottom: 16 }}>
<Col span={8}>
<Input
onChange={_onInputChange}
placeholder="搜索"
suffix={<SearchOutlined onClick={() => { _search(1, pageSize, keyWord) }} />}
allowClear={true}
onPressEnter={() => { _search(1, pageSize, keyWord) }}
/>
</Col>
</Row>
<Table
rowKey={'id'}
columns={columns}
showHeader={false}
rowSelection={rowSelection}
dataSource={dataSource}
pagination={{ total: totalCount, pageSize: pageSize, current: current, onChange: _onPageChange, showTotal: _showTotal, showSizeChanger: true, showQuickJumper: true, size: 'small' }}
/>
</div>
</Drawer>
)
}
export default MixDrawer;
src/pages/pageCustomized/icons/ActivityImage.svg 0 → 100644
View file @ 67af0ae4
<?xml version="1.0" encoding="UTF-8"?>
<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>图标占位/活动</title>
<defs>
<rect id="path-1" x="0" y="0" width="40" height="40" rx="4"></rect>
</defs>
<g id="图标占位/活动" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="icon">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="矩形" fill="#F25767" xlink:href="#path-1"></use>
<rect id="矩形" mask="url(#mask-2)" x="8" y="8" width="24" height="24"></rect>
<path d="M23.4047009,19.2867655 L23.3826623,19.4259721 C23.3772213,19.4585887 23.3715972,19.49113 23.3657912,19.5235947 C23.3355082,19.6929633 23.3001994,19.8605598 23.2601057,20.0258501 L23.2473269,20.0778047 C23.243061,20.094912 23.2387438,20.1119942 23.2343754,20.129051 C23.2183747,20.1915207 23.2017447,20.2534492 23.184443,20.3150287 C23.1774226,20.3400199 23.1701821,20.3653297 23.1628284,20.3905794 C23.1154485,20.5532271 23.063527,20.7129411 23.0071159,20.8699646 C23.0007005,20.8878231 22.9941797,20.9057756 22.9876003,20.9236924 C22.8940908,21.1783206 22.7888062,21.4256127 22.6724876,21.6647992 C22.6597157,21.6910619 22.6468326,21.7171828 22.6338181,21.7432052 C22.6114768,21.7878797 22.5886371,21.8324749 22.5654113,21.8767706 C22.5422864,21.9208673 22.5190153,21.9642362 22.4953745,22.0073081 C22.4778233,22.0392875 22.4599424,22.071325 22.441857,22.1031939 C22.42443,22.1339021 22.4068267,22.1644306 22.3890356,22.1948008 C22.2700814,22.3978369 22.142961,22.5934763 22.0080481,22.7813971 C21.9716976,22.8320351 21.9345667,22.882396 21.896875,22.932177 C21.810883,23.0457368 21.7222373,23.1559674 21.6308232,23.2630427 C21.6193413,23.2764914 21.6078649,23.2898336 21.5963455,23.3031262 C21.5580075,23.3473659 21.519152,23.3911004 21.4798285,23.4342726 C21.4555632,23.4609147 21.430946,23.4875274 21.4061505,23.5139202 C21.3747989,23.5472881 21.3434132,23.5800474 21.3117514,23.6124555 C21.2883758,23.6363815 21.2648921,23.6600739 21.2412603,23.6835735 C20.2212523,24.6981648 18.9240451,25.3535625 17.4983539,25.4782848 C17.3515045,25.7982007 17.3408143,26.0635946 17.4472136,26.2763932 C17.4999816,26.3819292 17.5725641,26.4788495 17.6870063,26.598672 L18.0202201,26.9242244 C18.817406,27.7214103 18.6837478,28.5233589 17.3535534,29.8535534 C17.1582912,30.0488155 16.8417088,30.0488155 16.6464466,29.8535534 C16.4511845,29.6582912 16.4511845,29.3417088 16.6464466,29.1464466 L16.9013664,28.8869261 L17.1075797,28.6656073 C17.5647022,28.1559614 17.5930155,27.9583184 17.401121,27.7266386 L17.3131133,27.6313312 L17.0831664,27.4095551 C16.8390335,27.1716821 16.6790663,26.9761665 16.5527864,26.7236068 C16.3554788,26.3289915 16.3217098,25.9109656 16.4395152,25.4713791 C13.1130662,25.1458317 10.5,21.9250203 10.5,18 C10.5,13.8578644 13.4101491,10.5 17,10.5 C19.4984272,10.5 21.6676247,12.1264613 22.7556877,14.5118014 C22.764971,14.5334531 22.7747717,14.5551712 22.7844824,14.5769511 C22.9032339,14.8423397 23.0080668,15.1168095 23.0985795,15.3992893 C23.1037449,15.4161476 23.1091397,15.4331589 23.1144825,15.4501989 C23.1385658,15.5263529 23.1613709,15.6030344 23.1831194,15.6802658 C23.1892298,15.7025482 23.1954457,15.7249642 23.2015723,15.7474257 C23.2174429,15.8050911 23.2325347,15.8629113 23.247034,15.9210211 C23.2613922,15.9790049 23.2753152,16.0374283 23.2886361,16.096132 C23.3062437,16.1733664 23.3227292,16.2511413 23.3381544,16.3293813 C23.3415362,16.3468412 23.3448955,16.3641577 23.3482027,16.3814967 C23.3616628,16.4517992 23.3742482,16.5226923 23.38596,16.5939421 C23.3918137,16.6297563 23.3975041,16.6657979 23.4029701,16.7019282 C23.413686,16.7726003 23.4235162,16.8436168 23.432476,16.9149584 C23.4375429,16.9554128 23.4423701,16.9961845 23.4469119,17.037059 C23.4556201,17.1153486 23.4632713,17.1940258 23.4698594,17.2730614 C23.4727402,17.3076879 23.4753983,17.3420551 23.4778548,17.3764883 C23.4925122,17.5818013 23.5,17.7898917 23.5,18 C23.5,18.1925677 23.4937102,18.3834404 23.4813549,18.5723594 C23.4796356,18.5986217 23.4778398,18.624301 23.4759322,18.6499435 C23.4707747,18.719304 23.464768,18.78871 23.457947,18.8578307 C23.4542386,18.8954039 23.4503043,18.932761 23.4461329,18.9700323 C23.4393774,19.0304087 23.4319663,19.09081 23.4239355,19.1509754 C23.4212832,19.1708411 23.418599,19.1904281 23.4158492,19.2099898 L23.4047009,19.2867655 L23.4047009,19.2867655 Z M24.5,13.5 C27.2614237,13.5 29.5,16.1862915 29.5,19.5 C29.5,22.4072781 27.7768764,24.8316077 25.4893142,25.3825665 C25.3688793,25.7048633 25.3464654,25.9680768 25.4085904,26.173341 C25.4292811,26.2417042 25.4561208,26.3025437 25.4978922,26.3764089 L25.6512559,26.62492 C26.0106899,27.2187142 25.9548117,27.772588 25.3577686,28.7589184 C25.2147719,28.9951525 24.9073446,29.0707364 24.6711105,28.9277397 C24.4348764,28.7847431 24.3592925,28.4773158 24.5022891,28.2410816 L24.6584513,27.9740291 C24.902047,27.5372963 24.9179307,27.3737069 24.8240216,27.1927558 L24.6955381,26.9830816 C24.5830803,26.8020621 24.5085097,26.6514933 24.4514673,26.4630227 C24.378669,26.2224933 24.358064,25.9684865 24.3872022,25.7010275 L24.418,25.497 L24.2518005,25.4927365 C23.3473038,25.4396775 22.5059532,25.0982038 21.7902615,24.5433307 C23.4509087,22.9799767 24.5,20.6210341 24.5,18 C24.5,16.4092906 24.1135889,14.9151172 23.4387103,13.6365908 C23.7805378,13.5467475 24.1357195,13.5 24.5,13.5 Z" id="形状结合" fill="#FFFFFF" mask="url(#mask-2)"></path>
</g>
</g>
</svg>
\ No newline at end of file
src/pages/pageCustomized/mobileClientEdit/config.ts
View file @ 67af0ae4
......@@ -133,7 +133,9 @@ export const marketingConfig_1 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 1,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -165,7 +167,9 @@ export const marketingConfig_2 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 2,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -197,7 +201,9 @@ export const marketingConfig_3 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 3,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -229,7 +235,9 @@ export const marketingConfig_4 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 4,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -261,7 +269,9 @@ export const marketingConfig_5 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 5,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -293,7 +303,9 @@ export const marketingConfig_6 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 6,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -325,7 +337,9 @@ export const marketingConfig_7 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 7,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -357,7 +371,9 @@ export const marketingConfig_8 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 8,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -389,7 +405,9 @@ export const marketingConfig_9 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 9,
},
childNodes: [],
childComponentName: 'MarketingCard.CouponsItem',
addBtnText: '添加优惠券',
......@@ -421,7 +439,9 @@ export const marketingConfig_10 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 10,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -452,7 +472,9 @@ export const marketingConfig_11 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 11,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -484,7 +506,9 @@ export const marketingConfig_12 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 12,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -515,7 +539,9 @@ export const marketingConfig_13 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CollageContainer',
props: {},
props: {
type: 13,
},
childNodes: [],
childComponentName: 'MarketingCard.CollageContainerItem',
addBtnText: '添加商品',
......@@ -546,7 +572,9 @@ export const marketingConfig_14 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 14,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -577,7 +605,9 @@ export const marketingConfig_15 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 15,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -608,7 +638,9 @@ export const marketingConfig_16 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 16,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -639,7 +671,9 @@ export const marketingConfig_17 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 17,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -699,6 +733,7 @@ export const marketingConfig_18 = {
props: {
title: '套餐',
containerScorll: true,
type: 18,
},
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -745,7 +780,9 @@ export const marketingConfig_19 = {
canEdit: false,
canHide: true,
componentName: 'MarketingCard.CommonContainer',
props: {},
props: {
type: 19,
},
childNodes: [],
childComponentName: 'MarketingCard.GoodsItem',
addBtnText: '添加商品',
......@@ -768,7 +805,7 @@ export const suggestProductConfig = {
canHide: true,
componentName: 'SuggestProduct.Items',
props: {},
childComponentName: 'Commodity',
childComponentName: 'SuggestProduct.Commodity',
addBtnText: '添加商品',
childNodes: [],
},
......
src/pages/pageCustomized/mobileClientEdit/mobileDesignPanel.tsx
View file @ 67af0ae4
......@@ -13,6 +13,7 @@ interface MobileDesignPanelPropsType {
const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
const { theme, isPreview, onlyEidt } = props;
const { pageConfig } = useSelector(['pageConfig']);
console.log(pageConfig)
return (
<div className={styles.mobileDesignContainer}>
<div className={styles.mobileDesignWrap}>
......
src/pages/pageCustomized/mobileSettingPanel/index.tsx
View file @ 67af0ae4
......@@ -41,7 +41,7 @@ const MobileSettingPanel: React.FC = ()=> {
className={styles.settingTabs}
>
<TabPane tab="编辑" key="props">
<PropsSettings selectedInfo={newSelectInfo} />
<PropsSettings selectedInfo={newSelectInfo} pageConfig={pageConfig} />
</TabPane>
{
(propsConfig && propsConfig.styleType) && (
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bannerClient/index.tsx
View file @ 67af0ae4
......@@ -8,8 +8,8 @@ import UploadImage from '@/components/UploadImage';
import StatusTag from '@/components/StatusTag'
import { priceFormat } from '@/utils/numberFomat';
import MixDrawer from '@/pages/pageCustomized/Drawers/MixDrawer';
import ActivityDrawer from '@/pages/pageCustomized/Drawers/ActivityDrawer';
import MixDrawer from '@/pages/pageCustomized/drawers/mixDrawer';
import ActivityDrawer from '@/pages/pageCustomized/drawers/activityDrawer';
import styles from './index.less';
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardCoupon/index.tsx
View file @ 67af0ae4
......@@ -8,7 +8,7 @@ import { formatTimeString } from '@/utils'
import { priceFormat } from '@/utils/numberFomat'
import { PublicApi } from '@/services/api';
import CouponsDrawer from '@/pages/pageCustomized/Drawers/CouponsDrawer';
import CouponsDrawer from '@/pages/pageCustomized/drawers/couponsDrawer';
import styles from './index.less';
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardGood/index.less 0 → 100644
View file @ 67af0ae4
@import "../../common.less";
.suggestProductCommodity {
&-box {
margin-bottom: 16px;
&-label {
font-size: 12px;
color: #91959B;
margin-bottom: 8px;
}
}
&-detail {
height: 80px;
border: 1px solid #F7F8FA;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 8px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
img {
height: 60px;
width: 60px;
margin-right: 10px;
}
&-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
&-title {
color: #303133;
font-size: 12px;
word-break: break-all;
overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis;
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp: 2; // 结合上面两个属性，表示显示的行数。
}
&-price {
color: #D32F2F;
font-size: 14px;
}
}
&:hover {
.suggestProductCommodity-detail-cover {
display: block;
}
}
&-cover {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .1);
display: none;
z-index: 1;
cursor: pointer;
&-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;
}
}
}
&-activityList {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
img {
width: 24px;
height: 24px;
}
&-name {
flex: 1;
font-size: 12px;
color: #303133;
margin: 0 8px;
word-break: break-all;
overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis;
}
}
}
.site-tag-plus {
background: #fff;
border-style: dashed;
}
.edit-tag {
user-select: none;
}
.tag-input {
width: 78px;
margin-right: 8px;
vertical-align: top;
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/marketingCardGood/index.tsx 0 → 100644
View file @ 67af0ae4
import React, { useState, useEffect, useRef } from 'react';
import { history } from 'umi';
import { Input, Radio, Space, Button, Tag, Tooltip } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import StatusTag from '@/components/StatusTag'
import { PublicApi } from '@/services/api';
import { GetMarketingPlatformActivityListAdornRequest, GetMarketingPlatformActivityListAdornResponseDetail } from '@/services/MaketingV2Api';
import ActivityProductDrawer from '@/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ActivityAreaSetting/activityProductDrawer';
import ActivityImage from '@/pages/pageCustomized/icons/ActivityImage.svg';
import { priceFormat } from '@/utils/numberFomat'
import styles from './index.less';
interface SuggestProductCommodityProps {
id?: any,
actType?: any,
// 当前选中组件的key
selectedKey?: any
}
const SuggestProductCommodity: React.FC<SuggestProductCommodityProps> = (props: SuggestProductCommodityProps) => {
const { id, actType, selectedKey } = props;
const { query: { shopId } }: any = history.location
const [record, setRecord] = useState<any>([]);
const [actVisible, setActVisible] = useState(false);
useEffect(() => {
if (id && id != record[0]?.id) {
PublicApi.getMarketingPlatformActivityGoodsAdorn({ ids: id }).then((res) => {
if (res.code === 1000) {
setRecord(res.data);
}
}).catch(err => console.log(err))
} else if (!id) {
setRecord([]);
}
}, [id])
const fetchData = async (params: GetMarketingPlatformActivityListAdornRequest) => {
const common = {
...params,
shopId
};
const isWithActivityType = actType ? { ...common, activityType: actType } : common;
return await PublicApi.getMarketingPlatformActivityListAdorn(isWithActivityType as any);
};
const onOk = (data: any) => {
setRecord(data);
const _data = data[0];
let _exData;
switch (1) {
case 1:
_exData = { ..._data, img: _data.productImgUrl, originalPrice: priceFormat(_data.price), discountPrice: priceFormat(_data.activityPrice), isnull: false }
break;
default:
break;
}
changeProps({
title: _data.productName,
props: Object.assign({ ...props }, _exData)
});
setActVisible(false);
};
const _record = record[0];
return (
<div className={styles['suggestProductCommodity']}>
{id && record.length > 0 ? (
<>
<div className={styles['suggestProductCommodity-detail']}>
<img src={_record?.productImgUrl} />
<div className={styles['suggestProductCommodity-detail-right']}>
<Tooltip title={_record?.productName}>
<div className={styles['suggestProductCommodity-detail-right-title']}>{_record?.productName}</div>
</Tooltip>
<div className={styles['suggestProductCommodity-detail-right-price']}>{_record?.price ? `¥ ${priceFormat(_record?.price)}` : ''}</div>
</div>
<div className={styles['suggestProductCommodity-detail-cover']} onClick={() => { setActVisible(true) }}>
<div className={styles['suggestProductCommodity-detail-cover-bottom']}>
更换商品
</div>
</div>
</div>
<div className={styles['suggestProductCommodity-box']}>
<div className={styles['suggestProductCommodity-box-label']}>商品活动</div>
{_record?.activityList?.map((item) => {
return (
<div className={styles['suggestProductCommodity-activityList']}>
<img src={ActivityImage} />
<div className={styles['suggestProductCommodity-activityList-name']}>{item.name}</div>
<StatusTag title={item.type} type='danger' />
</div>
)
})}
</div>
</>
) : (<Button onClick={() => { setActVisible(true) }}>选择活动商品</Button>)}
<ActivityProductDrawer
activityImage={ActivityImage}
products={record}
onOk={onOk}
fetchData={fetchData}
visible={actVisible}
onCancel={() => setActVisible(false)}
mode='radio'
/>
</div>
)
}
export default SuggestProductCommodity
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/suggestProductCommodity/index.less 0 → 100644
View file @ 67af0ae4
@import "../../common.less";
.suggestProductCommodity {
&-box {
margin-bottom: 16px;
&-label {
font-size: 12px;
color: #91959B;
margin-bottom: 8px;
}
}
&-detail {
height: 80px;
border: 1px solid #F7F8FA;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 6px 8px;
margin-bottom: 16px;
position: relative;
overflow: hidden;
img {
height: 60px;
width: 60px;
margin-right: 10px;
}
&-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
&-title {
color: #303133;
font-size: 12px;
word-break: break-all;
overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis;
display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp: 2; // 结合上面两个属性，表示显示的行数。
}
&-price {
color: #D32F2F;
font-size: 14px;
}
}
&:hover {
.suggestProductCommodity-detail-cover {
display: block;
}
}
&-cover {
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .1);
display: none;
z-index: 1;
cursor: pointer;
&-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;
}
}
}
&-activityList {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
img {
width: 24px;
height: 24px;
}
&-name {
flex: 1;
font-size: 12px;
color: #303133;
margin: 0 8px;
word-break: break-all;
overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis;
}
}
}
.site-tag-plus {
background: #fff;
border-style: dashed;
}
.edit-tag {
user-select: none;
}
.tag-input {
width: 78px;
margin-right: 8px;
vertical-align: top;
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/suggestProductCommodity/index.tsx 0 → 100644
View file @ 67af0ae4
import React, { useState, useEffect, useRef } from 'react';
import { history } from 'umi';
import { Input, Radio, Space, Button, Tag, Tooltip } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import StatusTag from '@/components/StatusTag'
import { PublicApi } from '@/services/api';
import { GetMarketingPlatformActivityListAdornRequest, GetMarketingPlatformActivityListAdornResponseDetail } from '@/services/MaketingV2Api';
import ActivityProductDrawer from '@/pages/marketing/marketingActivitiesManagement/activePage/fixtures/components/ActivityAreaSetting/activityProductDrawer';
import ActivityImage from '@/pages/pageCustomized/icons/ActivityImage.svg';
import { priceFormat } from '@/utils/numberFomat'
import styles from './index.less';
interface SuggestProductCommodityProps {
id?: any,
tags?: any,
// 当前选中组件的key
selectedKey?: any
}
const SuggestProductCommodity: React.FC<SuggestProductCommodityProps> = (props: SuggestProductCommodityProps) => {
const { id, tags, selectedKey } = props;
const { query: { shopId } }: any = history.location
const [record, setRecord] = useState<any>([]);
const [actVisible, setActVisible] = useState(false);
const [inputVisible, setInputVisible] = useState(false);
const saveEditInputRef = useRef<any>({});
const saveInputRef = useRef<any>({});
const [editInputIndex, setEditInputIndex] = useState(-1);
const [editInputValue, setEditInputValue] = useState<any>('');
const [inputValue, setInputValue] = useState<any>('');
useEffect(() => {
if (id && id != record[0]?.id) {
PublicApi.getMarketingPlatformActivityGoodsAdorn({ ids: id }).then((res) => {
if (res.code === 1000) {
setRecord(res.data);
}
}).catch(err => console.log(err))
} else if (!id) {
setRecord([]);
}
}, [id])
const fetchData = async (params: GetMarketingPlatformActivityListAdornRequest) => {
const common = {
...params,
shopId
};
return await PublicApi.getMarketingPlatformActivityListAdorn(common as any);
};
const onOk = (data: any) => {
setRecord(data);
const _data = data[0];
changeProps({
title: _data.productName,
props: Object.assign({ ...props }, { ..._data, name: _data.productName, image: _data.productImgUrl, mode: 'vertical', discountPrice: priceFormat(_data.price), buyBtn: false })
});
setActVisible(false);
};
const _showInput = () => {
setInputVisible(true)
}
const _handleClose = (removedTag: any) => {
const _tags = tags?.filter(tag => tag !== removedTag);
changeProps({
props: Object.assign({ ...props }, { tags: _tags })
});
console.log(tags);
};
useEffect(() => {
if (inputVisible) {
saveInputRef?.current?.focus();
}
}, [inputVisible])
useEffect(() => {
if (editInputIndex > -1 && editInputValue) {
saveEditInputRef?.current?.focus();
}
}, [editInputIndex, editInputValue])
const _handleEditInputChange = (e: any) => {
setEditInputValue(e.target.value);
}
const _handleEditInputConfirm = () => {
const newTags = [...tags];
newTags[editInputIndex] = editInputValue;
setEditInputIndex(-1);
setEditInputValue('');
changeProps({
props: Object.assign({ ...props }, { tags: newTags })
});
}
const _handleInputChange = (e: any) => {
setInputValue(e.target.value);
}
const _handleInputConfirm = () => {
let _tags = tags ? [...tags] : [];
if (inputValue && _tags.indexOf(inputValue) === -1) {
_tags = [..._tags, inputValue];
}
setInputVisible(false);
setInputValue('');
changeProps({
props: Object.assign({ ...props }, { tags: _tags })
});
};
const _record = record[0];
return (
<div className={styles['suggestProductCommodity']}>
{id && record.length > 0 ? (
<>
<div className={styles['suggestProductCommodity-detail']}>
<img src={_record?.productImgUrl} />
<div className={styles['suggestProductCommodity-detail-right']}>
<Tooltip title={_record?.productName}>
<div className={styles['suggestProductCommodity-detail-right-title']}>{_record?.productName}</div>
</Tooltip>
<div className={styles['suggestProductCommodity-detail-right-price']}>{_record?.price ? `¥ ${priceFormat(_record?.price)}` : ''}</div>
</div>
<div className={styles['suggestProductCommodity-detail-cover']} onClick={() => { setActVisible(true) }}>
<div className={styles['suggestProductCommodity-detail-cover-bottom']}>
更换商品
</div>
</div>
</div>
<div className={styles['suggestProductCommodity-box']}>
<div className={styles['suggestProductCommodity-box-label']}>商品活动</div>
{_record?.activityList?.map((item) => {
return (
<div className={styles['suggestProductCommodity-activityList']}>
<img src={ActivityImage} />
<div className={styles['suggestProductCommodity-activityList-name']}>{item.name}</div>
<StatusTag title={item.type} type='danger' />
</div>
)
})}
</div>
<div className={styles['suggestProductCommodity-box']}>
<div className={styles['suggestProductCommodity-box-label']}>活动标签</div>
<>
{tags?.map((tag, index) => {
if (editInputIndex === index) {
return (
<Input
ref={saveEditInputRef}
key={index}
size="small"
className={styles['tag-input']}
defaultValue={editInputValue}
onChange={_handleEditInputChange}
onBlur={_handleEditInputConfirm}
onPressEnter={_handleEditInputConfirm}
/>
);
}
const isLongTag = tag.length > 20;
const tagElem = (
<Tag
className={styles['edit-tag']}
key={tag}
closable
onClose={() => _handleClose(tag)}
color='red'
>
<span
onDoubleClick={e => {
if (index !== 0) {
setEditInputIndex(index);
setEditInputValue(tag);
e.preventDefault();
}
}}
>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</span>
</Tag>
);
return isLongTag ? (
<Tooltip title={tag} key={tag}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
{inputVisible && (
<Input
ref={saveInputRef}
type="text"
size="small"
className={styles['tag-input']}
defaultValue={inputValue}
onChange={_handleInputChange}
onBlur={_handleInputConfirm}
onPressEnter={_handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag className={styles['site-tag-plus']} onClick={_showInput}>
<PlusOutlined /> 新增标签
</Tag>
)}
</>
</div>
</>
) : (<Button onClick={() => { setActVisible(true) }}>选择活动商品</Button>)}
<ActivityProductDrawer
activityImage={ActivityImage}
products={record}
onOk={onOk}
fetchData={fetchData}
visible={actVisible}
onCancel={() => setActVisible(false)}
mode='radio'
/>
</div>
)
}
export default SuggestProductCommodity
src/pages/pageCustomized/mobileSettingPanel/propsSettings/index.tsx
View file @ 67af0ae4
import React from 'react';
import { SelectedInfoType, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
import { SelectedInfoType, PROPS_SETTING_TYPES, PageConfigType } from '@lingxi-disign/core';
import HeaderNav from './components/headerNav';
import Banner from './components/banner';
import QuickNav from './components/quickNav';
......@@ -9,21 +9,24 @@ import Quality from './components/quality';
import BottomNavigation from './components/bottomNavigation';
import MarketingCardHeader from './components/marketingCardHeader';
import MarketingCardCoupon from './components/marketingCardCoupon';
import MarketingCardGood from './components/marketingCardGood';
import BottomNavigationClient from './components/bottomNavigationClient';
import CouponsModal from './components/couponsModal';
import BannerClient from './components/bannerClient';
import SuggestProduct from './components/suggestProduct';
import SuggestProductCommodity from './components/suggestProductCommodity';
import styles from './index.less';
interface PropsSettingsPropsType {
selectedInfo: SelectedInfoType | undefined,
pageConfig: PageConfigType
}
const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
const { selectedInfo } = props;
const { selectedInfo, pageConfig } = props;
const renderSettingItem = () => {
const { props: initProps, propsConfig } = selectedInfo || {};
const { props: initProps, propsConfig, parentKey } = selectedInfo || {};
const _props = { ...initProps, selectedKey: selectedInfo?.selectedKey }
const componentType = propsConfig?.componentType;
if (componentType) {
......@@ -46,6 +49,10 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return <MarketingCardHeader {..._props} />
case PROPS_SETTING_TYPES.marketingCardCoupon:
return <MarketingCardCoupon {..._props} />
case PROPS_SETTING_TYPES.marketingCardGood:
const _parentKey: any = parentKey;
const _type = pageConfig?.[_parentKey]?.props?.type;
return <MarketingCardGood {..._props} actType={_type} />
case PROPS_SETTING_TYPES.bottomNavigationItems:
return <BottomNavigationClient {..._props} />
case PROPS_SETTING_TYPES.couponsModal:
......@@ -54,6 +61,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return <BannerClient {..._props} />
case PROPS_SETTING_TYPES.suggestProductItems:
return <SuggestProduct {..._props} />
case PROPS_SETTING_TYPES.suggestProductCommodity:
return <SuggestProductCommodity {..._props} />
default:
return null;
}
......
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