feat:商品列表和详情接口对接

src/pages/lxMall/commodity/index.less

@@ -4,7 +4,9 @@
 
   .commodity_container {
     display: flex;
-    margin-top: 20px;
+    padding-top: 20px;
+    width: 1200px;
+    margin: 0 auto;
 
     .commodity_main {
       flex: 1;
@@ -155,6 +157,7 @@
         margin-top: 60px;
         text-align: right;
 
+        :global {
           .ant-pagination-item {
 
             &:hover,
@@ -171,10 +174,17 @@
             background-color: var(--mall_main_color);
             border-color: var(--mall_main_color);
 
+            &:hover {
               &>a {
                 color: #ffffff;
               }
             }
+
+            &>a {
+              color: #ffffff;
+            }
+          }
+        }
       }
     }
   }

src/pages/lxMall/commodity/index.tsx

-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { CaretUpOutlined, CaretDownOutlined, UnorderedListOutlined, AppstoreOutlined, CloseOutlined } from '@ant-design/icons'
 import Filter, { FilterType } from '../components/Filter'
 import cx from 'classnames'
 import { Pagination } from 'antd'
 import CommodityList from './list'
 import NoResult from './noResult'
+import isEmpty from 'lodash/isEmpty'
+import { PublicApi } from '@/services/api'
+import { GetSearchCommodityShopGetCommodityListResponseDetail } from '@/services'
 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'
