feats

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

@@ -1,12 +1,18 @@
-
+import Taro from '@tarojs/taro'
 import { ScrollView, Image } from '@tarojs/components'
+import { getImgURL } from '@/utils/image'
 import '@/assets/css/iconfont.css'
 import './index.scss'
 
 export default function HouseTypeIntro (props) {
-  const { Info = [] } = props
+  const { Info } = props
+
+  const preview = (item) => {
+    const current = getImgURL(item.buildingImgList.length ? item.buildingImgList[0].url : null)
+    Taro.previewImage({ current, urls: [current] })
+  }
   
-  return (
+  return Info ? (
     <view className='components HouseTypeIntro'>
 
       <view className='Title flex-h'>
@@ -23,7 +29,7 @@ export default function HouseTypeIntro (props) {
             Info.map((item, index) => (
               <view className='ListItem' key={`List-${index}`}>
                 <view className='Img'>
-                  <Image mode='aspectFill' src={item.buildingImgList.length ? item.buildingImgList[0].url : null}></Image>
+                  <Image mode='aspectFill' onClick={() => preview(item)} src={getImgURL(item.buildingImgList.length ? item.buildingImgList[0].url : null)}></Image>
                 </view>
                 <view className='Title'>
                   <text>{item.apartmentName}</text>
@@ -37,5 +43,5 @@ export default function HouseTypeIntro (props) {
       </view>
 
     </view>
-  )
+  ) : null
 }

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

@@ -6,7 +6,7 @@ import './index.scss'
 
 export default function LivingActivity (props) {
   const { List = [] } = props
-  return (
+  return List.length > 0 ? (
     <view className='components LivingActivity'>
 
       <view className='Title flex-h'>
@@ -21,8 +21,8 @@ export default function LivingActivity (props) {
         {
           List.map((item, index) => (
             <view className='flex-item' key={`ListItem-${index}`}>
-              <view style={{display: item.images ? 'block' : 'none'}}>
-                <Image mode='aspectFill' src={getImgURL(item.images)} className='centerLabel'></Image>
+              <view style={{display: item.listImg ? 'block' : 'none'}}>
+                <Image mode='aspectFill' src={getImgURL(item.listImg)} className='centerLabel'></Image>
               </view>
             </view>
           ))
@@ -30,5 +30,5 @@ export default function LivingActivity (props) {
       </view>
 
     </view>
-  )
+  ) : null
 }

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

@@ -1,11 +1,12 @@
 
 import { Image } from '@tarojs/components'
+import { getImgURL } from '@/utils/image'
 import '@/assets/css/iconfont.css'
 import './index.scss'
 
 export default function News (props) {
   const { List = [] } = props
-  return (
+  return List.length > 0 ? (
     <view className='components News'>
 
       <view className='Title flex-h'>
@@ -21,7 +22,7 @@ export default function News (props) {
           List.map((item, index) => (
             <view className='flex-item' key={`ListItem-${index}`}>
               <view className='Img' style={{display: item.newsImg || item.newsName ? 'block' : 'none'}}>
-                <Image mode='aspectFill' src={item.newsImg} className='centerLabel'></Image>
+                <Image mode='aspectFill' src={getImgURL(item.newsImg)} className='centerLabel'></Image>
               </view>
               <text className='Title'>{item.newsName}</text>
             </view>
@@ -30,5 +31,5 @@ export default function News (props) {
       </view>
 
     </view>
-  )
+  ) : null;
 }

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

@@ -1,5 +1,5 @@
 
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { Map, CoverView } from '@tarojs/components'
 import '@/assets/css/iconfont.css'
 import './index.scss'
@@ -21,6 +21,14 @@ export default function Periphery (props) {
 
   const loc = useMemo(() => (Info?.coordinate ? Info.coordinate.split(',') : []), [Info?.coordinate])
 
+  const countLen = useCallback((type) => {
+    if (!Info) return 0;
+    const tagLen = (Info[`building${type}`] || '').split(',').filter(Boolean).length
+    const poiLen = pois.filter((poi) => poi.key === type).map((it) => (it.data ? it.data.length : 0)).reduce((acc, i) => (acc + i), 0)
+
+    return tagLen + poiLen
+  }, [Info, pois])
+
   const CutTab = () => {
     return () => {
       
@@ -28,31 +36,37 @@ export default function Periphery (props) {
   }
 
   useEffect(() => {
-    if (!Info?.coordinate) {
-      setMarkers([])
-      return;
-    }
-
-    const mks = []
-    // 项目位置
-    mks.push({
-      id: -1,
-      longitude: loc[0],
-      latitude: loc[1],
-      iconPath: '',
-      width: 24,
-      height: 36,
-      customCallout: {
-        anchorY: 0,
-        anchorX: 0,
-        display: 'ALWAYS',
+    // 地图 marker
+    if (Info?.coordinate) {
+      const mks = []
+      // 项目位置
+      mks.push({
+        id: -1,
+        longitude: loc[0],
+        latitude: loc[1],
+        iconPath: '',
+        width: 24,
+        height: 36,
+        customCallout: {
+          anchorY: 0,
+          anchorX: 0,
+          display: 'ALWAYS',
+        }
+      })
+      // pois
+      if (Info?.mapJson) {
+        const poiArr = JSON.parse(Info.mapJson).map((it) => ({ ...it, data: JSON.parse(it.data) }))
+        setPois(poiArr)
       }
-    })
-
-    setMarkers(mks)
-
+  
+      setMarkers(mks)
+    }
   }, [Info, loc])
 
+  if (!Info?.coordinate) {
+    return null
+  }
+
   return (
     <view className='components Periphery'>
 
@@ -86,7 +100,7 @@ export default function Periphery (props) {
           poiTypes.map((item) => (
             <view className='flex-item' key={item.value} onClick={CutTab(item.value)}>
               <text className={item.class}></text>
-              <text>{item.label}(123)</text>
+              <text>{item.label}({countLen(item.value)})</text>
             </view>
           ))
         }

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

@@ -1,10 +1,26 @@
-
-import '@/assets/css/iconfont.css'
+import Taro from '@tarojs/taro'
 import { ScrollView, Image } from '@tarojs/components'
+import { getImgURL } from '@/utils/image'
+import '@/assets/css/iconfont.css'
 import './index.scss'
+import { useMemo } from 'react'
 
 export default function Pictures (props) {
   const { List = [] } = props
+
+  const urls = useMemo(() => {
+    return List.map((x) => (x.buildingImgList?.length ? x.buildingImgList : undefined))
+      .filter(Boolean)
+      .reduce((acc, arr) => acc.concat(arr.map((f) => f.url)), [])
+      .filter(Boolean)
+      .map((x) => getImgURL(x))
+  }, [List])
+
+  const handlePreview = (item) => {
+    const current = getImgURL(item.buildingImgList.length ? item.buildingImgList[0].url : null)
+    Taro.previewImage({ current, urls })
+  }
+
   return (
     <view className='components Pictures'>
 
@@ -18,7 +34,7 @@ export default function Pictures (props) {
         <ScrollView scroll-x>
           {
             List.map((item, index) => (
-              <view className='ListItem' key={`List-${index}`}>
+              <view className='ListItem' key={`List-${index}`} onClick={() => handlePreview(item)}>
                 <view className='Img'>
                   <Image mode='aspectFill' className='centerLabel' src={item.buildingImgList.length ? item.buildingImgList[0].url : null}></Image>
                 </view>

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

@@ -18,7 +18,7 @@ export default function PropertyConsultant (props) {
     Taro.makePhoneCall({ phoneNumber: phone })
   }
 
-  return (
+  return List.length > 0 ? (
     <view className='components PropertyConsultant'>
 
       <view className='Title flex-h'>
@@ -59,5 +59,5 @@ export default function PropertyConsultant (props) {
       </view>
 
     </view>
-  )
+  ) : null
 }

src/pages/index/buildingDetail/index.jsx

@@ -20,52 +20,33 @@ import News from './components/News/index'
 import Pictures from './components/Pictures/index'
 
 export default withLayout((props) => {
+  const { id } = props.router.params
 
-  const user = useSelector(state => state.user)
-  const [PersonId, setPersonId] = useState(null)
   const [DetailInfo, setDetailInfo] = useState({})
   const [ActivityList, setActivityList] = useState([])
   const [PictureList, setPictureList] = useState([])
   const [NewsList, setNewsList] = useState([])
-  const [LiveList, setLiveList] = useState([])
 
   const [IsPull, setPull] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
 
   useEffect(() => {
-    if (user?.userInfo?.person?.personId) {
-      setPersonId(user.userInfo.person.personId)
-    }
-  }, [user])
-
-  useEffect(() => {
-    if (PersonId) {
-      GetBuildingDetail()
-      GetProjectTrendList()
-      GetActivityList()
-      GetLiveList()
-      GetNewsList()
-    }
-  }, [PersonId])
-
-  useEffect(() => {
-    if (DetailInfo.buildingApartment) {
-      const List = DetailInfo.buildingApartment.filter(item => item.apartmentType === 'photo')
-      setPictureList(List.filter(item => item.buildingImgList.length > 0))
-    }
-  }, [DetailInfo])
-
-  const GetBuildingDetail = () => { // 获取楼盘信息
-    fetch({ url: `${API_ITEMS_DETAIL}/${props.router.params.id}`, method: 'get' }).then((res) => {
+    // 获取楼盘信息
+    fetch({ url: `${API_ITEMS_DETAIL}/${id}` }).then((res) => {
       setDetailInfo(res || {})
+      
+      if (res?.buildingApartment) {
+        const List = res.buildingApartment.filter(item => item.apartmentType === 'photo')
+        setPictureList(List.filter(item => item.buildingImgList.length > 0))
+      }
     })
-  }
 
-  const GetProjectTrendList = () => { // 获取项目动态
-    fetch({ url: API_PROJECT_TREND_LIST, method: 'get' }).then((res) => {
-      console.log(res)
+    // 获取资讯列表
+    fetch({ url: API_NEWS_LIST, params: { buildingId: id, pageSize: 2, pageNum: 1 } }).then((res) => {
+      setNewsList(res.records || [])
     })
-  }
+    GetActivityList()
+  }, [id])
 
   const GetActivityList = () => { // 获取活动列表
     fetch({ url: `${API_ACTIVITY_GROUP}?buildingId=${props.router.params.id}`, method: 'get' }).then((res) => {
@@ -74,26 +55,6 @@ export default withLayout((props) => {
     })
   }
 
-  const GetLiveList = () => { // 获取直播列表
-    fetch({ url: `${API_LIVE_LIST}?buildingId=${props.router.params.id}`, method: 'get' }).then((res) => {
-      let ResArr = res.records.slice(0, 2)
-      if (ResArr.length === 1) {
-        ResArr.push({})
-      }
-      setLiveList(ResArr || [])
-    })
-  }
-
-  const GetNewsList = () => { // 获取资讯列表
-    fetch({ url: `${API_NEWS_LIST}?buildingId=${props.router.params.id}&pageSize=2&pageNum=1`, method: 'get' }).then((res) => {
-      let ResArr = res.records.slice(0, 2)
-      if (ResArr.length === 1) {
-        ResArr.push({})
-      }
-      setNewsList(ResArr || [])
-    })
-  }
-
   const PageRefresh = () => { // 页面下拉刷新回调
     setPull(true)
   }
@@ -143,32 +104,32 @@ export default withLayout((props) => {
                 </view>
 
                 {/* 置业顾问 */}
-                <view className='PropertyConsultant' style={{ display: DetailInfo?.consultants?.length ? 'block' : 'none' }}>
+                <view className='PropertyConsultant' style={{minHeight: 0}}>
                   <PropertyConsultant List={DetailInfo?.consultants}></PropertyConsultant>
                 </view>
 
                 {/* 位置及周边 */}
-                <view className='Periphery'>
+                <view className='Periphery' style={{minHeight: 0}}>
                   <Periphery Info={DetailInfo}></Periphery>
                 </view>
 
                 {/* 户型介绍 */}
-                <view className='HouseTypeIntro'>
+                <view className='HouseTypeIntro' style={{minHeight: 0}}>
                   <HouseTypeIntro Info={DetailInfo?.buildingApartment}></HouseTypeIntro>
                 </view>
 
                 {/* 营销活动 */}
-                <view className='MarketingActivity' style={{ display: ActivityList.length ? 'block' : 'none' }}>
+                <view className='MarketingActivity' style={{minHeight: 0}}>
                   <MarketingActivity List={ActivityList}></MarketingActivity>
                 </view>
 
                 {/* 直播活动 */}
-                <view className='LivingActivity' style={{ display: LiveList.length ? 'block' : 'none' }}>
-                  <LivingActivity List={LiveList}></LivingActivity>
+                <view className='LivingActivity' style={{minHeight: 0}}>
+                  <LivingActivity List={DetailInfo?.liveActivityList}></LivingActivity>
                 </view>
 
                 {/* 新鲜资讯 */}
-                <view className='News' style={{ display: NewsList.length ? 'block' : 'none' }}>
+                <view className='News' style={{minHeight: 0}}>
                   <News List={NewsList}></News>
                 </view>