feats

config/dev.js

@@ -3,8 +3,8 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    // HOST: '"https://xlk.njyz.tech"',
-    HOST: '"http://127.0.0.1:8088"',
+    HOST: '"https://xlk.njyz.tech"',
+    // HOST: '"http://127.0.0.1:8088"',
     WSS_HOST: '"wss://xlk.njyz.tech"',
     OSS_PATH: '"https://zhiyun-image.oss-accelerate.aliyuncs.com/"',
     OSS_FAST_PATH: '"https://zhiyun-image.oss-accelerate.aliyuncs.com/"',

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

@@ -1,10 +1,25 @@
 
-import { Map } from '@tarojs/components'
+import { useEffect, useMemo, useState } from 'react'
+import { Map, CoverView } from '@tarojs/components'
 import '@/assets/css/iconfont.css'
 import './index.scss'
 
+const poiTypes = [
+  { label: '交通', value: 'Transport', class: 'iconfont icon-jiaotong' },
+  { label: '商业', value: 'Mall', class: 'iconfont icon-shangye' },
+  { label: '学校', value: 'Edu', class: 'iconfont icon-xuexiao' },
+  { label: '医院', value: 'Hospital', class: 'iconfont icon-yiyuan' },
+  { label: '银行', value: 'Bank', class: 'iconfont icon-yinhang' },
+  { label: '餐饮', value: 'Restaurant', class: 'iconfont icon-canyin' },
+]
+
 export default function Periphery (props) {
-  const { List = [] } = props
+  const { Info } = props
+
+  const [pois, setPois] = useState([])
+  const [markers, setMarkers] = useState([])
+
+  const loc = useMemo(() => (Info?.coordinate ? Info.coordinate.split(',') : []), [Info?.coordinate])
 
   const CutTab = () => {
     return () => {
@@ -12,24 +27,31 @@ export default function Periphery (props) {
     }
   }
 
-  const ClassName = (label) => {
-    switch (label) {
-      case '交通':
-        return 'iconfont icon-jiaotong'
-      case '商业':
-        return 'iconfont icon-shangye'
-      case '学校':
-        return 'iconfont icon-xuexiao'
-      case '医院':
-        return 'iconfont icon-yiyuan'
-      case '银行':
-        return 'iconfont icon-yinhang'
-      case '餐饮':
-        return 'iconfont icon-canyin'
-      default:
-        return ''
+  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',
+      }
+    })
+
+    setMarkers(mks)
+
+  }, [Info, loc])
 
   return (
     <view className='components Periphery'>
@@ -46,19 +68,25 @@ export default function Periphery (props) {
             id='poi-around'
             show-location
             scale={12}
-            markers={[]}
-            enable-enableScroll
-            enable-zoom
-          ></Map>
+            markers={markers}
+            longitude={loc[0]}
+            latitude={loc[1]}
+            // enable-enableScroll
+            // enable-zoom
+          >
+            <CoverView slot='callout' className='marker-callout'>
+              <CoverView markerId={-1} className='marker-project'>{Info.buildingName}</CoverView>
+            </CoverView>
+          </Map>
         </view>
       </view>
 
       <view className='List flex-h'>
         {
-          List.map((item, index) => (
-            <view className='flex-item' key={`Item-${index}`} onClick={CutTab(index)}>
-              <text className={ClassName(item.label)}></text>
-              <text>{item.label}({item.data.length})</text>
+          poiTypes.map((item) => (
+            <view className='flex-item' key={item.value} onClick={CutTab(item.value)}>
+              <text className={item.class}></text>
+              <text>{item.label}(123)</text>
             </view>
           ))
         }

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

@@ -59,4 +59,13 @@
       }
     }
   }
+
+}
+
+.marker-callout {
+  .marker-project {
+    color: #1A3B83;
+    font-weight: 700;
+    // font-size: 100px;
+  }
 }

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

@@ -3,8 +3,11 @@ import '@/assets/css/iconfont.css'
 import './index.scss'
 
 export default function ProjectDynamic (props) {
-  const { Data = {} } = props
-  return (
+  const { List = [] } = props
+
+  const info = List[0]
+
+  return info ? (
     <view className='components ProjectDynamic'>
 
       <view className='Title flex-h'>
@@ -15,17 +18,12 @@ export default function ProjectDynamic (props) {
         <text className='iconfont icon-jiantouright'></text>
       </view>
 
-      <view className='Nav'>
-        <text>楼盘资讯(8)</text>
-        <text>最新活动(1)</text>
-      </view>
-
       <view className='Info'>
-        <text className='Time'>2020年5月20日</text>
-        <text className='Title'>山和九著府预计5月加推5号楼</text>
-        <text className='Desc'>山和九著府预计5月加推5号楼，目前在售房源位于89号楼，均价26400元/㎡，户型建筑面积82、89、112㎡，预计2023年6月交付。</text>
+        <text className='Time'>{info.trendTime}</text>
+        <text className='Title'>{info.trendTitle}</text>
+        <text className='Desc'>{info.trendContent}</text>
       </view>
 
     </view>
-  )
+  ) : null
 }

src/pages/index/buildingDetail/components/ProjectDynamic/index.scss

@@ -7,60 +7,39 @@
     >.flex-item {
       >text {
         display: block;
-        font-size: 34px;
+        font-size: 34rpx;
         color: #333;
         line-height: 1;
         letter-spacing: 4px;
-        font-weight: bold;
+        font-weight: 500;
       }
     }
     >text {
-      font-size: 26px;
+      font-size: 26rpx;
       color: #A1A1A1;
     }
   }
