|
|
@@ -1,81 +1,189 @@
|
|
1
|
|
-import { useState } from 'react'
|
|
|
1
|
+import { useEffect, useRef, useState } from 'react'
|
|
|
2
|
+import Taro from '@tarojs/taro'
|
|
2
|
3
|
import withLayout from '@/layout'
|
|
3
|
|
-import { Image } from '@tarojs/components'
|
|
|
4
|
+import { Image, Map } from '@tarojs/components'
|
|
|
5
|
+import { getItemList } from '@/services/item'
|
|
|
6
|
+import { getImgURL } from '@/utils/image'
|
|
4
|
7
|
import '@/assets/css/iconfont.css'
|
|
5
|
8
|
import './index.scss'
|
|
6
|
9
|
|
|
7
|
|
-export default withLayout(() => {
|
|
|
10
|
+export default withLayout((props) => {
|
|
|
11
|
+ const { city } = props
|
|
8
|
12
|
|
|
9
|
13
|
const [ShowInfo, setShowInfo] = useState(false)
|
|
|
14
|
+ const [list, setList] = useState([])
|
|
|
15
|
+ const [markers, setMarkers] = useState([])
|
|
|
16
|
+ const mapCtx = useRef()
|
|
|
17
|
+ const [current, setCurrent] = useState({})
|
|
10
|
18
|
|
|
11
|
|
- const CutInfo = (status) => {
|
|
12
|
|
- return () => {
|
|
13
|
|
- setShowInfo(!!status)
|
|
|
19
|
+ const changeCity = () => {
|
|
|
20
|
+ Taro.navigateTo({ url: '/pages/index/location/index' })
|
|
|
21
|
+ }
|
|
|
22
|
+
|
|
|
23
|
+ const handleMarker = (e) => {
|
|
|
24
|
+ const { markerId } = e
|
|
|
25
|
+ const building = list[markerId - 1];
|
|
|
26
|
+ setCurrent(building||{});
|
|
|
27
|
+ setShowInfo(true)
|
|
|
28
|
+ }
|
|
|
29
|
+
|
|
|
30
|
+ const gotoDetail = () => {
|
|
|
31
|
+ if (current.buildingId) {
|
|
|
32
|
+ Taro.navigateTo({ url: `/pages/index/buildingDetail/index?id=${current.buildingId}` })
|
|
|
33
|
+ }
|
|
|
34
|
+ }
|
|
|
35
|
+
|
|
|
36
|
+ const locationTo = () => {
|
|
|
37
|
+ if (current.buildingId) {
|
|
|
38
|
+ const loc = current.coordinate.split(',')
|
|
|
39
|
+ Taro.openLocation({
|
|
|
40
|
+ longitude: loc[0] - 0,
|
|
|
41
|
+ latitude: loc[1] - 0,
|
|
|
42
|
+ name: current.buildingName,
|
|
|
43
|
+ address: current.address,
|
|
|
44
|
+ scale: 12,
|
|
|
45
|
+ })
|
|
14
|
46
|
}
|
|
15
|
47
|
}
|
|
16
|
48
|
|
|
|
49
|
+ useEffect(() => {
|
|
|
50
|
+ Taro.nextTick(() => {
|
|
|
51
|
+ mapCtx.current = Taro.createMapContext('map-buildings')
|
|
|
52
|
+ })
|
|
|
53
|
+ }, [])
|
|
|
54
|
+
|
|
|
55
|
+ useEffect(() => {
|
|
|
56
|
+ if (city?.id) {
|
|
|
57
|
+ // 先移除页面的 markers
|
|
|
58
|
+ if (mapCtx.current && markers.length) {
|
|
|
59
|
+ mapCtx.current.removeMarkers({ markerIds: markers.map(x => x.id) })
|
|
|
60
|
+ setMarkers([])
|
|
|
61
|
+ }
|
|
|
62
|
+
|
|
|
63
|
+ getItemList({
|
|
|
64
|
+ cityId: city.id,
|
|
|
65
|
+ pageSize: 100,
|
|
|
66
|
+ }).then((res) => {
|
|
|
67
|
+ const { records } = res
|
|
|
68
|
+ setList((records || []).filter(x => x.coordinate))
|
|
|
69
|
+ })
|
|
|
70
|
+ }
|
|
|
71
|
+ }, [city?.id])
|
|
|
72
|
+
|
|
|
73
|
+ useEffect(() => {
|
|
|
74
|
+ if (!list.length) return;
|
|
|
75
|
+
|
|
|
76
|
+ const mks = list.map((item, index) => {
|
|
|
77
|
+ const loc = item.coordinate.split(',')
|
|
|
78
|
+
|
|
|
79
|
+ return {
|
|
|
80
|
+ id: index + 1,
|
|
|
81
|
+ longitude: loc[0] - 0,
|
|
|
82
|
+ latitude: loc[1] - 0,
|
|
|
83
|
+ iconPath: '',
|
|
|
84
|
+ width: 18,
|
|
|
85
|
+ height: 27,
|
|
|
86
|
+ callout: {
|
|
|
87
|
+ content: item.buildingName,
|
|
|
88
|
+ color: '#333333',
|
|
|
89
|
+ fontSize: 14,
|
|
|
90
|
+ display: 'ALWAYS',
|
|
|
91
|
+ padding: 6,
|
|
|
92
|
+ borderRadius: 2,
|
|
|
93
|
+ borderColor: 'rgba(0,0,0, .1)',
|
|
|
94
|
+ }
|
|
|
95
|
+ // customCallout: {
|
|
|
96
|
+ // anchorY: 0,
|
|
|
97
|
+ // anchorX: 0,
|
|
|
98
|
+ // display: 'ALWAYS',
|
|
|
99
|
+ // }
|
|
|
100
|
+ }
|
|
|
101
|
+ })
|
|
|
102
|
+
|
|
|
103
|
+ const points = mks.map(it => ({ longitude: it.longitude, latitude: it.latitude }))
|
|
|
104
|
+ setMarkers(mks)
|
|
|
105
|
+
|
|
|
106
|
+ const t = setInterval(() => {
|
|
|
107
|
+ if (mapCtx.current) {
|
|
|
108
|
+ mapCtx.current.includePoints({ points, padding: [32] })
|
|
|
109
|
+ clearInterval(t)
|
|
|
110
|
+ }
|
|
|
111
|
+ }, 300)
|
|
|
112
|
+
|
|
|
113
|
+ return () => clearInterval(t)
|
|
|
114
|
+ }, [list])
|
|
|
115
|
+
|
|
17
|
116
|
return (
|
|
18
|
117
|
<view className='Page findHouseFromMap'>
|
|
19
|
118
|
|
|
20
|
119
|
{/* 地图 */}
|
|
21
|
120
|
<view className='MapContainer'>
|
|
22
|
|
-
|
|
|
121
|
+ <Map
|
|
|
122
|
+ id='map-buildings'
|
|
|
123
|
+ show-location
|
|
|
124
|
+ scale={12}
|
|
|
125
|
+ longitude={city?.lng}
|
|
|
126
|
+ latitude={city?.lat}
|
|
|
127
|
+ markers={markers}
|
|
|
128
|
+ onMarkertap={handleMarker}
|
|
|
129
|
+ onTap={() => setShowInfo(false)}
|
|
|
130
|
+ />
|
|
23
|
131
|
</view>
|
|
24
|
132
|
|
|
25
|
133
|
{/* 定位 */}
|
|
26
|
|
- <view className='Location'>
|
|
|
134
|
+ <view className='Location' onClick={changeCity}>
|
|
27
|
135
|
<text className='iconfont icon-dingwei'></text>
|
|
28
|
|
- <text>南京市</text>
|
|
|
136
|
+ <text>{city.name}</text>
|
|
29
|
137
|
</view>
|
|
30
|
138
|
|
|
31
|
139
|
{/* 分享 */}
|
|
32
|
|
- <view className='Share'>
|
|
|
140
|
+ <button className='Share' openType='share'>
|
|
33
|
141
|
<text className='iconfont icon-fenxiang'></text>
|
|
34
|
|
- <text>分享</text>
|
|
35
|
|
- </view>
|
|
|
142
|
+ <text>分 享</text>
|
|
|
143
|
+ </button>
|
|
36
|
144
|
|
|
37
|
145
|
{/* 附近楼盘 */}
|
|
38
|
146
|
<view className={ShowInfo ? 'AroundBuilding active' : 'AroundBuilding'}>
|
|
39
|
|
- <view className='Go'>
|
|
|
147
|
+ <view className='Go' onClick={locationTo}>
|
|
40
|
148
|
<text>立即</text>
|
|
41
|
149
|
<text>前往</text>
|
|
42
|
150
|
</view>
|
|
43
|
151
|
<view className='InfoContainer'>
|
|
44
|
|
- <text className='Title' onClick={CutInfo(true)}>附近楼盘</text>
|
|
|
152
|
+ {/* <text className='Title' onClick={CutInfo(true)}>附近楼盘</text> */}
|
|
45
|
153
|
<view className='InfoContent'>
|
|
46
|
|
- <view className='Img'>
|
|
47
|
|
- <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
|
|
|
154
|
+ <view className='Img' onClick={gotoDetail}>
|
|
|
155
|
+ <Image mode='scaleToFill' src={getImgURL(current.buildingListImg?.length ? current.buildingListImg[0].url : null)} className='centerLabel'></Image>
|
|
48
|
156
|
</view>
|
|
49
|
157
|
<view className='Name flex-h'>
|
|
50
|
158
|
<view className='flex-item'>
|
|
51
|
|
- <text>奥园金基天著尚居</text>
|
|
|
159
|
+ <text>{current.buildingName}</text>
|
|
52
|
160
|
</view>
|
|
53
|
|
- <text>约</text>
|
|
54
|
|
- <text>20000/㎡</text>
|
|
|
161
|
+ <text></text>
|
|
|
162
|
+ <text>{current.price}</text>
|
|
55
|
163
|
</view>
|
|
56
|
|
- <text className='Address'>江宁禄口云熙99路号（诚信大道）</text>
|
|
|
164
|
+ <text className='Address'>{current.address}</text>
|
|
57
|
165
|
<view className='Tag'>
|
|
58
|
|
- <text>纯新盘</text>
|
|
59
|
|
- <text>纯新盘</text>
|
|
60
|
|
- <text>纯新盘</text>
|
|
|
166
|
+ {
|
|
|
167
|
+ (current.buildingTag || []).map((item, index) => (
|
|
|
168
|
+ <text key={`Tags-${index}`}>{item.tagName}</text>
|
|
|
169
|
+ ))
|
|
|
170
|
+ }
|
|
61
|
171
|
</view>
|
|
62
|
172
|
<view className='Views flex-h'>
|
|
63
|
173
|
<view className='flex-item'>
|
|
64
|
174
|
<text className='iconfont icon-fenxiang'></text>
|
|
65
|
|
- <text>3次分享</text>
|
|
|
175
|
+ <text>{`${current.shareNum||0}次分享`}</text>
|
|
66
|
176
|
</view>
|
|
67
|
177
|
<view className='Icons'>
|
|
68
|
|
- <view>
|
|
69
|
|
- <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
|
|
70
|
|
- </view>
|
|
71
|
|
- <view>
|
|
72
|
|
- <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
|
|
73
|
|
- </view>
|
|
74
|
|
- <view>
|
|
75
|
|
- <Image mode='scaleToFill' src={null} className='centerLabel'></Image>
|
|
76
|
|
- </view>
|
|
|
178
|
+ {
|
|
|
179
|
+ (current.uvList?.records || []).slice(0, 3).map((item, index) => (
|
|
|
180
|
+ <view key={`uv-${index}`}>
|
|
|
181
|
+ <Image mode='scaleToFill' className='centerLabel' src={item.photoOravatar} />
|
|
|
182
|
+ </view>
|
|
|
183
|
+ ))
|
|
|
184
|
+ }
|
|
77
|
185
|
</view>
|
|
78
|
|
- <text>...9人围观</text>
|
|
|
186
|
+ <text>{`...${current.pvNum}人围观`}</text>
|
|
79
|
187
|
</view>
|
|
80
|
188
|
</view>
|
|
81
|
189
|
</view>
|
