map

src/app.js

@@ -45,6 +45,7 @@ class App extends Component {
       // 'pages/person/customerAnalysis/followUpCustomer/index',
       // 'pages/person/customerAnalysis/transactionCustomer/index',
       'pages/person/customerAnalysis/myCustomer',
+      'pages/project/detail/map',
       'pages/person/myShare/accessRecord',
       'pages/person/myShare/index',
       'pages/shop/index',

src/pages/activity/detail/assemble.js

@@ -337,7 +337,7 @@ export default class Detail extends Component {
 
 
   onShareAppMessage = () => {
-    const { shares } = this.state
+    const { shares, detail: { groupActivityId } } = this.state
     const currentPage = this.currentPageAndParams().join('?')
     const { userInfo: { person: { personId, personType, userId } } } = this.props
     const consultantId = personType == ROLE_CODE['CONSULTANT'] ? userId : ""
@@ -348,6 +348,7 @@ export default class Detail extends Component {
       propertyName: '拼团详情分享',
       consultantId: consultantId,
       sharePersonId: personId,
+      targetId: groupActivityId,
       data: '{}'
     })
 

src/pages/activity/detail/assistance.js

@@ -338,7 +338,7 @@ export default class Detail extends Component {
   }
 
   onShareAppMessage = () => {
-    const { shares } = this.state
+    const { shares, id } = this.state
     const currentPage = this.currentPageAndParams().join('?')
     const { userInfo: { person: { personId, personType, userId } } } = this.props
     const consultantId = personType == ROLE_CODE['CONSULTANT'] ? userId : ""
@@ -349,6 +349,7 @@ export default class Detail extends Component {
       propertyName: '助力详情分享',
       consultantId: consultantId,
       sharePersonId: personId,
+      targetId: id,
       data: '{}'
     })
 

src/pages/activity/detail/index.js

@@ -139,6 +139,7 @@ export default class Detail extends Component {
       propertyName: '活动详情分享',
       consultantId: consultantId,
       sharePersonId: personId,
+      targetId: dynamicId,
       data: '{}'
     }).then(res => {
       console.log('活动详情分享')

src/pages/news/detail/index.js

@@ -127,10 +127,11 @@ export default class NewsDetail extends Component {
 
     savePoint({
       event: 'share',
-      eventType: 'activity',
+      eventType: 'news',
       propertyName: '资讯详情分享',
       consultantId: consultantId,
       sharePersonId: personId,
+      targetId:newsId,
       data: '{}'
     }).then(res => {
       console.info('资讯详情分享')

src/pages/project/detail/Around/Pannel.js

@@ -80,7 +80,7 @@ export default class Pannel extends Component {
     const fixdHeight = this.props.style || 'height: 300rpx'
 
     return (
-      <ScrollView scrollY style={fixdHeight} scrollTop={this.state.currentMarkerPos} onScroll={this.bindScroll}>
+      // <ScrollView scrollY style={fixdHeight} scrollTop={this.state.currentMarkerPos} onScroll={this.bindScroll}>
         <View className="around-pannel">
           {
             this.state.markerList.map((item, index) => {
@@ -114,7 +114,7 @@ export default class Pannel extends Component {
             })
           }
         </View>
-      </ScrollView>
+      // </ScrollView>
     )
   }
 }

src/pages/project/detail/Around/Tab.js

@@ -7,7 +7,7 @@ export default function Tab(props) {
   const [current, setCurrent] = useState(props.default || 0)
   
   const tabList = props.dataset ? props.dataset : []
-  
+  const className = props.className
   const handleClick = index => () => {
     setCurrent(index)
     if (typeof props.onChange === 'function') {
@@ -16,14 +16,14 @@ export default function Tab(props) {
   }
 
   return (
-    <View className="around-tab">
+    <View className={className}>
       {tabList.map((item, index) => {
         const { key, label, num } = item || {}
         
         return (
           <View
             key={key}
-            className={`around-tab__item ${current === index ? 'active' : ''}`}
+            className={`${className}__item ${current === index ? 'active' : ''}`}
             onClick={handleClick(index)}
           >
             {`${label}(${num})`}

src/pages/project/detail/Around/around.js

@@ -0,0 +1,78 @@
+import Taro, { useState } from '@tarojs/taro'
+import { View, CoverView } from '@tarojs/components'
+import PoiAround from '@components/amap/PoiAround'
+import Tab from './Tab'
+import { POI_TYPES } from '@utils/amap'
+import './around.scss'
+
+export default function Around(props) {
+    const detail = props.building || {}
+
+    const [lat, lng] = (detail.coordinate || '').split(',')
+    const poiDatas = typeof detail.mapJson === 'string' ? JSON.parse(detail.mapJson) : []
+
+    // 展示内容数组
+    const dataList = POI_TYPES.map((poi) => {
+        const jsonData = poiDatas.filter(x => x.key === poi.key)[0] || {}
+        const data = JSON.parse(jsonData.data || '[]')
+        const manualData = (detail[`building${poi.key}`] === '' ? [] : (detail[`building${poi.key}`] || '').split(','))
+
+        return {
+            ...poi,
+            data,
+            manualData,
+            num: data.length + manualData.length,
+        }
+    }).filter(x => x.num)
+
+    // 所有的 markers
+    const markersList = dataList.map((item) => {
+        const mapJson = item.data || '[]'
+        return (mapJson || []).map((it) => {
+            const [longitude, latitude] = (it.location || '').split(',')
+
+            return {
+                id: it.id,
+                latitude,
+                longitude,
+                name: it.name,
+                address: it.address,
+            }
+        })
+    })
+
+    // 部分默认值
+    const [curTab, setCurTab] = useState(0)
+    const [markers, setMarkers] = useState(markersList[curTab])
+    const [curMarker, setCurMarker] = useState()
+
+    // tab 切换
+    const handleTabChange = (index, tabItem) => {
+        setCurTab(index)
+        setMarkers(markersList[index])
+    }
+
+    // marker 点切换
+    const handleMarkerTap = (marker) => {
+        setCurMarker(marker.id)
+    }
+
+    const goto = () => {
+        if (typeof props.onAction === 'function') {
+            props.onAction()
+        }
+    }
+
+    return (
+        <View className="around-box">
+            <View className="around-header">
+                <CoverView style="width: 100%; height: 100%;">
+                    <PoiAround style="width: 100vw; height: 500rpx;" current={curMarker} markers={markers} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap} />
+                </CoverView>
+            </View>
+            <View className="around-body">
+                <Tab dataset={dataList} className="around-project" onChange={handleTabChange} />
+            </View>
+        </View>
+    )
+}

src/pages/project/detail/Around/around.scss

@@ -0,0 +1,41 @@
+@import "@styles/mixins.scss";
+@import "@styles/theme.scss";
+
+.around-box {
+  width: 100vw;
+  background-color: #fff;
+    
+  .around-header {
+    width: 100%;
+    height: 500px;
+  }
+  .around-body {
+    padding: 0 30px;
+  
+  }
+}
+
+// .around-project {
+//   display: flex;
+//   flex-wrap:nowrap;
+//   align-items: center;
+//   overflow-x: scroll;
+//   scroll-behavior: smooth;
+//   padding: 24px 0;
+
+//   &__item {
+//     flex: 1 0 auto;
+//     font-size: 32px;
+//     color:#666;
+//     line-height: 44px;
+//     padding: 4px 0;
+//     &.active {
+//         color: #666;
+//         border-bottom: none;
+//     }
+    
+//     & + & {
+//       margin-left: 64px;
+//     }
+//   }
+// }

src/pages/project/detail/Around/index.js

@@ -8,7 +8,7 @@ import './style.scss'
 
 export default function Around(props) {
   const detail = props.building || {}
-  
+
   const [lat, lng] = (detail.coordinate || '').split(',')
   const poiDatas = typeof detail.mapJson === 'string' ? JSON.parse(detail.mapJson) : []
 
@@ -25,7 +25,7 @@ export default function Around(props) {
       num: data.length + manualData.length,
     }
   }).filter(x => x.num)
-  
+
   // 所有的 markers
   const markersList = dataList.map((item) => {
     const mapJson = item.data || '[]'
@@ -46,7 +46,7 @@ export default function Around(props) {
   const [curTab, setCurTab] = useState(0)
   const [markers, setMarkers] = useState(markersList[curTab])
   const [curMarker, setCurMarker] = useState()
-  
+
   // tab 切换
   const handleTabChange = (index, tabItem) => {
     setCurTab(index)
@@ -63,18 +63,31 @@ export default function Around(props) {
       props.onAction()
     }
   }
-  
+
   return (
-    <View className="around-box">
-      <View className="around-header">
-        <PoiAround style="width: 100vw; height: 500rpx;" current={curMarker} markers={markers} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap}/>
-      </View>
-      <View className="around-body">
-        <Tab dataset={dataList} onChange={handleTabChange} />
-        <Pannel active={curMarker} dataset={dataList[curTab]} onChange={handleMarkerTap}/>
-        <View className="goto-map" onClick={goto}>立即前往</View>
-        <View className="around-hr" />
+    <View >
+      <View style="  position: fixed;top: 0; width: 100%; height: 840rpx;">
+        <PoiAround style="width: 100vw; height: 840rpx;" current={curMarker} markers={markers} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap} />
       </View>
+      <ScrollView
+        enableBackToTop
+        style=" padding-top: 830rpx; background: transparent;"
+        scrollY>
+        <View className="around-box" style="border-radius: 40rpx 40rpx 0 0;">
+          <View className="building-con">
+            <View>
+              <View className="building-name">{detail.buildingName}</View>
+              <View className="building-address">{detail.address}</View>
+            </View>
+            <View className="building-go" onClick={goto}>前往</View>
+          </View>
+          <View className="around-body">
+            <Tab dataset={dataList} className="around-tab" onChange={handleTabChange} />
+            <Pannel active={curMarker} dataset={dataList[curTab]} onChange={handleMarkerTap} />
+            <View className="around-hr" />
+          </View>
+        </View>
+      </ScrollView>
     </View>
   )
 }

src/pages/project/detail/Around/style.scss

@@ -9,23 +9,8 @@
     width: 100%;
     height: 500px;
   }
-
   .around-body {
     padding: 0 30px;
-  
-    .goto-map {
-      width: 670px;
-      height: 94px;
-      background-color: #F8F8F8;
-      border-radius: 8px;
-      margin: 0 auto;
-      margin-top: 40px;
-      text-align: center;
-      font-size: 36px;
-      font-weight:400;
-      color:#BB9C79;
-      line-height: 94px;
-    }
   }
 }
 
@@ -104,6 +89,30 @@
     }
   }
 }
+.around-project {
+  display: flex;
+  flex-wrap:nowrap;
+  align-items: center;
+  overflow-x: scroll;
+  scroll-behavior: smooth;
+  padding: 24px 0;
+
+  &__item {
+    flex: 1 0 auto;
+    font-size: 32px;
+    color:#666;
+    line-height: 44px;
+    padding: 4px 0;
+    &.active {
+        color: #666;
+        border-bottom: none;
+    }
+    
+    & + & {
+      margin-left: 64px;
+    }
+  }
+}
 
 .around-cell-title {
   font-size: 32px;
@@ -111,4 +120,28 @@
   color:#666;
   line-height: 44px;
   margin: 42px auto 20px 0;
+}
+
+.building-con{
+  padding: 30px 30px 0px 30px;
+  display: flex;
+  justify-content: space-between;
+  .building-name{
+    font-size: 36px;
+    color: #333;
+  }
+  .building-address{
+    font-size: 28px;
+    color: #666;
+  }
+  .building-go{
+    width:130px;
+    height:72px;
+    line-height: 72px;
+    background:rgba(246,182,29,1);
+    border-radius:40px;
+    font-size: 28px;
+    color:#fff;
+    padding:0 20px;
+  }
 }

src/pages/project/detail/index.js

@@ -4,8 +4,8 @@ import './index.scss'
 import Banner from '../banner'
 import HelpGroupBanner from '../swiper'
 import Poster from './poster'
-import PoiAround from '@components/amap/PoiAround'
-import Around from './Around'
+
+import Around from './Around/around'
 import BackHomeBtn from '@components/BackHomeBtn'
 import AchievePhone from '@components/achievePhone'
 import {
@@ -292,6 +292,7 @@ export default class Index extends Component {
   }
 
   onShareAppMessage = () => {
+    console.log(this.props, "his.props")
     const {
       projectDetail: { shareContents, buildingName, buildingId, poster },
       userInfo: { person: { personId, personType, userId } }
@@ -305,6 +306,7 @@ export default class Index extends Component {
       propertyName: '项目详情分享',
       consultantId: consultantId,
       sharePersonId: personId,
+      targetId: buildingId,
       data: '{}'
     }).then(res => {
       console.log('项目详情分享')
@@ -333,13 +335,14 @@ export default class Index extends Component {
         resolve(posterData)
         return
       }
+      con
       const {
-        userInfo: { person: { avatarurl, nickname, personId, personType, phone, tel }, miniApp },
+        userInfo: { person: { avatarurl, nickname, personId, personType }, miniApp },
         projectDetail: { posters, buildingId, poster, price, buildingRestaurant, createDate, buildingName, tel, buildingTag, uvList = {} }
       } = this.props
       const { total = 0 } = uvList
       const consultant = personType == ROLE_CODE['CONSULTANT'] ? personId : ""
-      const phoneNum = phone || tel
+      const phoneNum = person.phone || person.tel
       const payload = {
         "scene": `id=${buildingId}&from=building_share&recommender=${personId}&consultant=${consultant}&phoneNum=${phoneNum}`,
         "page": 'pages/project/detail/index',
@@ -532,6 +535,8 @@ export default class Index extends Component {
     })
   }
 
+
+
   handleAuthPhoneSuccess = () => {
     const { person = {} } = this.props.userInfo || {}
     if ((person.avatarurl || '').indexOf('wx.qlogo.cn') === -1) {
@@ -705,19 +710,31 @@ export default class Index extends Component {
       </Block>
     )
   }
+  tomapDetail() {
+    const { buildingId } = this.state
+    Taro.navigateTo({
+      url: `/pages/project/detail/map?id=` + buildingId
+    })
+  }
   rendercircum() {
     const building = {
       ...this.props.projectDetail
     }
 
     return (
-      <View style="margin-bottom:-5px">
+      <View style="margin-bottom:-5px" onClick={this.tomapDetail}>
         <View className="section circum">
           <View className="section-head">
             <Text className="section-head__title">位置及周边配套</Text>
+            <View className="section-head__more">
+              更多<Text className="iconfont icon-more"></Text>
+            </View>
           </View>
+          {/* <View className="section-head">
+            <Text className="section-head__title">位置及周边配套</Text>
+          </View> */}
         </View>
-        <Around building={building} onAction={this.openMap.bind(this)}></Around>
+        <Around building={building} ></Around>
       </View>
     )
   }

src/pages/project/detail/index.scss

@@ -785,7 +785,7 @@
   position: fixed;
   top: 0;
   width: 100%;
-  height: 500px;
+  height: 600px;
 
   &-img {
     width: 100%;
@@ -1057,29 +1057,7 @@
   }
 }
 
-.around-tab {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  overflow-x: scroll;
-  scroll-behavior: smooth;
-  padding: 24px 0;
 
-  &__item {
-    flex: 1 0 auto;
-    font-size: 32px;
-    color: #666;
-    line-height: 44px;
-    padding: 4px 0;
-    &.active {
-      color: #BB9C79;
-      border-bottom: 1px solid #C8B299;
-    }
-    &+& {
-      margin-left: 64px;
-    }
-  }
-}
 
 .albumimg {
   width: 218px;

src/pages/project/detail/map.js

@@ -0,0 +1,149 @@
+import Taro, { Component } from '@tarojs/taro';
+import { View } from '@tarojs/components'
+import './index.scss'
+import Around from './Around/index'
+import AchievePhone from '@components/achievePhone'
+import { savePoint, updatePoint } from '@services/common'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn' // 按需加载
+import ready from '@utils/ready'
+import { getQrCodeParams } from '@utils/qrcode'
+import { connect } from '@tarojs/redux'
+import { dispatchProjectDetail } from '@actions/project'
+
+
+@connect(
+    ({ user, project }) => ({ ...user, ...project }),
+    { dispatchProjectDetail }
+)
+export default class Index extends Component {
+    config = {
+        navigationBarTitleText: '更多周边设施',
+    }
+
+    state = {
+        buildingId: null,
+    }
+
+    componentWillMount() {
+        ready.queue(() => {
+            const router = Taro.getStorageSync('router')
+            const id = this.$router.params.id || router.query.id
+            this.initPageData(id)
+
+        })
+    }
+    componentWillUnmount() {
+        const { recordId } = this.state
+        recordId && updatePoint(recordId)
+    }
+
+    initPageData(id) {
+
+        // const id='82b54f4a1f5b981df572253792afbfa1' 
+        this.setState({
+            buildingId: id
+        }, () => {
+            this.loadDetail()
+
+            // 埋点
+            //   savePoint({
+            //     event: 'detail',
+            //     eventType: 'building',
+            //     propertyName: '项目详情',
+            //     targetId: id,
+            //     buildingId: id,
+            //     data: '{}'
+            //   }).then(res => {
+            //     this.setState({
+            //       recordId: res.recordId
+            //     })
+            //     console.log('项目详情')
+            //   })
+        })
+    }
+
+
+
+    loadDetail() {
+        const { buildingId } = this.state
+        const { dispatchProjectDetail } = this.props
+        this.setState({
+            loaded: false,
+        })
+        Taro.showToast({
+            title: '正在加载数据',
+            icon: 'loading'
+        })
+
+        dispatchProjectDetail(buildingId).then(res => {
+            this.setState({
+                loaded: true,
+                // circumOpts: newCircumOpts,
+                isSaved: res.isSave
+            }, () => {
+                if (res.posters && res.posters.length) {
+                    this.setState({
+                        posterShow: 'flex'
+                    })
+                }
+            })
+            Taro.hideToast()
+        })
+    }
+
+
+
+    openMap() {
+        const {
+            buildingName,
+            address,
+            coordinate = ''
+        } = this.props.projectDetail
+
+        const coord = coordinate.split(',')
+        const latitude = parseFloat(coord[0])
+        const longitude = parseFloat(coord[1])
+        Taro.openLocation({
+            latitude,
+            longitude,
+            name: buildingName,
+            address,
+            scale: 18
+        })
+        savePoint({
+            event: 'navigation',
+            eventType: 'building',
+            propertyName: '查看项目地图',
+            data: '{}'
+        }).then(res => {
+            console.log('查看项目地图')
+        })
+    }
+
+    toViewAlbum(index) {
+        const { buildingId } = this.state
+        console.log('1111111', index)
+        this.navigateTo(`/pages/project/album/index?id=${buildingId}&current=${index}`)
+    }
+
+    HandleCircumTabClick(id) {
+        this.setState({
+            curTab: id
+        })
+    }
+
+
+    render() {
+        const building = {
+            ...this.props.projectDetail
+        }
+        return (
+            <Block>
+
+                <Around building={building} onAction={this.openMap.bind(this)}></Around>
+
+            </Block>
+        );
+    }
+}