1

config/dev.js

@@ -5,8 +5,8 @@ module.exports = {
   defineConstants: {
     // HOST: '"http://47.101.36.130:8085"',//测试
     // WSS_HOST: '"wss://47.101.36.130:8085"',
-    HOST:  '"https://dev.jinchengjiaye.com"',//测试
-    WSS_HOST: '"wss://dev.jinchengjiaye.com"',
+    // HOST:  '"https://dev.jinchengjiaye.com"',//测试
+    // WSS_HOST: '"wss://dev.jinchengjiaye.com"',
     // HOST: '"https://lt.pawoma.cn"',
     // WSS_HOST: '"wss://lt.pawoma.cn"',
     // HOST: '"http://192.168.0.131:8080"',

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: '"http://192.168.0.218:8080"',
+    WSS_HOST: '"ws://192.168.0.218:8080"',
+    // 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,65 @@
+import Taro, { Component } from '@tarojs/taro'
+import { Map } from '@tarojs/components'
+
+const makerIcon = require('@assets/icons/blank.png')
+
+export default class PoiAround extends Component {
+
+  state = {
+    current: undefined,
+  }
+
+  handleTap = (e) => {
+    const marker = this.props.markers.filter(x => x.id === e.markerId)[0]
+
+    this.setState({ current: e.markerId })
+    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: makerIcon,
+        width: 30,
+        height: 30,
+        alpha: 0.7,
+        // title: index + 1,
+        // label: {
+        //   content: index + 1,
+        //   // borderRadius: 1000,
+        //   color: '#fff',
+        //   bgColor: '#f00',
+        //   textAlign: 'center',
+        // },
+        callout: {
+          content: index + 1 > 9 ? `${index + 1}` : `0${index + 1}`,
+          borderRadius: 30,
+          borderWidth: 2,
+          borderColor: '#BB9C79',
+          padding: 5,
+          color: current === marker.id ? '#fff' : '#BB9C79',
+          bgColor: current === marker.id ? '#BB9C79' : '#fff',
+          textAlign: 'center',
+          display: 'ALWAYS',
+        },
+      }
+    })
+
+    return this.props.longitude && (
+      <Map
+        showLocation
+        scale={12}
+        markers={markers}
+        longitude={this.props.longitude}
+        latitude={this.props.latitude}
+        onCalloutTap={this.handleTap}
+        style={this.props.style}
+      />
+    )
+  }
+}

src/pages/person/index.js

