Skip to content

J
jinfa-platform
Commit 4f085cc4 authored by GuanHua's avatar GuanHua
Browse files
Options

feat:商品列表接口修改

parent 1f14e759
Hide whitespace changes
Inline Side-by-side
Showing with 196 additions and 113 deletions
config/routes/afterServiceRoute.ts
View file @ 4f085cc4
......@@ -38,10 +38,23 @@ const AfterServiceRoute = {
},
{
// 待提交换货申请单新增或修改
path: '/memberCenter/afterService/exchange/waitSubmitOrderList/:type',
path: '/memberCenter/afterService/exchange/waitSubmitOrderList/add',
name: 'waitSubmitOrderList',
hideInMenu: true,
component: '@/pages/afterService/exchangeGoods/waitSubmitOrderList/detail'
},
{
// 待提交换货申请单新增或修改
path: '/memberCenter/afterService/exchange/waitSubmitOrderList/edit',
name: 'waitSubmitOrderList',
hideInMenu: true,
component: '@/pages/afterService/exchangeGoods/waitSubmitOrderList/detail'
},
{
// 待提交换货申请单新增或修改
path: '/memberCenter/afterService/exchange/waitSubmitOrderList/detail',
name: 'waitSubmitOrderList',
hideInMenu: true,
noMargin: true,
component: '@/pages/afterService/exchangeGoods/waitSubmitOrderList/detail'
},
{
......
src/pages/afterService/exchangeGoods/waitSubmitOrderList/detail.tsx
View file @ 4f085cc4
......@@ -28,6 +28,8 @@ const OrderDetail: React.FC<OrderDetailProps> = (props) => {
return '提交换货申请单'
case 'edit':
return '编辑换货申请单'
case 'detail':
return '查看详情'
default:
return ''
}
......
src/pages/lxMall/commodity/index.tsx
View file @ 4f085cc4
......@@ -12,7 +12,7 @@ import { useLocalStore, observer } from 'mobx-react'
import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import { PostSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import bannerImg from '@/assets/imgs/banner_2.png'
import arrowDownIcon from '@/assets/imgs/arrow_down.png'
import arrowDownActiveIcon from '@/assets/imgs/arrow_down_active.png'
......@@ -55,7 +55,7 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
const { query: { categoryId, categoryName, brandId, brandName, priceType } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [commodityList, setCommodityList] = useState<GetSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
const [commodityList, setCommodityList] = useState<PostSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
const [current, setCurrent] = useState<number>(1)
const [pageSize] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
......@@ -121,25 +121,25 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
let headers = {}
switch (layoutType) {
case LAYOUT_TYPE.mall:
getFn = PublicApi.getSearchShopEnterpriseGetCommodityList
getFn = PublicApi.postSearchShopEnterpriseGetCommodityList
break
case LAYOUT_TYPE.shop:
param.storeId = shopId
getFn = PublicApi.getSearchShopStoreGetCommodityList
getFn = PublicApi.postSearchShopStoreGetCommodityList
break
case LAYOUT_TYPE.channel:
param.channelMemberId = memberId
headers = {
type: 3
}
getFn = PublicApi.getSearchShopChannelGetCommodityList
getFn = PublicApi.postSearchShopChannelGetCommodityList
break
case LAYOUT_TYPE.ichannel:
param.channelMemberId = memberId
headers = {
type: 4
}
getFn = PublicApi.getSearchShopChannelGetCommodityList
getFn = PublicApi.postSearchShopChannelGetCommodityList
break
}
......
src/pages/lxMall/commodityDetail/components/BrowseRecords/index.tsx
View file @ 4f085cc4
import React, { useRef } from 'react'
import React, { useRef, useState, useEffect } from 'react'
import { Carousel } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import cx from 'classnames'
import { COMMODITY_TYPE } from '@/constants'
import { COMMODITY_TYPE, LAYOUT_TYPE } from '@/constants'
import { priceFormat, numFormat } from '@/utils/numberFomat'
import ImageBox from '@/components/ImageBox'
import styles from './index.less'
interface BrowseRecordsPropsType {
priceType: COMMODITY_TYPE
priceType: COMMODITY_TYPE,
dataList: any,
layoutType: LAYOUT_TYPE,
}
const BrowseRecords: React.FC<BrowseRecordsPropsType> = (props) => {
const { priceType } = props
const actionRef = useRef<any>()
const { priceType, dataList, layoutType } = props
const [list, setList] = useState<any>([])
const product_list = [
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
price: '19.00'
},
{
imgUrl: 'https://woodmartcdn-cec2.kxcdn.com/wp-content/uploads/2016/09/product-furniture-1-6.jpg',
price: '19.00'
},
]
const actionRef = useRef<any>()
const arrGroup = (array, subGroupLength) => {
let index = 0;
......@@ -45,9 +28,29 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = (props) => {
return newArray;
}
const new_product_list = arrGroup(product_list, 3)
useEffect(() => {
if (dataList) {
setList(arrGroup(dataList, 3))
}
}, [dataList])
return priceType ? (
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 (priceType && list.length > 0) ? (
<div className={styles.browse_records}>
<div className={styles.browse_records_title}>
<span className={styles.browse_records_title_line}></span>
......@@ -57,19 +60,20 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = (props) => {
<div className={styles.carousel_wrap}>
<Carousel ref={actionRef}>
{
new_product_list.map((item, index) => (
list && list.map((item, index) => (
<div key={`product_list_${index}`} className={styles.browse_records_product_list}>
{
item.map((childItem, childIndex) => (
<div key={`browse_records_product_list_item_${childIndex}`} className={styles.browse_records_product_list_item}>
<div className={styles.product_img_box}>
<img src={childItem.imgUrl} />
</div>
{
priceType === COMMODITY_TYPE.integral ? <div className={cx(styles.product_price, styles.integral)}>2,000~3,000积分</div> :
<div className={styles.product_price}>￥{childItem.price}</div>
}
<a href={getCommodityDetailLink(childItem)} title={childItem.name} target="_blank">
<div className={styles.product_img_box}>
<ImageBox width={110} height={110} imgUrl={childItem.mainPic} direction="column" />
</div>
{
priceType === COMMODITY_TYPE.integral ? <div className={cx(styles.product_price, styles.integral)}>{numFormat(childItem.min)}~{numFormat(childItem.max)}积分</div> :
<div className={styles.product_price}>￥{priceFormat(childItem.min)}</div>
}
</a>
</div>
))
}
......@@ -77,8 +81,14 @@ const BrowseRecords: React.FC<BrowseRecordsPropsType> = (props) => {
))
}
</Carousel>
<LeftOutlined className={cx(styles.common_arrow_btn, styles.prev)} onClick={() => actionRef.current.prev()} />
<RightOutlined className={cx(styles.common_arrow_btn, styles.next)} onClick={() => actionRef.current.next()} />
{
list.length > 1 && (
<>
<LeftOutlined className={cx(styles.common_arrow_btn, styles.prev)} onClick={() => actionRef.current.prev()} />
<RightOutlined className={cx(styles.common_arrow_btn, styles.next)} onClick={() => actionRef.current.next()} />
</>
)
}
</div>
</div>
) : null
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Comment/index.less
View file @ 4f085cc4
.comment {
margin-top: 20px;
margin-bottom: 20px;
.comment_title {
height: 40px;
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Introduction/index.less
View file @ 4f085cc4
.introduction {
margin-bottom: 20px;
.introduction_list {
display: flex;
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Recommand/index.less
View file @ 4f085cc4
.recommand {
margin-top: 20px;
margin-bottom: 20px;
.recommand_title {
height: 40px;
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/Recommand/index.tsx
View file @ 4f085cc4
import React from 'react'
import { LAYOUT_TYPE } from '@/constants'
import ImageBox from '@/components/ImageBox'
import styles from './index.less'
const Recommand: React.FC = () => {
interface RecommandPropsTyep {
dataList: any,
layoutType?: LAYOUT_TYPE
}
const Recommand: React.FC<RecommandPropsTyep> = (props) => {
const { dataList, layoutType } = props
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'
},
{
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'
},
]
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 (
return (dataList && dataList.length > 0) && (
<div className={styles.recommand}>
<div className={styles.recommand_title}>买家还在看</div>
<div className={styles.recommand_list}>
{
product_list.map((item, index) => (
<a href="/shop/commodity/detail?id=asdjflewjfe&type=prompt" key={`recommand_list_item_${index}`}>
dataList && dataList.map((item, index) => (
<a href={getCommodityDetailLink(item)} key={`recommand_list_item_${index}`}>
<div className={styles.recommand_list_item}>
<div className={styles.recommand_list_item_img}>
<img src={item.imgUrl} />
<ImageBox width={184} height={184} imgUrl={item.mainPic} direction="column" />
</div>
<div className={styles.recommand_list_item_name}>{item.name}</div>
<div className={styles.recommand_list_item_price}>
<span>￥</span>
{item.price}
{item.min}
</div>
</div>
</a>
......
src/pages/lxMall/commodityDetail/components/ProductDescription/components/TradeRecord/index.less
View file @ 4f085cc4
.trade_record {
margin-top: 20px;
margin-bottom: 20px;
.trade_record_title {
height: 40px;
......
src/pages/lxMall/commodityDetail/components/ProductDescription/index.tsx
View file @ 4f085cc4
......@@ -12,11 +12,12 @@ import styles from './index.less'
const { Link } = Anchor
interface ProductDescriptionPropsType {
commodityDetail: GetSearchShopStoreGetCommodityDetailResponse
commodityDetail: GetSearchShopStoreGetCommodityDetailResponse,
dataList: any,
}
const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
const { commodityDetail } = props
const { commodityDetail, dataList } = props
const [currentAnchor, setCurrentAnchor] = useState<string>("#introduction")
const handleAnchorChange = (currentActiveLink: string) => {
......@@ -40,7 +41,7 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
<Introduction commodityDetail={commodityDetail} />
<TradeRecord />
<Comment />
<Recommand />
<Recommand dataList={dataList} {...props} />
</div>
)
}
......
src/pages/lxMall/commodityDetail/index.tsx
View file @ 4f085cc4
......@@ -71,6 +71,8 @@ const CommodityDetail = (props) => {
const [buyCount, setBuyCount] = useState<number>(1)
const [purchaseCount, setPurchaseCount] = useState<number>(0)
const [payWayList, setPayWayList] = useState([])
const [commonCategoryCommodityList, setCommonCategoryCommodityList] = useState([])
let clickFlag = true
useEffect(() => {
......@@ -78,6 +80,74 @@ const CommodityDetail = (props) => {
}, [])
/**
* 获取”买家还在看“商品列表
* @param categoryId
* @param priceType
*/
const fetchCommonCategoryCommodityList = (categoryId: number, priceType: number) => {
let param: any = {
current: 1,
pageSize: 10,
categoryId
}
let headers = {}
let getListFn
switch (layoutType) {
case LAYOUT_TYPE.shop:
switch (priceType) {
case COMMODITY_TYPE.prompt:
getListFn = PublicApi.postSearchShopEnterpriseGetCommodityList
break
case COMMODITY_TYPE.inquiry:
getListFn = PublicApi.postSearchShopScoreGetCommodityList
break
case COMMODITY_TYPE.integral:
break
default:
break
}
break;
case LAYOUT_TYPE.channel:
if (priceType === COMMODITY_TYPE.prompt) {
param.channelMemberId = memberId
headers = {
type: 3
}
} else {
param.channelMemberId = memberId
param.priceType = 3
headers = {
type: 3
}
}
getListFn = PublicApi.postSearchShopChannelGetCommodityList
break
case LAYOUT_TYPE.ichannel:
if (priceType === COMMODITY_TYPE.prompt) {
param.channelMemberId = memberId
headers = {
type: 4
}
} else {
param.channelMemberId = memberId
param.priceType = 3
headers = {
type: 4
}
}
getListFn = PublicApi.postSearchShopChannelGetCommodityList
break
default:
break;
}
getListFn && getListFn(param, { headers }).then(res => {
if (res.code === 1000) {
setCommonCategoryCommodityList(res.data.data)
}
})
}
/**
* 获取商品详情
*/
const fetchDetail = () => {
......@@ -109,10 +179,14 @@ const CommodityDetail = (props) => {
getDetailFn && getDetailFn(params, { headers }).then(res => {
if (res.code === 1000) {
// res.data.priceType = 3
setCommodityDetail(res.data)
initAttributeAndValueList(res.data)
getPayWayListByMemberId(res.data?.memberId)
if (res.data.customerCategory.category) {
fetchCommonCategoryCommodityList(res.data.customerCategory.category.id, res.data.priceType)
}
if (getAuth() && res.data?.isMemberPrice) {
getMemberCredit(res.data?.memberId, res.data?.memberRoleId)
}
......@@ -842,7 +916,7 @@ const CommodityDetail = (props) => {
</div>
</div>
</div>
<BrowseRecords priceType={commodityDetail?.priceType} />
<BrowseRecords priceType={commodityDetail?.priceType} dataList={commonCategoryCommodityList} {...props} />
</div>
<div className={styles.commodity_detail_body}>
<div className={styles.commodity_detail_body_left}>
......@@ -852,7 +926,7 @@ const CommodityDetail = (props) => {
<Interested priceType={commodityDetail?.priceType} />
</div>
<div className={styles.commodity_detail_body_right}>
<ProductDescription commodityDetail={commodityDetail} />
<ProductDescription commodityDetail={commodityDetail} dataList={commonCategoryCommodityList} {...props} />
</div>
</div>
</div>
......
src/pages/lxMall/pointsMall/index.tsx
View file @ 4f085cc4
......@@ -12,7 +12,7 @@ import { store } from '@/store'
import { PublicApi } from '@/services/api'
import { LAYOUT_TYPE } from '@/constants'
import cx from 'classnames'
import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import { PostSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
import bannerImg from '@/assets/imgs/banner_2.png'
import styles from './index.less'
......@@ -48,7 +48,7 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
const { query: { categoryId, categoryName } } = props.location
const [loading, setLoading] = useState<boolean>(true)
const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
const [commodityList, setCommodityList] = useState<GetSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
const [commodityList, setCommodityList] = useState<PostSearchShopEnterpriseGetCommodityListResponseDetail[]>([])
const [current, setCurrent] = useState<number>(1)
const [pageSize] = useState<number>(20)
const [totalCount, setTotalCount] = useState<number>(0)
......@@ -82,11 +82,8 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
}
setLoading(true)
let headers = {}
let getFn = PublicApi.getSearchShopScoreGetCommodityList
let getFn
switch (layoutType) {
case LAYOUT_TYPE.shop:
param.storeId = shopId
break
case LAYOUT_TYPE.channel:
case LAYOUT_TYPE.ichannel:
headers = {
......@@ -94,7 +91,10 @@ const PointsMall: React.FC<CommodityPropsType> = (props) => {
}
param.channelMemberId = memberId
param.priceType = 3
getFn = PublicApi.getSearchShopChannelGetCommodityList
getFn = PublicApi.postSearchShopChannelGetCommodityList
break
default:
getFn = PublicApi.postSearchShopScoreGetCommodityList
break
}
......
src/pages/lxMall/purchaseOrder/index.tsx
View file @ 4f085cc4
......@@ -8,6 +8,7 @@ import styles from './index.less'
import { PublicApi } from '@/services/api'
import { priceFormat, numFormat } from "@/utils/numberFomat"
import { useLocalStore, observer } from 'mobx-react'
import ImageBox from '@/components/ImageBox'
import { store } from '@/store'
import { LAYOUT_TYPE } from '@/constants'
import { GetSearchShopPurchaseGetPurchaseListResponse } from '@/services/SearchApi'
......@@ -615,7 +616,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
</div>
<div className={cx(styles.order_list_item_item, styles.goods_info)}>
<div className={styles.order_list_item_item_imgbox}>
<div className={styles.order_list_item_item_imgbox_img} style={{ backgroundImage: `url(${childItem.commodityUnitPrice.commodityPic[0]})` }}></div>
<ImageBox width={80} height={80} imgUrl={childItem.commodityUnitPrice.commodityPic[0]} direction="column" />
</div>
<div>
<div className={styles.order_list_item_item_name}>{childItem.commodityUnitPrice.commodity.name}</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