客户详情终结版

src/components/PaginationWrapper/index.jsx

+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Pagination } from 'antd';
+import classNames from 'classnames'
+import { useQuery } from '../../utils/hooks';
+import { ObjSpEqual } from '../../utils/utils'
+import Styles from './style.less'
+
+class PaginationWrapper extends React.PureComponent {
+
+  state = {
+    data: {
+      current: 1,
+      total: 0,
+      pages: 0,
+    },
+    loadding: false,
+  }
+
+  componentDidMount () {
+    this.fetchData(1)
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!ObjSpEqual(prevProps.params, this.props.params)) {
+      this.fetchData(1)
+    }
+  } 
+
+  fetchData = (page) => {
+    this.setState({ loadding: true })
+    
+    const requestParams = this.props.params || {}
+    this.props.request({
+      ...requestParams,
+      params: {
+        pageNum: page,              // 有的接口是 pageNum
+        pageNumber: page,  // 有的接口是 pageNumber
+        ...(requestParams.params || {}),
+      }
+    }).then((res) => {
+      this.setState({ loadding: false, data: res })
+    })
+  }
+
+  handlePageChange = (page) => {
+    this.fetchData(page)
+  }
+
+  render() {
+    const { className, style, bodyClass, footerClass, render } = this.props
+    const { data } = this.state
+
+    return (
+      <div className={classNames(Styles['pg-wrapper'], className)} style={style}>
+        <div className={classNames(Styles.body, bodyClass)}>
+          {render(data)}
+        </div>
+        <div className={classNames(Styles.footer, footerClass)}>
+          <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={this.handlePageChange} current={data.current}/>
+        </div>
+      </div>
+    )
+  }
+}
+
+PaginationWrapper.propTypes = {
+  request: PropTypes.func.isRequired,
+  render: PropTypes.func.isRequired,
+  params: PropTypes.object,
+  className: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  bodyClass: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  footerClass: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.array,
+    PropTypes.object,
+  ]),
+  style: PropTypes.object,
+}
+
+// /**
+//  * 分页封装
+//  * @param {page, params, request, render, className, style, bodyClass, footerClass} props 
+//  */
+// function PaginationWrapper(props) {
+//   const defaultPage = props.page || 1
+//   const [pageNum, setPage] = useState(defaultPage)
+//   const requestParams = props.params || {}
+//   const [data = {}, loading, err] = useQuery({ ...requestParams, params: { ...(requestParams.params || {}), pageNum, pageNumber: pageNum }}, props.request)
+
+//   // if (typeof props.setData === 'function') {
+//   //   props.setData(data)
+//   // }
+
+//   console.log('------render PaginationWrapper-------', pageNum, data, loading)
+
+//   return (
+//     <div className={classNames(Styles['pg-wrapper'], props.className)} style={props.style}>
+//       <div className={classNames(Styles.body, props.bodyClass)}>
+//         {props.render(data)}
+//       </div>
+//       <div className={classNames(Styles.footer, props.footerClass)}>
+//         <Pagination showQuickJumper defaultCurrent={defaultPage} total={data.total} onChange={pg => setPage(pg)} current={data.current}/>
+//       </div>
+//     </div>
+//   )
+// }
+
+export default PaginationWrapper

src/components/PaginationWrapper/style.less

+.pg-wrapper {
+  .body {}
+
+  .footer {
+    margin-top: 30px;
+    display: flex;
+    align-items: center;
+    flex-direction: row-reverse;
+  }
+}

src/components/SearchForm/index.jsx

