feat:对接商城首页最新成交接口

src/global/config/index.ts

@@ -36,9 +36,6 @@ const defaultIChannelRoute = '/ichannelmall' // 默认渠道自有商城根路
 const channelRootRoute = MALL_ROUTE_USE_CONFIG === 'true' ? checkUrl(webChannelInfo.url, defaultChannelRoute) : defaultChannelRoute
 const ichannelRootRoute = MALL_ROUTE_USE_CONFIG === 'true' ? checkUrl(webIChannelInfo.url, defaultIChannelRoute) : defaultIChannelRoute
 
-
-
-
 SELF_CONFIG.channelRootRoute = channelRootRoute // 渠道商城路由根路径
 SELF_CONFIG.ichannelRootRoute = ichannelRootRoute // 渠道自有商城路由根路径
 

src/pages/lxMall/components/FindMore/components/newTrade/index.tsx

-import React from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { PublicApi } from '@/services/api'
+import { GetOrderProcurementOrderTransactionDynamicsResponseDetail } from '@/services/OrderApi'
+import moment from 'moment'
 import styles from '../../index.less'
 
-interface NewTradePropsType {
+const NewTrade: React.FC = () => {
+  const [list, setList] = useState<GetOrderProcurementOrderTransactionDynamicsResponseDetail[]>([])
+  const [translateY, setTranslateY] = useState<number>(0)
+  const [current, setCurrent] = useState<number>(1)
+  const [pageSize] = useState<number>(20)
+  let distance = translateY
+  let timer = null
 
-}
+  useEffect(() => {
+    return () => {
+      clearInterval(timer)
+      timer = null
+    }
+  }, [])
 
-const NewTrade: React.FC<NewTradePropsType> = (props) => {
+  const autoPlayList = (maxLenght) => {
+    const autoPlaySpeed = 5000
+    const unitDistance = 79
+    if (maxLenght > 4) {
+      const maxDistance = (maxLenght - 3) * unitDistance
+      timer = setInterval(() => {
+        distance += unitDistance
+        if (distance < maxDistance) {
+          const new_trade_list = document.getElementById("new_trade_list")
+          //@ts-ignore
+          new_trade_list.style = `transform: translateY(${-distance}px);`
+        } else {
+          clearInterval(timer)
+          timer = null
+          setTranslateY(distance - unitDistance)
+          setCurrent(current + 1)
+        }
+      }, autoPlaySpeed)
+    }
+  }
+  useEffect(() => {
+    fetchData()
+  }, [current])
 
-  const buy_dynamic_list = [
-    {
-      title: '黑色头层牛皮自然摔纹',
-      state: 0,
-      content: '2000平方英尺',
-      date: '09/09 09:00'
-    },
-    {
-      title: '黑色头层牛皮自然摔纹',
-      state: 0,
-      content: '2000平方英尺',
-      date: '09/09 09:00'
-    },
-    {
-      title: '黑色头层牛皮自然摔纹',
-      state: 0,
-      content: '2000平方英尺',
-      date: '09/09 09:00'
-    },
-    {
-      title: '黑色头层牛皮自然摔纹',
-      state: 1,
-      content: '2000平方英尺',
-      date: '09/09 09:00'
-    },
-    {
-      title: '黑色头层牛皮自然摔纹',
-      state: 1,
-      content: '2000平方英尺',
-      date: '09/09 09:00'
-    },
-    {
-      title: '黑色头层牛皮自然摔纹',
-      state: 1,
-      content: '2000平方英尺',
-      date: '09/09 09:00'
-    },
-  ]
+  const fetchData = () => {
+    let param = {
+      current: current,
+      pageSize: pageSize
+    }
+    //@ts-ignore
+    PublicApi.getOrderProcurementOrderTransactionDynamics(param).then(res => {
+      if (res.code === 1000) {
+        let newList = [...list, ...res.data.data]
+        setList(newList)
+        let maxLenght = newList.length
+        if (res.data.data && res.data.data.length > 0) {
+          autoPlayList(maxLenght)
+        }
+      }
+    })
+  }
 
   return (
     <div className={styles.new_trade}>
       <div className={styles.find_more_title}>
         <label>最新成交</label>
       </div>
-      <div className={styles.new_trade_list}>
-        {
-          buy_dynamic_list.map((item, index) => index < 4 && (
-            <div className={styles.new_trade_list_item} key={`new_trade_list_item_${index}`}>
-              <div className={styles.new_trade_list_item_header}>
-                <span>{item.title}</span>
-                <div className={styles.price}>2000</div>
+      <div className={styles.new_trade_list_wrap} style={{}}>
+        <div className={styles.new_trade_list} id="new_trade_list">
+          {
+            list && list.map((item, index) => (
+              <div className={styles.new_trade_list_item} key={`new_trade_list_item_${index}`}>
+                <div className={styles.new_trade_list_item_header}>
+                  <span>{item.name}</span>
+                  <div className={styles.price}>{item.orderSum}{item.unit}</div>
+                </div>
+                <div className={styles.new_trade_list_item_content}>
+                  <span className={styles.content_text}>{item.category}/{item.brand}</span>
+                  <span className={styles.content_time}>{moment(item.placingTime).format("MM/DD HH:mm")}</span>
+                </div>
               </div>
-              <div className={styles.new_trade_list_item_content}>
-                <span className={styles.content_text}>{item.date}</span>
-                <span className={styles.content_time}>平方英尺</span>
-              </div>
-            </div>
-          ))
-        }
+            ))
+          }
+        </div>
       </div>
     </div>
   )

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

@@ -21,10 +21,13 @@
 }
 
 .find_more_title {
+  position: relative;
   height: 60px;
   line-height: 60px;
   padding-left: 20px;
   display: flex;
+  background-color: #ffffff;
+  z-index: 2;
 
   &>label {
     color: #E44E46;
@@ -192,7 +195,16 @@
   width: 285px;
   background: #ffffff;
 
+  .new_trade_list_wrap {
+    position: relative;
+    z-index: 1;
+    height: 320px;
+    overflow: hidden;
+  }
+
   .new_trade_list {
+    transition: all .5s;
+
 
     &_item {
       padding: 12px 20px;
@@ -203,6 +215,7 @@
 
         &>span {
           flex: 1;
+          padding-right: 10px;
           display: block;
           color: #303133;
           font-size: 14px;