Skip to content

J
jinfa-platform
Commit 517b09fb authored by GuanHua's avatar GuanHua
Browse files
Options

feat:进货单推荐商品显示

parent ec7c8596
Hide whitespace changes
Inline Side-by-side
Showing with 266 additions and 102 deletions
src/pages/lxMall/commodityDetail/index.tsx
View file @ 517b09fb
......@@ -197,7 +197,7 @@ const CommodityDetail = (props) => {
/**
* 获取供货商的支付方式
* @param memberId
* @param memberId
*/
const getPayWayListByMemberId = (memberId: number) => {
if (!memberId) {
......@@ -951,7 +951,7 @@ const CommodityDetail = (props) => {
<div className={cx(styles.add_success_btn, styles.primary)} onClick={() => history.push(getPurchaseOrderLink())}>去结算</div>
<div className={styles.add_success_btn} onClick={() => setAddSuccessVisible(false)}>继续购物</div>
</div>
<InterestedCommodity />
<InterestedCommodity dataList={commonCategoryCommodityList} {...props} />
</DialogModal>
</div>
)
......
src/pages/lxMall/components/InterestedCommodity/index.less
View file @ 517b09fb
......@@ -59,7 +59,7 @@
margin-top: 5px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
......
src/pages/lxMall/components/InterestedCommodity/index.tsx
View file @ 517b09fb
import React from 'react'
import React, { useState, useEffect } from 'react'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import cx from 'classnames'
import ImageBox from '@/components/ImageBox'
import { LAYOUT_TYPE } from '@/constants'
import { priceFormat } from '@/utils/numberFomat'
import styles from './index.less'
import url from '*.svg'
const InterestedCommodity: React.FC = () => {
interface InterestedCommodityPropsType {
dataList: any,
layoutType?: LAYOUT_TYPE
}
const InterestedCommodity: React.FC<InterestedCommodityPropsType> = (props) => {
const { dataList, layoutType } = props
const [list, setList] = useState<any>([])
const arrGroup = (array, subGroupLength) => {
let index = 0;
let newArray = [];
while (index < array.length) {
newArray.push(array.slice(index, index += subGroupLength));
}
return newArray;
}
useEffect(() => {
if (dataList) {
setList(arrGroup(dataList, 5))
}
}, [dataList])
let mockList = []
for (let i = 0; i < 5; i++) {
mockList.push({
url: "https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1.jpg",
name: '0.8-1.0mm黑色手纹硬度适中偏软偏软偏软',
price: '79.00'
})
const getCommodityDetailLink = (item) => {
let link = ""
switch (layoutType) {
case LAYOUT_TYPE.channel:
link = `/channelmall/commodity/detail?id=${item.id}&type=${item.priceType}&channelId=${btoa(JSON.stringify({ shopId: item.storeId, memberId: item.memberId }))}`
break
case LAYOUT_TYPE.ichannel:
link = `/ichannelmall/commodity/detail?id=${item.id}&type=${item.priceType}&channelId=${btoa(JSON.stringify({ shopId: item.storeId, memberId: item.memberId }))}`
break
default:
link = `/shop/commodity/detail?id=${item.id}&type=${item.priceType}&shopId=${btoa(JSON.stringify({ shopId: item.storeId, memberId: item.memberId }))}`
break
}
return link
}
return (
<div className={styles.interested_commodity}>
<div className={styles.interested_commodity_title}>
<span>您可能也感兴趣：</span>
<div className={styles.interested_commodity_pagination}>
{/* <div className={styles.interested_commodity_pagination}>
<div className={cx(styles.interested_commodity_pagination_btn, styles.disabled)}><LeftOutlined /></div>
<div className={cx(styles.interested_commodity_pagination_btn)}><RightOutlined /></div>
</div>
</div> */}
</div>
<div className={styles.interested_commodity_list}>
{
mockList.map(item => (
<div className={styles.interested_commodity_list_item}>
<div className={styles.interested_commodity_list_item_imgbox}>
<div className={styles.interested_commodity_list_item_imgbox_img} style={{ backgroundImage: `url(${item.url})` }}></div>
</div>
<div className={styles.interested_commodity_list_item_name}>{item.name}</div>
<div className={styles.interested_commodity_list_item_price}>
<i>￥</i>
{item.price}
</div>
dataList && dataList.map((item, index) => index < 5 && (
<div className={styles.interested_commodity_list_item} key={`interested_commodity_list_item_${item.id}`}>
<a href={getCommodityDetailLink(item)} target="_blank">
<div className={styles.interested_commodity_list_item_imgbox}>
<ImageBox width={100} height={100} imgUrl={item.mainPic} direction="column" />
</div>
<div className={styles.interested_commodity_list_item_name}>{item.name}</div>
<div className={styles.interested_commodity_list_item_price}>
<i>￥</i>
{priceFormat(item.min)}
</div>
</a>
</div>
))
}
</div>
</div>
)
......
src/pages/lxMall/components/Recommand/index.tsx
View file @ 517b09fb
import React from 'react'
import './index.less'
const Recommand: React.FC = () => {
const product_list = [
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
name: '0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软…',
price: '19.00'
import React, { useEffect, useState } from 'react'
import { PublicApi } from '@/services/api'
import ImageBox from '@/components/ImageBox'
import { inject, observer } from 'mobx-react'
import { message } from 'antd'
import { LAYOUT_TYPE } from '@/constants'
import { priceFormat } from '@/utils/numberFomat'
import styles from './index.less'
interface RecommandPropsType {
SiteStore?: any,
layoutType: LAYOUT_TYPE,
categoryIds: number[], // 商品品类集合
loading: boolean,
memberId?: number
}
const Recommand: React.FC<RecommandPropsType> = (props) => {
const { mallTemplateId } = props.SiteStore
const { layoutType, categoryIds, loading, memberId } = props
const [list, setList] = useState<any>([])
useEffect(() => {
if (loading) {
if (categoryIds && categoryIds.length > 0) {
getCommodityListByCategoryIds()
} else {
getCategoryComponents()
}
}
}, [loading])
const getCommodityListByCategoryIds = async () => {
let result = []
for (let id of categoryIds) {
let resList: any = await getListById(id)
result = [...result, ...resList]
if (result && result.length >= 5) {
setList(result)
break
}
}
console.log(result, "result")
if (result.length <= 0) {
getCategoryComponents()
}
}
const getListById = (categoryId: number) => {
return new Promise((resolve) => {
let param: any = {
current: 1,
pageSize: 5,
categoryId
}
let headers = {}
let getListFn
switch (layoutType) {
case LAYOUT_TYPE.channel:
headers = {
type: 3
}
param.channelMemberId = memberId
getListFn = PublicApi.postSearchShopChannelGetCommodityList
break
case LAYOUT_TYPE.ichannel:
headers = {
type: 4
}
param.channelMemberId = memberId
getListFn = PublicApi.postSearchShopChannelGetCommodityList
break
default:
getListFn = PublicApi.postSearchShopEnterpriseGetCommodityList
break
}
getListFn && getListFn(param, { headers }).then(res => {
if (res.code === 1000) {
message.destroy()
resolve(res.data.data)
}
})
})
}
/**
* 获取所有一级品类信息
*/
const fetchFirstCategory = () => {
return new Promise((resolve) => {
PublicApi.getTemplatePlatformFindAllFirstCategory().then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
}
/**
* 获取一级品类详细信息
*/
const fetchCategoryById = (categoryId) => {
return new Promise((resolve) => {
let param = {
templateId: mallTemplateId,
categoryId
}
// @ts-ignore
PublicApi.getTemplatePlatformFindFirstCategoryDetail(param).then(res => {
if (res.code === 1000) {
resolve(res.data)
}
})
})
}
const getCategoryComponents = async () => {
let firstCategory: any = await fetchFirstCategory()
let categoryDetail: any = await fetchCategoryById(firstCategory[0].id)
setList(categoryDetail.goodsBOList)
}
const getCommodityDetailLink = (item) => {
let link = ""
switch (layoutType) {
case LAYOUT_TYPE.channel:
link = `/channelmall/commodity/detail?id=${item.goodsId}&channelId=${btoa(JSON.stringify({ shopId: item.shopId, memberId: item.memberId }))}`
break
case LAYOUT_TYPE.ichannel:
link = `/ichannelmall/commodity/detail?id=${item.goodsId}&channelId=${btoa(JSON.stringify({ shopId: item.shopId, memberId: item.memberId }))}`
break
default:
link = `/shop/commodity/detail?id=${item.goodsId}&shopId=${btoa(JSON.stringify({ shopId: item.shopId, memberId: item.memberId }))}`
break
}
]
return link
}
return (
<div className="recommand">
<div className="recommand_title">买家还在看</div>
<div className="recommand_list">
<div className={styles.recommand}>
<div className={styles.recommand_title}>买家还在看</div>
<div className={styles.recommand_list}>
{
product_list.map((item, index) => (
<a href="/" key={`recommand_list_item_${index}`}>
<div className="recommand_list_item">
<div className="recommand_list_item_img">
<img src={item.imgUrl} />
list && list.map((item, index) => index < 5 && (
<a href={getCommodityDetailLink(item)} key={`recommand_list_item_${index}`} target="_blank">
<div className={styles.recommand_list_item}>
<div className={styles.recommand_list_item_img}>
<ImageBox width={224} height={224} imgUrl={item.goodsPicUrl} direction="column" />
</div>
<div className="recommand_list_item_price">
<div className={styles.recommand_list_item_price}>
<span>￥</span>
{item.price}
{priceFormat(item.goodsPrice)}
</div>
<div className="recommand_list_item_name">{item.name}</div>
<div className={styles.recommand_list_item_name}>{item.goodsName}</div>
</div>
</a>
))
......@@ -56,4 +162,4 @@ const Recommand: React.FC = () => {
)
}
export default Recommand
export default inject('SiteStore')(observer(Recommand))
src/pages/lxMall/index/index.tsx
View file @ 517b09fb
......@@ -96,39 +96,41 @@ const MallIndex: React.FC<MallIndexPropsType> = (props) => {
let firstCategory: any = await fetchFirstCategory()
for (let item of firstCategory) {
let categoryDetail: any = await fetchCategoryById(item.id)
result.push(
<FloorLine
linkUrl={`/commodity?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
anchor={`floorline_${item.id}`}
key={item.id}
title={item.name}
>
<FloorLine.Horizontal>
<FloorLine.Category
linkUrl={`/commodity?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
subLinkUrl={`/commodity`}
categoryAdvertPicUrl={categoryDetail.categoryAdvertPicUrl}
secondCategoryList={categoryDetail.categoryBOList}
/>
<FloorLine.Vertical>
<FloorLine.FloorHeader
shopNum={categoryDetail.shopNum}
goodsNum={categoryDetail.goodsNum}
if (item.id) {
let categoryDetail: any = await fetchCategoryById(item.id)
result.push(
<FloorLine
linkUrl={`/commodity?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
anchor={`floorline_${item.id}`}
key={item.id}
title={item.name}
>
<FloorLine.Horizontal>
<FloorLine.Category
linkUrl={`/commodity?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
shopsLinkUrl={`/shops?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
>
<FloorLine.Banner advertList={categoryDetail.thirdAdvertList} />
</FloorLine.FloorHeader>
<FloorLine.Horizontal>
<FloorLine.Goods goodsList={categoryDetail.goodsBOList} linkUrl={`/shop/commodity/detail`} />
<FloorLine.Shops shopsList={categoryDetail.shopBOList} linkUrl={`/shop`} />
</FloorLine.Horizontal>
</FloorLine.Vertical>
</FloorLine.Horizontal>
<FloorLine.Brand brandList={categoryDetail.brandBOList} linkUrl='/commodity' />
</FloorLine>
)
subLinkUrl={`/commodity`}
categoryAdvertPicUrl={categoryDetail.categoryAdvertPicUrl}
secondCategoryList={categoryDetail.categoryBOList}
/>
<FloorLine.Vertical>
<FloorLine.FloorHeader
shopNum={categoryDetail.shopNum}
goodsNum={categoryDetail.goodsNum}
linkUrl={`/commodity?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
shopsLinkUrl={`/shops?categoryId=${item.id}&categoryName=${btoa(encodeURIComponent(item.name))}`}
>
<FloorLine.Banner advertList={categoryDetail.thirdAdvertList} />
</FloorLine.FloorHeader>
<FloorLine.Horizontal>
<FloorLine.Goods goodsList={categoryDetail.goodsBOList} linkUrl={`/shop/commodity/detail`} />
<FloorLine.Shops shopsList={categoryDetail.shopBOList} linkUrl={`/shop`} />
</FloorLine.Horizontal>
</FloorLine.Vertical>
</FloorLine.Horizontal>
<FloorLine.Brand brandList={categoryDetail.brandBOList} linkUrl='/commodity' />
</FloorLine>
)
}
}
setCategoryComponents(result)
}
......
src/pages/lxMall/purchaseOrder/index.tsx
View file @ 517b09fb
......@@ -31,12 +31,20 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
const [checkedList, setCheckedList] = useState([])
const [orderList, setOrderList] = useState([])
const [confirmLoading, setConfirmLoading] = useState<boolean>(false)
const [categoryIds, setCategoryIds] = useState<any>()
const [loading, setLoading] = useState<boolean>(false)
let countState = true
useEffect(() => {
fetchPurchaseList()
}, [])
useEffect(() => {
if (categoryIds) {
setLoading(true)
}
}, [categoryIds])
const fetchPurchaseList = (initState = false) => {
let getFn
switch (layoutType) {
......@@ -52,10 +60,26 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
getFn && getFn().then(res => {
if (res.code === 1000) {
initPurchaseList(res.data, initState)
getCategoryIds(res.data)
}
})
}
/**
* 获取进货单内商品品类id集合
* @param purchaseList
*/
const getCategoryIds = (purchaseList) => {
let ids = []
for (let item of purchaseList) {
let categoryId = item.commodityUnitPrice.commodity.customerCategory.id
if (!ids.includes(categoryId)) {
ids.push(categoryId)
}
}
setCategoryIds(ids)
}
const initPurchaseList = (list: GetSearchShopPurchaseGetPurchaseListResponse, initState) => {
let result = []
for (let item of list) {
......@@ -691,7 +715,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
</Affix>
)
}
<Recommand />
<Recommand loading={loading} categoryIds={categoryIds} {...props} />
</div>
</div>
)
......
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