feats

config/prod.js

@@ -3,10 +3,10 @@ module.exports = {
     NODE_ENV: '"production"'
   },
   defineConstants: {
-    // HOST: '"https://dev.jinchengjiaye.com"',
-    // WSS_HOST: '"wss://dev.jinchengjiaye.com"',
-    HOST: '"https://lt.pawoma.cn"',
-    WSS_HOST: '"wss://lt.pawoma.cn"',
+    HOST: '"https://dev.jinchengjiaye.com"',
+    WSS_HOST: '"wss://dev.jinchengjiaye.com"',
+    // HOST: '"https://lt.pawoma.cn"',
+    // WSS_HOST: '"wss://lt.pawoma.cn"',
   },
   weapp: {},
   h5: {}

project.config.json

@@ -2,7 +2,7 @@
 	"miniprogramRoot": "dist/",
 	"projectname": "mini-chengjiao",
 	"description": "知与行",
-	"appid": "wxd9ee3a9480a4e544",
+	"appid": "wxda1f84b79b3edeb3",
 	"setting": {
 		"urlCheck": false,
 		"es6": false,
@@ -59,6 +59,13 @@
 					"pathName": "pages/activity/detail/assistance",
 					"query": "id=85",
 					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "pages/project/detail/index",
+					"pathName": "pages/project/detail/index",
+					"query": "id=93e6d86b8b48e3ea359084e3ceaf2d03",
+					"scene": null
 				}
 			]
 		}

src/components/amap/PoiAround.js

@@ -0,0 +1,60 @@
+import Taro, { Component } from '@tarojs/taro'
+import { Map } from '@tarojs/components'
+
+const makerIcon = require('@assets/icons/marker.png')
+const makerCheckedIcon = require('@assets/icons/marker_checked.png')
+
+
+export default class PoiAround extends Component {
+
+  state = {
+    current: undefined,
+  }
+
+  markerTap = false
+
+  handleTap = (e) => {
+    const inx = e.markerId
+    this.markerTap = true
+    this.setState({ current: inx }, () => {
+      const marker = this.props.markers.filter((_, i) => i=== inx)[0]
+      this.props.onMarkerClick && this.props.onMarkerClick(marker)
+    })
+  }
+
+  render() {
+    const { current } = this.state
+    const markers =  (this.props.markers || []).map((marker, index) => {
+      return {
+        id: marker.id,
+        latitude: marker.latitude,
+        longitude: marker.longitude,
+        iconPath: index === current && this.markerTap ? makerCheckedIcon : makerIcon,
+        width: marker.width,
+        height: marker.height,
+        alpha: 0.7,
+        title: index + 1,
+        label: {
+          content: index + 1,
+          // borderRadius: 1000,
+          color: '#fff',
+          bgColor: '#f00',
+          textAlign: 'center',
+        },
+      }
+    })
+
+    this.markerTap = false
+
+    return this.props.longitude && (
+      <Map
+        showLocation
+        scale={12}
+        markers={markers}
+        longitude={this.props.longitude}
+        latitude={this.props.latitude}
+        onMarkerTap={this.handleTap}
+      />
+    )
+  }
+}

src/pages/project/detail/index.js

@@ -4,7 +4,7 @@ import './index.scss'
 import Banner from '../banner'
 import HelpGroupBanner from '../swiper'
 import Poster from './poster'