+import React from 'react';
+import PropTyps from 'prop-types';
+import { Form, Button } from 'antd';
+
+function isFunc(fn) { return typeof fn === 'function' };
+
+class SearchForm extends React.PureComponent {
+  handleSubmit = e => {
+    e.preventDefault();
+    this.props.form.validateFields((err, values) => {
+      if (!err && isFunc(this.props.onSearch)) {
+        this.props.onSearch(values)
+        return
+      }
+
+      if (err) {
+        console.error(err)
+        if (isFunc(this.props.onError)) {
+          this.props.onError(err)
+        }
+        return
+      }
+    });
+  };
+
+  handleReset = e => {
+    this.props.form.resetFields()
+    if (isFunc(this.props.onReset)) {
+      this.props.onReset()
+    }
+  }
+
+  render () {
+    const { form, hideResetBtn } = this.props;
+
+    return (
+      <Form layout="inline" onSubmit={this.handleSubmit} colon={false}>
+        {
+          (this.props.fields || []).map((field, index) => {
+            const { element, render, name, label, value } = field || {}
+
+            if (!element && !render) return null;
+
+            const conifg = value  ? { initialValue: value } : {}
+            const Item = isFunc(render) ? render(this.props) : element
+
+            return <Form.Item label={label} key={`fm-${index}`}>{form.getFieldDecorator(name, conifg)(Item)}</Form.Item>
+          })
+        }
+        <Form.Item>
+          <Button type="primary" htmlType="submit">搜索</Button>
+        </Form.Item>
+        { hideResetBtn && (
+          <Form.Item>
+            <Button type="default" onClick="handleReset">重置</Button>
+          </Form.Item>
+        )}
+      </Form>
+    );
+  }
+}
+
+// 提供给父组件 onChange 事件
+function onValuesChange(props, changedValues, allValues) {
+  if (isFunc(props.onChange)) {
+    props.onChange(changedValues, allValues)
+  }
+}
+
+const EnhanceForm = Form.create({ onValuesChange })(SearchForm)
+
+EnhanceForm.propTypes = {
+  onSearch: PropTyps.func.isRequired,
+  onReset: PropTyps.func,
+  onError: PropTyps.func,
+  onChange: PropTyps.func,
+  fields: PropTyps.arrayOf(PropTyps.object),
+  hideResetBtn: PropTyps.bool,
+}
+
+export default EnhanceForm;

src/components/XForm/FileUpload.jsx

 import { Upload, Button, Icon } from 'antd';
 import { uploaderProps } from '../../utils/upload';
 
+/**
+ * value 数据的接收格式 [{ url: xxxxx.mp4 }]
+ * @param {*} props 
+ */
 function fileUpload(props) {
 
   const { value } = props
 
 
   function getFileList() {
-    return (value || []).map((img, inx) => ({ uid: inx, url: img, name: img.substring(img.lastIndexOf('/') + 1, img.length), status: 'done' }))
+    console.log('fileUpload: ', value)
+    // value 数据的接收格式 [{ url: xxxxx.mp4 }, { url: xxxxx.jpg }]
+    return (value || []).filter(f => f !== undefined).map((img, inx) => ({ uid: inx, url: img, name: img.substring(img.lastIndexOf('/') + 1, img.length), status: 'done' }))
   }
 
   function setDefaultValue() {
   }
 
   function onFileChange({ file, fileList }) {
+    console.log(file, fileList)
     setDefaultFileList(fileList)
     if (file.status === 'uploading') {
       return
     }
 
-    if (file.status === 'done') {
-      props.onChange([].concat(file.response))
+    if (file.status === 'done' || file.status === 'removed') {
+
+      // 因为这个控件本身返回的数据格式 [{ ..., response: '服务器返回的数据' }]
+      // 但是 我这里自己用的时候 传入的数据是 [ 'xxxx.mp4', 'xxxx.jpg' ], 然后通过 getFileList() 转换成了 [{ url: 'xxx.mp4' }] 这样的格式
+
+      // 原因是因为 控件返回的数据 和 fileList 展示已经上传的数据 的格式字段不一样
+
+      const resFileList = fileList.filter(f => f.response !== undefined).map(i => i.response)
+      const tempFileList = fileList.filter(f => f.url !== undefined).map(i => i.url)
+      const resultList = tempFileList.concat(resFileList || [])
+      props.onChange(resultList)
     }
   }
 

src/layouts/BasicLayout.jsx

         color: 'rgba(102, 102, 102, 1)',
       }}
     >
-      copy Right @ 知与行
+      Copy Right @ 知与行
     </div>
   )
 }

src/pages/activity/editActivity.jsx

           ],
         })(<BuildSelect disabled={disable}/>)}
         </Form.Item>
