Commit cf6d238f authored by GuanHua's avatar GuanHua

fix: 渠道商城装修商品数据问题

parent d49c55b6
import { ComponentConfigTypes, PROPS_TYPES } from 'lingxi-editor-core';
const MobileChannelBanner: ComponentConfigTypes = {
propsConfig: {
componentType: {
label: '编辑',
type: "mobileChannelBanner" as PROPS_TYPES
},
},
};
export default MobileChannelBanner;
......@@ -25,6 +25,7 @@ import FindMore from './FindMore'
import Information from './Information'
import Footer from './Footer'
import MobileBanner from './MobileBanner'
import MobileChannelBanner from './MobileChannelBanner'
import MobileQuickNav from './MobileQuickNav'
import MobileShopCommodityList from './MobileShopCommodityList'
import MobileShopHeaderNav from './MobileShopHeaderNav'
......@@ -51,6 +52,7 @@ export default {
ChannelHeader,
ShopHeader,
MobileBanner,
MobileChannelBanner,
MobileQuickNav,
MobileShopCommodityList,
MobileShopHeaderNav,
......
......@@ -8,11 +8,10 @@
*/
import { htmlContainers, htmlNonContainers } from './htmlCategory';
import { reactContainers, reactNonContainers } from './reactCategory';
// import * as Ants from 'antd/es';
import * as LingXiUI from 'lingxi-design-ui'
import * as CustomComponents from '../customComponents'
import AllComponentConfigs from './componentConfigs';
import { CategoryType, ConfigType } from 'lingxi-editor-core';
import { ConfigType } from 'lingxi-editor-core';
import { flattenDeepArray } from '../utils';
import { message } from 'antd';
......
@import '../style/common.less';
.@{prefixCls}-banner {
padding: 10px 8px;
z-index: 6;
// margin-top: -50px;
&.hide {
display: none;
}
&-body {
position: relative;
height: 120px;
border-radius: 8px;
overflow: hidden;
background-color: #F2F2F2;
}
&-carousel {
&-item {
height: 120px;
width: 100%;
&-img {
height: 100%;
}
}
}
&-dots {
position: absolute;
bottom: 12px;
right: 12px;
height: 16px;
border-radius: 8px;
background: rgba(0, 0, 0, 0.4);
z-index: 7;
padding: 0 7px;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
&-active {
color: #FFF;
}
}
}
import React, { useState } from 'react'
import { ConfigConsumer } from '../Generator'
import { Carousel } from 'antd'
import { isEmpty } from 'lodash'
import cx from 'classnames'
import ImageBox from '@/components/ImageBox'
import styles from './index.less'
export interface DataItemType {
id: number,
name: string,
img: string,
/** 1: 商品详情 2: 积分详情 5: 不跳转 */
type: number,
}
export interface MobileBannerPropsType {
className?: string,
visible?: boolean,
dataList: DataItemType[],
}
const MobileChannelBanner: React.FC<MobileBannerPropsType> = (props) => {
const { children, className, dataList, visible, ...others } = props
const [currentIndex, setCurrentIndex] = useState<number>(1)
console.log(dataList, "dataList")
const renderChildren = ({ getPrefixCls }: any) => {
const prefixCls = getPrefixCls("banner");
const classNameString = cx(styles[`${prefixCls}`], className, !visible ? styles.hide: null)
const handleCarouselChange = (current: number) => {
setCurrentIndex(current + 1)
}
return (
<div className={classNameString} {...others}>
<div className={styles["lingxi-banner-body"]}>
<Carousel
autoplay
dots={false}
afterChange={handleCarouselChange}
className={styles["lingxi-banner-carousel"]}
>
{
!isEmpty(dataList) && dataList.map(item => (
<div key={item.id} className={styles["lingxi-banner-carousel-item"]}>
{
item.img && <ImageBox style={{ width: "100%" }} width="100%" height={120} imgUrl={item.img} />
}
</div>
))
}
</Carousel>
{
!isEmpty(dataList) && (
<div className={styles["lingxi-banner-dots"]}>
<span className={styles["lingxi-banner-dots-active"]}>{currentIndex}</span>
<span>/ {dataList.length}</span>
</div>
)
}
</div>
</div>
)
}
return <ConfigConsumer>{renderChildren}</ConfigConsumer>
}
MobileChannelBanner.defaultProps = {
dataList: [],
visible: true
}
export default MobileChannelBanner
......@@ -10,3 +10,4 @@ export { default as MobileChannelHeaderNav } from './ChannelHeaderNav'
export { default as MobileChannelGoodsCard } from './ChannelGoodsCard'
export { default as MobileChannelInformation } from './ChannelInformation'
export { default as MobileChannelCategory } from './ChannelCategory'
export { default as MobileChannelBanner } from './ChannelBanner'
......@@ -39,6 +39,9 @@ interface DataItemType {
interface BannerPropsType {
dataList: DataItemType[],
visible: boolean,
type?: string,
channelMemberId?: number,
storeId?: number,
}
const RedirectTypeList = [
......@@ -65,7 +68,7 @@ const modalWidthMap = {
const Banner: React.FC<BannerPropsType> = (props) => {
const { dataList, visible } = props
const { dataList, channelMemberId, storeId, type } = props
const [list, setList] = useState<DataItemType[]>([])
const [modalVisible, setModalVisible] = useState<boolean>(false)
const [currentInfo, setCurrentInfo] = useState<DataItemType>()
......@@ -198,6 +201,7 @@ const Banner: React.FC<BannerPropsType> = (props) => {
newList.map(item => {
if (item.sort === sort) {
item.type = type
item.id = null
item.selectInfo = null
}
})
......@@ -386,55 +390,47 @@ const Banner: React.FC<BannerPropsType> = (props) => {
const fetchTableList = async (param: any) => {
const params: any = {
...param,
}
let getFn: any = null
const headers: any = {}
switch(currentInfo?.type) {
case 1:
params.priceTypeList = [1]
if (currentInfo.id) {
params.idNotInList = [currentInfo.id]
getFn = PublicApi.postSearchMobileShopEnterpriseGetCommodityList
}
if (type === "channel") {
headers.type = "3"
params.channelMemberId = channelMemberId
getFn = PublicApi.postSearchMobileShopChannelGetCommodityList
} else {
params.storeId = storeId
getFn = PublicApi.postSearchMobileShopStoreGetCommodityList
}
break
case 2:
params.priceTypeList = [3]
if (currentInfo.id) {
params.idNotInList = [currentInfo.id]
getFn = PublicApi.postSearchMobileShopScoreGetCommodityList
break
case 3:
params.idList = [currentInfo.id]
getFn = PublicApi.getTemplateWebMemberShopWebPageByIdNotIn
break
case 4:
params.idList = [currentInfo.id]
getFn = PublicApi.getManageContentInformationPageByIdNotIn
}
if (type === "channel") {
headers.type = "3"
params.channelMemberId = channelMemberId
getFn = PublicApi.postSearchMobileShopChannelGetCommodityList
} else {
params.storeId = storeId
getFn = PublicApi.postSearchMobileShopStoreGetCommodityList
}
break
default:
break
}
const res = getFn ? await getFn(params, {ctlType: 'none'}) : await new Promise((resolve) => resolve({data: [], totolCount: 0}))
const res = getFn ? await getFn(params, { headers }) : await new Promise((resolve) => resolve({data: [], totolCount: 0}))
message.destroy()
return res.data
}
/**
* 根据类型显示文案
* @param type
*/
const showTextByType = (type: number) => {
switch(type) {
case 1:
return "商品"
case 2:
return "商品"
case 3:
return "店铺"
case 4:
return "资讯"
default:
return ""
}
}
return (
<div className={styles.setting}>
{/* <div className={styles.hideModule}>
......@@ -449,7 +445,6 @@ const Banner: React.FC<BannerPropsType> = (props) => {
props:Object.assign({ ...props }, { dataList: newList })
})
}
}}
handle=".draghandle"
>
......@@ -517,9 +512,9 @@ const Banner: React.FC<BannerPropsType> = (props) => {
{
item.type !== 5 && (
<div className={styles.setting_line_addItem_line}>
<div className={styles.setting_line_addItem_line_label}>跳转{showTextByType(item.type)}</div>
<div className={styles.setting_line_addItem_line_label}>跳转商品</div>
<div className={styles.setting_line_addItem_line_brief}>
<Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={() => handleOpenSelectModal(item)}>选择{showTextByType(item.type)}</Button>
<Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={() => handleOpenSelectModal(item)}>选择商品</Button>
</div>
</div>
)
......@@ -536,7 +531,7 @@ const Banner: React.FC<BannerPropsType> = (props) => {
</ReactSortable>
<Button className={styles.selectBtn} icon={<PlusOutlined />} onClick={handleAddItem}>添加广告</Button>
<ModalTable
modalTitle={`选择${showTextByType(currentInfo?.type || 1)}`}
modalTitle={`选择商品`}
width={modalWidthMap[currentInfo?.type || 1]}
confirm={handleModalOk}
cancel={handleModalCancel}
......@@ -579,4 +574,8 @@ const Banner: React.FC<BannerPropsType> = (props) => {
)
}
Banner.defaultProps = {
type: "shop"
}
export default Banner
......@@ -21,14 +21,18 @@ export const promptCommodityColumn = [
dataIndex: "name",
width: 300,
ellipsis: true,
// eslint-disable-next-line react/display-name
render: (name: any) => <div dangerouslySetInnerHTML={{ __html: name }}></div>
},
{
title: "品类",
// render: (_, record) => record.customerCategory.name
ellipsis: true,
render: (_, record) => record.customerCategory ? record.customerCategory.name : ""
},
{
title: "品牌",
// render: (_, record) => record.brand.name
ellipsis: true,
render: (_, record) => record.brand ? record.brand.name : ""
},
{
title: "价格",
......
import React from 'react'
import { numFormat, priceFormat } from '@/utils/numberFomat'
import ImageBox from '@/components/ImageBox'
const showMainPic = (mainPic: string) => <ImageBox width={32} height={32} imgUrl={mainPic} />
export const promptCommodityColumn = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
width: 80,
},
{
title: "商品图片",
dataIndex: "mainPic",
render: (mainPic: string) => showMainPic(mainPic)
},
{
title: "商品名称",
dataIndex: "name",
width: 300,
ellipsis: true,
},
{
title: "品类",
// render: (_, record) => record.customerCategory.name
},
{
title: "品牌",
// render: (_, record) => record.brand.name
},
{
title: "价格",
dataIndex: "min",
render: (_, record) => ${priceFormat(record.min)}`
},
]
export const integralCommodityColumn = [
{
title: "商品图片",
dataIndex: "mainPic",
render: (mainPic: string) => showMainPic(mainPic)
},
{
title: "商品名称",
dataIndex: "name",
width: 300,
ellipsis: true,
},
{
title: "需要积分",
dataIndex: "min",
render: (_, record) => `${numFormat(record.min)}`
},
]
export const shopColumn = [
{
title: "店铺图片",
dataIndex: "logo",
render: (logo: string) => showMainPic(logo)
},
{
title: "店铺名称",
dataIndex: "memberName",
width: 300,
ellipsis: true,
},
]
export const informationColumn = [
{
title: "资讯图片",
dataIndex: "imageUrl",
render: (imageUrl: string) => showMainPic(imageUrl)
},
{
title: "资讯标题",
dataIndex: "title",
width: 360,
ellipsis: true,
},
]
const tableColumn = {
1: promptCommodityColumn,
2: integralCommodityColumn,
3: shopColumn,
4: informationColumn
}
export default tableColumn
import { ISchema } from '@formily/antd'
import { FORM_FILTER_PATH } from '@/formSchema/const'
import { PublicApi } from '@/services/api'
export const formProduct: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
'x-component': 'ModalSearch',
'x-component-props': {
placeholder: '搜索',
align: 'flex-left',
},
},
[FORM_FILTER_PATH]: {
type: 'object',
'x-component': 'flex-layout',
'x-component-props': {
rowStyle: {
flexWrap: 'nowrap',
style: {
marginRight: 0
}
},
colStyle: {
marginTop: 20,
},
},
properties: {
customerCategoryId: {
type: 'string',
"x-component": 'SearchSelect',
"x-component-props": {
placeholder: '请选择品类',
className: 'fixed-ant-selected-down', // 该类强制将显示的下拉框出现在select下, 只有这里出现问题, ??
fetchSearch: PublicApi.getProductSelectGetSelectCategory,
style: {
width: 160
}
}
},
brandId: {
type: 'string',
"x-component": 'SearchSelect',
"x-component-props": {
placeholder: '请选择品牌',
fetchSearch: PublicApi.getProductSelectGetSelectPlatformBrand,
style: {
width: 160
}
}
},
submit: {
"x-component": 'Submit',
"x-mega-props": {
span: 1
},
"x-component-props": {
children: '查询'
}
}
}
}
}
}
export const basicSchema: ISchema = {
type: 'object',
properties: {
name: {
type: 'string',
'x-component': 'Search',
'x-component-props': {
placeholder: '搜索',
align: 'flex-left',
},
},
}
}
......@@ -21,6 +21,8 @@ export const promptCommodityColumn = [
dataIndex: "name",
width: 280,
ellipsis: true,
// eslint-disable-next-line react/display-name
render: (name: any) => <div dangerouslySetInnerHTML={{ __html: name }}></div>
},
{
title: "品类",
......
......@@ -31,6 +31,8 @@ const PropsSettings: React.FC<PropsSettingsPropsType> = (props) => {
return <HeaderNav {...initProps} />
case PROPS_TYPES.mobileBanner:
return <Banner {...initProps} />
case "mobileChannelBanner":
return <Banner {...initProps} type="channel" />
case PROPS_TYPES.mobileQuickNav:
return <QuickNav {...initProps} />
case PROPS_TYPES.mobileChannelGoodsCard:
......
......@@ -86,8 +86,8 @@ export const divWrap = {
export const mobileBanner = {
key: "3",
"3": {
"componentName": "MobileBanner",
"componentType": PROPS_TYPES.mobileBanner,
"componentName": "MobileChannelBanner",
"componentType": "mobileChannelBanner",
"title": "轮播广告",
"canEdit": true,
"canHide": false,
......
......@@ -173,7 +173,6 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
const getComponentsConfig = async () => {
try {
const appConfig = await getAppChannelConfig()
console.log(appConfig, "appConfig")
//渠道信息
const channelInfo = await fetchChannelInfo()
......@@ -190,6 +189,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
}
if (appConfig?.advertBO) {
mobileBanner[mobileBanner.key].props.channelMemberId = channelInfo.memberId
mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
}
......
......@@ -171,7 +171,6 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
const getComponentsConfig = async () => {
try {
const appConfig = await getAppChannelConfig()
console.log(appConfig, "appConfig")
//渠道信息
const channelInfo = await fetchChannelInfo()
......
......@@ -163,6 +163,7 @@ const mobileShopTempleteEdit: React.FC<ShopPreviewPropsType> = (props) => {
}
if(appConfig?.advertBO) {
mobileBanner[mobileBanner.key].props.storeId = shopInfo.id
mobileBanner[mobileBanner.key].props.dataList = appConfig?.advertBO.advertDetailsBOList
}
......
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