feats

config/defaultSettings.js

@@ -12,7 +12,7 @@ export default {
   menu: {
     locale: false,
   },
-  title: 'Ant Design Pro',
+  title: '新 联 家',
   pwa: false,
   iconfontUrl: '',
 };

package.json

@@ -44,6 +44,7 @@
     "not ie <= 10"
   ],
   "dependencies": {
+    "@amap/amap-jsapi-loader": "^1.0.1",
     "@ant-design/pro-layout": "^4.10.13",
     "@antv/data-set": "^0.11.0",
     "@zjxpcyc/xrc-form2": "2.2.2",
@@ -58,7 +59,6 @@
     "path-to-regexp": "2.4.0",
     "qs": "^6.9.0",
     "react": "^16.8.6",
-    "react-amap": "^1.2.8",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",

src/layouts/UserLayout.jsx

@@ -7,6 +7,7 @@ import { formatMessage } from 'umi-plugin-react/locale';
 // import SelectLang from '@/components/SelectLang';
 import logo from '../assets/logo.svg';
 import styles from './UserLayout.less';
+import setting from '../../config/defaultSettings'
 
 const UserLayout = (props) => {
   const {
@@ -44,7 +45,7 @@ const UserLayout = (props) => {
             <div className={styles.header}>
               <Link to="/">
                 <img alt="logo" className={styles.logo} src={logo} />
-                <span className={styles.title}>新联康</span>
+                <span className={styles.title}>{setting.title}</span>
               </Link>
             </div>
             <div className={styles.desc}>Ant Design 是西湖区最具影响力的 Web 设计规范</div>

src/pages/Live/LiveActivity/Edit/components/share.jsx

@@ -9,7 +9,7 @@ import Wangedit from '../../../../../components/Wangedit/Wangedit'
 import request from '../../../../../utils/request'
 import yinhao from '../../../../../assets/yinhao.png'
 import ImageUploader from '../../../../../components/XForm/ImageUpload';
-import logo from '../../../../../assets/logo.png';
+import logo from '../../../../../assets/logo.svg';
 import touxiang from '../../../../../assets/touxiang.jpg';
 import poster1 from '../../../../../assets/poster1.png';
 import poster2 from '../../../../../assets/poster2.png';

src/pages/Live/liveActivity copy/edit/components/share.jsx

@@ -9,7 +9,7 @@ import Wangedit from '../../../../../components/Wangedit/Wangedit'
 import request from '../../../../../utils/request'
 import yinhao from '../../../../../assets/yinhao.png'
 import ImageUploader from '../../../../../components/XForm/ImageUpload';
-import logo from '../../../../../assets/logo.png';
+import logo from '../../../../../assets/logo.svg';
 import touxiang from '../../../../../assets/touxiang.jpg';
 import poster1 from '../../../../../assets/poster1.png';
 import poster2 from '../../../../../assets/poster2.png';

src/pages/activity/detailActivity.jsx

@@ -11,7 +11,7 @@ import Wangedit from '../../components/Wangedit/Wangedit'
 import request from '../../utils/request'
 import yinhao from '../../assets/yinhao.png'
 import ImageUploader from '../../components/XForm/ImageUpload';
-import logo from '../../assets/logo.png';
+import logo from '../../assets/logo.svg';
 import touxiang from '../../assets/touxiang.jpg';
 import poster1 from '../../assets/poster1.png';
 import poster2 from '../../assets/poster2.png';

src/pages/activity/editActivity.jsx

@@ -12,7 +12,7 @@ import Wangedit from '../../components/Wangedit/Wangedit'
 import request from '../../utils/request'
 import yinhao from '../../assets/yinhao.png'
 import ImageUploader from '../../components/XForm/ImageUpload';
-import logo from '../../assets/logo.png';
+import logo from '../../assets/logo.svg';
 import touxiang from '../../assets/touxiang.jpg';
 import poster1 from '../../assets/poster1.png';
 import poster2 from '../../assets/poster2.png';

src/pages/activity/groupActivity/detailActivity.jsx

@@ -11,7 +11,7 @@ import Wangedit from '../../../components/Wangedit/Wangedit'
 import request from '../../../utils/request'
 import yinhao from '../../../assets/yinhao.png'
 import ImageUploader from '../../../components/XForm/ImageUpload';
-import logo from '../../../assets/logo.png';
+import logo from '../../../assets/logo.svg';
 import touxiang from '../../../assets/touxiang.jpg';
 import poster1 from '../../../assets/poster1.png';
 import poster2 from '../../../assets/poster2.png';

src/pages/activity/groupActivity/editGroupActivity.jsx

@@ -11,7 +11,7 @@ import Wangedit from '../../../components/Wangedit/Wangedit'
 import request from '../../../utils/request'
 import yinhao from '../../../assets/yinhao.png'
 import ImageUploader from '../../../components/XForm/ImageUpload';
-import logo from '../../../assets/logo.png';
+import logo from '../../../assets/logo.svg';
 import touxiang from '../../../assets/touxiang.jpg';
 import poster1 from '../../../assets/poster1.png';
 import poster2 from '../../../assets/poster2.png';

src/pages/activity/helpActivity/detailActivity.jsx

@@ -11,7 +11,7 @@ import Wangedit from '../../../components/Wangedit/Wangedit'
 import request from '../../../utils/request'
 import yinhao from '../../../assets/yinhao.png'
 import ImageUploader from '../../../components/XForm/ImageUpload';
-import logo from '../../../assets/logo.png';
+import logo from '../../../assets/logo.svg';
 import touxiang from '../../../assets/touxiang.jpg';
 import poster1 from '../../../assets/poster1.png';
 import poster2 from '../../../assets/poster2.png';

src/pages/activity/helpActivity/edithelpActivity.jsx

@@ -11,7 +11,7 @@ import Wangedit from '../../../components/Wangedit/Wangedit'
 import request from '../../../utils/request'
 import yinhao from '../../../assets/yinhao.png'
 import ImageUploader from '../../../components/XForm/ImageUpload';
-import logo from '../../../assets/logo.png';
+import logo from '../../../assets/logo.svg';
 import touxiang from '../../../assets/touxiang.jpg';
 import poster1 from '../../../assets/poster1.png';
 import poster2 from '../../../assets/poster2.png';

src/pages/activity/liveActivity/edit/components/share.jsx

@@ -9,7 +9,7 @@ import Wangedit from '../../../../../components/Wangedit/Wangedit'
 import request from '../../../../../utils/request'
 import yinhao from '../../../../../assets/yinhao.png'
 import ImageUploader from '../../../../../components/XForm/ImageUpload';
-import logo from '../../../../../assets/logo.png';
+import logo from '../../../../../assets/logo.svg';
 import touxiang from '../../../../../assets/touxiang.jpg';
 import poster1 from '../../../../../assets/poster1.png';
 import poster2 from '../../../../../assets/poster2.png';

src/pages/building/Edit/Basic.jsx

@@ -1,13 +1,15 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Row, Col, Form, Input, InputNumber, Radio, notification, Select } from 'antd'
-import FileUpload from '@/components/XForm/FileUpload';
-import ImageUpload from '@/components/XForm/ImageUpload';
-import ImageListUpload from '@/components/XForm/ImageListUpload';
+import FileUpload from '@/components/XForm/FileUpload'
+import ImageUpload from '@/components/XForm/ImageUpload'
+import ImageListUpload from '@/components/XForm/ImageListUpload'
 import SelectCity from '@/components/SelectButton/CitySelect'
 import AreaSelect from '@/components/SelectButton/AreaSelect'
+import { POI_TYPES_KETY, POI_TYPES, getPoiData } from '@/utils/map'
 import BuildingType from './components/BuildingTypeSelect'
 import OpenTimePicker from './components/OpenTimePicker'
 import Amap from './components/Amap'
+import EditableArround from './components/EditableArround'
 import { formItemLayout, groupItemLayout } from './utils'
 
 const fullWidth= { width: '100%' }
@@ -21,7 +23,10 @@ const GroupItem = ({children}) => (
   </Row>
 )
 
-const BuildingBasic = (props) => {
+const initPoiData = POI_TYPES.map((poi) => poi.key).reduce((acc, key) => ({ ...acc, [key]: undefined }), {})
+
+const BuildingBasic = React.forwardRef((props, ref) => {
+  const [pois, setPois] = useState(initPoiData)
   const { form } = props;
   const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
 
@@ -40,7 +45,7 @@ const BuildingBasic = (props) => {
   }
 
   // 周边设施 回调
-  function handleMapScope(e) {
+  function handleMapScopeChange(e) {
     const coordinateValue = getFieldValue('coordinate')
     if (!coordinateValue) {
       notification.error({ message: '请先选择项目坐标位置' })
@@ -48,11 +53,15 @@ const BuildingBasic = (props) => {
     }
 
     const lngLat = getFieldValue('coordinate').split(',')
-    const poiData = [].concat(POI_TYPES)
-    poiData.map(item => {
-      getAroundData({ types: item.key, location: lngLat, radius: e }).then(res => {
-        const { pois } = res
-        setFormMapScopeValue(item.key, pois)
+
+    // 把支持的周边分类都去检索一遍
+    POI_TYPES.forEach(({ key }) => {
+      getPoiData({ type: key, location: lngLat, radius: e }).then(res => {
+        const poiStr = (res.pois || []).map((p) => p.name).join(',')
+        setPois({
+          ...pois,
+          [key]: poiStr
+        })
       }).catch(err => {
         console.error(err)
         notification.error({ message: '周边数据获取失败' })
@@ -65,11 +74,11 @@ const BuildingBasic = (props) => {
       <Item label="项目Id" style={{ display: 'none' }}>
         {getFieldDecorator('buildingId')(<Input disabled />)}
       </Item>
-      {/* <Item label="楼盘编号" >
+      <Item label="楼盘编号" >
         {getFieldDecorator('code', {
           rules: [{ required: true, message: '请输入楼盘编号' }],
         })(<Input />)}
-      </Item> */}
+      </Item>
       <Item label="楼盘名称" >
         {getFieldDecorator('buildingName', {
           rules: [{ required: true, message: '请输入楼盘名' }],
@@ -184,31 +193,56 @@ const BuildingBasic = (props) => {
           rules: [{ required: true, message: '请输入项目地址' }],
         })(<Input />)}
       </Form.Item>
-      <Form.Item label="地图位置" >
-        {getFieldDecorator('mapCoordinate')(<Amap onChange={e => setFieldsValue({ coordinate: e })}/>)}
+      <Form.Item label="项目坐标" >
+        {getFieldDecorator('coordinate', {
+          rules: [{ required: true, message: '请输入项目坐标' }],
+        })(<Amap onChange={e => setFieldsValue({ coordinate: e })} />)}
+      </Form.Item>
+      <Form.Item label="周边范围" >
+        {getFieldDecorator('mapScope', {
+          rules: [{ required: true, message: '请选择周边设施搜索范围' }],
+        })(
+          <Select placeholder="周边设施搜索范围" style={fullWidth} onChange={handleMapScopeChange}>
+            <Select.Option value={1000}>1公里</Select.Option>
+            <Select.Option value={3000}>3公里</Select.Option>
+            <Select.Option value={5000}>5公里</Select.Option>
+            <Select.Option value={10000}>10公里</Select.Option>
+          </Select>,
+        )}
+      </Form.Item>
+      <Form.Item label="周边交通" >
+        {getFieldDecorator('buildingTransport')(
+          <EditableArround pois={pois[POI_TYPES_KETY.Transport]} />,
+        )}
+      </Form.Item>
+      <Form.Item label="周边商业" >
+        {getFieldDecorator('buildingMall')(
+          <EditableArround pois={pois[POI_TYPES_KETY.Mall]} />,
+        )}
+      </Form.Item>
+      <Form.Item label="周边学校" >
+        {getFieldDecorator('buildingEdu')(
+          <EditableArround pois={pois[POI_TYPES_KETY.Edu]} />,
+        )}
+      </Form.Item>
+      <Form.Item label="周边医院" >
+        {getFieldDecorator('buildingHospital')(
+          <EditableArround pois={pois[POI_TYPES_KETY.Hospital]} />,
+        )}
+      </Form.Item>
+      <Form.Item label="周边银行" >
+        {getFieldDecorator('buildingBank')(
+          <EditableArround pois={pois[POI_TYPES_KETY.Bank]} />,
+        )}
+      </Form.Item>
+      <Form.Item label="周边餐饮" >
+        {getFieldDecorator('buildingRestaurant')(
+          <EditableArround pois={pois[POI_TYPES_KETY.Restaurant]} />,
+        )}
       </Form.Item>
-      <GroupItem>
-        <Form.Item label="项目坐标" {...groupItemLayout.a } >
-          {getFieldDecorator('coordinate', {
-            rules: [{ required: true, message: '请输入项目坐标' }],
-          })(<Input disabled />)}
-        </Form.Item>
-        <Form.Item label="周边范围" {...groupItemLayout.b } >
-          {getFieldDecorator('mapScope', {
-            rules: [{ required: true, message: '请选择周边设施搜索范围' }],
-          })(
-            <Select placeholder="周边设施搜索范围" style={fullWidth} onChange={e => getMapScope(e)}>
-              <Option value={1000}>1公里</Option>
-              <Option value={3000}>3公里</Option>
-              <Option value={5000}>5公里</Option>
-              <Option value={10000}>10公里</Option>
-            </Select>,
-          )}
-        </Form.Item>
-      </GroupItem>
 
     </Form>
   )
-}
+})
 
 export default Form.create({ onValuesChange: console.log })(BuildingBasic)

src/pages/building/Edit/components/Amap.jsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Map, Marker } from 'react-amap';
-import styles from './amap.less'
-
-class Amap extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      markerPosition: { longitude: 120, latitude: 35 },
-    }
-    // 高德地图 Marker 实例
-    this.markerInstance = undefined
-    // 高德地图 Map 实例
-    this.mapInstance = undefined
-
-    this.amapEvents = {
-      created: mapInstance => {
-        console.log('高德地图 Map 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
-        console.log('缩放级别：', mapInstance.getZoom());
-        this.mapInstance = mapInstance
-        
-
-        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.CitySearch'], () => {
-          // 实例化Autocomplete
-          const autoOptions = {
-            // city 限定城市，默认全国
-            // city: '025',
-            // input 为绑定输入提示功能的input的DOM ID
-            input: 'amapInput',
-          }
-          const autoComplete = new AMap.Autocomplete(autoOptions);
-          // 无需再手动执行search方法，autoComplete会根据传入input对应的DOM动态触发search
-
-          const placeSearch = new AMap.PlaceSearch({
-            // city: '南京',
-            map: mapInstance,
-          })
-
-          // 监听下拉框选中事件
-          AMap.event.addListener(autoComplete, 'select', e => {
-            // TODO 针对选中的poi实现自己的功能
-            placeSearch.setCity(e.poi.adcode)
-            placeSearch.search(e.poi.name)
-          })
-
-
-          const citySearch = new AMap.CitySearch()
-          citySearch.getLocalCity((status, result) => {
-            if (status === 'complete' && result.info === 'OK') {
-              // 查询成功，result即为当前所在城市信息
-              console.log('当前所在城市：', result)
-              if (result && result.city && result.bounds) {
-                // 当前城市名称
-                // const cityinfo = result.city;
-
-                // 当前城市位置信息
-                const citybounds = result.bounds;
-                // document.getElementById('info').innerHTML = '您当前所在城市：'+cityinfo;
-                // 地图显示当前城市
-                mapInstance.setBounds(citybounds);
-                // 需要在设置坐标成功后，重新设置 缩放级别
-                // mapInstance.setZoom(15)
-              }
-            }
-          })
-        })
-
-        // 实例点击事件
-        mapInstance.on('click', e => {
-          const lngLat = `${e.lnglat.getLng()},${e.lnglat.getLat()}`
-          console.log('坐标位置:', lngLat)
-          this.props.onChange(lngLat)
-        });
-      },
-    };
-    this.markerEvents = {
-      created: markerInstance => {
-        console.log('高德地图 Marker 实例创建成功；如果你要亲自对实例进行操作，可以从这里开始。比如：');
-        console.log(markerInstance.getPosition());
-
-        this.markerInstance = markerInstance
-      },
-    }
-    // this.markerPosition = { longitude: 120, latitude: 30 };
-  }
-
-  componentDidUpdate(prevProps) {
-    const { value } = this.props
-    if (this.props.value !== prevProps.value) {
-      if (value) {
-        const temp = value.split(',')
-        this.setState({ markerPosition: { longitude: temp[1], latitude: temp[0] } }, () => {
-          if (this.mapInstance) {
-            // 需要在设置坐标成功后，重新设置 缩放级别
-            this.mapInstance.setZoom(15)
-          }
-        })
-      }
-    }
-  }
-
-  render() {
-    return (
-      <>
-        <div style={{ width: '100%', height: '400px', position: 'relative' }}>
-          {/* zoom={15} 设置后，无效，不知道什么原因，必须手动设置 */}
-          <Map plugins={['ToolBar']} events={this.amapEvents} amapkey="f0d1d4f82432504003ebf46e5e36ff03" center={this.state.markerPosition}>
-            <Marker position={this.state.markerPosition} events={this.markerEvents} />
-          </Map>
-          {
-          <div className={styles.infoBox}>
-            <span className={styles.inputText}>请输入关键字</span>
-            <input id="amapInput" className={styles.input} type="text" />
-          </div>
-          }
-        </div>
-      </>
-    )
-  }
-}
-
-// f0d1d4f82432504003ebf46e5e36ff03
-
-export default Amap

src/pages/building/Edit/components/Amap/PoiPicker.jsx

@@ -0,0 +1,16 @@
+import React, { useEffect } from 'react'
+
+export default (props) => {
+  
+  useEffect(() => {
+    window.AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) {
+      const poiPicker = new PoiPicker({
+          input: props.input.current
+      });
+
+      poiPicker.on('poiPicked', props.onPick)
+    });
+  }, [])
+
+  return null
+}

src/pages/building/Edit/components/Amap/index.jsx

@@ -0,0 +1,104 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { sdk } from '@/utils/map'
+import { newMarker, autoPos, autoPoi } from './utils'
+import './style.less'
+
+const plugins = ['AMap.Scale', 'AMap.ToolBar', 'AMap.Geolocation', 'AMap.Autocomplete', 'AMap.PlaceSearch']
+
+export default (props) => {
+  const map = useRef()
+  const container = useRef()
+  const inputRef = useRef()
+  const posMarker = useRef()
+  const [currentPos, setCurrentPos] = useState([]);
+
+  const handleClick = (e) => {
+    const { lnglat } = e
+    const pos = [lnglat.getLng(), lnglat.getLat()]
+    setCurrentPos(pos)
+    props.onChange(pos.join(','))
+  }
+
+  useEffect(() => {
+    // 只加载一次 amap 相关 js
+    sdk.loadMapModule({
+      plugins,
+    }).then((AMap) => {
+      const instance = new AMap.Map(container.current, { zoom: 12 })
+      instance.addControl(new AMap.Scale())
+      instance.addControl(new AMap.ToolBar())
+      
+      // 尝试自动定位到当前位置
+      if (!props.value) {
+        instance.addControl(autoPos(AMap))
+      }
+
+      // 当前选中点 - 初始的时候没有定位
+      posMarker.current = newMarker(AMap, {
+        active: true,
+        map: instance,
+        position: props.value ? props.value.split(',') : undefined,
+      })
+
+      // POI 搜索
+      autoPoi(instance, AMap, inputRef, { click: handleClick })
+
+      instance.on('click', handleClick);
+      map.current = instance
+    })
+  }, [])
+
+  useEffect(() => {
+    if (props.value) {
+      setCurrentPos(props.value.split(','))
+    }
+  }, [props.value])
+
+  useEffect(() => {
+    if (currentPos.length) {
+      posMarker.current.setPosition(currentPos)
+    }
+  }, [currentPos])
+
+  const boxStyle = {
+    width: '100%',
+    height: '400px',
+    position: 'relative',
+    ...(props.style || {}),
+  }
+
+  const mapStyle = {
+    height: '100%',
+    width: '100%',
+    margin: 0,
+  }
+
+  const inputStyle = {
+    width: '200px',
+    padding: '5px',
+    position: 'absolute',
+    zIndex: 9999,
+    right: '30px',
+    lineHeight: '1em',
+  }
+
+  const inputSty1 = {
+    ...inputStyle,
+    top: '50px',
+  }
+
+  const inputSty2 = {
+    ...inputStyle,
+    top: '10px',
+    background: 'rgba(255, 255, 255, .9)',
+    border: '1px solid',
+  }
+
+  return (
+    <div className={props.className} style={boxStyle}>
+      <div ref={container} style={mapStyle} id="poi-map-wrapper"></div>
+      <input placeholder="请输入搜索关键字" ref={inputRef} style={inputSty1} />
+      <input value={`坐标: ${currentPos.join(',')}`} style={inputSty2} disabled />
+    </div>
+  )
+}

src/pages/building/Edit/components/Amap/style.less

@@ -0,0 +1,8 @@
+:global{
+  #poi-map-wrapper {
+    .amap-marker-label{
+      border: 0;
+      background-color: transparent;
+    }
+  }
+}

src/pages/building/Edit/components/Amap/utils.js

@@ -0,0 +1,79 @@
+
+const iconNoraml = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png';
+const iconActive = '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png';
+
+export function newMarker(AMap, options = {}) {
+  const { active = false, ...params } = options;
+  const icon = new AMap.Icon({
+    size: new AMap.Size(25, 34),
+    image: active ? iconActive : iconNoraml,
+    imageSize: new AMap.Size(25, 34),
+  })
+  const offset = new AMap.Pixel(-13, -30)
+
+  return new AMap.Marker({ icon, offset, ...params });
+}
+
+export function autoPos(AMap, options = {}) {
+  return new AMap.Geolocation({
+    enableHighAccuracy: true,//是否使用高精度定位，默认:true
+    timeout: 10000,          //超过10秒后停止定位，默认：5s
+    buttonPosition:'RB',    //定位按钮的停靠位置
+    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+    zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
+    ...options,
+  });
+}
+
+const labelStyle = `
+  padding: .5em .8em;
+  border-radius: .25rem;
+  background-color: white;
+  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+`
+
+export function autoPoi(map, AMap, inputRef, evt) {
+  const markers = [];
+  const input = inputRef.current
+
+  const destroy = () => {
+    if (markers.length) {
+      markers.forEach((m) => map.remove(m))
+      markers.splice(0, markers.length)
+    }
+  }
+
+  const handleSearchResult = (status, result) => {
+    // 先清空
+    destroy();
+
+    const { pois } = result.poiList;
+    (pois || []).forEach((poi) => {
+      const { location, name } = poi;
+      const marker = newMarker(AMap, {
+        map,
+        position: location,
+        label: {
+          content: `<div style="${labelStyle}">${name}</div>`,
+          direction: 'top',
+        },
+      })
+      marker.on('click', evt.click)
+      markers.push(marker)
+    })
+    map.setFitView();
+  }
+  
+  const placeSearch = new AMap.PlaceSearch({ pageSize: 20 });
+  const autoComplete = new AMap.Autocomplete({ input });
+
+  // 选择自动填充
+  autoComplete.on('select', e => {
+    placeSearch.setCity(e.poi.adcode)
+    placeSearch.search(e.poi.name, handleSearchResult)
+  })
+
+  autoComplete.on('error', (err) => console.error(err))
+
+  return autoComplete;
+}

src/pages/building/Edit/components/EditableArround/MapPois.jsx

@@ -0,0 +1,26 @@
+import React, { useRef, useEffect, forwardRef } from 'react'
+
+export default forwardRef((props, ref) => {
+  const tags = useRef((props.pois || '').split(','))
+
+  // 用来记录上一次传值
+  const previous = useRef()
+
+  // 监控 props.pois 的变化, 触发 onChange
+  // 实际场景中 props.pois 只会由地图引起变化
+  useEffect(() => {
+    const changed = previous.current !== props.pois
+    if (changed) {
+      tags.current = (props.pois || '').split(',')
+      previous.current = props.pois
+
+      if (props.onChange) {
+        props.onChange(tags.current)
+      }
+    }
+  }, [props.pois, props.onChange])
+
+  return (
+    <></>
+  )
+})

src/pages/building/Edit/components/EditableArround.jsx → src/pages/building/Edit/components/EditableArround/index.jsx

@@ -1,18 +1,40 @@
 import React, { useEffect, useRef, useState } from 'react'
-import { Typography, Tag, Input } from 'antd'
+import { Typography, Tag, Input, Icon } from 'antd'
+import MapPois from './MapPois'
+import { arrRemove, arrAdd } from './utils'
+
+/**
+ * 因为周边TAG, 包含了2个部分的维护，一个是自定义周边，一个是地图周边，所以，需要单独写2个标签的处理
+ */
 
 export default React.forwardRef((props, ref) => {
   const inputRef = useRef()
-  const valRef = useRef()
+  const poiRef = useRef()
   const [inputValue, setInputValue] = useState()
   const [inputVisible, setInputVisible] = useState(false)
   const [tags, setTags] = useState([])
-  // 地图周边 tag
   const [mapTags, setMapTags] = useState([])
 
+  const handlePoiChange = (e) => {
+    setMapTags(e)
+
+    // 先清理原来的
+    const tagArr = arrRemove(tags, mapTags)
+    // 再加入新的
+    const nwTags = arrAdd(tagArr, e)
+
+    if (nwTags !== tags) {
+      setTags(nwTags)
+  
+      if (props.onChange) {
+        props.onChange(nwTags.join(','))
+      }
+    }
+  }
+
   const handleClose = (tag) => {
     if (mapTags.indexOf(tag) > -1) {
-      setMapTags(mapTags.filter((t) => t !== tag))
+      setMapTags(mapTags.filter((it) => it !== tag))
     }
 
     if (props.onChange) {
@@ -30,26 +52,13 @@ export default React.forwardRef((props, ref) => {
   }
 
   useEffect(() => {
-    setMapTags(props.mapPois || [])
-  }, [props.mapPois])
-
-  useEffect(() => {
-    const vals = (props.value||'').split(',')
-    const arr = vals.concat(mapTags)
-
-    // 去重
-    const nwTags = []
-    arr.forEach((it) => {
-      if (nwTags.indexOf(it) === -1) {
-        nwTags.push(it)
-      }
-    })
-
-    setTags(nwTags)
-  }, [props.value, mapTags])
+    const arr = props.value ? props.value.split(',') : []
+    setTags(arr)
+  }, [props.value])
 
   return (
     <div>
+      <MapPois ref={poiRef} pois={props.pois} onChange={handlePoiChange} />
       {
         tags.map((tag) => (
           <Tag key={tag} closable onClose={() => handleClose(tag)}>
@@ -63,7 +72,7 @@ export default React.forwardRef((props, ref) => {
             ref={inputRef}
             type="text"
             size="small"
-            style={{ width: 80, display: inputVisible ? 'block' : 'none' }}
+            style={{ width: 80, display: inputVisible ? 'inline-block' : 'none' }}
             value={inputValue}
             onChange={e => setInputValue(e.target.value)}
             onBlur={handleInputConfirm}

src/pages/building/Edit/components/EditableArround/utils.js

@@ -0,0 +1,35 @@
+
+export function arrRemove(src, target) {
+  if (!target || target.length < 1) {
+    return src;
+  }
+
+  if (!src || src.length < 1) {
+    return src;
+  }
+
+  const arr = src.filter((it) => target.indexOf(it) === -1)
+  if (arr.length === src.length) return src;
+
+  return arr;
+}
+
+export function arrAdd(src, add) {
+  if (!add || add.length < 1) {
+    return src;
+  }
+
+  if (!src || add.length < 1) {
+    return [...add]
+  }
+
+  
+  const nwTags = src.slice()
+  add.forEach((it) => {
+    if (nwTags.indexOf(it) === -1) {
+      nwTags.push(it)
+    }
+  })
+
+  return src;
+}

src/pages/building/Edit/components/amap.less

@@ -1,53 +0,0 @@
-
-.infoBox {
-  padding: 10px;
-  position: absolute;
-  top: 20px;
-  left: 20px;
-  background-color: white;
-  width: 290px;
-  box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
-  z-index: 100;
-  .inputText{
-    margin-right: 10px;
-  }
-  .input{
-    width: 150px;
-    height: 32px;
-    font-size: 16px;
-  }
- 
-}
-
-
-/* types */
-
-.native-toast-error {
-  background-color: #d92727;
-  color: white;
-}
-
-.native-toast-success {
-  background-color: #62a465;
-  color: white;
-}
-
-.native-toast-warning {
-  background-color: #fdaf17;
-  color: white;
-}
-
-.native-toast-info {
-  background-color: #5060ba;
-  color: white;
-}
-
-[class^="native-toast-icon-"] {
-  vertical-align: middle;
-  margin-right: 8px
-}
-
-[class^="native-toast-icon-"] svg {
-  width: 16px;
-  height: 16px;
-}

src/pages/news/list/compents/Poster.jsx

@@ -5,7 +5,7 @@ import apis from '@/services/apis';
 import router from 'umi/router';
 import request from '@/utils/request';
 import ImageUploader from '@/components/XForm/ImageUpload';
-import logo from '../../../../assets/logo.png';
+import logo from '../../../../assets/logo.svg';
 import yinhao from '../../../../assets/yinhao.png';
 import touxiang from '../../../../assets/touxiang.jpg';
 import poster1 from '../../../../assets/poster1.png';

src/pages/news/list/compents/Share.jsx

@@ -5,7 +5,7 @@ import apis from '@/services/apis';
 import router from 'umi/router';
 import request from '@/utils/request';
 import ImageUploader from '@/components/XForm/ImageUpload';
-import logo from '../../../../assets/logo.png';
+import logo from '../../../../assets/logo.svg';
 import poster2 from '../../../../assets/poster2.png';
 
 

src/pages/news/list/editNewsList.jsx

@@ -8,7 +8,7 @@ import  { FieldTypes, createForm } from '../../../components/XForm';
 import Wangedit from '../../../components/Wangedit/Wangedit'
 import request from '../../../utils/request'
 import ImageUploader from '../../../components/XForm/ImageUpload';
-import logo from '../../../assets/logo.png';
+import logo from '../../../assets/logo.svg';
 import yinhao from '../../../assets/yinhao.png'
 import touxiang from '../../../assets/touxiang.jpg';
 import poster1 from '../../../assets/poster1.png';

src/utils/map/index.js

@@ -1,8 +1,11 @@
 import amapSDK from './sdk';
 
-const AMAP_KEY = '14f05ce59c26364fd0674014dc0d8b1b'
+export const AMAP_KEY = {
+  service: '3be0a9567a794d2690d378476f057a6f',
+  web: '29259f677b42900507074fd92ecb628a',
+}
 
-const sdk = amapSDK(AMAP_KEY)
+export const sdk = amapSDK(AMAP_KEY)
 
 export const POI_TYPES_KETY = {
   Transport: 'Transport',
@@ -61,7 +64,7 @@ export const POI_TYPES = [
  * 获取周边数据
  * @param {查询参数} params 
  */
-export function getAroundData (params) {
+export function getPoiData (params) {
   return new Promise((resolve, reject) => {
       const { type, location } = params
       if (!type) {
@@ -81,9 +84,9 @@ export function getAroundData (params) {
         return
       }
 
-      sdk({
-        types: poiType.types.join('|'),
+      sdk.getPlaceAround({
         ...params,
+        types: poiType.types.join('|'),
       }).then(resolve)
       .catch(reject);
   })

src/utils/map/sdk.js

@@ -1,3 +1,4 @@
+import AMapLoader from '@amap/amap-jsapi-loader'
 
 // 简易请求
 function request(url, params, options = {}) {
@@ -16,7 +17,7 @@ function request(url, params, options = {}) {
     }).then(response => response.json())
     .then((data) => {
       const { status, info } = data
-      if (status === 1) {
+      if (status === '1') {
         resolve(data)
       } else {
         console.error(data)
@@ -27,15 +28,30 @@ function request(url, params, options = {}) {
   })
 }
 
-export function amapSDK(key) {
+export default function amapSDK(key) {
   const prefix = 'https://restapi.amap.com'
 
+  function loadMapModule(options = {}) {
+    // AMapLoader 可以多次加载
+    return new Promise((resolve, reject) => {
+      AMapLoader.load({
+        ...options,
+        key: key.web,
+      }).then((AMap) => {
+        resolve(AMap)
+      }).catch((e) => {
+        reject(e)
+      })
+    })
+  }
+
   function getPlaceAround(params = {}) {
     const url = `${prefix}/v5/place/around`
-    return request(url, { key, ...params } )
+    return request(url, { key: key.service, ...params } )
   }
 
   return {
+    loadMapModule,
     getPlaceAround,
   }
 }