-        <Form.Item label="活动详情图">
-          {getFieldDecorator('detailImgUrl', {
+        <Form.Item label="活动封面图1" help="建议图片尺寸：750px*420px，比例16:9,格式：jpg，用于活动列表">
+          {getFieldDecorator('listImgUrl', {
           rules: [
             {
               required: true,
-              message: '请选择活动详情图',
+              message: '请选择活动封面图1',
             },
           ],
         })(<ImageUploader />)}
-          <span>建议图片尺寸：750px*560px</span>
         </Form.Item>
-        <Form.Item label="活动列表图">
+        <Form.Item label="活动详情主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于普通活动详情">
           {getFieldDecorator('imgUrl', {
           rules: [
             {
               required: true,
-              message: '请选择活动列表图',
+              message: '请选择活动详情主图',
             },
           ],
         })(<ImageUploader />)}
-          <span>建议图片尺寸：750px*560px</span>
         </Form.Item>
         <Form.Item label="活动标题">
         {getFieldDecorator('title', {
 
         <div >
           <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
-            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动海报图</p>
             <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
           </div>
+          <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于普通活动海报</p>
           <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
             <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
         <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
       </div>
       <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
-        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>活动分享图</p>
         <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
       </div>
-      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '250px' }}>图片比例: 5:4</p>
+      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginTop: '20px' }}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于活动分享好友</p>
       <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
       <Button onClick={() => router.go(-1)}>取消</Button>
     </div>

src/pages/activity/groupActivity/editGroupActivity.jsx

         ]
       },
       {
-        label: '活动主图',
+        label: '拼团详情主图',
         name: 'mainImg',
         type: FieldTypes.ImageUploader,
         value: dynamicData.mainImg,
         rules: [
-          { required: true, message: '请输入活动主图' },
+          { required: true, message: '请输入拼团详情主图' },
         ],
-        help: '建议尺寸375*312px',
+        help: '建议图片尺寸：750*600px，比例5:4,格式：jpg，用于拼团活动详情',
       },
       {
-        label: '活动列表图',
-        name: 'detailImg',
+        label: '拼团封面图1',
+        name: 'listImg',
         type: FieldTypes.ImageUploader,
-        value: dynamicData.detailImg,
+        value: dynamicData.listImg,
         rules: [
-          { required: true, message: '请输入活动列表图' },
+          { required: true, message: '请输入拼团封面图1' },
         ],
-        help: '建议尺寸375*312px',
+        help: '建议图片尺寸：750*420px，比例16:9,格式：jpg，用于活动列表',
+      },
+      {
+        label: '拼团封面图2',
+        name: 'bannerListImg',
+        type: FieldTypes.ImageUploader,
+        value: dynamicData.bannerListImg,
+        rules: [
+          { required: true, message: '请输入拼团封面图2' },
+        ],
+        help: '建议图片尺寸：670*224px，比例3:1,格式：jpg，用于首页底部活动轮播',
       },
       {
         label: '活动时间',
 
         <div >
           <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
-            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>拼团海报图</p>
             <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
           </div>
+          <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于拼团活动海报</p>
           <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
             <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
         <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
       </div>
       <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
-        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>拼团分享图</p>
         <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
       </div>
-      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '250px' }}>图片比例: 5:4</p>
+      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于拼团活动分享好友</p>
       <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
       <Button onClick={() => router.go(-1)}>取消</Button>
     </div>

src/pages/activity/helpActivity/edithelpActivity.jsx

         })(<Input />)}
         </Form.Item>
 
