Skip to content

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

Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-system into v2

* 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-system: fix: 待确认支付结果 B端商城装修开发
parents d984197e e9b01b87
Hide whitespace changes
Inline Side-by-side
Showing with 1818 additions and 121 deletions
src/pages/orderSystem/components/StatusColors/index.tsx
View file @ f88de4bd
......@@ -12,6 +12,7 @@ export interface IStatusColor {
// 用于标签状态控制
export interface StatusColorsProps {
status: number,
text?: string,
type: 'out' | 'inside' | 'saleInside' | 'payOut' | 'deliveInside' | 'inquiry' | 'transformInside' |'transformOut'
}
......@@ -101,14 +102,14 @@ const typeMaps = {
// 订单内部状态显示
const StatusColors:React.FC<StatusColorsProps> = (props) => {
const { status, type } = props
const { status, type, text = null } = props
const statusText = typeMaps[type]
const statusShowColor = matchStatusColor(status)
// 单独处理支付比例 确认到账的状态颜色
if(type === 'payOut' && status === 3) {
return (<Tag color="#41CC9E">{statusText[status]}</Tag>)
}
return (<Tag color={statusShowColor}>{statusText[status]}</Tag>)
// // 单独处理支付比例 确认到账的状态颜色
// if(type === 'payOut' && status === 3) {
// return (<Tag color="#41CC9E">{statusText[status]}</Tag>)
// }
return (<Tag color={statusShowColor}>{statusText[status] || text}</Tag>)
}
StatusColors.defaultProps = {}
......
src/pages/orderSystem/orderDetail/components/orderPayResultModal/index.tsx
View file @ f88de4bd
import React, { useState, useEffect, useContext } from 'react'
import { Modal, List, Avatar, Button, Space } from 'antd'
import { Modal, List, Button, Space } from 'antd'
import { usePageStatus } from '@/hooks/usePageStatus'
import { OrderDetailContext } from '../../context'
import { PayOutWorkState } from '@/constants'
import { PublicApi } from '@/services/api'
import { history } from 'umi'
import OverflowText from '@/components/OverflowText'
......@@ -17,11 +16,11 @@ const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRe
const { id } = usePageStatus()
const [visible, setVisible] = useState(false)
const [isReady, setIsReady] = useState<any>()
const canCtlData = data.paymentInformationResponses.find(v => v.externalState === PayOutWorkState.READY_CONFIRM_RESULT) || {}
const canCtlData = data.payments.find(v => v.showConfirm) || {}
// const transData = canCtlData.payOrderUrls?.split(',') || []
// const transData = canCtlData.vouchers?.split(',') || []
const transData = canCtlData.payOrderUrls || []
const transData = canCtlData.vouchers || []
useEffect(() => {
if (currentRef) {
......@@ -39,12 +38,12 @@ const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRe
const handleConfirm = (isReady) => {
setIsReady(isReady)
const params = {
state: isReady,
id: Number(id),
paymentInformationId: canCtlData.id
agree: isReady,
orderId: Number(id),
batchNo: canCtlData.batchNo
}
PublicApi.postOrderPlatformConfirmedPaymentResultsOrder(params).then(res => {
PublicApi.postOrderPlatformManagePayConfirm(params).then(res => {
if (res.code === 1000) {
setTimeout(() => {
history.goBack()
......
src/pages/orderSystem/orderDetail/components/orderPayTabs/index.tsx
View file @ f88de4bd
......@@ -17,18 +17,18 @@ const TabHeader = ({dataSource}) => {
const { setPayResultType, payResultVisible } = useContext(OrderDetailContext)
return <div>
<Row justify='space-between' style={{minWidth: 216}}>
<Col>
<div className={style.fontGray}>支付比例</div>
<div className={style.bignumber}>{dataSource.payRatio}%</div>
</Col>
<Col>
<StatusColors status={dataSource.externalState} type='payOut'/>
</Col>
<Col>
<div className={style.fontGray}>支付比例</div>
<div className={style.bignumber}>{dataSource.payRate}%</div>
</Col>
<Col>
<StatusColors status={dataSource.outerStatusName} text={dataSource.outerStatusName} type='payOut'/>
</Col>
</Row>
<Row justify='space-between' align='middle' style={{width: '100%'}}>
<Col className={style.smallnumber}>￥{dataSource.payPrice || 0}</Col>
<Col className={style.smallnumber}>￥{dataSource.payAmount || 0}</Col>
<Col>
{ dataSource.externalState === PayOutWorkState.READY_CONFIRM_RESULT && <a onClick={() => {
{ dataSource.showView && <a onClick={() => {
setPayResultType('preview')
payResultVisible.current.setVisible(true)
}}>查看</a> }
......@@ -79,30 +79,21 @@ const OrderPayTabs:React.FC<OrderPayTabsProps> = (props) => {
<MellowCard bordered={false} fullHeight>
{/* <Row gutter={24}> */}
<Tabs defaultActiveKey='1'>
{ data.payments && data.payments.map(v => <TabPane key={v.id} tab={<TabHeader dataSource={v}/>}>
{ data.payments && data.payments.map(v => <TabPane key={v.paymentId} tab={<TabHeader dataSource={v}/>}>
<Row>
<Col className={style.fontGray} span={4}>支付环节: </Col>
<Col>{v.payNode}</Col>
</Row>
{
v.payWay === -1 ?
<Row>
<Col className={style.fontGray} span={4}>支付方式: </Col>
<Col>{v.channel === 100 ? '账期' : '月结'}</Col>
</Row>
:
<>
<Row>
<Col className={style.fontGray} span={4}>支付方式: </Col>
<Col>{payTextList[v.payWay]}</Col>
</Row>
<Row>
<Col className={style.fontGray} span={4}>支付渠道: </Col>
<Col>{payChannel[v.channel]}</Col>
</Row>
</>
}
</TabPane>) }
<Row>
<Col className={style.fontGray} span={4}>支付方式: </Col>
<Col>{v.payTypeName}</Col>
</Row>
<Row>
<Col className={style.fontGray} span={4}>支付渠道: </Col>
<Col>{v.payChannelName}</Col>
</Row>
</TabPane>)
}
</Tabs>
{/* </Row> */}
</MellowCard>
......
src/pages/orderSystem/readyConfirmPayList/model/useSelfTable.tsx
View file @ f88de4bd
......@@ -4,18 +4,13 @@ import { Button, Row, Col } from 'antd'
import { PublicApi } from '@/services/api'
import EyePreview from '@/components/EyePreview'
import { formatTimeString } from '@/utils'
import { ORDER_TYPE } from '@/constants'
import StatusColors from '../../components/StatusColors'
import { FieldTimeOutlined } from '@ant-design/icons'
import {
Chart,
Interval,
Axis,
Tooltip,
Coordinate,
Legend,
View,
Annotation,
} from 'bizcharts';
import DataSet from "@antv/data-set";
......@@ -23,11 +18,10 @@ import DataSet from "@antv/data-set";
const CircleChart = props => {
const { sumPrice = 100, alreadyPay = 10 } = props
const { DataView } = DataSet;
const dv = new DataView();
const amount = Number(sumPrice) - Number(alreadyPay)
const userData = [
{ type: '总金额', value: sumPrice - alreadyPay },
{ type: '已支付', value: alreadyPay }
{ type: '总金额', value: amount },
{ type: '已支付', value: Number(alreadyPay) }
];
const userDv = new DataView();
......@@ -63,7 +57,7 @@ export const useSelfTable = () => {
dataIndex: 'orderNo',
key: 'orderNo',
render: (text, record) => {
return <EyePreview url={`/orderSystem/detail?id=${record.id}`}>
return <EyePreview url={`/orderSystem/detail?id=${record.orderId}`}>
{text}
</EyePreview>
}
......@@ -96,7 +90,7 @@ export const useSelfTable = () => {
<div><span>已支付：</span><span>{record.paidAmount || 0}</span></div>
</Col>
<Col style={{ width: 40 }}>
<CircleChart sumPrice={record.amount} alreadyPay={record.paidAmount} />
<CircleChart sumPrice={text} alreadyPay={record.paidAmount} />
</Col>
</Row>,
width: 200
......@@ -127,7 +121,7 @@ export const useSelfTable = () => {
]
const handleConfirm = async (record) => {
history.push(`/orderSystem/readyConfirmPayList/detail?id=${record.id}`)
history.push(`/orderSystem/readyConfirmPayList/detail?id=${record.orderId}`)
}
const handleCancel = async (id) => {
......
src/pages/pageCustomized/components/MobileDesign.tsx
View file @ f88de4bd
......@@ -10,8 +10,8 @@ interface DesignPanelPropsType {
}
const DesignPanel: React.FC<DesignPanelPropsType> = (props) => {
const { theme, pageName = 'index', onlyEidt } = props;
const { pageConfig } = useSelector(['pageConfig']);
const { pageConfig, theme, pageName = 'index', onlyEidt } = props;
// const { pageConfig } = useSelector(['pageConfig']);
return <BrickDesign
pageName={pageName}
......
src/pages/pageCustomized/components/MobileDesignPanel.tsx
View file @ f88de4bd
......@@ -13,14 +13,14 @@ interface MobileDesignPanelPropsType {
}
const MobileDesignPanel: React.FC<MobileDesignPanelPropsType> = (props) => {
const { theme, isPreview, onlyEidt } = props;
const { pageConfig, theme, isPreview, onlyEidt } = props;
return (
<div className={styles.mobileDesignContainer}>
<div className={styles.mobileDesignWrap}>
{
isPreview ? <DesignPreview theme={theme} /> : <DesignPanel onlyEidt={onlyEidt} theme={theme} />
isPreview ? <DesignPreview theme={theme} pageConfig={pageConfig} /> : <DesignPanel onlyEidt={onlyEidt} theme={theme} pageConfig={pageConfig} />
}
</div>
<div className={styles.appBottom}>
......
src/pages/pageCustomized/components/drawers/commodityDrawer/index.tsx
View file @ f88de4bd
......@@ -26,7 +26,9 @@ interface CommodityDrawerProps {
visible: boolean,
onClose: () => void,
onConfirm?: (record) => void,
selectId?: string
selectId?: string | number[],
filterParam?: any,
selectType?: 'radio' | 'checkbox'
}
const _returnCategoryList = (list: any, obj: any) => {
......@@ -37,7 +39,7 @@ const _returnCategoryList = (list: any, obj: any) => {
}
const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerProps) => {
const { visible, onClose, onConfirm, selectId } = props;
const { visible, onClose, onConfirm, selectId, filterParam, selectType = 'radio' } = props;
const { query: { shopId, environment } }: any = history.location
const [selectedRowKeys, setSelectedRowKeys] = useState<any>(selectId ? [selectId] : []);
const [selectedRows, setSelectedRows] = useState<any>([]);
......@@ -126,14 +128,24 @@ const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerP
const _onConfirm = () => {
if (selectedRows.length > 0) {
onConfirm?.(selectedRows[0]);
if (selectType === 'radio') {
onConfirm?.(selectedRows[0]);
} else {
onConfirm?.(selectedRows);
}
} else {
message.warning('请选择一条记录')
}
}
const fetchTableData = async (params: any) => {
const _params = { ...params, environment, shopId }
const _params = {
...params,
// environment,
shopId,
idNotInList: Array.isArray(selectId) ? selectId : [selectId],
...filterParam
}
const { data } = await PublicApi.getMarketingAdornGoodsListAdorn(_params);
return data;
}
......@@ -143,7 +155,7 @@ const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerP
setSelectedRows(selectedRows);
setSelectedRowKeys(selectedRowKeys)
},
type: 'radio'
type: selectType
}
const drawerStyle = { background: '#FAFBFC' };
......@@ -157,6 +169,7 @@ const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerP
title={'选择商品'}
visible={visible}
onClose={onClose}
destroyOnClose
footer={
<div style={{ textAlign: 'right', }}>
<Button onClick={onClose} style={{ marginRight: 8 }}>取消</Button>
......
src/pages/pageCustomized/components/drawers/mixDrawer/index.tsx
View file @ f88de4bd
......@@ -10,13 +10,15 @@ import styles from './index.less';
interface MixDrawerProps {
visible: boolean,
// 1商城，3积分商品，4店铺，5资讯
type: 1 | 3 | 4 | 5,
// 1商城，3积分商品，4店铺，5资讯, 6品牌
type: 1 | 3 | 4 | 5 | 6,
shopId?: number,
// 1.B端 2.C端 3.SRM
property: 1 | 2 | 3,
onConfirm: (record: any) => void,
onClose?: () => void,
selectId?: string
selectId?: string | number[],
selectType?: 'radio' | 'checkbox'
}
const Environment_MAPS = {
......@@ -40,7 +42,7 @@ const Title_MAPS = {
}
const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
const { visible, type, property, onConfirm, onClose, selectId } = props;
const { visible, type, property, onConfirm, onClose, selectId, shopId, selectType = 'radio' } = props;
const [dataSource, setDataSource] = useState<any>([]);
const [totalCount, setTotalCount] = useState<number>(0);
const [selectedRowKeys, setSelectedRowKeys] = useState<any>([]);
......@@ -85,12 +87,26 @@ const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
}
_fetch = PublicApi.getTemplateWebMemberShopWebMemberShopListAdorn;
break;
// 资讯
case 5:
if (keyWord) {
_params.title = keyWord
}
if (property === 1) {
_params.shopId = shopId
_params.idNotInList = selectId
}
_fetch = PublicApi.getManageContentInformationListAdorn;
break;
// 品牌
case 6:
if (keyWord) {
_params.name = keyWord
}
_params.shopId = shopId
_params.idNotInList = selectId
_fetch = PublicApi.getSearchCommodityTemplateGetBrandList;
break;
}
_fetch && _fetch(_params).then((res) => {
message.destroy()
......@@ -115,7 +131,11 @@ const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
const _onConfirm = () => {
if (selectedRows.length > 0) {
onConfirm(selectedRows[0]);
if (selectType === 'radio') {
onConfirm(selectedRows[0]);
} else {
onConfirm(selectedRows);
}
} else {
message.warning('请选择一条记录')
}
......@@ -242,6 +262,25 @@ const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
]
)
}
if (type === 6) {
return (
[
{
title: 'logoUrl',
dataIndex: 'logoUrl',
render: (text: string) => {
return (
<img src={text} style={{ width: 40, height: 40 }} />
)
},
},
{
title: 'name',
dataIndex: 'name',
}
]
)
}
}, [type]);
const rowSelection: any = {
......@@ -250,7 +289,7 @@ const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
setSelectedRows(selectedRows);
setSelectedRowKeys(selectedRowKeys)
},
type: 'radio'
type: selectType
}
useEffect(() => {
......@@ -258,7 +297,6 @@ const MixDrawer: React.FC<MixDrawerProps> = (props: MixDrawerProps) => {
setKeyWord('');
}, [type])
useEffect(() => {
if (visible) {
_search(current, pageSize);
......
src/pages/pageCustomized/components/toolBar/returnSaveParams.ts
View file @ f88de4bd
......@@ -554,7 +554,6 @@ export const paramsBusiness = (
const _root: any = pageConfig[ROOT].childNodes || [];
_root.forEach(childKey => {
// ["1", "3", "5", "7", "9", "10", "15"]
let propsData: any = undefined;
let childNodes: ChildNodesType | undefined = undefined
let tempProps: any = undefined
......@@ -671,10 +670,7 @@ export const paramsBusiness = (
// 优质推荐
case '12':
propsData = get(pageConfig, ['12', 'props']) || {}
// const classifyLabelProps = get(pageConfig, ['13', 'props']) || {}
const classifyLabelChildNodes = get(pageConfig, ['13', 'childNodes']) || {}
// childNodes = get(pageConfig, ['12', 'childNodes']) || {}
_params.adornContent.qualityRecommend = {
style: propsData.styleTheme || 0,
status: true,
......@@ -683,14 +679,54 @@ export const paramsBusiness = (
if (classifyLabelChildNodes && Array.isArray(classifyLabelChildNodes) && classifyLabelChildNodes.length > 0) {
for (let key in classifyLabelChildNodes) {
tempProps = pageConfig[classifyLabelChildNodes[key]]?.props || {}
!isEmpty(tempProps) && _params.adornContent.qualityRecommend.details.push({
explain: tempProps.explain,
id: tempProps.id || [],
manageWay: tempProps.manageWay,
num: tempProps.num,
title: tempProps.title,
type: tempProps.type,
});
if (!isEmpty(tempProps)) {
let ids = []
const tempParams: any = {
explain: tempProps.explain,
manageWay: tempProps.manageWay,
num: tempProps.num,
title: tempProps.title,
type: tempProps.type,
}
switch (tempProps.type) {
case 1:
const commodityProps = propsData = get(pageConfig, ['16', 'props']) || {}
ids = commodityProps?.id || []
tempParams.id = ids
break
case 2:
const shopChildNodes = propsData = get(pageConfig, ['17', 'childNodes']) || {}
tempParams.details = []
if (shopChildNodes && Array.isArray(shopChildNodes) && shopChildNodes.length > 0) {
for (let key in shopChildNodes) {
tempProps = pageConfig[shopChildNodes[key]]?.props || {}
!isEmpty(tempProps) && tempParams.details.push({
shopId: tempProps.id,
productIds: tempProps.productIds || []
});
}
}
break
case 3:
const brandChildNodes = propsData = get(pageConfig, ['19', 'childNodes']) || {}
tempParams.details = []
if (brandChildNodes && Array.isArray(brandChildNodes) && brandChildNodes.length > 0) {
for (let key in brandChildNodes) {
tempProps = pageConfig[brandChildNodes[key]]?.props || {}
!isEmpty(tempProps) && tempParams.details.push({
name: tempProps.name,
image: tempProps.image,
brandIds: tempProps.brandIds,
});
}
}
break
case 4:
break
}
_params.adornContent.qualityRecommend.details.push(tempParams);
}
}
}
break
......
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/RecommendBrandList.ts
View file @ f88de4bd
import { ComponentSchemaType, PROPS_TYPES } from '@lingxi-disign/core';
import { ComponentSchemaType, PROPS_TYPES, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
const RecommendBrandList: ComponentSchemaType = {
......@@ -13,6 +13,10 @@ const RecommendBrandList: ComponentSchemaType = {
const BrandItem: ComponentSchemaType = {
fatherNodesRule: ['RecommendBrandList.children'],
propsConfig: {
componentType: {
label: '内容',
type: PROPS_SETTING_TYPES.mobileQualityBrandList
},
children: {
label: '文本内容',
type: PROPS_TYPES.string,
......
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/RecommendCommodityList.ts
View file @ f88de4bd
import { ComponentSchemaType, PROPS_TYPES } from '@lingxi-disign/core';
import { ComponentSchemaType, PROPS_TYPES, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
const RecommendCommodityList: ComponentSchemaType = {
propsConfig: {
componentType: {
label: '内容',
type: PROPS_SETTING_TYPES.mobileQualityCommodityList
},
children: {
label: '文本内容',
type: PROPS_TYPES.string,
......
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/RecommendInformationList.ts
View file @ f88de4bd
import { ComponentSchemaType, PROPS_TYPES } from '@lingxi-disign/core';
import { ComponentSchemaType, PROPS_TYPES, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
const RecommendInformationList: ComponentSchemaType = {
propsConfig: {
componentType: {
label: '内容',
type: PROPS_SETTING_TYPES.mobileQualityInformationList
},
children: {
label: '文本内容',
type: PROPS_TYPES.string,
......
src/pages/pageCustomized/configs/componentConfigs/LingXiUI/RecommendShopList.ts
View file @ f88de4bd
import { ComponentSchemaType, PROPS_TYPES } from '@lingxi-disign/core';
import { ComponentSchemaType, PROPS_TYPES, PROPS_SETTING_TYPES } from '@lingxi-disign/core';
const RecommendShopList: ComponentSchemaType = {
propsConfig: {
......@@ -12,6 +11,10 @@ const RecommendShopList: ComponentSchemaType = {
const ShopItem: ComponentSchemaType = {
propsConfig: {
componentType: {
label: '内容',
type: PROPS_SETTING_TYPES.mobileQualityShopList
},
children: {
label: '文本内容',
type: PROPS_TYPES.string,
......@@ -19,7 +22,6 @@ const ShopItem: ComponentSchemaType = {
},
};
export default {
RecommendShopList,
'RecommendShopList.Item': ShopItem
......
src/pages/pageCustomized/mobileEdit/config.ts
View file @ f88de4bd
......@@ -94,7 +94,7 @@ export const defaultConfig: PageConfigType = {
title: '${item.name}',
componentName: 'Banner.Items',
props: {
id: '${item.name}',
id: '${item.id}',
type: '${item.type}',
img: '${item.img}',
name: '${item.name}',
......@@ -206,7 +206,9 @@ export const defaultConfig: PageConfigType = {
'12': {
title: '优质推荐',
componentName: 'QualityRecommend',
props: {},
props: {
defaultActiveType: '${defaultActive}'
},
childNodes: ['13', '15'],
},
'13': {
......@@ -230,7 +232,6 @@ export const defaultConfig: PageConfigType = {
type: '${item.type}',
},
componentName: 'ClassifyLabel.LabelItem',
childNodes: [],
},
'15': {
title: '推荐列表',
......@@ -240,22 +241,52 @@ export const defaultConfig: PageConfigType = {
'16': {
title: '商品列表',
componentName: 'RecommendCommodityList',
childNodes: [],
props: {
dataList: '${recommendCommodityList}',
id: '${recommendCommodityIdList}'
},
childNodes: []
},
'17': {
title: '店铺列表',
componentName: 'RecommendShopList',
childNodes: [],
childNodes: ['18'],
childComponentName: 'RecommendShopList.Item',
addBtnText: '添加店铺',
// canHide: true,
},
'18': {
loop: '${recommendShopList}',
componentName: 'RecommendShopList.Item',
title: '${item.memberName}',
props: {},
},
'19': {
title: '品牌列表',
componentName: 'RecommendBrandList',
childNodes: [],
childNodes: ['20'],
childComponentName: 'RecommendBrandList.Item',
addBtnText: '添加品牌',
// canHide: true,
},
'20': {
loop: '${recommendBrandList}',
title: '${item.name}',
componentName: 'RecommendBrandList.Item',
props: {
name: '${item.name}',
image: '${item.image}',
brandIds: '${item.brandIds}',
brandList: '${item.brandList}',
},
},
'21': {
title: '资讯列表',
componentName: 'RecommendInformationList',
childNodes: [],
props: {
dataList: '${recommendInformationList}'
},
// canHide: true,
},
'22': {
title: '底部标签栏',
......@@ -264,7 +295,7 @@ export const defaultConfig: PageConfigType = {
childNodes: ['23'],
childComponentName: 'BottomNavigation.Items',
addBtnText: '添加标签',
maxLength: 4,
maxLength: 5,
},
'23': {
loop: '${bottom}',
......
src/pages/pageCustomized/mobileEdit/index.tsx
View file @ f88de4bd
......@@ -186,6 +186,76 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
})
}
const _getListByIds = (ids: number[], list: any[]) => {
const result: any = []
list && list.forEach((item) => {
if (ids.includes(item.id)) {
result.push(item)
}
})
return result
}
const _getListByType = async (type: number, list: any[]) => {
let listRes: any = []
let idsRes = []
if (list && Array.isArray(list) && list.length > 0) {
switch(type) {
case 1:
const selectIds = list.filter((item: any) => item.type === type)[0].id || []
idsRes = selectIds
if (idsRes && idsRes.length > 0) {
const param: any = {
idInList: selectIds,
shopId: shopId,
current: 1,
pageSize: 50
}
const res = await PublicApi.getMarketingAdornGoodsListAdorn(param)
if (res.code === 1000) {
listRes = res.data.data
}
}
break
case 3:
const brandDetails = list.filter((item: any) => item.type === type)[0].details || []
let brandDetailsIds: any = []
let brandResList: any[] = []
brandDetails.forEach((detailsItem) => {
brandDetailsIds = [...brandDetailsIds, ...detailsItem.brandIds]
})
if (brandDetailsIds && brandDetailsIds.length > 0) {
const param: any = {
idInList: brandDetailsIds,
shopId: shopId,
current: 1,
pageSize: 100
}
const res = await PublicApi.getSearchCommodityTemplateGetBrandList(param)
let allBrandList: any[] = []
if (res.code === 1000) {
allBrandList = res.data.data
brandDetails.forEach((detailsItem) => {
brandResList.push({
...detailsItem,
brandList: _getListByIds(detailsItem.brandIds, allBrandList)
})
})
}
}
listRes = brandResList
break
}
}
return {
list: listRes,
ids: idsRes
}
}
const getComponentsConfig = async () => {
try {
const appConfig: any = await getAppEnterpriseConfig();
......@@ -200,13 +270,26 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
informationTitle: '8月钢市价格走势判断',
recommendShops: appConfig?.recommendShops ? appConfig?.recommendShops.details : [],
qualityRecommend: appConfig?.qualityRecommend ? appConfig?.qualityRecommend.details : [],
defaultActive: appConfig?.qualityRecommend ? appConfig?.qualityRecommend.details[0].type : 1,
recommendCommodityList: [],
recommendCommodityIdList: [],
recommendShopList: [],
recommendBrandList: [],
recommendInformationList: [],
bottom: appConfig?.bottom ? appConfig?.bottom.details : [],
}
const { list: commodityList, ids: commodityIds } = await _getListByType(1, allState.qualityRecommend)
allState.recommendCommodityList = commodityList
allState.recommendCommodityIdList = commodityIds
const { list: brandList } = await _getListByType(3, allState.qualityRecommend)
allState.recommendBrandList = brandList
const finalConfig = resolveMappingPageConfig(defaultConfig, allState)
console.log(finalConfig, 'finalConfig')
setComponentConfigs(finalConfig)
setLoading(false);
updatePageConfig(finalConfig);
// updatePageConfig(finalConfig);
} catch (error) {
console.log(error);
}
......@@ -225,7 +308,7 @@ const appMallEdit: React.FC<ShopPreviewPropsType> = (props) => {
<MobileEditLeft />
<div className={styles['app-wrapper']}>
<div className={styles['app-canvas-container']}>
<MobileDesignPanel theme={theme} onlyEidt />
<MobileDesignPanel theme={theme} onlyEidt pageConfig={componentConfigs} />
</div>
</div>
<MobileSettingPanel shopId={shopId} property={1} />
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/bannerClient/index.tsx
View file @ f88de4bd
......@@ -210,7 +210,7 @@ const BannerClient: React.FC<BannerClientProps> = (props: BannerClientProps) =>
<Tooltip title={record?.name}>
<div className={styles['banner-record-integral-right-top']}>{record?.name}</div>
</Tooltip>
<div className={styles['banner-record-integral-right-bottom']}>{priceFormat(record?.min)} 积分</div>
<div className={styles['banner-record-integral-right-bottom']}>{priceFormat(record?.unitPrice?.['0-0'])} 积分</div>
</div>
</div>
)
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/mobileQualityBrandList/index.less 0 → 100644
View file @ f88de4bd
@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 {
cursor: pointer;
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 {
position: relative;
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
margin-bottom: 8px;
&:hover {
.banner-record-shop-mask {
display: block;
}
}
&-mask {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.24);
transition: 0.5s all;
z-index: 6;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
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;
width: calc(100% - 80px);
&-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;
width: calc(100% - 80px);
&-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;
}
}
&-commodity {
&-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;
&:hover {
.banner-record-commodity-detail-mask {
display: block;
}
}
&-mask {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.24);
transition: 0.5s all;
z-index: 6;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
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;
}
}
}
&-activityList {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 8px;
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;
}
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/mobileQualityBrandList/index.tsx 0 → 100644
View file @ f88de4bd
import React, { useState, useMemo } from 'react'
import { Button, Tooltip, Input } from 'antd'
import { changeProps } from '@lingxi-disign/core'
import StatusTag from '@/components/StatusTag'
import { priceFormat } from '@/utils/numberFomat';
import { DeleteOutlined } from '@ant-design/icons';
import ImageBox from '@/components/ImageBox'
import UploadImage from '@/components/UploadImage';
import ActivityImage from '@/pages/pageCustomized/icons/ActivityImage.svg';
import MixDrawer from '../../../../components/drawers/mixDrawer'
import uploadImgIcon from '@/asserts/icons/upload_img_icon.svg'
import styles from './index.less'
interface BrandItemType {
id: number,
name: string,
logoUrl: string,
}
interface MobileQualityBrandListProps {
dataList: any[],
shopId: number,
name: string;
image: string;
brandList: BrandItemType[],
brandIds: number[]
}
const MobileQualityBrandList = (props: MobileQualityBrandListProps) => {
const { image, name, brandList = [], brandIds = [], shopId } = props
const [visible, setVisible] = useState<boolean>(false)
const _onChangeByKey = (val: any, key: string, title?: string) => {
const newProps: any = {
[key]: val,
}
changeProps({
title: title ? title : name,
props: Object.assign({ ...props }, newProps)
});
}
const _onClose = () => {
setVisible(false)
}
const _onConfirm = (record: any) => {
console.log(record, 'record')
changeProps({
props: Object.assign({ ...props }, {
brandIds: [...brandIds, ...record.map((item) => item.id)],
brandList: [...brandList, ...record]
})
})
setVisible(false)
}
const _handleDeleteItem = (deleteId: number) => {
if (deleteId) {
changeProps({
props: Object.assign({ ...props }, {
brandIds: brandIds.filter((item) => item !== deleteId),
brandList: brandList.filter((item) => item.id !== deleteId)
})
})
}
}
const _recordDetail = useMemo(() => {
if (brandList && brandList.length > 0) {
return brandList.map((item) => (
<div className={styles['banner-record-shop']}>
<img src={item?.logoUrl} />
<Tooltip title={item?.name}>
<span>{item?.name}</span>
</Tooltip>
<div className={styles['banner-record-shop-mask']}>
<DeleteOutlined
className={styles['banner-record-shop-delete']}
onClick={() => _handleDeleteItem(item?.id)}
/>
</div>
</div>
))
}
}, [brandList])
return (
<div className={styles['banner']}>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>标题</div>
<Input defaultValue={name} onBlur={(e) => _onChangeByKey(e.target.value, 'name', e.target.value)} />
</div>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>图片</div>
{ image ? (
<div className={styles['banner-box-icon']}>
{/* <img src={icon} /> */}
<ImageBox width='100%' height={96} imgUrl={image} direction='column' />
<div className={styles['banner-box-icon-cover']}>
<UploadImage
onChange={(url) => { _onChangeByKey(url, 'image') }}
listType="text"
>
<div className={styles['banner-box-icon-cover-bottom']}>
添加图像
</div>
</UploadImage>
<DeleteOutlined className={styles['banner-box-icon-cover-delete']} onClick={() => { _onChangeByKey('', 'image') }} />
</div>
</div>
) : (
<UploadImage
onChange={(url) => { _onChangeByKey(url, 'image') }}
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>
<Button onClick={() => setVisible(true)}>选择</Button>
</div>
{_recordDetail}
<MixDrawer
type={6}
visible={visible}
selectId={brandIds}
onConfirm={_onConfirm}
property={1}
onClose={_onClose}
selectType='checkbox'
shopId={shopId}
/>
</div>
)
}
export default MobileQualityBrandList
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/mobileQualityCommodityList/index.less 0 → 100644
View file @ f88de4bd
@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 {
cursor: pointer;
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;
width: calc(100% - 80px);
&-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;
width: calc(100% - 80px);
&-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;
}
}
&-commodity {
&-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;
&:hover {
.banner-record-commodity-detail-mask {
display: block;
}
}
&-mask {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.24);
transition: 0.5s all;
z-index: 6;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
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;
}
}
}
&-activityList {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 8px;
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;
}
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/mobileQualityCommodityList/index.tsx 0 → 100644
View file @ f88de4bd
import React, { useState, useMemo } from 'react'
import { Button, Tooltip } from 'antd'
import { changeProps } from '@lingxi-disign/core'
import StatusTag from '@/components/StatusTag'
import { priceFormat } from '@/utils/numberFomat';
import { DeleteOutlined } from '@ant-design/icons';
import ActivityImage from '@/pages/pageCustomized/icons/ActivityImage.svg';
import CommodityDrawer from '../../../../components/drawers/commodityDrawer'
import styles from './index.less'
interface MobileQualityCommodityListProps {
id: number[],
dataList: any[],
shopId: number,
}
const MobileQualityCommodityList = (props: MobileQualityCommodityListProps) => {
const { id = [], dataList = [], shopId } = props
const [visible, setVisible] = useState<boolean>(false)
const _onChangeByKey = (val: any, key: string, title?: string) => {
}
const _onClose = () => {
setVisible(false)
}
const _onConfirm = (record: any) => {
changeProps({
props: Object.assign({ ...props }, {
id: [...id, ...record.map((item) => item.id)],
dataList: [...dataList, ...record]
})
})
setVisible(false)
}
const _handleDeleteItem = (deleteId: number) => {
if (deleteId) {
changeProps({
props: Object.assign({ ...props }, {
id: id.filter((item) => item !== deleteId),
dataList: dataList.filter((item) => item.id !== deleteId)
})
})
}
}
const _recordDetail = useMemo(() => {
if (dataList && dataList.length > 0) {
return dataList.map((item) => (
<>
<div className={styles['banner-record-commodity-detail']}>
<img src={item?.mainPic} />
<div className={styles['banner-record-commodity-detail-right']}>
<Tooltip title={item?.name}>
<div className={styles['banner-record-commodity-detail-right-title']}>{item?.name}</div>
</Tooltip>
<div className={styles['banner-record-commodity-detail-right-price']}>{item?.min ? `¥ ${priceFormat(item?.min)}` : ''}</div>
</div>
<div className={styles['banner-record-commodity-detail-mask']}>
<DeleteOutlined
className={styles['banner-record-commodity-detail-mask-delete']}
onClick={() => _handleDeleteItem(item?.id)}
/>
</div>
</div>
{item?.activityList?.length > 0 && <div className={styles['banner-record-commodity-box']}>
<div className={styles['banner-record-commodity-label']}>商品活动</div>
{item?.activityList?.map((item) => {
return (
<div className={styles['banner-record-commodity-activityList']}>
<img src={ActivityImage} />
<div className={styles['banner-record-commodity-activityList-name']}>{item.name}</div>
<StatusTag title={item.type} type='danger' />
</div>
)
})}
</div>}
</>
))
}
}, [dataList])
return (
<div className={styles['banner']}>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>推荐商品</div>
<Button onClick={() => setVisible(true)}>选择</Button>
</div>
{_recordDetail}
<CommodityDrawer
visible={visible}
selectId={id}
onConfirm={_onConfirm}
onClose={_onClose}
selectType='checkbox'
/>
</div>
)
}
export default MobileQualityCommodityList
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/mobileQualityInformationList/index.less 0 → 100644
View file @ f88de4bd
@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 {
cursor: pointer;
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 {
position: relative;
height: 56px;
border: 1px solid #EDEEEF;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 8px;
margin-bottom: 8px;
&:hover {
.banner-record-shop-mask {
display: block;
}
}
&-mask {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.24);
transition: 0.5s all;
z-index: 6;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
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;
width: calc(100% - 80px);
&-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;
margin-bottom: 8px;
&:hover {
.banner-record-shop-mask {
display: block;
}
}
&-mask {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.24);
transition: 0.5s all;
z-index: 6;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
img {
width: 40px;
height: 40px;
border-radius: 4px;
margin-right: 8px;
}
&-right {
flex: 1;
display: flex;
flex-direction: column;
font-size: 12px;
width: calc(100% - 80px);
&-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;
}
}
&-commodity {
&-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;
&:hover {
.banner-record-commodity-detail-mask {
display: block;
}
}
&-mask {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.24);
transition: 0.5s all;
z-index: 6;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
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;
}
}
}
&-activityList {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 8px;
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;
}
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/mobileQualityInformationList/index.tsx 0 → 100644
View file @ f88de4bd
import React, { useState, useMemo } from 'react'
import { Button, Tooltip, Input } from 'antd'
import { changeProps } from '@lingxi-disign/core'
import StatusTag from '@/components/StatusTag'
import { priceFormat } from '@/utils/numberFomat';
import { DeleteOutlined } from '@ant-design/icons';
import ImageBox from '@/components/ImageBox'
import UploadImage from '@/components/UploadImage';
import ActivityImage from '@/pages/pageCustomized/icons/ActivityImage.svg';
import MixDrawer from '../../../../components/drawers/mixDrawer'
import uploadImgIcon from '@/asserts/icons/upload_img_icon.svg'
import styles from './index.less'
interface BrandItemType {
id: number,
name: string,
logoUrl: string,
}
interface MobileQualityInformationListProps {
id: number[],
dataList: any[],
shopId: number,
}
const MobileQualityInformationList = (props: MobileQualityInformationListProps) => {
const { id = [], dataList = [], shopId } = props
const [visible, setVisible] = useState<boolean>(false)
const _onClose = () => {
setVisible(false)
}
const _onConfirm = (record: any) => {
changeProps({
props: Object.assign({ ...props }, {
id: [...id, ...record.map((item) => item.id)],
dataList: [...dataList, ...record]
})
})
setVisible(false)
}
const _handleDeleteItem = (deleteId: number) => {
if (deleteId) {
changeProps({
props: Object.assign({ ...props }, {
id: id.filter((item) => item !== deleteId),
dataList: dataList.filter((item) => item.id !== deleteId)
})
})
}
}
const _recordDetail = useMemo(() => {
if (dataList && dataList.length > 0) {
return dataList.map((item) => (
<div className={styles['banner-record-activity']}>
<img src={item?.imageUrl} />
<div className={styles['banner-record-activity-right']}>
<Tooltip title={item?.title}>
<div className={styles['banner-record-activity-right-top']}>{item?.title}</div>
</Tooltip>
<div style={{ display: 'inline-block' }}>
<StatusTag title={item?.columnName} type={'primary'} />
</div>
</div>
<div className={styles['banner-record-activity-mask']}>
<DeleteOutlined
className={styles['banner-record-activity-mask-delete']}
onClick={() => _handleDeleteItem(item?.id)}
/>
</div>
</div>
))
}
}, [dataList])
return (
<div className={styles['banner']}>
<div className={styles['banner-box']}>
<div className={styles['banner-box-label']}>推荐资讯</div>
<Button onClick={() => setVisible(true)}>选择</Button>
</div>
{_recordDetail}
<MixDrawer
type={5}
visible={visible}
selectId={id}
onConfirm={_onConfirm}
property={1}
onClose={_onClose}
selectType='checkbox'
shopId={shopId}
/>
</div>
)
}
export default MobileQualityInformationList
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/shops/index.less
View file @ f88de4bd
......@@ -179,5 +179,110 @@
top: -3px;
}
}
&-commodity {
&-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;
&:hover {
.banner-record-commodity-detail-mask {
display: block;
}
}
&-mask {
position: absolute;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.24);
transition: 0.5s all;
z-index: 6;
&-delete {
position: absolute;
right: 10px;
top: 10px;
font-size: 20px;
color: #fff;
cursor: pointer;
}
}
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;
}
}
}
&-activityList {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 8px;
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;
}
}
}
}
}
src/pages/pageCustomized/mobileSettingPanel/propsSettings/components/shops/index.tsx
View file @ f88de4bd
import React, { useMemo, useState, useEffect } from 'react';
import { Input, Select, Row, Col, Button, Tooltip } from 'antd';
import { Input, Select, message, Button, Tooltip } from 'antd';
import { PlusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import { changeProps } from '@lingxi-disign/core';
import ActivityImage from '@/pages/pageCustomized/icons/ActivityImage.svg';
import { PublicApi } from '@/services/api';
import UploadImage from '@/components/UploadImage';
import StatusTag from '@/components/StatusTag'
......@@ -15,13 +15,6 @@ import uploadImgIcon from '@/asserts/icons/upload_img_icon.svg'
import styles from './index.less';
export interface ProductItemType {
name: string,
mainPic: string,
price: string,
}
interface BannerClientProps {
// 名称
name?: string,
......@@ -37,8 +30,11 @@ interface BannerClientProps {
registerYears: number | undefined,
creditPoint: number | undefined,
memberName: string,
memberId: number,
roleId: number,
logo: string,
productList?: ProductItemType[],
productIds: number[],
productList?: any[],
// 1.B端 2.C端 3.SRM
property?: 1 | 2 | 3
}
......@@ -94,7 +90,7 @@ const RedirectTypeList_B = [
];
const RecomendShops: React.FC<BannerClientProps> = (props: BannerClientProps) => {
const { name, img, id, type, property = 1, registerYears, creditPoint, memberName, logo, productList, selectedKey } = props;
const { name, img, id, type, property = 1, registerYears, creditPoint, memberName, memberId, roleId, logo, productIds = [], productList = [], selectedKey } = props;
const [mixVisible, setMixVisible] = useState<boolean>(false);
const [actVisible, setActVisible] = useState<boolean>(false);
const [commodityVisible, setCommodityVisible] = useState<boolean>(false);
......@@ -159,28 +155,96 @@ const RecomendShops: React.FC<BannerClientProps> = (props: BannerClientProps) =>
setMixVisible(false);
}
const _onActClose = () => {
setActVisible(false);
}
const _onCommodityClose = () => {
setCommodityVisible(false);
}
const _onChooseConfirm = (record) => {
changeProps({
title: record.name || record.memberName,
props: Object.assign({ ...props }, {
id: record.id,
registerYears: record.registerYears,
creditPoint: record.creditPoint,
memberName: record.name || record.memberName,
logo: record.logo,
memberId: record.memberId,
roleId: record.roleId
})
});
_onShopClose()
}
/**
* 选择店铺商品
* @param record
*/
const _onChooseCommodityListConfirm = (record) => {
const listRes = [...productList, ...record]
if (listRes.length > 3) {
message.error('最多选择3个店铺商品');
return
}
changeProps({
title: record.name || record.memberName,
props: Object.assign({ ...props }, {
productIds: [...productIds, ...record.map((item) => item.id)],
productList: [...productList, ...record]
})
});
_onCommodityClose()
}
const _handleDeleteItem = (deleteId: number) => {
if (deleteId) {
changeProps({
props: Object.assign({ ...props }, {
id: productIds.filter((item) => item !== deleteId),
dataList: productList.filter((item) => item.id !== deleteId)
})
})
}
}
const _recordProductList = useMemo(() => {
if (productList && productList.length > 0) {
return productList.map((item) => (
<>
<div className={styles['banner-record-commodity-detail']}>
<img src={item?.mainPic} />
<div className={styles['banner-record-commodity-detail-right']}>
<Tooltip title={item?.name}>
<div className={styles['banner-record-commodity-detail-right-title']}>{item?.name}</div>
</Tooltip>
<div className={styles['banner-record-commodity-detail-right-price']}>{item?.min ? `¥ ${priceFormat(item?.min)}` : ''}</div>
</div>
<div className={styles['banner-record-commodity-detail-mask']}>
<DeleteOutlined
className={styles['banner-record-commodity-detail-mask-delete']}
onClick={() => _handleDeleteItem(item?.id)}
/>
</div>
</div>
{item?.activityList?.length > 0 && <div className={styles['banner-record-commodity-box']}>
<div className={styles['banner-record-commodity-label']}>商品活动</div>
{item?.activityList?.map((item) => {
return (
<div className={styles['banner-record-commodity-activityList']}>
<img src={ActivityImage} />
<div className={styles['banner-record-commodity-activityList-name']}>{item.name}</div>
<StatusTag title={item.type} type='danger' />
</div>
)
})}
</div>}
</>
))
}
}, [productList])
/**
* 打开选择店铺抽屉
*/
const _onChooseShop = () => {
......@@ -206,6 +270,9 @@ const RecomendShops: React.FC<BannerClientProps> = (props: BannerClientProps) =>
</div>
)
}
{
_recordProductList
}
<MixDrawer
onClose={_onShopClose}
property={property}
......@@ -214,10 +281,14 @@ const RecomendShops: React.FC<BannerClientProps> = (props: BannerClientProps) =>
visible={mixVisible}
/>
<CommodityDrawer
selectId={id}
selectId={productIds}
visible={commodityVisible}
onClose={_onCommodityClose}
onConfirm={_onChooseConfirm}
onConfirm={_onChooseCommodityListConfirm}
selectType='checkbox'
filterParam={{
memberId
}}
/>
</div>
)
......
src/pages/pageCustomized/mobileSettingPanel/propsSettings/index.tsx
View file @ f88de4bd
......@@ -18,6 +18,9 @@ import SuggestProduct from './components/suggestProduct';
import SuggestProductCommodity from './components/suggestProductCommodity';
import CardNavItem from './components/cardNavItem'
import ClassifyLabel from './components/ClassifyLabel'
import MobileQualityCommodityList from './components/mobileQualityCommodityList'
import MobileQualityBrandList from './components/mobileQualityBrandList'
import MobileQualityInformationList from './components/mobileQualityInformationList'
import styles from './index.less';
interface PropsSettingsPropsType {
......@@ -30,9 +33,11 @@ interface PropsSettingsPropsType {
const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
const { selectedInfo, pageConfig, property } = props;
const renderSettingItem = () => {
console.log(selectedInfo, 'selectedInfo')
const { props: initProps, propsConfig, parentKey } = selectedInfo || {};
const _props = { ...initProps, ...props, selectedKey: selectedInfo?.selectedKey }
const componentType = propsConfig?.componentType;
console.log(componentType, 'componentType')
if (componentType) {
switch (componentType.type) {
case PROPS_SETTING_TYPES.mobileHeaderNav:
......@@ -43,6 +48,7 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return <QuickNav {..._props} />;
case PROPS_SETTING_TYPES.mobileShowCase:
return <ShowCase {..._props} />;
case PROPS_SETTING_TYPES.mobileQualityShopList:
case PROPS_SETTING_TYPES.mobileRecommentShops:
return <Shops {..._props} />;
case PROPS_SETTING_TYPES.mobileQuality:
......@@ -77,6 +83,12 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return <SuggestProductCommodity {..._props} />
case PROPS_SETTING_TYPES.mobileNavCardNavItem:
return <CardNavItem {..._props} />
case PROPS_SETTING_TYPES.mobileQualityCommodityList:
return <MobileQualityCommodityList {..._props} />
case PROPS_SETTING_TYPES.mobileQualityBrandList:
return <MobileQualityBrandList {..._props} />
case PROPS_SETTING_TYPES.mobileQualityInformationList:
return <MobileQualityInformationList {..._props} />
default:
return null;
}
......
src/pages/ruleSettingManage/transactionRules/ruleDetails.tsx
View file @ f88de4bd
......@@ -81,7 +81,7 @@ const AddRule:React.FC<{}> = (props) => {
<p>状态：</p>
</Col>
<Col span={21}>
<p>{ruleDetails?.state ? '有效' : '无效'}</p>
<p>{ruleDetails?.status ? '有效' : '无效'}</p>
</Col>
{/* <Col span={3}>
<p>交易流程名称：</p>
......@@ -103,7 +103,7 @@ const AddRule:React.FC<{}> = (props) => {
<p>是否所有会员共用：</p>
</Col>
<Col span={21}>
<p>{ruleDetails?.isTacitlyApprove === 1 ? '是' : '否'}</p>
<p>{ruleDetails?.allMembers ? '是' : '否'}</p>
</Col>
</Row>
<StandardTable
......
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