Skip to content

J
jinfa-platform
Commit 5926dee6 authored by GuanHua's avatar GuanHua
Browse files
Options

fix: 店铺装修活动商品标签问题修复

parent c6f89914
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 193 additions and 36 deletions
src/pages/editor/mobileSettingPanel/propsSettings/components/marketingCardGood/index.tsx
View file @ 5926dee6
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { history } from 'umi';
import { Button, Tooltip } from 'antd';
import { Button, Tooltip, Input, Tag } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { cloneDeep } from 'lodash';
import { changeProps, updatePageConfig, PageConfigType } from '@lingxi-design/core';
import { getMarketingAdornActivityGoodsAdorn, getMarketingAdornMerchantActivityListAdorn, GetMarketingAdornPlatformActivityListAdornRequest } from '@/services/MarketingV2Api';
......@@ -9,22 +10,31 @@ import ActivityProductDrawer from '@/pages/editor/components/drawer/activityProd
import ActivityImage from '@/assets/couponIcons/ActivityImage.svg';
import { priceFormat } from '@/utils/numberFomat';
import styles from './index.less';
import { LAYOUT_TYPE } from '@/constants';
interface MarketingCardGoodProps {
id?: any,
actType?: any,
exType?: any
exType?: any,
tags?: any,
// 当前选中组件的key
selectedKey?: any,
pageConfig?: PageConfigType
pageConfig?: PageConfigType,
layoutType: LAYOUT_TYPE
}
const MarketingCardGood: React.FC<MarketingCardGoodProps> = (props: MarketingCardGoodProps) => {
const { id, actType, exType, pageConfig } = props;
const { id, actType, exType, tags = [], layoutType, pageConfig } = props;
const { query: { shopId } }: any = history.location;
const [record, setRecord] = useState<any>([]);
const [actVisible, setActVisible] = 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>('');
const [inputVisible, setInputVisible] = useState(false);
useEffect(() => {
if (id && id != record[0]?.id) {
......@@ -210,6 +220,47 @@ const MarketingCardGood: React.FC<MarketingCardGoodProps> = (props: MarketingCar
setActVisible(false);
};
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 _handleClose = (removedTag: any) => {
const _tags = tags?.filter(tag => tag !== removedTag);
changeProps({
props: Object.assign({ ...props }, { tags: _tags })
});
};
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 _showInput = () => {
setInputVisible(true)
}
const _record = record[0];
return (
......@@ -234,7 +285,7 @@ const MarketingCardGood: React.FC<MarketingCardGoodProps> = (props: MarketingCar
<div className={styles['suggestProductCommodity-box-label']}>商品活动</div>
{_record?.activityList?.map((item, index) => {
return (
<div className={styles['suggestProductCommodity-activityList']} key={index} onClick={() => { window.open(`/marketing/marketingSearch/preview?id=${item.id}`); }}>
<div className={styles['suggestProductCommodity-activityList']} key={index} onClick={() => { window.open(`/memberCenter/marketingAbility/selfManagement/search/preview?id=${item.id}`); }}>
<img src={ActivityImage} />
<div className={styles['suggestProductCommodity-activityList-name']}>{item.name}</div>
<StatusTag title={item.type} type='danger' />
......@@ -242,6 +293,81 @@ const MarketingCardGood: React.FC<MarketingCardGoodProps> = (props: MarketingCar
);
})}
</div>
{
layoutType === LAYOUT_TYPE.shop && (
<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"
maxLength={16}
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"
maxLength={16}
className={styles['tag-input']}
defaultValue={inputValue}
onChange={_handleInputChange}
onBlur={_handleInputConfirm}
onPressEnter={_handleInputConfirm}
/>
)}
{(!inputVisible && tags.length < 3) && (
<Tag className={styles['site-tag-plus']} onClick={_showInput}>
<PlusOutlined /> 新增标签
</Tag>
)}
</>
</div>
)
}
</>
) : (<Button onClick={() => { setActVisible(true); }}>选择活动商品</Button>)}
<ActivityProductDrawer
......
src/pages/editor/mobileSettingPanel/propsSettings/components/marketingCardHeader/index.tsx
View file @ 5926dee6
......@@ -51,7 +51,7 @@ const MarketingCardHeader: React.FC<MarketingCardHeaderProps> = (props: Marketin
<div className={styles['marketingCardHeader']}>
<div className={styles['marketingCardHeader-box']}>
<div className={styles['marketingCardHeader-box-label']}>标题</div>
<Input key={`${selectedKey}-title`} defaultValue={title || _defaultInfo?.title} onBlur={_onChangeTitle} />
<Input key={`${selectedKey}-title`} maxLength={16} defaultValue={title || _defaultInfo?.title} onBlur={_onChangeTitle} />
</div>
{
layoutType !== LAYOUT_TYPE.shop && (
......
src/pages/editor/mobileSettingPanel/propsSettings/components/suggestProductCommodity/index.tsx
View file @ 5926dee6
......@@ -141,7 +141,7 @@ const SuggestProductCommodity: React.FC<SuggestProductCommodityProps> = (props:
const _handleToDetailPage = (id, belongType) => {
if (belongType === 1) {
window.open(`/marketing/marketingSearch/preview?id=${id}`);
window.open(`/memberCenter/marketingAbility/selfManagement/search/preview?id=${id}`);
} else {
window.open(`/marketingManage/merchantMarketing/merchantMarketingSearch/preview?id=${id}`);
}
......
src/pages/mobileTemplate/shopTemplateEdit/index.tsx
View file @ 5926dee6
......@@ -194,6 +194,16 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
return result
}
const showTagsById = (id: number, tags: any[]) => {
if(tags) {
const currentTag = tags.filter((item) => item.id === id)[0]
if (currentTag) {
return currentTag?.tags || []
}
}
return []
}
const _getCommodityList = async (list: any[]) => {
let listRes: any = []
if (list && Array.isArray(list) && list.length > 0) {
......@@ -318,6 +328,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
direction: 'row',
name: item.productName,
img: item.productImgUrl,
tags: showTagsById(item.id, _details?.tags),
mode: 'horizontal',
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
......@@ -355,7 +366,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
name: item.productName,
img: item.productImgUrl,
mode: 'horizontal',
info: intl.formatMessage({ id: 'editor.marketing.label.plummet' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -392,7 +403,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
name: item.productName,
img: item.productImgUrl,
mode: 'horizontal',
info: intl.formatMessage({ id: 'editor.marketing.label.fullQuantitySub' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -429,7 +440,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.discount' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -466,7 +477,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
direction: 'row',
mode: 'horizontal',
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullQuantityDiscount' }),
tags: showTagsById(item.id, _details?.tags),
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
}
......@@ -502,7 +513,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullMoneySub' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -539,7 +550,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullMoneyDiscount' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -652,7 +663,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.morePiece' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -689,7 +700,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.combination' }),
tags: showTagsById(item.id, _details?.tags),
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
}
......@@ -800,7 +811,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullSwap' }),
tags: showTagsById(item.id, _details?.tags),
isnull: false
}
};
......@@ -835,7 +846,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullSwap' }),
tags: showTagsById(item.id, _details?.tags),
isnull: false
}
};
......@@ -870,7 +881,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.preSale' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -907,7 +918,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.attempt' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -1013,7 +1024,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.attempt' }),
tags: showTagsById(item.id, _details?.tags),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
......@@ -1070,7 +1081,6 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
...defaultConfig
}
const finalConfig = resolveMappingPageConfig(config, allState)
console.log(finalConfig, 'finalConfig')
setComponentConfigs(finalConfig)
setLoading(false)
updatePageConfig(finalConfig)
......
src/pages/mobileTemplate/shopTemplateEdit/marketing_config.ts
View file @ 5926dee6
......@@ -280,6 +280,7 @@ export const marketingConfig_8 = {
style: {
margin: '8px',
},
shopColorType: 8
},
childNodes: ['11-8-1', '11-8-2'],
},
......@@ -323,6 +324,7 @@ export const marketingConfig_9 = {
style: {
margin: '8px',
},
shopColorType: 6
},
childNodes: ['11-9-1', '11-9-2'],
},
......@@ -363,6 +365,7 @@ export const marketingConfig_10 = {
style: {
margin: '8px',
},
shopColorType: 7
},
childNodes: ['11-10-1', '11-10-2'],
},
......@@ -398,6 +401,7 @@ export const marketingConfig_11 = {
style: {
margin: '8px',
},
shopColorType: 8
},
childNodes: ['11-11-1', '11-11-2'],
},
......@@ -432,6 +436,7 @@ export const marketingConfig_12 = {
style: {
margin: '8px',
},
shopColorType: 12
},
childNodes: ['11-12-1', '11-12-2'],
},
......@@ -467,6 +472,7 @@ export const marketingConfig_13 = {
style: {
margin: '8px',
},
shopColorType: 9
},
childNodes: ['11-13-1', '11-13-2'],
},
......@@ -500,6 +506,7 @@ export const marketingConfig_14 = {
style: {
margin: '8px',
},
shopColorType: 13
},
childNodes: ['11-14-1', '11-14-2'],
},
......@@ -535,6 +542,7 @@ export const marketingConfig_15 = {
style: {
margin: '8px',
},
shopColorType: 13
},
childNodes: ['11-15-1', '11-15-2'],
},
......@@ -570,6 +578,7 @@ export const marketingConfig_16 = {
style: {
margin: '8px',
},
shopColorType: 14
},
childNodes: ['11-16-1', '11-16-2'],
},
......@@ -604,6 +613,7 @@ export const marketingConfig_17 = {
style: {
margin: '8px',
},
shopColorType: 16
},
childNodes: ['11-17-1', '11-17-2'],
},
......@@ -679,7 +689,8 @@ export const marketingConfig_18 = {
props: {
style:{
margin: '0 12px'
}
},
shopColorType: 15
},
childComponentName: 'MarketingCard.PackageContainerTabsTabPane',
// addBtnText: '添加子套餐',
......
src/pages/mobileTemplate/shopTemplatePreview/index.tsx
View file @ 5926dee6
......@@ -235,6 +235,15 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
return listRes
}
const showTagsById = (id: number, tags: any[]) => {
if(tags) {
const currentTag = tags.filter((item) => item.id === id)[0]
if (currentTag) {
return currentTag?.tags || []
}
}
return []
}
const getComponentsConfig = async () => {
try {
......@@ -314,6 +323,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
direction: 'row',
name: item.productName,
img: item.productImgUrl,
tags: showTagsById(item.id, _details?.tags),
mode: 'horizontal',
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
......@@ -351,7 +361,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
name: item.productName,
img: item.productImgUrl,
mode: 'horizontal',
info: intl.formatMessage({ id: 'editor.marketing.label.plummet' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -388,7 +398,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
name: item.productName,
img: item.productImgUrl,
mode: 'horizontal',
info: intl.formatMessage({ id: 'editor.marketing.label.fullQuantitySub' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -425,7 +435,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.discount' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -462,7 +472,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
direction: 'row',
mode: 'horizontal',
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullQuantityDiscount' }),
tags: showTagsById(item.id, _details?.tags),
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
}
......@@ -498,7 +508,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullMoneySub' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -535,7 +545,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullMoneyDiscount' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -648,7 +658,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.morePiece' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -685,7 +695,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.combination' }),
tags: showTagsById(item.id, _details?.tags),
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
}
......@@ -796,7 +806,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullSwap' }),
tags: showTagsById(item.id, _details?.tags),
isnull: false
}
};
......@@ -831,7 +841,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.fullSwap' }),
tags: showTagsById(item.id, _details?.tags),
isnull: false
}
};
......@@ -866,7 +876,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.preSale' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -903,7 +913,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.attempt' }),
tags: showTagsById(item.id, _details?.tags),
originalPrice: item.activityPrice ? priceFormat(item.price) : undefined,
discountPrice: priceFormat(item.activityPrice ? item.activityPrice : item.price),
isnull: false
......@@ -1009,7 +1019,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
mode: 'horizontal',
name: item.productName,
img: item.productImgUrl,
info: intl.formatMessage({ id: 'editor.marketing.label.attempt' }),
tags: showTagsById(item.id, _details?.tags),
discountPrice: priceFormat(item.activityPrice),
isnull: false
}
......
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