@@ -24,6 +24,7 @@ export default class Person extends Component {
     consultant: false,//置业顾问
     tourist: false,//普通用户,
     menus: [],
+    roleName: '普通用户',
   }
 
   componentDidShow() {
@@ -34,14 +35,14 @@ export default class Person extends Component {
 
   loadUserInfo() {
     queryUserInfo().then(user => {
+      const [roleSetting, roleName] = this.getRoleName(user.personType)
+
       this.setState({
         user,
         phone: user.phone,
-        menus: menus.map(group => group.filter(x => x.userTypes.indexOf(user.personType) > -1))
-      }, () => {
-        if (user.personType != ROLE_CODE['CHANNEL_AGENT'] && user.personType != ROLE_CODE['ESTATE_AGENT'] && user.personType != 'Realty Consultant') {
-          this.setState({ tourist: true, phone: user.phone })
-        }
+        menus: menus.map(group => group.filter(x => x.userTypes.indexOf(user.personType) > -1)),
+        roleName,
+        ...roleSetting,        
       })
     })
   }
@@ -91,16 +92,13 @@ export default class Person extends Component {
   getRoleName(type) {
     switch (type) {
       case ROLE_CODE['CONSULTANT']:
-        this.setState({ consultant: true })
-        return '置业顾问'
+        return [{ consultant: true }, '置业顾问']
       case ROLE_CODE['ESTATE_AGENT']:
-        this.setState({ isAgent: true })
-        return '独立经纪人'
+        return [{ isAgent: true }, '独立经纪人']
       case ROLE_CODE['CHANNEL_AGENT']:
-        this.setState({ isAgent: true })
-        return '渠道经纪人'
+        return [{ isAgent: true }, '渠道经纪人']
       default:
-        return '普通用户'
+        return [{ tourist: true }, '普通用户']
     }
   }
 
@@ -133,7 +131,7 @@ export default class Person extends Component {
   }
 
   renderDetail() {
-    const { user, menus, isAgent, consultant, tourist } = this.state
+    const { user, menus, roleName } = this.state
     // const showQRCode = user.personType === ROLE_CODE['CONSULTANT'] || ROLE_CODE['ESTATE_AGENT'] || ROLE_CODE['CHANNEL_AGENT']
     // const isConsultant = user.personType == ROLE_CODE['CONSULTANT']
     // const isConsultant = user.personType
@@ -146,7 +144,7 @@ export default class Person extends Component {
             <View className="info-block">
               <View className="avatar" onClick={this.goPersonDetail}>
                 <Image className="info__headimg" src={user.avatar} />
-                <View className="info-intro">{this.getRoleName(user.personType)}</View>
+                <View className="info-intro">{roleName}</View>
               </View>
 
               <View className="info-text" onClick={this.goPersonDetail}>
@@ -179,6 +177,7 @@ export default class Person extends Component {
         <View>
           {
             menus.map((group, ginx) => {
+              console.log('----------------')
               return (
                 <Block key={`grp-${ginx}`}>
                   {

src/pages/person/menus.js

@@ -43,21 +43,21 @@ const menus = [
       url: '/pages/person/customerAnalysis/index',
       icon: icons.homepage,
       extends: undefined,
-      userTypes: [CUSTOMER, CONSULTANT],
-    },
-    {
-      name: '成为经纪人',
-      url: '/pages/agent/become/index',
-      icon: icons.development,
-      extends: undefined,
-      userTypes: [CUSTOMER],
+      userTypes: [CONSULTANT],
     },
+    // {
+    //   name: '成为经纪人',
+    //   url: '/pages/agent/become/index',
+    //   icon: icons.development,
+    //   extends: undefined,
+    //   userTypes: [CUSTOMER],
+    // },
     {
       name: '推荐客户',
       url: '/pages/agent/client/index',
       icon: icons.recommend,
       extends: undefined,
-      userTypes: [ESTATE_AGENT, CHANNEL_AGENT],
+      userTypes: [CUSTOMER,ESTATE_AGENT, CHANNEL_AGENT],
     },
     {
       name: '发展经纪人',
@@ -141,6 +141,23 @@ const menus = [
       userTypes: [CUSTOMER, CONSULTANT, ESTATE_AGENT, CHANNEL_AGENT],
     },
   ],
+  [
+    {
+      name: '成为专业经纪人',
+      url: '/pages/agent/become/index',
+      icon: icons.feedback,
+      extends: undefined,
+      userTypes: [CUSTOMER],
+    },
+    {
+      name: '成为置业顾问',
+      url: '',
+      icon: icons.feedback,
+      extends: undefined,
+      userTypes: [CUSTOMER],
+    },
+
+  ]
 ]
 
 export { icons, menus }

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

@@ -0,0 +1,41 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import './style.scss'
+
+export default function Pannel(props) {
+  const { data = [], manualData = [] } = props.dataset || {}
+  const activeKey = props.active
+
+  return (
+    <View className="around-pannel">
+      {
+        data.map((item, index) => {
+          const { id, name, distance } = item || {}
+          const dist = distance >= 1000 ? `${Number(distance / 1000).toFixed(1)}km` : `${distance}m`
+          const active = activeKey === id
+
+          return (
+            <View className={`around-cell ${active ? 'active' : ''}`} key={`auto-${id}`}>
+              <View className="around-cell__body">{`${index + 1}、${name}`}</View>
+              <View className="around-cell__action">{dist}</View>
+            </View>
+          )
+        })
+      }
+      {
+        manualData.length && (
+          <View className="around-cell-title">其他</View>
+        )
+      }
+      {
+        manualData.map((item, index) => {
+          return (
+            <View className="around-cell" key={`manual-${index}`}>
+              <View className="around-cell__body">{`${index + 1}、${item}`}</View>
+            </View>
+          )
+        })
+      }
+    </View>
+  )
+}

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

@@ -0,0 +1,31 @@
+import Taro, { useState } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import './style.scss'
+
+export default function Tab(props) {
+  const [current, setCurrent] = useState(props.default || 0)
+  const tabList = props.dataset ? props.dataset.filter(x => x.num) : []
+  const handleClick = index => () => {
+    setCurrent(index)
+    if (typeof props.onChange === 'function') {
+      props.onChange(index, tabList[index])
+    }
+  }
+
+  return (
+    <View className="around-tab">
+      {tabList.map((item, index) => {
+        const { key, label, num } = item || {}
+        return (
+          <View
+            key={key}
+            className={`around-tab__item ${current === index ? 'active' : ''}`}
+            onClick={handleClick(index)}
+          >
+            {`${label}(${num})`}
+          </View>
+        )
+      })}
+    </View>
+  )
+}

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

@@ -0,0 +1,76 @@
+import Taro, { useState } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import PoiAround from '@components/amap/PoiAround'
+import Tab from './Tab'
+import Pannel from './Pannel'
+import './style.scss'
+
+export default function Around(props) {
+  const detail = props.building || {}
+  const [lat, lng] = (detail.coordinate || '').split(',')
+  const poiDatas = detail.mapJson ? JSON.parse(detail.mapJson) : []
+
+  // 展示内容数组
+  const dataList = poiDatas.map((item) => {
+    const key = item.key
+    const manualData = (detail[`building${key}`] || '').split(',')
+
+    return {
+      ...item,
+      manualData,
+      num: (item.data || []).length + manualData.length,
+    }
+  })
+
+  // 所有的 markers
+  const markersList = dataList.map((item) => {
+    
+    return (item.data || []).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 [curAD, setCurAD] = useState()
+  
+  // tab 切换
+  const handleTabChange = (index, tabItem) => {
+    setCurTab(index)
+    setMarkers(markersList[index])
+  }
+
+  // marker 点切换
+  const handleMarkerTap = (marker) => {
+    setCurAD(marker.id)
+  }
+
+  const goto = () => {
+    if (typeof props.onAction === 'function') {
+      props.onAction()
+    }
+  }
+  
+  return (
+    <View className="around-box">
+      <View className="around-header">
+        <PoiAround style="width: 100vw; height: 500rpx;" markers={markers} longitude={lng} latitude={lat} onMarkerClick={handleMarkerTap}/>
+      </View>
+      <View className="around-body">
+        <Tab dataset={dataList} onChange={handleTabChange} />
+        <Pannel active={curAD} dataset={dataList[curTab]} />
+        <View className="goto-map" onClick={goto}>立即前往</View>
+        <View className="around-hr" />
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,104 @@
+@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;
+  
+    .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;
+    }
+  }
+}
+
+.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;
+    }
+  }
+}
+
+.around-hr {
+  // width: 200px;
+  height: 8px;
+  margin: 20px auto 30px auto;
+  // background-color:rgba(0,0,0,0.12);
+  // border-radius:4px;
+}
+
+.around-pannel {
+  margin-top: 30px;
+}
+
+.around-cell {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  font-size: 32px;
+  font-weight: 400;
+  color: #666;
+  line-height: 44px;
+
+  &.active {
+    color: #BB9C79;
+  }
+
+  & + .around-cell {
+    margin-top: 26px;
+  }
+
+  &__body {
+    flex: auto;
+  }
+
+  &__action {
+    flex: none;
+    width: 200px;
+  }
+}
+
+.around-cell-title {
+  font-size: 32px;
+  font-weight: 700;
+  color:#666;
+  line-height: 44px;
+  margin: 42px auto 20px 0;
+}

src/pages/project/detail/index.scss

@@ -19,7 +19,7 @@
     height: 64px;
     background: rgba(255, 255, 255, 1);
     border-radius: 12px;
-    top: 440px;
+    top: 420px;
     left: 284px;
     font-size: 30px;
     font-family: PingFangSC-Regular, PingFang SC;
@@ -27,7 +27,8 @@
     text-align: center;
     line-height: 64px;
     color: rgba(53, 53, 53, 1);
-    display: flex;;
+    display: flex;
+    position: fixed;
     .video-btn {
       width: 92px;
       height: 64px;
@@ -46,7 +47,7 @@
 
 
   .wrap {
-    padding-top: 546px;
+    padding-top: 500px;
     background: transparent;
   }
 

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),
+      })
+    })
+  })
+}