-        <Form.Item label="活动主图" help="建议尺寸375*312px">
+        <Form.Item label="助力详情主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于助力活动详情">
           {getFieldDecorator('img', {
           rules: [
             {
               required: true,
-              message: '活动主图不能为空',
+              message: '助力详情主图不能为空',
+            },
+          ],
+        })(<ImageUploader />)}
+        </Form.Item>
+
+        <Form.Item label="助力封面图1" help="建议图片尺寸：750*420px，比例16:9,格式：jpg，用于活动列表">
+          {getFieldDecorator('listImg', {
+          rules: [
+            {
+              required: true,
+              message: '助力封面图1不能为空',
+            },
+          ],
+        })(<ImageUploader />)}
+        </Form.Item>
+
+        <Form.Item label="助力封面图2" help="建议图片尺寸：670*224px，比例3:1,格式：jpg，用于首页底部活动轮播">
+          {getFieldDecorator('bannerListImg', {
+          rules: [
+            {
+              required: true,
+              message: '助力封面图2不能为空',
             },
           ],
         })(<ImageUploader />)}
 
         <div >
           <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
-            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>助力海报图</p>
             <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
           </div>
+          <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于助力活动海报</p>
           <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
             <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
         <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
       </div>
       <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
-        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>助力分享图</p>
         <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
       </div>
-      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '250px' }}>图片比例: 5:4</p>
+      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于助力活动分享好友</p>
       <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
       <Button onClick={() => router.go(-1)}>取消</Button>
     </div>

src/pages/building/list/add/components/base.jsx

 
   const [poi, setPoi] = useState([])
 
