feat:商品列表接口修改

config/routes/afterServiceRoute.ts

@@ -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

@@ -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

@@ -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

-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])
+
+  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 ? (
+  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}>
+                      <a href={getCommodityDetailLink(childItem)} title={childItem.name} target="_blank">
                         <div className={styles.product_img_box}>
-                        <img src={childItem.imgUrl} />
+                          <ImageBox width={110} height={110} imgUrl={childItem.mainPic} direction="column" />
                         </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>
+                          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>
+        {
+          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

 .comment {
-  margin-top: 20px;
+  margin-bottom: 20px;
 
   .comment_title {
     height: 40px;

src/pages/lxMall/commodityDetail/components/ProductDescription/components/Introduction/index.less

 .introduction {
+  margin-bottom: 20px;
 
   .introduction_list {
     display: flex;

src/pages/lxMall/commodityDetail/components/ProductDescription/components/Recommand/index.less

 .recommand {
-  margin-top: 20px;
+  margin-bottom: 20px;
 
   .recommand_title {
     height: 40px;

src/pages/lxMall/commodityDetail/components/ProductDescription/components/Recommand/index.tsx

 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 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 Recommand: React.FC<RecommandPropsTyep> = (props) => {
+  const { dataList, layoutType } = props
+
+  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

 .trade_record {
-  margin-top: 20px;
+  margin-bottom: 20px;
 
   .trade_record_title {
     height: 40px;

src/pages/lxMall/commodityDetail/components/ProductDescription/index.tsx

@@ -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

@@ -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

@@ -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

@@ -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>