feat:在线求购接口对接

src/global/styles/global.less

@@ -41,7 +41,7 @@ h6 {
 
 a {
   &:hover {
-    color: var(--mall_main_color) !important;
+    color: var(--mall_main_color);
   } 
 }
 
@@ -319,8 +319,10 @@ a {
 // 重置Card样式
 .ant-card {
   border-radius: 8px !important;
+
   .ant-card-head {
     border-bottom: none;
+
     .ant-card-head-title {
       // line-height: 24px;
       // padding-bottom: 0;
@@ -330,4 +332,3 @@ a {
     }
   }
 }
\ No newline at end of file
-

src/pages/lxMall/commodityDetail/index.tsx

@@ -478,6 +478,10 @@ const CommodityDetail = (props) => {
 
   }
 
+  const handleInquiry = () => {
+    window.location.href = `/memberCenter/tranactionAbility/goodsOffer/addEnquiryOrder/add?id=${id}&memberId=${memberId}`
+  }
+
   /**
    * 根据条件渲染页面按钮
    */
@@ -496,7 +500,7 @@ const CommodityDetail = (props) => {
             <Button className={cx(styles.product_info_btn_item, styles.buy)} >暂无库存</Button>
           )
       case COMMODITY_TYPE.inquiry:
-        return <div className={cx(styles.product_info_btn_item, styles.buy)}>立即询价</div>
+        return <div className={cx(styles.product_info_btn_item, styles.buy)} onClick={() => handleInquiry()}>立即询价</div>
       case COMMODITY_TYPE.integral:
         return stockCount > 0 ? <div className={cx(styles.product_info_btn_item, styles.buy)} onClick={() => handleToBuy(COMMODITY_TYPE.integral)}>立即兑换</div> : <Button className={cx(styles.product_info_btn_item, styles.buy)} >暂无库存</Button>
     }

src/pages/lxMall/components/TopBar/index.less

@@ -30,12 +30,19 @@
         padding: 0 16px;
         color: #303133;
 
+        a {
+          &:hover {
+            color: var(--mall_main_color);
+          }
+        }
+
         &.username {
           position: relative;
           cursor: pointer;
           border-left: 1px solid #ffffff;
           border-right: 1px solid #ffffff;
 
+
           &:hover {
 
             border-left: 1px solid #EEF0F3;

src/pages/lxMall/pointsMall/index.less

@@ -179,6 +179,12 @@
             background-color: var(--mall_main_color);
             border-color: var(--mall_main_color);
 
+            &:hover {
+              &>a {
+                color: #ffffff !important;
+              }
+            }
+
             &>a {
               color: #ffffff;
             }

src/pages/lxMall/pointsMall/list.tsx

@@ -2,17 +2,17 @@ import React from 'react'
 import cx from 'classnames'
 import { Skeleton } from 'antd'
 import { LAYOUT_TYPE } from '@/constants'
-import { GetSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
+import { PostSearchShopEnterpriseGetCommodityListResponseDetail } from '@/services/SearchApi'
 import styles from './list.less'
 
 interface CommodityListPropsType {
   showType: number;
-  commodityList: GetSearchShopEnterpriseGetCommodityListResponseDetail[]
+  commodityList: PostSearchShopEnterpriseGetCommodityListResponseDetail[]
   layoutType: LAYOUT_TYPE
 }
 
 const CommodityList: React.FC<CommodityListPropsType> = (props) => {
-  const { showType, commodityList = [], layoutType = LAYOUT_TYPE.mall } = props
+  const { commodityList = [], layoutType = LAYOUT_TYPE.mall } = props
 
   const getCommodityDetailUrl = (item) => {
     switch (layoutType) {

src/pages/lxMall/purchaseOnline/index.less

@@ -178,6 +178,12 @@
             background-color: var(--mall_main_color);
             border-color: var(--mall_main_color);
 
+            &:hover {
+              &>a {
+                color: #ffffff !important;
+              }
+            }
+
             &>a {
               color: #ffffff;
             }

src/pages/lxMall/purchaseOnline/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 from '../components/Filter'
 import { FILTER_TYPE } from '@/constants'
 import cx from 'classnames'
-import { Pagination } from 'antd'
+import SearchNoResult from '../components/SearchNoResult'
+import { Pagination, message } from 'antd'
 import CommodityList from './list'
-import NoResult from './noResult'
 import { useLocalStore, observer } from 'mobx-react'
 import { store } from '@/store'
+import isEmpty from 'lodash/isEmpty'
+import { PublicApi } from '@/services/api'
+import { LAYOUT_TYPE } from '@/constants'
+import { GetOrderRequisitionFormOnlineShoppingListResponseDetail } from '@/services/OrderApi'
 import styles from './index.less'
 
 
 interface PurchaseOnlinePropsType {
-  location: any
+  location: any,
+  layoutType: LAYOUT_TYPE,
+  memberId: number;
+  shopId: number;
 }
 
 const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
   const FilterStore = useLocalStore(() => store.FilterStore)
   const { filterList, filterUpdate, filterParam, onDeleteFilterItem, onResetFilter, onFilter, onFilterParamChange } = FilterStore
-  const { query: { search = "" } } = props.location
+  const { layoutType, shopId } = props
   const [showType, setShowType] = useState<number>(1) // 展示方式：1：矩阵排列； 2:列表排列
   // const [filterList, setFilterList] = useState([])
+  const [loading, setLoading] = useState<boolean>(true)
+  const [commodityList, setCommodityList] = useState<GetOrderRequisitionFormOnlineShoppingListResponseDetail[]>([])
+  const [current, setCurrent] = useState<number>(1)
+  const [pageSize] = useState<number>(20)
+  const [totalCount, setTotalCount] = useState<number>(0)
 
   const filterConfig = [FILTER_TYPE.category, FILTER_TYPE.useArea]
 
+  useEffect(() => {
+    setCurrent(1)
+    fetchCommodityList(1)
+  }, [filterParam])
+
+  useEffect(() => {
+
+    if (!isEmpty(filterList) || filterUpdate) {
+      handleFilterChange(filterList)
+    }
+  }, [filterList])
+
+  useEffect(() => {
+    return (() => {
+      onResetFilter()
+    })
+  }, [])
+
+  const fetchCommodityList = (currentParam?: number) => {
+    let param: any = {
+      current: currentParam ? currentParam : current,
+      pageSize
+    }
+    if (!isEmpty(filterParam)) {
+      param = Object.assign(param, filterParam)
+    }
+    setLoading(true)
+
+    //@ts-ignore
+    PublicApi.getOrderRequisitionFormOnlineShoppingList(param).then(res => {
+      setLoading(false)
+      if (res.code === 1000) {
+        message.destroy()
+        setCommodityList(res.data.data)
+        setTotalCount(res.data.totalCount)
+      }
+    })
+  }
+
+  const handleFilterChange = (newFilterList: any) => {
+    onFilterParamChange(newFilterList)
+  }
+
   /**
    * 重置筛选
    */
@@ -141,7 +196,7 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
               <div className={styles.tool_bar_right}>
                 <div className={styles.count}>
                   <span>共</span>
-                  <label>43</label>
+                  <label>{totalCount}</label>
                   <span>条求购信息</span>
                 </div>
               </div>
@@ -166,11 +221,11 @@ const PurchaseOnline: React.FC<PurchaseOnlinePropsType> = (props) => {
               )
             }
             {
-              !!search ? <NoResult search={search} /> : (
+              (commodityList.length === 0 || !commodityList) ? !loading && <SearchNoResult search="" /> : (
                 <>
-                  <CommodityList showType={showType} />
+                  <CommodityList showType={showType} commodityList={commodityList} layoutType={layoutType} />
                   <div className={styles.pagination_wrap}>
-                    <Pagination showQuickJumper showSizeChanger={false} defaultCurrent={1} total={100} />
+                    <Pagination showQuickJumper showSizeChanger={false} current={current} total={totalCount} pageSize={pageSize} />
                   </div>
                 </>
               )

src/pages/lxMall/purchaseOnline/list.less

@@ -29,6 +29,10 @@
       font-weight: 500;
       padding-left: 15px;
       background-color: #FAFAFA;
+
+      a {
+        color: #303133;
+      }
     }
 
     &_info_box {
@@ -68,6 +72,7 @@
         margin-top: 20px;
 
         &>a {
+          display: block;
           color: #fff;
         }
 

src/pages/lxMall/purchaseOnline/list.tsx

 import React from 'react'
 import cx from 'classnames'
+import { Link } from 'umi'
+import { LAYOUT_TYPE } from '@/constants'
+import { GetOrderRequisitionFormOnlineShoppingListResponseDetail } from '@/services/OrderApi'
 import creditIcon from '@/assets/imgs/credit_icon.png'
+import moment from 'moment'
 import './list.less'
 
 interface CommodityListPropsType {
-  showType: number
+  showType: number;
+  commodityList: GetOrderRequisitionFormOnlineShoppingListResponseDetail[]
+  layoutType: LAYOUT_TYPE
 }
 
 const CommodityList: React.FC<CommodityListPropsType> = (props) => {
-  const { showType } = props
+  const { commodityList = [], layoutType = LAYOUT_TYPE.mall } = props
 
-  let dataList = []
-  for (let i = 0; i < 20; i++) {
-    dataList.push(i)
+
+  const showRequisitionFormAddress = (list: any) => {
+    if (list) {
+      let result = list.map(item => `${item.province}/${item.city}`).join('、')
+      return result
+    }
+    return ""
   }
 
   return (
     <div className={cx("purchase_list")}>
       {
-        dataList.map((item, index) => (
-          <div key={item} className="purchase_list_item row">
-
-            <div className="purchase_list_item_title">头层自然摔牛皮，箱包鞋面料</div>
+        commodityList.map((item, index) => (
+          <div key={item.id} className="purchase_list_item row">
+            <div className="purchase_list_item_title">
+              <Link to={`/memberCenter/tranactionAbility/inquiryQuote/quoteOrder/details?id=${item.id}&page_type=5&view=2`}>{item.details}</Link>
+            </div>
             <div className="purchase_list_item_info_box">
               <div className="purchase_list_item_info_line">
                 <label>品类：</label>
-                <span>硬度适中偏软</span>
+                <span>{item.categoryName}</span>
               </div>
               <div className="purchase_list_item_info_line">
                 <label>发货地：</label>
-                <span>广东省/广州市、广东省/深圳市、广东省/东莞市</span>
+                <span>{showRequisitionFormAddress(item.requisitionFormAddress)}</span>
               </div>
               <div className="purchase_list_item_info_line">
                 <label>交付地址：</label>
-                <span>广东省广州市海珠区新港东路1068号</span>
+                <span>{item.addres}</span>
               </div>
               <div className="purchase_list_item_info_line">
                 <label>交付日期：</label>
-                <span>2020-08-12</span>
+                <span>{moment(item.deliveryTime).format("YYYY-MM-DD")}</span>
               </div>
               <div className="purchase_list_item_info_line">
                 <label>截止时间：</label>
-                <span>2020-08-12 11:58:26</span>
+                <span>{moment(item.quotationAsTime).format("YYYY-MM-DD HH:mm:ss")}</span>
               </div>
               <div className="purchase_list_item_info_line_split"></div>
-              <div className="purchase_list_item_info_name">温州市龙昌皮业有限公司</div>
+              <div className="purchase_list_item_info_name">{item.memberName}</div>
               <div className="purchase_list_item_info_line">
                 <img className="credit_icon" src={creditIcon} />
-                <span className="credit_text">1288</span>
+                <span className="credit_text">{item.memberCreditDcore || 0}</span>
               </div>
               <div className="quoted_price_btn">
-                <a href={`/memberCenter/tranactionAbility/enquiryOffer/toAddSubmitList/add`}>  立即报价 </a>
+                <Link to={`/memberCenter/tranactionAbility/inquiryQuote/addInquiryOrder/add?id=${item.id}`}>  立即报价 </Link>
               </div>
             </div>
           </div>