-  >.Nav {
-    font-size: 0;
-    white-space: nowrap;
-    margin-top: 30px;
-    >text {
-      display: inline-block;
-      vertical-align: middle;
-      font-size: 28px;
-      line-height: 56px;
-      color: #333;
-      border-radius: 56px;
-      background: #F8F8F8;
-      padding: 0 20px;
-      min-width: 148px;
-      text-align: center;
-      margin-left: 30px;
-      &:first-child {
-        margin-left: 0;
-      }
-    }
-  }
   >.Info {
     position: relative;
     overflow: hidden;
     >text {
       display: block;
       &.Time {
-        font-size: 28px;
-        line-height: 40px;
-        margin-top: 28px;
+        font-size: 28rpx;
+        line-height: 40rpx;
+        margin-top: 28rpx;
         color: #1A3B83;
       }
       &.Title {
-        font-size: 32px;
-        line-height: 44px;
-        margin-top: 20px;
+        font-size: 32rpx;
+        line-height: 44rpx;
+        margin-top: 20rpx;
         font-weight: bold;
       }
       &.Desc {
-        font-size: 28px;
-        line-height: 40px;
-        margin-top: 20px;
+        font-size: 28rpx;
+        line-height: 40rpx;
+        margin-top: 20rpx;
         color: #A1A1A1;
         text-indent: 2em;
       }

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

@@ -9,16 +9,16 @@ 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 { dataSource } = props
-  const [leftTime] = useTimer(dataSource)
+  const { List } = props
+  const [leftTime] = useTimer(List)
 
   const handleMore = () => {
     Taro.navigateTo({ url: '/pages/index/specialPriceHouse/index' })
   }
 
-  const len = dataSource ? dataSource.length : 0
+  const len = List ? List.length : 0
 
-  return len > 0 && (
+  return len > 0 ? (
     <view className='components SpecialPriceHouse'>
       <view className='Title flex-h'>
         <view className='flex-item'>
@@ -32,7 +32,7 @@ export default function SpecialPriceHouse (props) {
       <view className='List'>
         <ScrollView scrollX>
           {
-            dataSource.map((item, index) => (
+            List.map((item, index) => (
               <view className='ListItem' key={`List-${index}`}>
                 <text className='Tips'>{`${toW(item.thriftPrice)}`}</text>
                 <view className='Price'>
@@ -49,5 +49,5 @@ export default function SpecialPriceHouse (props) {
       </view>
 
     </view>
-  )
+  ) : null
 }

src/pages/index/buildingDetail/index.jsx

@@ -28,7 +28,7 @@ export default withLayout((props) => {
   const [PictureList, setPictureList] = useState([])
   const [NewsList, setNewsList] = useState([])
   const [LiveList, setLiveList] = useState([])
-  const [MapList, setMapList] = useState([])
+
   const [IsPull, setPull] = useState(false)
   const [PullTimer, setPullTimer] = useState(null)
 
@@ -53,9 +53,6 @@ export default withLayout((props) => {
       const List = DetailInfo.buildingApartment.filter(item => item.apartmentType === 'photo')
       setPictureList(List.filter(item => item.buildingImgList.length > 0))
     }
-    if(DetailInfo.mapJson) {
-      setMapList(JSON.parse(DetailInfo.mapJson))
-    }
   }, [DetailInfo])
 
   const GetBuildingDetail = () => { // 获取楼盘信息
@@ -137,12 +134,12 @@ export default withLayout((props) => {
 
                 {/* 特价房源 */}
                 <view className='SpecialPriceHouse' style={{minHeight: 0}}>
-                  <SpecialPriceHouse dataSource={DetailInfo?.specialRoomList}></SpecialPriceHouse>
+                  <SpecialPriceHouse List={DetailInfo?.specialRoomList}></SpecialPriceHouse>
                 </view>
 
                 {/* 项目动态 */}
-                <view className='ProjectDynamic'>
-                  <ProjectDynamic></ProjectDynamic>
+                <view className='ProjectDynamic' style={{minHeight: 0}}>
+                  <ProjectDynamic List={DetailInfo?.trendList}></ProjectDynamic>
                 </view>
 
                 {/* 置业顾问 */}
@@ -152,7 +149,7 @@ export default withLayout((props) => {
 
                 {/* 位置及周边 */}
                 <view className='Periphery'>
-                  <Periphery List={MapList} Info={DetailInfo}></Periphery>
+                  <Periphery Info={DetailInfo}></Periphery>
                 </view>
 
                 {/* 户型介绍 */}