-import './index.less'
+import styles from './index.less'
 
 interface filterValueType {
   key: string;
@@ -29,13 +32,57 @@ interface CommodityPropsType {
   location: any
 }
 
+interface filterQuery {
+  current: number;
+  pageSize: number;
+  name?: string;
+  categoryId?: number;
+  customerCategoryId?: number;
+  provinceCode?: number;
+  cityCode?: number;
+  brandId?: number;
+  customerAttributeList?: any;
+  Min?: number;
+  Max?: number;
+  priceType?: number;
+
+}
+
 const Commodity: React.FC<CommodityPropsType> = (props) => {
   const { query: { search = "" } } = props.location
   const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
   const [filterList, setFilterList] = useState([])
-
+  const [commodityList, setCommodityList] = useState<GetSearchCommodityShopGetCommodityListResponseDetail[]>([])
+  const [current, setCurrent] = useState<number>(1)
+  const [pageSize, setPageSize] = useState<number>(20)
+  const [totalCount, setTotalCount] = useState<number>(0)
+  const [filterParam, setFilterParam] = useState<filterQuery | {}>({})
   const filterConfig = [FilterType.commonlyUsed, FilterType.category, FilterType.style, FilterType.brand, FilterType.price, FilterType.useArea, FilterType.commodityType]
 
+  useEffect(() => {
+    fetchCommodityList()
+  }, [filterParam, current])
+
+  const fetchCommodityList = () => {
+    let param = {
+      current,
+      pageSize
+    }
+    if (!isEmpty(filterParam)) {
+      param = Object.assign(param, filterParam)
+    }
+    //@ts-ignore
+    PublicApi.getSearchCommodityShopGetCommodityList(param).then(res => {
+      if (res.code === 1000) {
+        setCommodityList(res.data.data)
+        setTotalCount(res.data.totalCount)
+      }
+
+    })
+
+
+  }
+
   const handleFilter = (filterValue: filterValueType) => {
     let filteState = filterList.some(item => item.type === filterValue.type)
     let tempFilterList = [...filterList]
@@ -65,73 +112,74 @@ const Commodity: React.FC<CommodityPropsType> = (props) => {
     setFilterList([])
   }
 
+  const handlePageChange = (page) => {
+    setCurrent(page)
+  }
+
   return (
-    <div className="commodity">
-      <div className="mall_container">
-        <div className="commodity_container">
+    <div className={styles.commodity}>
+      <div className={styles.mall_container}>
+        <div className={styles.commodity_container}>
           <Filter onFilter={handleFilter} filterConfig={filterConfig} />
-          <div className="commodity_main">
-            <div className="banner">
+          <div className={styles.commodity_main}>
+            <div className={styles.banner}>
               <img src={bannerImg} />
             </div>
-            <div className="tool_bar">
-              <div className="tool_bar_left">
-                <div className="tool_bar_filter_item">
+            <div className={styles.tool_bar}>
+              <div className={styles.tool_bar_left}>
+                <div className={styles.tool_bar_filter_item}>
                   <span>销量</span>
-                  <i className="icon">
+                  <i className={styles.icon}>
                     <img src={arrowDownIcon} />
                   </i>
                 </div>
-                <div className="tool_bar_filter_item">
+                <div className={styles.tool_bar_filter_item}>
                   <span>信用</span>
-                  <i className="icon">
+                  <i className={styles.icon}>
                     <img src={arrowDownIcon} />
                   </i>
                 </div>
-                <div className="tool_bar_filter_item">
+                <div className={styles.tool_bar_filter_item}>
                   <span>价格</span>
-                  <div className="price_filter_box">
-                    <CaretUpOutlined className="icon" />
-                    <CaretDownOutlined className="icon" />
+                  <div className={styles.price_filter_box}>
+                    <CaretUpOutlined className={styles.icon} />
+                    <CaretDownOutlined className={styles.icon} />
                   </div>
                 </div>
               </div>
-              <div className="tool_bar_right">
-                <div className="count">
+              <div className={styles.tool_bar_right}>
+                <div className={styles.count}>
                   <span>共</span>
-                  <label>1,234</label>
+                  <label>{totalCount}</label>
                   <span>个商品</span>
                 </div>
-                <AppstoreOutlined className={cx("icon", showType === 1 ? 'active' : '')} onClick={() => setShowType(1)} />
-                <UnorderedListOutlined className={cx("icon", showType === 2 ? 'active' : '')} onClick={() => setShowType(2)} />
+                <AppstoreOutlined className={cx(styles.icon, showType === 1 ? styles.active : '')} onClick={() => setShowType(1)} />
+                <UnorderedListOutlined className={cx(styles.icon, showType === 2 ? styles.active : '')} onClick={() => setShowType(2)} />
               </div>
             </div>
-            <div className="filter_bar">
-              <div className="filter_bar_left">
-                <div className="filter_bar_left_text">保存为常用筛选</div>
-                <div className="filter_bar_left_split"></div>
-                <div className="filter_bar_left_text" onClick={handleResetFilter}>重置</div>
+            <div className={styles.filter_bar}>
+              <div className={styles.filter_bar_left}>
+                <div className={styles.filter_bar_left_text}>保存为常用筛选</div>
+                <div className={styles.filter_bar_left_split}></div>
+                <div className={styles.filter_bar_left_text} onClick={handleResetFilter}>重置</div>
               </div>
-              <div className="filter_bar_list">
+              <div className={styles.filter_bar_list}>
                 {
                   filterList.map(item => (
-                    <div className="filter_bar_list_item" key={item.key}>
-                      <span className="filter_bar_list_item_text">{item.title}</span>
-                      <CloseOutlined className="filter_bar_list_item_icon" onClick={() => handleDeleteFilterItem(item.key)} />
+                    <div className={styles.filter_bar_list_item} key={item.key}>
+                      <span className={styles.filter_bar_list_item_text}>{item.title}</span>
+                      <CloseOutlined className={styles.filter_bar_list_item_icon} onClick={() => handleDeleteFilterItem(item.key)} />
                     </div>
                   ))
                 }
               </div>
             </div>
             {
-
-            }
-            {
               !!search ? <NoResult search={search} /> : (
                 <>
-                  <CommodityList showType={showType} />
-                  <div className="pagination_wrap">
-                    <Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
+                  <CommodityList showType={showType} commodityList={commodityList} />
+                  <div className={styles.pagination_wrap}>
+                    <Pagination showQuickJumper showSizeChanger={false} onChange={handlePageChange} current={current} pageSize={pageSize} total={totalCount} />
                   </div>
                 </>
               )

src/pages/lxMall/commodity/list.tsx

 import React from 'react'
 import cx from 'classnames'
+import { GetSearchCommodityShopGetCommodityListResponseDetail } from '@/services'
 import creditIcon from '@/assets/imgs/credit_icon.png'
 import './list.less'
 
 interface CommodityListPropsType {
-  showType: number
+  showType: number;
+  commodityList: GetSearchCommodityShopGetCommodityListResponseDetail[]
+
 }
 
 const CommodityList: React.FC<CommodityListPropsType> = (props) => {
-  const { showType } = props
+  const { showType, commodityList = [] } = props
+
+  const renderPrice = (commodityItem: GetSearchCommodityShopGetCommodityListResponseDetail) => {
+    switch (commodityItem.priceType) {
+      // 现货价格
+      case 1:
+        return (
+          <div className="goods_price">
+            <span>￥</span>
+            <label>{commodityItem.min}</label>
+          </div>
+        )
+        break
+      // 价格需要询价
+      case 2:
+        return (
+          <div className="goods_price">
+            <label>在线询价</label>
+          </div>
+        )
+        break
+      // 积分兑换商品
+      case 3:
+        break
+      default:
+        break
+    }
 
-  let dataList = []
-  for (let i = 0; i < 20; i++) {
-    dataList.push(i)
   }
 
   const renderItem = () => {
@@ -20,23 +46,23 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
       return (
         <>
           {
-            dataList.map((item, index) => (
-              <div key={item} className="commodity_list_item row">
-                <a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
+            commodityList.map((item, index) => (
+              <div key={item.id} className="commodity_list_item row">
+                <a href={`/shop/commodity/detail?id=${item.id}&type=${item.priceType}`} target="_blank">
                   <div className="goods_img">
-                    <img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
+                    <img src={item.commodityPic || "https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg"} />
                   </div>
                   <div className="info_box">
-                    <div className="goods_price">
-                      <span>￥</span>79.00
-                    </div>
-                    <div className="goods_name">0.8-1.0mm黑色手折纹胎水牛皮黄牛头层自然摔纹硬度适中偏软硬度适中偏软软…</div>
-                    <div className="count">已售: 3,230</div>
+                    {
+                      renderPrice(item)
+                    }
+                    <div className="goods_name">{item.name}</div>
+                    <div className="count">已售: {item.sold || 0}</div>
                     <div className="company_info">
-                      <div className="goods_name">温州市龙昌皮业有限公司</div>
+                      <div className="goods_name">{item.memberName}</div>
                       <div className="credit">
                         <img className="credit_icon" src={creditIcon} />
-                        <span>1288</span>
+                        <span>{item.creditScore || 0}</span>
                       </div>
                     </div>
                   </div>
@@ -51,28 +77,30 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
       return (
         <>
           {
-            dataList.map((item, index) => (
-              <div key={item} className="commodity_list_item column">
-                <a href={`/shop/commodity/detail?id=asdjflewjfe&type=prompt`}>
+            commodityList.map((item, index) => (
+              <div key={item.id} className="commodity_list_item column">
+                <a href={`/shop/commodity/detail?id=${item.id}&type=${item.priceType}`} target="_blank">
                   <div className="goods_img">
-                    <img src="https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg" />
+                    <img src={item.commodityPic || "https://img.alicdn.com/bao/uploaded/i1/691602756/O1CN013mdkHl1WEI92iLR75_!!691602756.jpg_400x400q60.jpg"} />
                   </div>
                   <div className="info_box">
                     <div className="info_box_content">
-                      <div className="name">0.8-1.0mm黑色手折纹胎水牛皮</div>
-                      <div className="price"><span>￥</span>79.00</div>
-                      <div className="count">已售: 3,230</div>
+                      <div className="name">{item.name}</div>
+                      <div className="price"><span>￥</span>{item.min}</div>
+                      <div className="count">已售: {item.sold || 0}</div>
                     </div>
                     <ul className="tags_list">
-                      <li className="tags_list_item">黄牛头皮层自然摔纹</li>
-                      <li className="tags_list_item">硬度适中偏软</li>
-                      <li className="tags_list_item">手感舒适</li>
+                      {
+                        item.sellingPoint.map((pointItem, pointIndex) => (
+                          <li className="tags_list_item" key={`tags_list_item_${pointIndex}`}>{pointItem}</li>
+                        ))
+                      }
                     </ul>
                     <div className="credit">
                       <img className="credit_icon" src={creditIcon} />
-                      <span>1288</span>
+                      <span>{item.creditScore || 0}</span>
                     </div>
-                    <div className="shopname">温州市龙昌皮业有限公司</div>
+                    <div className="shopname">{item.memberName}</div>
                   </div>
                 </a>
               </div>

src/pages/lxMall/commodityDetail/index.less

@@ -166,9 +166,12 @@
                     margin-right: 20px;
                   }
 
+                  &>.attrName {
+                    margin-left: 10px;
+                  }
+
                   .imgbox {
                     overflow: hidden;
-                    margin-right: 10px;
                     margin-left: 2px;
 
                     &>img {