Merge branch 'master' of http://git.ycjcjy.com/marketing/pc-admin into master

package.json

@@ -58,6 +58,7 @@
     "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/components/SelectButton/AreaSelect.jsx

@@ -42,12 +42,17 @@ const CitySelect = (props) => {
     }
   }
 
+  const style = {
+    width: '300px',
+    ...(props.style || {})
+  }
+
   return (
       <Select
       {...props}
       showSearch
       value={props.value}
-      style={{ width: '300px' }}
+      style={style}
       placeholder="请选择区域"
       onChange={props.onChange}
       filterOption={(input, option) =>

src/components/SelectButton/CitySelect.jsx

@@ -41,9 +41,14 @@ const CitySelect = (props) => {
     }
   }
 
+  const style = {
+    width: '300px',
+    ...(props.style || {})
+  }
+
   return (
       <Select
-      style={{ width: '300px' }}
+      style={style}
       placeholder="请选择城市"
       showSearch
       {...props}

src/pages/building/Edit/Basic.jsx

@@ -1,14 +1,29 @@
 import React from 'react'
-import { Form, Input, notification, Select } from 'antd'
+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 SelectCity from '@/components/SelectButton/CitySelect'
+import AreaSelect from '@/components/SelectButton/AreaSelect'
 import BuildingType from './components/BuildingTypeSelect'
-import { formItemLayout } from './utils'
+import OpenTimePicker from './components/OpenTimePicker'
+import Amap from './components/Amap'
+import { formItemLayout, groupItemLayout } from './utils'
+
+const fullWidth= { width: '100%' }
 
 const Item = Form.Item
 
+const GroupItem = ({children}) => (
+  <Row gutter={24}>
+    <Col span={12}>{children[0]}</Col>
+    <Col span={11}>{children[1]}</Col>
+  </Row>
+)
+
 const BuildingBasic = (props) => {
   const { form } = props;
-  const { getFieldDecorator } = form;
+  const { getFieldDecorator, getFieldValue, setFieldsValue } = form;
 
   
   // 视频文件上传前 回调
@@ -24,16 +39,37 @@ const BuildingBasic = (props) => {
     })
   }
 
+  // 周边设施 回调
+  function handleMapScope(e) {
+    const coordinateValue = getFieldValue('coordinate')
+    if (!coordinateValue) {
+      notification.error({ message: '请先选择项目坐标位置' })
+      return
+    }
+
+    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)
+      }).catch(err => {
+        console.error(err)
+        notification.error({ message: '周边数据获取失败' })
+      })
+    })
+  }
+
   return (
     <Form {...formItemLayout}>
       <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: '请输入楼盘名' }],