-  console.log('props.building: ', props.building)
+  // 视频上传按钮是否 禁用
+  const [fileUploadDisabled, setFileUploadDisabled] = useState(false)
+
+  // console.log('props.building: ', props.building)
   if (props.building.buildingId !== undefined) {
     const { buildingId } = props.building
      // eslint-disable-next-line react-hooks/rules-of-hooks
       res.mapCoordinate = res.coordinate
       if (res.videoUrl) {
         res.videoUrl = [].concat(res.videoUrl)
+        // 视频上传按钮禁用
+        setFileUploadDisabled(true)
+      }
+      if (res.videoImage) {
+        res.videoImage = res.videoImage[0].url
       }
+      setPoi(res.mapJson || [])
       props.form.setFieldsValue(res)
       props.onSuccess(res)
     })
   }
 
   function addBuilding(data) {
-    console.log('poi: ', poi)
+    // console.log('poi: ', poi)
     data.mapJson = poi
     data.openingDate = moment(data.openingDate, 'yyyy-MM-dd HH:mm:ss')
     data.receivedDate = moment(data.receivedDate, 'yyyy-MM-dd HH:mm:ss')
     data.img = data.avatarImage && data.avatarImage.map((item, index) => ({ imgType: 'banner', url: item, orderNo: index + 1 }))
     // 列表图
     data.listImg = data.listImage && data.listImage.map((item, index) => ({ imgType: 'list', url: item, orderNo: index + 1 }))
-    data.videoUrl = data.videoUrl[0]
+    if (data.videoUrl) {
+      // console.log(data.videoUrl[0])
+      data.videoUrl = data.videoUrl[0]
+    }
+    
     if (data.tag) {
       data.tag = data.tag.map((item, _) => ({ tagName: item }))
     }
 
+    if (data.videoImage) {
+      data.videoImage = [{ imgType: 'videoImage', url: data.videoImage, orderNo: 1 }]
+    }
+
     const api = data.buildingId === undefined ? apis.building.addBuilding : apis.building.updateBuilding
     request({ ...api, data: { ...data } }).then(res => {
       openNotificationWithIcon('success', '操作成功')
 
   // 视频文件上传前 回调
   function fileUploadBeforeUpload(file, fileList) {
-    console.log(file, fileList)
+    // console.log('视频文件上传前 回调: ', file, fileList)
     return new Promise((resolve, reject) => {
-      if (file.type === 'video/mp4' || file.type === '.mp4') {
+      if (fileUploadDisabled) {
+        openNotificationWithIcon('error', '项目视频，只允许上传一个')
+        reject()
+      } else if (file.type === 'video/mp4' || file.type === '.mp4') {
+          setFileUploadDisabled(true)
           resolve(file)
       } else {
         openNotificationWithIcon('error', '项目视频，仅支持MP4格式')
     // 设置表单值
     getFormMapScopeName(key, { data: poiArray })
 
-    const newPoi = poi.map(m => {
+    const poiData = [].concat(POI_TYPES)
+    const newPoi = poiData.map(m => {
       if (m.key === key) {
         m.data = poiArray
       }
           </Form.Item>
           <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：1920*1080，比例16:9">
             {getFieldDecorator('videoUrl')(
-              <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频"/>,
+              // disabled={fileUploadDisabled}
+              <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" />,
+            )}
+          </Form.Item>
+          <Form.Item label="视频封面图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于视频封面" >
+            {getFieldDecorator('videoImage', {
+              rules: [{ required: true, message: '请选择视频封面图' }],
+            })(
+              <ImageUpload />,
             )}
           </Form.Item>
-          <Form.Item label="项目主图" help="建议图片尺寸：640px*360px">
+          <Form.Item label="楼盘主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘详情">
             {getFieldDecorator('avatarImage', {
               rules: [{ required: true, message: '请选择项目主图' }],
             })(
               <ImageListUpload />,
             )}
           </Form.Item>
-          <Form.Item label="列表图" help="建议图片尺寸：640px*360px">
+          <Form.Item label="楼盘封面图" help="建议图片尺寸：670*377px，比例16:9,格式：jpg，用于楼盘列表">
             {getFieldDecorator('listImage', {
               rules: [{ required: true, message: '请选择列表图' }],
             })(

src/pages/building/list/add/components/poster.jsx

         <p style={{ textAlign: 'center', fontSize: '19px', color: '#666', marginTop: '30px' }}>海报模板</p>
       </div>
       <div >
-        <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
-          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}><span style={{ color: 'red' }}>*</span> 海报图片</p>
+        <div style={{ display: 'flex', width: '100%', margin: '30px 0' }}>
+          <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}><span style={{ color: 'red' }}>*</span> 楼盘海报图</p>
           <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
         </div>
+        <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘海报</p>
         <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
           <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
           <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />

src/pages/building/list/add/components/share.jsx

       <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
     </div>
     <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
-      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
+      <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>楼盘分享图</p>
       <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
     </div>
-    <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '250px' }}>图片比例: 5:4</p>
+    <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginTop: '20px' }}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘分享好友</p>
     <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
     <Button onClick={() => router.go(-1)}>取消</Button>
   </div>

src/pages/carouselFigure/editAdvertising.jsx

         value: data.buildingId,
       },
       {
-        label: '商品图片',
+        label: '开屏广告',
         name: 'image',
         type: FieldTypes.ImageUploader,
         value: data.image,
-        help: '建议图片尺寸：640px*960px',
+        help: '建议图片尺寸：640*960px，比例2:3,格式：jpg，用于开屏广告',
       },
       {
         label: '标题',

src/pages/carouselFigure/editCarousel.jsx

   let helpVisible = false
   let groupVisible = false
   let buildingId = ''
+  let locationType = false
 
   const setExtraData = data => {
+    console.log(data, 'data');
     contentVisible = data.contentType === 'other';
     activityVisible = data.contentType === 'activity';
     newsVisible = data.contentType === 'news';
     helpVisible = data.contentType === 'help';
     groupVisible = data.contentType === 'group';
-
+    
     buildingId = data.buildingId
+    locationType = data.showPosition === 'mall';
+    console.log(locationType, 'locationType');
   }
 
     
           value: data.buildingId,
         },
         {
-          label: '商品图片',
+          label: locationType ? '积分商城轮播图' : '首页轮播图',
           name: 'image',
           type: FieldTypes.ImageUploader,
           value: data.image,
-          help: '建议图片尺寸：640px*330px',
+          help: locationType ? '建议图片尺寸：750*420px，比例16:9,格式：jpg，用于积分商城banner轮播':'建议图片尺寸：750*600px，比例5:4,格式：jpg，用于首页顶部banner轮播',
         },
         {
           label: '标题',

src/pages/integralMall/editGoods.jsx

       ]
     },
     {
-      label: '商品图片',
+      label: '商品封面图',
       name: 'imgUrl',
       type: FieldTypes.ImageUploader,
       value: goodsData.imgUrl,
-      help: '建议图片尺寸：164px*164px',
+      help: '建议图片尺寸：320*320px，比例1:1,格式：jpg，用于商品封面图',
+    },
+    {
+      label: '商品主图',
+      name: 'detailImgUrl',
+      type: FieldTypes.ImageUploader,
+      value: goodsData.detailImgUrl,
+      help: '建议图片尺寸：750*750px，比例1:1,格式：jpg，用于商品主图',
     },
     {
       label: '商品名称',

src/pages/news/list/editNewsList.jsx

         ]
       },
       {
-        label: '资讯列表图',
+        label: '资讯列表',
         name: 'newsImg',
         type: FieldTypes.ImageUploader,
         value: dynamicData.newsImg,
-        help: '建议图片尺寸：660px*416px',
+        help: '建议图片尺寸：320*256px，比例5:4,格式：jpg，用于资讯列表',
       },
       {
         label: '资讯标题',
 
         <div >
           <div style={{ display: 'flex', width: '100%', margin: '60px 0' }}>
-            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报图片</p>
+            <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>资讯海报图</p>
             <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
           </div>
+          <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginBottom: '30px'}}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于资讯海报</p>
           <div style={{ display: 'flex', alignItems: 'center', width: '100%', marginBottom: '60px' }}>
             <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>海报标题</p>
             <Input style={{ width: '20vw' }} value={inputValue} placeholder="请输入海报标题" onChange={e => changeInput(e.target.value)} />
         <Input placeholder="请输入分享标题" value={inputValue} onChange={e => changeInput(e.target.value)} />
       </div>
       <div style={{ display: 'flex', width: '100%', marginTop: '40px' }}>
-        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>分享图片</p>
+        <p style={{ minWidth: '200px', color: '#222', textAlign: 'right', margin: '0 30px 0 0' }}>资讯分享好友图</p>
         <ImageUploader value={imgValue} onChange={e => changeImg(e)} />
       </div>
-      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '250px' }}>图片比例: 5:4</p>
+      <p style={{ fontSize: '0.5vw', color: '#A9A9A9', marginLeft: '230px', marginTop: '20px' }}>建议图片尺寸：750*600px，比例5:4,格式：jpg，用于资讯分享好友</p>
       <Button type="primary" htmlType="submit" onClick={submitShare} style={{ margin: '40px 40px 40px 220px' }}> 确定</Button>
       <Button onClick={() => router.go(-1)}>取消</Button>
     </div>

src/pages/staff/list/editStaff.jsx

       value: userData.buildingId
     },
     {
-      label: '头像',
+      label: '置业顾问头像',
       name: 'photo',
       type: FieldTypes.ImageUploader,
-      extra: '建议图片大小 640 * 640',
+      extra: '建议图片尺寸：320*320px，比例1:1,格式：jpg，用于置业顾问头像',
       value: userData.photo,
       rules: [
         { required: true, message: '请选择头像' },

src/pages/system/editPolicy.jsx

         value: policyData.cityId,
       },
       {
-        label: '政策图片',
+        label: '购房政策封面图',
         name: 'policyImg',
         type: FieldTypes.ImageUploader,
         value: policyData.policyImg,
-        help: '建议图片尺寸：660px*416px',
+        help: '建议图片尺寸：220*176px，比例5:4,格式：jpg，用于购房百科列表',
       },
       {
         label: '政策标题',

src/pages/system/messageList.jsx

 import React, { useState, useEffect } from 'react';
 import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker } from 'antd';
-import { FormattedMessage } from 'umi-plugin-react/locale';
+// import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
 import router from 'umi/router';
 import moment from 'moment';
-import SelectCity from '../../components/SelectButton/CitySelect'
-import BuildSelect from '../../components/SelectButton/BuildSelect'
-import apis from '../../services/apis';
-import request from '../../utils/request'
+// import SelectCity from '../../components/SelectButton/CitySelect'
+// import BuildSelect from '../../components/SelectButton/BuildSelect'
+// import apis from '../../services/apis';
+// import request from '../../utils/request'
+import { fetch, apis } from '../../utils/request'
+// import { useQuery } from '../../utils/hooks'
+import PaginationWrapper from '../../components/PaginationWrapper'
+import SearchForm from '../../components/SearchForm'
 
-const { Option } = Select;
-const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+// const { Option } = Select;
+// const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+const getMessageList = fetch(apis.system.taCustomerMessage)
 
 const header = (props) => {
-  const [ data, setData ] = useState({})
-//   const [page, changePage] = useState({})
+  // const [ data, setData ] = useState({})
+// //   const [page, changePage] = useState({})
+
+//   useEffect(() => {
+//     getList({ pageNum: 1, pageSize: 10 });
+//   },[])
 
-  useEffect(() => {
-    getList({ pageNum: 1, pageSize: 10 });
-  },[])
+//   // 查询列表
+//   const getList = (params) => {
+//     request({ ...apis.system.taCustomerMessage, params: { ...params },}).then((data) => {
+//         console.log(data)
+//         setData(data)
+//     })
+//   }
 
-  // 查询列表
-  const getList = (params) => {
-    request({ ...apis.system.taCustomerMessage, params: { ...params },}).then((data) => {
-        console.log(data)
-        setData(data)
-    })
-  }
+  // const [pageNum, setPage] = useState(1)
+  // const [data, loading, err] = useQuery({params: { pageNum }}, getMessageList)
 
   const columns = [
     {
   ];
    
   
-  const changePageNum = (pageNumber) => {
-      getList({ pageNum: pageNumber, pageSize: 10 })
-  }
+  // const changePageNum = (pageNumber) => {
+  //     getList({ pageNum: pageNumber, pageSize: 10 })
+  // }
+
+  
+  console.log('------render messagelist-------')
  
 
-  const { getFieldDecorator } = props.form
+  // const { getFieldDecorator } = props.form
   return (
-
     <>
-      <Table rowKey="messageList" dataSource={data.records} columns={columns} pagination={false}/>
-      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
-        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current}/>
-      </div>
+    <SearchForm
+      onSearch={console.log}
+      fields={[
+        {
+          label: 'Foo',
+          name: 'foo',
+          element: <Input />,
+        },
+        {
+          label: 'Bar',
+          name: 'bar',
+          element: (<Select style={{ width: '200px' }}>
+            <Select.Option value={1}>a</Select.Option>
+            <Select.Option value={2}>b</Select.Option>
+          </Select>)
+        },
+      ]}
+    ></SearchForm>
+    <PaginationWrapper
+      request={getMessageList}
+      render={data => <Table rowKey={record => record.messageId} dataSource={data.records} columns={columns} pagination={false}/>}
+    >
+    </PaginationWrapper>
     </>
+    // <>
+    //   <Table rowKey="messageList" dataSource={data.records} columns={columns} pagination={false}/>
+    //   <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+    //     <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={pg => setPage(pg)} current={data.current}/>
+    //   </div>
+    // </>
   )
 }
-const WrappedHeader = Form.create({ name: 'header' })(header);
+// const WrappedHeader = Form.create({ name: 'header' })(header);
 
-export default WrappedHeader
+export default header

src/utils/hooks.js

+import React, { useState, useEffect } from 'react';
+
+function ObjEqual(a, b) {
+  if (typeof(a) !== 'object' || typeof(b) !== 'object') {
+    return false
+  }
+
+  return JSON.stringify(a) === JSON.stringify(b)
+}
+
+export function useQuery(params, request) {
+  const [preParams, setParams] = useState({})
+  const [data, setData] = useState({})
+  const [error, setError] = useState()
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (ObjEqual(preParams, params)) {
+      return
+    }
+
+    setLoading(true)
+    setParams(params)
+    request(params).then((res) => {
+      setData(res)
+      setError(void 0)
+      setLoading(false)
+    }).catch((err) => {
+      setError(err)
+      setLoading(false)
+    })
+  })
+
+  return [
+    data,
+    loading,
+    error,
+  ]
+}

src/utils/utils.js

   return isAntDesignPro();
 };
 export const getPageQuery = () => parse(window.location.href.split('?')[1]);
+
+export function ObjSpEqual(a = {}, b = {}) {
+  return JSON.stringify(a) === JSON.stringify(b)
+}