-import ActivityItem from '../../activity/item'
+import PoiAround from '@components/amap/PoiAround'
 import BackHomeBtn from '@components/BackHomeBtn'
 import {
   addItemUv,
@@ -20,6 +20,7 @@ import 'dayjs/locale/zh-cn' // 按需加载
 import ready from '@utils/ready'
 import Notice from '@components/Notice'
 import { getDownloadURL, getThumbnail } from '@utils/tools'
+import { getPoiAround } from '@utils/amap'
 import { connect } from '@tarojs/redux'
 import { dispatchProjectDetail } from '@actions/project'
 import getUserPhone from '@utils/getUserPhone'
@@ -47,25 +48,8 @@ export default class Index extends Component {
     helpList: [],
     groupList: [],
     statusOpts: ['待定', '在建', '在售'],
-    circumOpts: [
-      {
-        name: '交通',
-        id: 'buildingTransport'
-      },
-      {
-        name: '教育',
-        id: 'buildingEdu'
-      },
-      {
-        name: '医疗',
-        id: 'buildingHospital'
-      },
-      {
-        name: '商业',
-        id: 'buildingMall'
-      }
-    ],
-    curTab: 'buildingTransport',
+    circumOpts: [],
+    curTab: 'Transport',
     recordId: null,
     posterShow: 'none'
   }
@@ -76,8 +60,7 @@ export default class Index extends Component {
       const router = Taro.getStorageSync('router')
       const id = this.$router.params.id || router.query.id
       // const id='82b54f4a1f5b981df572253792afbfa1' 
-      console.info('project-1:', router)
-      console.info('project-2:', this.$router)
+
       this.setState({
         buildingId: id
       }, () => {
@@ -109,6 +92,15 @@ export default class Index extends Component {
     const { recordId } = this.state
     recordId && updatePoint(recordId)
   }
+
+  loadMapAround(building) {
+    const [lat, lng] = (building.coordinate || '').split(',')
+
+    if (!lat || !lng) return Promise.reject()
+
+    return getPoiAround({ lng, lat})
+  }
+
   loadHelpGroupList() {
     const { buildingId } = this.state
     queryHelpGroup({ buildingId: buildingId }).then(res => {
@@ -131,7 +123,7 @@ export default class Index extends Component {
   }
 
   loadDetail() {
-    const { buildingId, circumOpts } = this.state
+    const { buildingId } = this.state
     const { dispatchProjectDetail } = this.props
     this.setState({
       loaded: false,
@@ -142,25 +134,32 @@ export default class Index extends Component {
     })
 
     dispatchProjectDetail(buildingId).then(res => {
-      circumOpts.map(item => {
-        let arr = res[item.id] ? res[item.id].split(',') : []
-        item.content = arr
-        item.num = arr.length
-      })
+      this.loadMapAround(res).then(data => {
+        const newCircumOpts = data.map((item) => {
+          const dtKey = `building${item.key}`
+          const manualDt = res[dtKey] ? res[dtKey].split(',') : []
+
+          return {
+            ...item,
+            manualDt,
+            num: manualDt.length + item.poisData.length
+          }
+        })
 
-      this.setState({
-        loaded: true,
-        circumOpts,
-        isSaved: res.isSave
-      }, () => {
-        if (res.posters && res.posters.length) {
-          this.setState({
-            posterShow: 'flex'
-          })
-        }
+        this.setState({
+          loaded: true,
+          circumOpts: newCircumOpts,
+          isSaved: res.isSave
+        }, () => {
+          if (res.posters && res.posters.length) {
+            this.setState({
+              posterShow: 'flex'
+            })
+          }
+        })
+
+        Taro.hideToast()
       })
-      Taro.hideToast()
-      // WxParse.wxParse('article', 'html', res.remark, this.$scope, 0)
     })
   }
 
@@ -487,6 +486,11 @@ export default class Index extends Component {
       url: `/pages/project/floor/index`
     })
   }
+
+  handleMarkerTap = (marker) => {
+
+  }
+
   renderBottomMenu() {
     const { userInfo: { person: { personType } } } = this.props
     const { posterShow } = this.state
@@ -613,7 +617,8 @@ export default class Index extends Component {
   rendercircum() {
     const { curTab, circumOpts } = this.state
     const { projectDetail } = this.props
-    const panel = circumOpts.filter(item => item.id === curTab)[0]
+    const panel = circumOpts.filter(item => item.key === curTab)[0]
+    const [lat, lng] = (projectDetail.coordinate || '').split(',')
 
     return (
       <View className="section circum">
@@ -625,25 +630,39 @@ export default class Index extends Component {
             {
               circumOpts.map(item => (
                 <Text
-                  key={item.id}
-                  className={curTab === item.id ? 'selected item' : 'item'}
-                  onClick={this.HandleCircumTabClick.bind(this, item.id)}>{item.name}({item.num})</Text>
+                  key={item.key}
+                  className={curTab === item.key ? 'selected item' : 'item'}
+                  onClick={this.HandleCircumTabClick.bind(this, item.key)}>{item.label}({item.num})</Text>
               ))
             }
           </View>
 
           <View className='map'>
-            <Image src={getThumbnail(projectDetail.mapImg)} className='map__img' mode="widthFix"></Image>
+            <PoiAround markers={panel.markers} longitude={lng} latitude={lat} onMarkerClick={this.handleMarkerTap}/>
           </View>
           <ScrollView className="body" scrollY >
-            {
-              panel.content.map((text, index) => (
-                <View className="row" key={index}>
-                  {text}</View>
-              ))
-            }
+            <View class="">
+              <View></View>
+              {
+                panel.poisData.map((poi, inx) => (
+                  <View className="row flex" key={`poi-${inx}`}>
+                    <View>{inx + 1}</View>
+                    <View>{poi.name}</View>
+                    <View>{poi.distance} m</View>
+                  </View>
+                ))
+              }
+            </View>
+            <View class="">              
+              <View>其他</View>
+              {
+                panel.manualDt.map((text, index) => (
+                  <View className="row" key={`mt-${index}`}>{text}</View>
+                ))
+              }
+            </View>
           </ScrollView>
-          <Button className='map-more-btn' onClick={this.openMap.bind(this)}>查看全部配套</Button>
+          <Button className='map-more-btn' onClick={this.openMap.bind(this)}>立即前往</Button>
         </View>
       </View>
     )

src/utils/amap.js

@@ -0,0 +1,99 @@
+/**
+ * 高德地图
+ * 
+ * POI 类型下载 https://lbs.amap.com/api/webservice/guide/api/search/#around
+ * 
+ */
+const amapLib = require('../lib/amap-wx');
+const myAmapKey = '766411323b66f7e876f428d8a23aa83c'
+const amap = new amapLib.AMapWX({ key: myAmapKey })
+
+// key 值会被拿到 building 表中 组合为字段名
+const POI_TYPES = [
+  {
+    key: 'Transport',
+    label: '交通',
+    types: ['150100', '150200', '150300', '150400', '150500', '150600'],
+  },
+  {
+    key: 'Mall',
+    label: '商业',
+    types: ['060100', '060200', '060300', '060400', '060500', '060600',
+            '060700', '060800', '060900', '061000', '061100', '061200',
+            '061300', '061400', '080100', '080200', '080300', '080400',
+            '080500', '080600'],
+  },
+  {
+    key: 'Edu',
+    label: '学校',
+    types: ['141200'],
+  },
+  {
+    key: 'Hospital',
+    label: '医院',
+    types: ['090100', '090200', '090300', '090400', '090500', '090600', '090700'],
+  },
+  {
+    key: 'Bank',
+    label: '银行',
+    types: ['160100'],
+  },
+  {
+    key: 'Restaurant',
+    label: '餐饮',
+    types: ['050100', '050200', '050300', '050400', '050500', '050600',
+            '050700', '050800', '050900'],
+  },
+]
+
+const getPrefix = str => str.substr(0, 4)
+
+export function getPoiAround(params) {
+  const {
+    lng,
+    lat
+  } = params || {}
+
+  return new Promise((resolve, reject) => {
+    const querytypes = POI_TYPES.reduce((acc, item) => ([ ...acc, ...item.types ]), []).join('|')
+    const location = `${lng},${lat}`
+    const iconPath = undefined
+    const iconPathSelected = undefined
+    const resultList = []
+
+    // 成功回调
+    // https://lbs.amap.com/api/webservice/guide/api/search/#around
+    const successCall = poiType => res => {
+      resultList.push({
+        key: poiType.key,
+        label: poiType.label,
+        poisData: res.poisData,
+        markers: res.markers
+      })
+
+      if (resultList.length === POI_TYPES.length) {
+        resolve(resultList)
+      }
+    }
+
+    // 失败回调
+    // https://lbs.amap.com/api/webservice/guide/tools/info/
+    const failCall = poiType => info => {
+      console.error(poiType, info)
+      reject(info)
+    }
+
+    POI_TYPES.forEach((pt) => {
+      const querytypes = pt.types.join('|')
+
+      amap.getPoiAround({
+        querytypes,
+        location,
+        iconPath,
+        iconPathSelected,
+        success: successCall(pt),
+        fail: failCall(pt),
+      })
+    })
+  })
+}