@@ -47,30 +83,34 @@ const BuildingBasic = (props) => {
       <Form.Item label="列表均价" help="项目列表展示价格，示例：约10000元/㎡、约1000万元/套起">
         {getFieldDecorator('price')(<Input />)}
       </Form.Item>
-      <Form.Item label="开盘时间" >
-        {getFieldDecorator('openingDate')(<Input placeholder="预计xxxx年xx月开盘" />)}
-      </Form.Item>
-      <Form.Item label="电话" >
-        {getFieldDecorator('tel', {
-          rules: [
-            {
-              pattern: new RegExp('^[0-9]*$'),
-              message: '请输入正确的电话号码',
-            },
-          ],
-        })(<Input placeholder="手机或者座机号码" />)}
-      </Form.Item>
+      <GroupItem>
+        <Form.Item label="开盘时间" {...groupItemLayout.a} >
+          {getFieldDecorator('openingDate')(
+            <OpenTimePicker placeholder="请选择开盘时间" style={fullWidth} />
+          )}
+        </Form.Item>
+        <Form.Item label="电话" {...groupItemLayout.b } >
+          {getFieldDecorator('tel', {
+            rules: [
+              {
+                pattern: new RegExp('^[0-9]*$'),
+                message: '请输入正确的电话号码',
+              },
+            ],
+          })(<Input placeholder="手机或者座机号码" />)}
+        </Form.Item>
+      </GroupItem>
       <Form.Item label="项目说明" >
         {getFieldDecorator('dynamic')(<Input placeholder="项目动态等，不超过30个字" maxLength={30}/>)}
       </Form.Item>
-      <Form.Item label="物业类型" >
+      {/* <Form.Item label="物业类型" >
         {getFieldDecorator('propertyType')(<Input />)}
-      </Form.Item>
+      </Form.Item> */}
       <Form.Item label="销售状态" >
         {getFieldDecorator('marketStatus', {
           rules: [{ required: true, message: '请选择销售状态' }],
         })(
-          <Select placeholder="销售状态" style={{ width: '100%' }}>
+          <Select placeholder="销售状态" style={fullWidth}>
             <Select.Option value="待售">待售</Select.Option>
             <Select.Option value="在售">在售</Select.Option>
             <Select.Option value="售罄">售罄</Select.Option>
@@ -80,14 +120,92 @@ const BuildingBasic = (props) => {
       </Form.Item>
       <Form.Item label="项目标签" >
         {getFieldDecorator('tag')(
-          <Select mode="tags" placeholder="输入后选中" style={{ width: '100%' }} />
+          <Select mode="tags" placeholder="输入后选中" style={fullWidth} />
         )}
       </Form.Item>
-      <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：750*600，比例5:4，用于楼盘详情">
-        {getFieldDecorator('videoUrl')(
-          <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" size={1} />,
+
+      <GroupItem>
+        <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：750*600，比例5:4，用于楼盘详情" {...groupItemLayout.a} >
+          {getFieldDecorator('videoUrl')(
+            <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" size={1} />,
+          )}
+        </Form.Item>
+        <Form.Item label="视频封面图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于视频封面" labelCol={{span: 8}} wrapperCol={{span:16}}>
+          {getFieldDecorator('videoImage', {
+            rules: [{ required: true, message: '请选择视频封面图' }],
+          })(
+            <ImageUpload />,
+          )}
+        </Form.Item>
+      </GroupItem>
+      <Form.Item label="楼盘主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘详情">
+        {getFieldDecorator('avatarImage', {
+          rules: [{ required: true, message: '请选择项目主图' }],
+        })(
+          <ImageListUpload unlimited />,
         )}
       </Form.Item>
+      <Form.Item label="楼盘封面图" help="建议图片尺寸：750*420px，比例16:9,格式：jpg，用于楼盘列表">
+        {getFieldDecorator('listImage', {
+          rules: [{ required: true, message: '请选择列表图' }],
+        })(
+          <ImageUpload />,
+        )}
+      </Form.Item>
+      <GroupItem>
+        <Form.Item label="首页推荐" {...groupItemLayout.a} >
+          {getFieldDecorator('isMain', { initialValue: 1 })(
+            <Radio.Group>
+              <Radio value={1}>是</Radio>
+              <Radio value={2}>否</Radio>
+            </Radio.Group>,
+          )}
+        </Form.Item>
+        <Form.Item label="排序" help="数值越大，楼盘在小程序列表页中展示越靠前" {...groupItemLayout.b}>
+          {getFieldDecorator('orderNo')(<InputNumber min={0} style={fullWidth} />)}
+        </Form.Item>
+      </GroupItem>
+      <GroupItem>
+        <Form.Item label="所在城市" {...groupItemLayout.a } >
+          {getFieldDecorator('cityId', {
+            rules: [{ required: true, message: '请选择城市' }],
+          })(
+            <SelectCity style={fullWidth} />,
+          )}
+        </Form.Item>
+        <Form.Item label="楼盘区域" {...groupItemLayout.b } >
+          {getFieldDecorator('buildingArea', {
+            rules: [{ required: true, message: '请输入楼盘区域' }],
+          })(<AreaSelect style={fullWidth} />)}
+        </Form.Item>
+      </GroupItem>
+      <Form.Item label="项目地址" >
+        {getFieldDecorator('address', {
+          rules: [{ required: true, message: '请输入项目地址' }],
+        })(<Input />)}
+      </Form.Item>
+      <Form.Item label="地图位置" >
+        {getFieldDecorator('mapCoordinate')(<Amap onChange={e => setFieldsValue({ coordinate: e })}/>)}
+      </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>
   )

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

@@ -0,0 +1,126 @@
+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/EditableArround.jsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { Typography, Tag, Input } from 'antd'
+
+export default React.forwardRef((props, ref) => {
+  const inputRef = useRef()
+  const valRef = useRef()
+  const [inputValue, setInputValue] = useState()
+  const [inputVisible, setInputVisible] = useState(false)
+  const [tags, setTags] = useState([])
+  // 地图周边 tag
+  const [mapTags, setMapTags] = useState([])
+
+  const handleClose = (tag) => {
+    if (mapTags.indexOf(tag) > -1) {
+      setMapTags(mapTags.filter((t) => t !== tag))
+    }
+
+    if (props.onChange) {
+      props.onChange(tags.filter((t) => t !== tag).join(','))
+    }
+  }
+
+  const handleInputConfirm = () => {
+    const exists = tags.indexOf(inputValue) > -1
+    if (!exists) {
+      props.onChange(tags.concat(inputValue).join(','))
+    }
+    setInputVisible(false)
+    setInputValue()
+  }
+
+  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])
+
+  return (
+    <div>
+      {
+        tags.map((tag) => (
+          <Tag key={tag} closable onClose={() => handleClose(tag)}>
+            <Typography.Text>{tag}</Typography.Text>
+          </Tag>
+        ))
+      }
+      {
+        inputVisible ? (
+          <Input
+            ref={inputRef}
+            type="text"
+            size="small"
+            style={{ width: 80, display: inputVisible ? 'block' : 'none' }}
+            value={inputValue}
+            onChange={e => setInputValue(e.target.value)}
+            onBlur={handleInputConfirm}
+            onPressEnter={handleInputConfirm}
+          />
+        ) : (
+          <Tag onClick={() => setInputVisible(true)} style={{ background: '#fff', borderStyle: 'dashed' }}>
+            <Icon type="plus" /> 新建
+          </Tag>
+        )
+      }
+    </div>
+  )
+})

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

@@ -0,0 +1,27 @@
+
+import React, { useEffect, useState } from 'react';
+import moment from 'moment';
+import { DatePicker } from 'antd';
+
+/**
+ * 主要是做了一个日期的格式转换
+ */
+export default (props) => {
+  const { value, onChange, ...leftProps } = props;
+  const [val, setVal] = useState(value ? moment(value, 'YYYY-MM-DD HH:mm') : undefined);
+
+  const handelChange = (e) => {
+    if (onChange) {
+      onChange(e ? e.format('YYYY-MM-DD HH:mm') : undefined);
+    }
+  }
+
+  useEffect(() => {
+    setVal(value ? moment(value, 'YYYY-MM-DD HH:mm') : undefined);
+  }, [value])
+
+  return (
+    <DatePicker value={val} showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm"  {...leftProps} onChange={handelChange} />
+  )
+}
+

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

@@ -0,0 +1,53 @@
+
+.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/building/Edit/utils.js

@@ -9,3 +9,14 @@ export const formItemLayout = {
     sm: { span: 19 },
   },
 }
+
+export const groupItemLayout = {
+  a: {
+    labelCol:{ span: 6 },
+    wrapperCol:{ span:18 }
+  },
+  b: {
+    labelCol:{ span: 4 },
+    wrapperCol:{ span:18 }
+  }
+}

src/utils/map/index.js

@@ -0,0 +1,90 @@
+import amapSDK from './sdk';
+
+const AMAP_KEY = '14f05ce59c26364fd0674014dc0d8b1b'
+
+const sdk = amapSDK(AMAP_KEY)
+
+export const POI_TYPES_KETY = {
+  Transport: 'Transport',
+  Mall: 'Mall',
+  Edu: 'Edu',
+  Hospital: 'Hospital',
+  Bank: 'Bank',
+  Restaurant: 'Restaurant',
+}
+
+// key 值会被拿到 building 表中 组合为字段名
+export const POI_TYPES = [
+  {
+    key: POI_TYPES_KETY.Transport,
+    label: '交通',
+    types: ['150100', '150200', '150300', '150400', '150500', '150600'],
+    data: [],
+  },
+  {
+    key: POI_TYPES_KETY.Mall,
+    label: '商业',
+    types: ['060100', '060200', '060300', '060400', '060500', '060600',
+            '060700', '060800', '060900', '061000', '061100', '061200',
+            '061300', '061400', '080100', '080200', '080300', '080400',
+            '080500', '080600'],
+    data: [],
+  },
+  {
+    key: POI_TYPES_KETY.Edu,
+    label: '学校',
+    types: ['141200'],
+    data: [],
+  },
+  {
+    key: POI_TYPES_KETY.Hospital,
+    label: '医院',
+    types: ['090100', '090200', '090300', '090400', '090500', '090600', '090700'],
+    data: [],
+  },
+  {
+    key: POI_TYPES_KETY.Bank,
+    label: '银行',
+    types: ['160100'],
+    data: [],
+  },
+  {
+    key: POI_TYPES_KETY.Restaurant,
+    label: '餐饮',
+    types: ['050100', '050200', '050300', '050400', '050500', '050600',
+            '050700', '050800', '050900'],
+    data: [],
+  },
+]
+
+/**
+ * 获取周边数据
+ * @param {查询参数} params 
+ */
+export function getAroundData (params) {
+  return new Promise((resolve, reject) => {
+      const { type, location } = params
+      if (!type) {
+          // console.err('未传输类型types值')
+          reject(new Error('未传输类型 type 值'))
+          return
+      }
+      if (!location) {
+          // console.err('未传输传输中心坐标location值')
+          reject(new Error('未传输传输中心坐标 location 值'))
+          return
+      }
+
+      const poiType = POI_TYPES.filter((it) => it.key === type)[0];
+      if (!poiType) {
+        reject(new Error('周边 type 类型不正确'))
+        return
+      }
+
+      sdk({
+        types: poiType.types.join('|'),
+        ...params,
+      }).then(resolve)
+      .catch(reject);
+  })
+}

src/utils/map/sdk.js

@@ -0,0 +1,41 @@
+
+// 简易请求
+function request(url, params, options = {}) {
+  const queryString = Object.keys(params || {}).map((key) => {
+    const val = encodeURIComponent(params[key])
+    return `${key}=${val}`
+  }).join('&')
+
+  const api = queryString ? `${url}?${queryString}` : url
+
+  return new Promise((resolve, reject) => {
+    window.fetch(api, {
+      mode: 'cors',
+      referrerPolicy: 'no-referrer',
+      ...options
+    }).then(response => response.json())
+    .then((data) => {
+      const { status, info } = data
+      if (status === 1) {
+        resolve(data)
+      } else {
+        console.error(data)
+        const err = new Error(info)
+        reject(err)
+      }
+    }).catch(reject)
+  })
+}
+
+export function amapSDK(key) {
+  const prefix = 'https://restapi.amap.com'
+
+  function getPlaceAround(params = {}) {
+    const url = `${prefix}/v5/place/around`
+    return request(url, { key, ...params } )
+  }
+
+  return {
+    getPlaceAround,
+  }
+}

src/utils/request.js

@@ -46,10 +46,13 @@ request.interceptors.request.use((url, options) => {
 
   return (
     {
+      // url: 'http://81.69.196.8:8567' + apiURL,
       url: apiURL,
       options: {
         ...opts,
         headers: {
+          Referrer: 'no-referrer',
+          'Referrer-Policy': 'no-referrer',
           ...authHeader,
           ...actionHeader,
           ...headers,