feats

src/pages/index/buildingDetail/components/SpecialPriceHouse/index.jsx

@@ -1,16 +1,21 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import Taro from '@tarojs/taro'
 import { API_SPECIAL_ROOM_LIST } from '@/constants/api'
 import { ScrollView, Image } from '@tarojs/components'
 import { fetch } from '@/utils/request'
 import '@/assets/css/iconfont.css'
+import useTimer from './useTimer'
 import './index.scss'
 
+const toW = n => `${Number(n / 10000).toFixed(1)}万`
+const itFmt = it => `${it.unitType} ${Number(it.currentPrice / it.area).toFixed(0)}元/㎡`
+
 export default function SpecialPriceHouse (props) {
   const { Info } = props
   const { buildingId } = Info || {}
 
   const [list, setList] = useState([])
+  const [leftTime] = useTimer(list)
 
   const handleMore = () => {
     Taro.navigateTo({ url: '/pages/index/specialPriceHouse/index' })
@@ -44,18 +49,18 @@ export default function SpecialPriceHouse (props) {
       </view>
 
       <view className='List'>
-        <ScrollView scroll-x={true}>
+        <ScrollView scrollX>
           {
             list.map((item, index) => (
               <view className='ListItem' key={`List-${index}`}>
-                <text className='Tips'>省17.8万</text>
+                <text className='Tips'>{`${toW(item.thriftPrice)}`}</text>
                 <view className='Price'>
-                  <text>867.3万</text>
-                  <text>888.1万</text>
+                  <text>{toW(item.currentPrice)}</text>
+                  <text>{toW(item.originalPrice)}</text>
                 </view>
-                <text className='Time'>距结束还有06天10时14分</text>
-                <text className='HouseType'>4室2厅2卫 23433元/㎡</text>
-                <text className='DoorNumber'>1#-5单元-401</text>
+                <text className='Time'>{`距结束还有 ${leftTime[index] ? leftTime[index][1] : ''}`}</text>
+                <text className='HouseType'>{itFmt(item)}</text>
+                <text className='DoorNumber'>{item.roomName}</text>
               </view>
             ))
           }

src/pages/index/buildingDetail/components/SpecialPriceHouse/useTimer.js

@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from "react";
+import { formateLeftTime } from '@/utils/tools'
+
+export default function useTimer(source) {
+  const [list, setList] = useState([])
+  const timerRef = useRef()
+
+  useEffect(() => {
+    const ticker = () => {
+      const now = (new Date()).valueOf()
+
+      const arr = source.map((it) => {
+        const dt = (new Date(it.endTime)).valueOf()
+        const ss = dt - now
+
+        return [
+          it[0],
+          formateLeftTime(ss, 'min'),
+        ]
+      })
+
+      setList(arr)
+    }
+
+    ticker()
+    timerRef.current = setInterval(ticker, 1000 * 60)
+
+    return () => clearInterval(timerRef.current)
+  }, [source])
+
+  return [list]
+}

src/pages/index/buildingDetail/index.jsx

@@ -136,7 +136,7 @@ export default withLayout((props) => {
                 </view>
 
                 {/* 特价房源 */}
-                <view className='SpecialPriceHouse'>
+                <view className='SpecialPriceHouse' style={{minHeight: 0}}>
                   <SpecialPriceHouse Info={DetailInfo}></SpecialPriceHouse>
                 </view>