feat:交易记录接口对接

src/pages/lxMall/commodity/index.less

@@ -185,7 +185,7 @@
 
             &:hover {
               &>a {
-                color: #ffffff;
+                color: #ffffff !important;
               }
             }
 

src/pages/lxMall/commodity/list.tsx

@@ -107,7 +107,7 @@ const CommodityList: React.FC<CommodityListPropsType> = (props) => {
                   <div className={styles.info_box}>
                     <div className={styles.info_box_content}>
                       <div className={styles.name}>{item.name}</div>
-                      <div className={styles.price}><span>￥</span>{item.min}</div>
+                      <div className={styles.price}><span>￥</span>{priceFormat(item.min)}</div>
                       <div className={styles.count}>已售: {numFormat(item.sold) || 0}</div>
                     </div>
                     <ul className={styles.tags_list}>

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

@@ -123,21 +123,21 @@
 
         &:hover,
         &:active {
-          border-color: #D32F2F;
+          border-color: var(--mall_main_color);
 
           &>a {
-            color: #D32F2F;
+            color: var(--mall_main_color);
           }
         }
       }
 
       .ant-pagination-item-active {
-        background-color: #D32F2F;
-        border-color: #D32F2F;
+        background-color: var(--mall_main_color);
+        border-color: var(--mall_main_color);
 
         &:hover {
           &>a {
-            color: #ffffff;
+            color: #ffffff !important;
           }
         }
 

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

@@ -12,36 +12,34 @@
   }
 
   .trade_record_container {
+    :global {
       .ant-pagination-item {
 
         &:hover,
         &:active {
-        border-color: #D32F2F;
+          border-color: var(--mall_main_color);
 
           &>a {
-          color: #FFF;
+            color: var(--mall_main_color);
           }
         }
       }
 
       .ant-pagination-item-active {
-      background-color: #D32F2F;
-      border-color: #D32F2F;
+        background-color: var(--mall_main_color);
+        border-color: var(--mall_main_color);
 
+        &:hover {
           &>a {
-        color: #ffffff;
+            color: #ffffff !important;
           }
         }
 
-    // .ant-pagination-item-active {
-    //   border-color: #D32F2F;
-    //   background-color: #D32F2F;
-    //   color: #ffffff;
-
-    //   a {
-    //     color: #FFFFFF;
-    //   }
-    // }
+        &>a {
+          color: #ffffff;
+        }
+      }
+    }
 
     .columns_item {
       height: 48px;

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

-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Table } from 'antd'
+import isEmpty from 'lodash/isEmpty'
+import { PublicApi } from '@/services/api'
+import moment from 'moment'
+import { GetOrderTransactionRecordsListResponseDetail } from '@/services/OrderApi'
 import styles from './index.less'
 
-const TradeRecord: React.FC = () => {
+interface TradeRecordPropsType {
+  productIds: number[],
+  setCount: Function
+}
+
+const TradeRecord: React.FC<TradeRecordPropsType> = (props) => {
+  const { productIds, setCount } = props
+  const [current, setCurrent] = useState<number>(1)
+  const [pageSize, setPageSize] = useState<number>(10)
+  const [totalCount, setTotalCount] = useState<number>(0)
+  const [recordList, setRecordList] = useState<GetOrderTransactionRecordsListResponseDetail[]>([])
+
+  useEffect(() => {
+    if (productIds && !isEmpty(productIds)) {
+      fetchRecordsList()
+    }
+  }, [productIds])
+
+  const fetchRecordsList = () => {
+    let param = {
+      current,
+      pageSize,
+      productIds: productIds.toString() // '2339'
+    }
+    //@ts-ignore
+    PublicApi.getOrderTransactionRecordsList(param).then(res => {
+      if (res.code === 1000) {
+        setTotalCount(res.data.totalCount)
+        setRecordList(res.data.data)
+        setCount(res.data.totalCount)
+      }
+    })
+  }
 
   const columns = [
     {
@@ -10,42 +46,24 @@ const TradeRecord: React.FC = () => {
       width: '33%',
       render: (_, record: any) => {
         return (
-          <div className="columns_item">
-            <div className="columns_item_name">{record.name}</div>
-            {record.type === 1 && <div className="columns_item_member">VIP会员</div>}
-
+          <div className={styles.columns_item}>
+            <div className={styles.columns_item_name}>{record.memberName}</div>
+            <div className={styles.columns_item_member}>VIP会员</div>
           </div>
         )
       }
     },
     {
       title: '成交数量',
-      dataIndex: 'count',
+      dataIndex: 'purchaseCount',
       width: '33%'
     },
     {
       title: '交易时间',
-      dataIndex: 'date',
-      width: '33%'
-    },
-  ]
-
-  const mockData = [
-    {
-      id: 1,
-      name: '温州市****皮具有限公司',
-      count: 30,
-      date: '2020-05-20 15:58',
-      type: 1
-    },
-    {
-      id: 2,
-      name: '温州市****皮具有限公司',
-      count: 30,
-      date: '2020-05-20 15:58',
-      type: 2
+      dataIndex: 'tradingTime',
+      width: '33%',
+      render: (tradingTime) => moment(tradingTime).format('YYYY-MM-DD HH:mm')
     },
-
   ]
 
   return (
@@ -54,7 +72,12 @@ const TradeRecord: React.FC = () => {
         交易记录
       </div>
       <div className={styles.trade_record_container}>
-        <Table rowKey="id" columns={columns} dataSource={mockData} />
+        <Table
+          rowKey="orderId"
+          columns={columns}
+          dataSource={recordList}
+          locale={{ emptyText: '暂无交易记录' }}
+        />
       </div>
     </div>
   )

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

@@ -19,6 +19,8 @@ interface ProductDescriptionPropsType {
 const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
   const { commodityDetail, dataList } = props
   const [currentAnchor, setCurrentAnchor] = useState<string>("#introduction")
+  const [productIds, setProductIds] = useState<number[]>([])
+  const [tradeRecordCount, setTradeRecordCount] = useState<number>(0)
 
   const handleAnchorChange = (currentActiveLink: string) => {
     if (currentActiveLink) {
@@ -26,6 +28,14 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
     }
   }
 
+  useEffect(() => {
+    if (commodityDetail) {
+      if (commodityDetail.unitPricePicList) {
+        setProductIds(commodityDetail.unitPricePicList.map(item => item.id))
+      }
+    }
+  }, [commodityDetail])
+
   return (
     <div className={styles.product_description} id="product_description">
       <Anchor
@@ -34,12 +44,12 @@ const ProductDescription: React.FC<ProductDescriptionPropsType> = (props) => {
         onChange={handleAnchorChange}
       >
         <Link className={cx(currentAnchor === "#introduction" ? 'active' : '')} href="#introduction" title="产品简介" />
-        <Link href="#trade_record" title={commodityDetail?.priceType === COMMODITY_TYPE.integral ? `兑换记录(2)` : `交易记录(2)`} />
+        <Link href="#trade_record" title={commodityDetail?.priceType === COMMODITY_TYPE.integral ? `兑换记录(2)` : `交易记录${tradeRecordCount ? `(${tradeRecordCount})` : `(0)`}`} />
         <Link href="#comment" title="交易评价(96)" />
         <BackTop className={styles.buy_now_btn} visibilityHeight={800} >立即订购</BackTop>
       </Anchor>
       <Introduction commodityDetail={commodityDetail} />
-      <TradeRecord />
+      <TradeRecord productIds={productIds} setCount={(count) => setTradeRecordCount(count)} />
       <Comment />
       <Recommand dataList={dataList} {...props} />
     </div>

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

@@ -31,6 +31,10 @@
 
         &>a {
           color: #303133;
+
+          &:hover {
+            color: #303133 !important;
+          }
         }
 
         &.active {
@@ -55,6 +59,10 @@
 
       a {
         color: #FFF;
+
+        &:hover {
+          color: #FFF !important;
+        }
       }
     }
   }

src/pages/lxMall/layouts/LXShopLayout.tsx

@@ -70,9 +70,11 @@ const LXShopLayout: React.FC<LXMallLayoutPropsType> = (props) => {
   }
 
   useEffect(() => {
-    if (shopInfo) {
     let body = document.getElementsByTagName('body')[0];
+    if (shopInfo) {
       body.className = shopInfo.fileName ? `theme-shop-${shopInfo.fileName}` : templateName;
+    } else {
+      body.className = templateName;
     }
   }, [shopInfo])
 

src/pages/lxMall/order/index.tsx

@@ -263,9 +263,12 @@ const Order: React.FC<OrderPropsType> = (props) => {
     }
 
     let orderProductRequests = []
+    let purchaseIds = []
     for (let item of orderList) {
+
       for (let orderItem of item.orderList) {
         let temp: any = {}
+        purchaseIds.push(orderItem.purchaseId)
         temp.imgUrl = orderItem.commodityPic
         temp.productId = orderItem.id
         temp.productName = orderItem.name
@@ -292,6 +295,11 @@ const Order: React.FC<OrderPropsType> = (props) => {
       params.theInvoiceId = selectInvoiceInfo.id
       params.theInvoiceInfo = selectInvoiceInfo
     }
+    if (!!orderInfo.purchaseOrder) {
+      params.idList = purchaseIds
+      params.productType = (layoutType === LAYOUT_TYPE.channel || layoutType === LAYOUT_TYPE.ichannel) ? 2 : 1
+    }
+
     setConfirmLoading(true)
     PublicApi.postOrderProcurementOrderAdd(params).then(res => {
       if (res.code === 1000) {

src/pages/lxMall/purchaseOrder/index.tsx

@@ -145,6 +145,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
         defaultCheckedList: item.orderList.map(item => item.id)
       })
     })
+    console.log(result)
     setOrderList(result)
     // !initChecked && setCheckedList(result.map(item => item.id))
   }
@@ -503,6 +504,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
       commonLogistics = item.commodityUnitPrice.commodity.logistics
       let buyCommodityInfo: any = {
         id: item.commodityUnitPrice.id,
+        purchaseId: item.id,
         count: item.count,
         unitName: item.commodityUnitPrice.commodity.unitName,
         unitPrice: getUnitPrice(item.commodityUnitPrice, item.count),
@@ -523,6 +525,7 @@ const PurchaseOrder: React.FC<PurchaseOrderPropsType> = (props) => {
     }
 
     let buyOrderInfo: any = {
+      purchaseOrder: true,
       logistics: commonLogistics,
       supplyMembersName: selectItem.shopname,
       supplyMembersId: selectItem.memberId,