Merge branch 'dev'

config/config.js

@@ -139,13 +139,5 @@ export default {
   },
   chainWebpack: webpackPlugin,
 
-  proxy: {
-    ...proxy,
-    '/gaode_amap': { // 高德地图
-      // target: 'http://192.168.0.11:8080/',
-      target: 'https://restapi.amap.com/v3/',
-      changeOrigin: true,
-      pathRewrite: { '^/gaode_amap': '' },
-    },
-  },
+  proxy,
 };

config/routes.js

@@ -623,6 +623,52 @@ export default [
               },
             ],
           },
+          {
+            path: '/h5SampleManager',
+            name: 'H5样例管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/h5SampleManager/h5Sample/list',
+                name: 'H5样例',
+                component: './h5SampleManager/h5Sample/list',
+              },
+              {
+                path: '/h5SampleManager/h5Sample/detail',
+                name: '详情',
+                hideInMenu: true,
+                component: './h5SampleManager/h5Sample/detail',
+              },
+              {
+                path: '/h5SampleManager/h5Sample/add',
+                name: '提交需求',
+                hideInMenu: true,
+                component: './h5SampleManager/h5Sample/add',
+              },
+              {
+                path: '/h5SampleManager/h5Demand/list',
+                name: 'H5需求单',
+                component: './h5SampleManager/h5Demand/list',
+              },
+              // {
+              //   path: '/drainageSampleManager/drainageDemand/add',
+              //   name: '新增需求单',
+              //   component: './drainageSampleManager/drainageDemand/add',
+              // },
+              {
+                path: '/h5SampleManager/h5Demand/detail',
+                name: '详情',
+                hideInMenu: true,
+                component: './h5SampleManager/h5Demand/detail',
+              },
+              {
+                path: '/h5SampleManager/h5Demand/edit',
+                name: '修改需求',
+                hideInMenu: true,
+                component: './h5SampleManager/h5Demand/edit',
+              },
+            ],
+          },
           // {
           //   path: '/miniapp',
           //   name: '小程序管理',

package.json

@@ -62,8 +62,10 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^16.8.6",
+    "react-slick": "^0.25.2",
     "react-zmage": "^0.8.5",
     "redux": "^4.0.1",
+    "swiper": "^5.3.6",
     "umi": "^2.13.3",
     "umi-plugin-pro-block": "^1.3.2",
     "umi-plugin-react": "^1.9.5",

src/components/DragableUploadImageList/index.jsx

@@ -77,6 +77,7 @@ class ImageListUpload extends React.Component {
 
   render() {
     const { previewVisible, previewImage } = this.state;
+    const { multiple = false } = this.props;
     const fileList = this.getFileList();
 
     const uploadButton = (
@@ -93,6 +94,7 @@ class ImageListUpload extends React.Component {
         <Upload
           listType="picture-card"
           showUploadList={false}
+          multiple={multiple}
           onPreview={this.handlePreview}
           onChange={this.handleChange}
           { ...uploaderProps }

src/components/Wangedit/Wangedit.jsx

@@ -11,6 +11,7 @@ class Wangedit extends React.Component {
     super(props, context);
     this.state = {
       html: undefined,
+      contenteditable: props.contenteditable == false ? false : true
     }
     this.editor = undefined;
   }
@@ -77,6 +78,7 @@ class Wangedit extends React.Component {
     }
 
     this.editor.create()
+    this.editor.$textElem.attr('contenteditable',this.state.contenteditable);
     this.editor.customConfig.uploadImgShowBase64 = true
     this.editor.txt.html(this.props.value)
   }

src/models/login.js

@@ -20,7 +20,9 @@ const Model = {
         type: 'changeLoginStatus',
         payload: response,
       }); // Login successfully
-            
+
+      window.localStorage.setItem('showSwiperIndex', 1)
+
       const urlParams = new URL(window.location.href);
       const params = getPageQuery();
       let { redirect } = params;

src/pages/Welcome.jsx

@@ -3,6 +3,7 @@ import { Card, Typography, Alert, Row, Col } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import EchartsTest from '../components/EchartsTest';
 import IndexEcharts from './indexEcharts/index';
+import Swiper from './swiper/index';
 import router from 'umi/router';
 import request from '../utils/request';
 import apis from '../services/apis';
@@ -63,11 +64,12 @@ const welcome = (props) => {
             boxShadow: '0px  0.106rem 14px -15px rgba(107,130,230,1)',
             borderRadius: '12px', width: '32%',
           }}>
-            <span style={{ fontSize: '24px', color: '#fff', borderBottom: '1px solid #fff', margin: '30px 0',cursor: 'pointer' }}>最近7天新增 </span>
+            <span style={{ fontSize: '24px', color: '#fff', borderBottom: '1px solid #fff', margin: '30px 0', cursor: 'pointer' }}>最近7天新增 </span>
             <span style={{ fontSize: '52px', color: '#fff', marginLeft: '26px', fontFamily: 'fantasy', lineHeight: '100px' }}>{data.selectRecentlyCount || '0'}</span>
           </div>
         }
       </div>
+      <Swiper />
       <IndexEcharts style={{ width: '100%' }} onReData={(e) => redata(e)} checkData={checkData}></IndexEcharts>
     </>
   )

src/pages/activity/drainage/DrainageList.jsx

@@ -483,7 +483,7 @@ const header = (props) => {
   //打开新页面
   const openIndexImg = () => {
     const newWin=window.open('about:blank');
-    newWin.location.href="https://estateagents.oss-cn-shanghai.aliyuncs.com/miniapp/upload/images/1575977446224-1.png"
+    newWin.location.href="http://njcj.oss-cn-shanghai.aliyuncs.com/%E6%A1%88%E4%BE%8B.png"
   }
   
   const { getFieldDecorator } = props.form;

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

@@ -447,7 +447,7 @@ function AddBuilding(props) {
             {getFieldDecorator('avatarImage', {
               rules: [{ required: true, message: '请选择项目主图' }],
             })(
-              <DragableUploadImageList />,
+              <DragableUploadImageList multiple={true} />,
             )}
           </Form.Item>
           <Form.Item label="楼盘封面图" help="建议图片尺寸：750*420px，比例16:9,格式：jpg，用于楼盘列表">

src/pages/h5SampleManager/h5Demand/components/AddDemand.jsx

@@ -0,0 +1,45 @@
+import React, { PureComponent, useState, useEffect } from 'react'
+import { Modal, Row, Col, Table, Pagination, Button, Form, Input,message } from 'antd'
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import router from 'umi/router';
+import AuthButton from '@/components/AuthButton';
+
+// import Style from './style.less'
+// import HotBlock from '../HotBlock'
+import apis from '../../../../services/apis';
+import request from '../../../../utils/request';
+
+const BatchDel = props => {
+
+    function sampleList(record) {
+        router.push({
+          pathname: '/h5SampleManager/h5Sample/list',
+        })
+    }
+
+  return (
+    <>
+      <Modal footer={null} title="新增需求单" visible={props.visible} onCancel={props.onCancel} width={600}>
+        <div style={{textAlign:'center', marginBottom:'15px'}}>
+            <span style={{fontSize:'15px'}}>请到H5样例中筛选并查看详情后从详情提交需求单</span><br/>
+        </div>
+        <Form >
+          <Form.Item wrapperCol={{ span: 15, offset: 8 }}>
+            <Button type="primary" onClick={() => sampleList()}>
+              查看全部样例
+            </Button>
+            <Button onClick={props.onCancel} style={{marginLeft:'20px'}}>
+              取消
+            </Button>
+          </Form.Item>
+        </Form>
+        
+        
+      </Modal>
+    </>
+  );
+}
+
+const WrappedBase = Form.create({ name: 'BatchDel' })(BatchDel);
+
+export default WrappedBase

src/pages/h5SampleManager/h5Demand/components/BatchDel.jsx

@@ -0,0 +1,56 @@
+import React, { PureComponent, useState, useEffect } from 'react'
+import { Modal, Row, Col, Table, Pagination, Button, Form, Input,message } from 'antd'
+// import EnDash from '../EnDash'
+import AuthButton from '@/components/AuthButton';
+
+// import Style from './style.less'
+// import HotBlock from '../HotBlock'
+import apis from '../../../../services/apis';
+import request from '../../../../utils/request';
+
+const BatchDel = props => {
+  const taRaiseRecords = props.demandIds;
+  function handleSubmit (e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err){
+        request({ ...apis.taH5SampleManager.batchDelDemands, data: { taH5Demands: taRaiseRecords }, }).then((data) => {
+          const resultMessage = '操作成功，其中'+data.successNum+'条成功删除，'+data.failNum+'条非作废/提交状态未删除。'
+          message.info(resultMessage)
+          props.onSuccess(false);
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form;
+
+  return (
+    <>
+      <Modal footer={null} title="确认删除" visible={props.visible} onCancel={props.onCancel} width={600}>
+        <div style={{textAlign:'center', marginBottom:'30px'}}><span style={{fontSize:'20px'}}>确认将所选{taRaiseRecords.length}条数据删除？</span></div>
+        <div style={{textAlign:'center', marginBottom:'15px'}}>
+            <span style={{fontSize:'15px'}}>可删除条件：需求单状态 为已提交或作废</span><br/>
+        </div>
+        <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+          <Form.Item wrapperCol={{ span: 15, offset: 10 }}>
+            <Button type="primary" htmlType="submit" >
+              确定
+            </Button>
+            <Button onClick={props.onCancel} style={{marginLeft:'20px'}}>
+              取消
+            </Button>
+          </Form.Item>
+        </Form>
+        
+        
+      </Modal>
+    </>
+  );
+}
+
+const WrappedBase = Form.create({ name: 'BatchDel' })(BatchDel);
+
+export default WrappedBase

src/pages/h5SampleManager/h5Demand/detail.jsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, InputNumber, Checkbox, Row, Col} from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import router from 'umi/router';
+import moment from 'moment';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import AuthButton from '@/components/AuthButton';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+import TextArea from 'antd/lib/input/TextArea';
+
+const { Option } = Select;
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+
+const header = props => {
+  const demandId  = props.location.query.id;
+  const [demandData, setDemandData] = useState({})
+
+  useEffect(() => {
+    getDemandData(demandId);
+  },[])
+
+  // 查询列表
+  const getDemandData = (demandId) => {
+      request({ ...apis.taH5SampleManager.taH5DemandById, urlData: {id: demandId} }).then((data) => {
+          setDemandData(data)
+          props.form.setFieldsValue(data)
+      })
+  }
+
+  // 跳转到编辑
+  const toDetail = rowData => () => {
+    if(rowData) {
+      router.push({
+      pathname: '/h5SampleManager/h5Demand/edit',
+      query: {
+        id: demandId,
+      },
+    });
+      return
+    }
+  }
+
+  function sampleDetail(sampleId){
+    request({ ...apis.taH5SampleManager.taH5SampleById, urlData: { id: sampleId } }).then((data) => {
+      router.push({
+        pathname: '/h5SampleManager/h5Sample/detail',
+        query: {
+          id: sampleId,
+        },
+      });
+    }).catch(err => {
+      message.info("该H5样例已取消发布或已删除")
+    })
+  }
+
+  function handleSubmit (e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err){
+        console.log(values,'valuesvaluesvalues')
+        if (values.payType == 'onLine' && (values.payDescriptionOnline == '' || values.payDescriptionOnline == null)){
+            message.info("请填写线上缴费说明");
+            return;
+        }
+        if (values.payType == 'offLine' && (values.payDescriptionOffline == '' || values.payDescriptionOffline == null)){
+          message.info("请填写线下缴费说明");
+          return;
+        }
+        if ((values.payType == 'onLine' && (values.payDescriptionOnline == '' || values.payDescriptionOnline == null)) ||
+            (values.payType == 'offLine' && (values.payDescriptionOffline == '' || values.payDescriptionOffline == null))){
+          message.info("请填写缴费说明");
+          return;
+        }
+        
+        let {liveTime, ...submitValue} = values
+        if (values.raiseStartTime > values.raiseEndTime){
+          message.info("认筹结束时间大于认筹开始时间")
+          return;
+        }
+        submitValue.raiseStartTime = moment(submitValue.raiseStartTime).format('YYYY-MM-DD HH:mm:ss')
+        submitValue.raiseEndTime = moment(submitValue.raiseEndTime).format('YYYY-MM-DD HH:mm:ss')
+        submitValue.payType = values.payType.toString();
+        submitValue.raisePrice = submitValue.raisePrice * 100;
+        request({ ...apis.house.addRaise, data: { ...submitValue },}).then((data) => {
+          message.info("保存成功")
+          router.push({
+            pathname: '/house/raise/list',
+          });
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form;
+
+  return (
+    <>
+      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+        <Form.Item label="样例名">
+          <a onClick={() => sampleDetail(demandData.sampleId)} style={{ color: 'blue' }}>{demandData.sampleName}</a>
+        </Form.Item>
+        <Form.Item label="下单人">
+          <span>{demandData.orderer}</span>
+        </Form.Item>
+        <Form.Item label="联系方式">
+        <span>{demandData.phone}</span>
+        </Form.Item>
+        <Form.Item label="下单时间">
+        <span>{`${moment(demandData.createDate).format('YYYY-MM-DD HH:mm')}`}</span>
+        </Form.Item>
+        <Form.Item label="更新时间">
+        <span>{`${moment(demandData.updateDate).format('YYYY-MM-DD HH:mm')}`}</span>
+        </Form.Item>
+        <Form.Item label="需求单状态">
+        <span>{demandData.demandStatus === 1 ? "已提交": demandData.demandStatus === 2 ?"处理中":demandData.demandStatus === 3?"已交付":"作废"}</span>
+        </Form.Item>
+        <Form.Item label="需求描述">
+          {getFieldDecorator('demandContent')(<Wangedit contenteditable={false}/>)}
+        </Form.Item>
+        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
+          <Button type="primary"  onClick={toDetail(demandId)} style={{marginRight:'20px'}}>
+            修改需求
+          </Button>
+        </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/h5SampleManager/h5Demand/detail.less

@@ -0,0 +1,69 @@
+.searchBox {
+    font-size: 20px;
+    color: red;
+    display: flex;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .searchItem {
+      min-width: 20px;
+      margin-right: 20px;
+      text-align: left;
+      .anticon-down {
+        float: right !important;
+      }
+    }
+  }
+  .addBtn {
+    padding: 0 30px;
+    height: 36px;
+    background-color: #50be00;
+    color: #fff;
+    margin: 30px 0;
+  }
+  .touxiang {
+    width: 93px;
+    height: 93px;
+  }
+  .ant-table-column-title {
+    font-weight: 600;
+  }
+  
+  .about {
+    padding: 0 30px;
+    height: 36px;
+    margin: 30px 0;
+    margin-left:8px;
+  }
+  
+  .selectName {
+    font-size: 14px;
+    padding: 0 10px;
+    height: 36px;
+    color: rgb(10, 10, 10);
+    margin: 30px 0;
+  }
+  
+  .inpuit {
+    width:50%;
+  }
+  
+  .inpuitTxt {
+    width:70%;
+  }
+  
+  
+  .formButton{
+    margin-left: 12% 
+  }
+  
+  .divInput{
+    float: 'left'; 
+    width: 500
+  }
+  .brokerTable{
+    padding: 0 30px;
+    height: 36px;
+    margin: 30px 0;
+  }
+  

src/pages/h5SampleManager/h5Demand/edit.jsx

@@ -0,0 +1,87 @@
+import React, { useState, useEffect } from 'react';
+import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select, Form, Alert } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+import router from 'umi/router';
+import channels from './detail.less';
+import apis from '../../../services/apis';
+import request from '../../../utils/request'
+
+const { TextArea } = Input;
+const { Option } = Select;
+
+const header = props => {
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getById()
+  }, [])
+  
+  
+  // 查询当前信息
+  function getById(params) {
+    request({ ...apis.taH5SampleManager.taH5DemandById, urlData: { id: props.location.query.id } }).then((data) => {
+      props.form.setFieldsValue(data)
+  }).catch((err) => {
+      console.log(err)
+      message.info(err.msg || err.message)
+  })
+  }
+
+  // 编辑
+  function editDemandById(data) {
+    console.log('datadata',data)
+    console.log('props.location.query.id', props.location.query.id)
+    request({ ...apis.taH5SampleManager.updateH5DemandById, urlData: { id: props.location.query.id }, data: { ...data } }).then((data) => {
+      router.go(-1)
+  }).catch((err) => {
+      console.log(err)
+      message.info(err.msg || err.message)
+  })
+  }
+
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        console.log('values', values)
+        if (values.demandContent == '<p><br></p>'){
+          message.info("请填写需求内容")
+          return
+        }
+        editDemandById({ ...values })
+      }
+    });
+  }
+  function go() {
+    router.push({
+      pathname: '/h5SampleManager/h5Demand/list',
+    });
+  }
+
+  const { getFieldDecorator } = props.form;
+
+  return (
+  <>
+        <Form labelCol={{ span: 6 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+        <Form.Item label="修改需求" help="注意，修改的需求可能会大幅增加开发时间，请在增加前和联系人确认，若需求对应开发工作量较大，可能需要重新评估报价和开发周期，因此，建议一次性提交完全部需求">
+          {getFieldDecorator('sampleName')(<Input disabled={true}/>)}
+        </Form.Item>
+        <Form.Item label="需求描述" style={{marginTop:'20px'}}>
+          {getFieldDecorator('demandContent', {
+            rules: [{ required: true, message: '请输入需求描述' }],
+          })(<Wangedit />)}
+        </Form.Item>
+        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
+          <Button type="primary" htmlType="submit">
+            保存
+          </Button>
+          <Button className={channels.formButton}  onClick={() => router.go(-1)}>取消</Button>
+        </Form.Item>
+      </Form>
+  </>
+)
+}
+const WrappedNormalLoginForm = Form.create({ name: 'header' })(header);
+export default WrappedNormalLoginForm

src/pages/h5SampleManager/h5Demand/list.jsx

@@ -0,0 +1,250 @@
+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 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 BatchDel from './components/BatchDel';
+import AddDemand from './components/AddDemand';
+import AuthButton from '@/components/AuthButton';
+
+const { Option } = Select;
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+const header = props => {
+  const sampleId  = props.location.query.id;
+  const sampleName = props.location.query.sampleName;
+  const [data, setData] = useState({})
+  const [demend, setDemend] = useState({})
+  const [demandIds, setDemandIds] = useState([])
+  const [batchDel, setBatchDel] = useState({visable:false,demandIds:''})
+  const [addDemand, setAddDemand] = useState({visable:false})
+
+  useEffect(() => {
+    if(sampleId){
+      getList({ pageNum: 1, pageSize: 10, sampleId: sampleId });
+    }else{
+      getList({ pageNum: 1, pageSize: 10});
+    }
+    
+  }, [])
+
+  // 查询列表
+  const getList = (params) => {
+    console.log(params);
+    request({ ...apis.taH5SampleManager.taH5Demand, params: { ...params } }).then((data) => {
+      console.log(data)
+      setData(data)
+    })
+  }
+
+  // 跳转到编辑
+  const toDetail = rowData => () => {
+    if(rowData) {
+      router.push({
+      pathname: '/h5SampleManager/h5Demand/detail',
+      query: {
+        id: rowData.demandId,
+      },
+    });
+      return
+    }
+  }
+
+  /**
+   *
+   *
+   * @param {*} props
+   * @returns
+   */
+
+  const columns = [
+    {
+      title: '样例名',
+      dataIndex: 'sampleName',
+      key: 'sampleName',
+      align: 'center',
+    },
+    {
+      title: '下单人',
+      dataIndex: 'orderer',
+      key: 'orderer',
+      align: 'center',
+      
+    },
+    {
+      title: '联系方式',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '下单时间',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      align: 'center',
+      render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>
+    },
+    {
+      title: '需求单状态',
+      dataIndex: 'demandStatus',
+      key: 'demandStatus',
+      align: 'center',
+      render: (text, records) => {
+        if (records.demandStatus === 1) { return '已提交' }
+        if (records.demandStatus === 2) { return '处理中' }
+        if (records.demandStatus === 3) { return '已交付' }
+        if (records.demandStatus === 4) { return '作废' }
+      },
+    },
+    {
+      title: '操作',
+      dataIndex: 'handle',
+      key: 'handle',
+      align: 'center',
+      render: (text, record) => (
+        <AuthButton name="admin.h5Demand.detail.get" noRight={null}>
+          <a style={{ color: '#66B3FF' }} onClick={toDetail(record)} >查看详情</a>
+        </AuthButton>
+      ),
+    },
+  ];
+  
+  const rowSelection = {
+    onChange: (selectedRowKeys, selectedRows) => {
+      console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
+      setDemandIds(selectedRows)
+    },
+  };
+
+  const changePageNum = pageNumber => {
+    getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
+  }
+
+  // 提交事件
+  const handleSubmit = (e, props) => {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        
+        if (values.startCreateDate != null){
+          values.startCreateDate = moment(values.startCreateDate).format('YYYY-MM-DD HH:mm:ss')
+        }
+        if (values.endCreateDate != null){
+          values.endCreateDate = moment(values.endCreateDate).format('YYYY-MM-DD HH:mm:ss')
+        }
+        getList({ pageNum: 1, pageSize: 10, ...values })
+      }
+    });
+  }
+
+  //重置搜索
+  function handleReset () {
+    props.form.resetFields();
+    getList({ pageNum: 1, pageSize: 10 })
+  }
+
+  function showBatchDel(e){
+  
+    if (demandIds.length <= 0){
+      message.info("请选择数据");
+      return;
+    }
+    setBatchDel(e);
+    if(!e.visable){
+      getList()
+    }
+  }
+
+  function addDemandInfo(e){
+    setAddDemand(e);
+  }
+
+  const { getFieldDecorator } = props.form
+  return (
+
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('sampleName',{
+            initialValue: sampleName
+          })(
+            <Input
+            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+            placeholder="样例名"
+          />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('orderer')(
+            <Input
+            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+            placeholder="下单人"
+          />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('phone')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="联系方式"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('startCreateDate')(
+            <DatePicker showTime={{ format: 'HH:mm:ss' }} placeholder="下单时间开始时间"/>,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('endCreateDate')(
+            <DatePicker showTime={{ format: 'HH:mm:ss' }} placeholder="下单时间结束时间"/>,
+          )}
+        </Form.Item>  
+        <Form.Item>
+          {getFieldDecorator('demandStatus')(
+            <Select style={{ width: '180px' }} placeholder="需求单状态">
+                <option value="">全部</option>
+                <option value="1">已提交</option>
+                <option value="2">处理中</option>
+                <option value="3">已交付</option>
+                <option value="4">作废</option>
+            </Select>
+          )}
+        </Form.Item>
+        <Form.Item>
+            <AuthButton name="admin.taShareActivity.search" noRight={null}>
+                <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                    搜索
+                </Button>
+            </AuthButton>
+            <AuthButton name="admin.taShareActivity.search" noRight={null}>
+                <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+                </Button>
+            </AuthButton>
+        </Form.Item>
+      </Form>
+      <AuthButton name="admin.h5Demand.add.post" noRight={null}>
+        <Button type="danger" onClick={() => addDemandInfo({visable:true})} className={styles.addBtn}>新增</Button>
+      </AuthButton>
+      <AuthButton name="admin.h5Demand.del" noRight={null}>
+        <Button type="primary" onClick={() => showBatchDel({visable:true, demandIds: demandIds})} className={styles.addBtn} style={{marginLeft:'30px'}}>删除</Button>
+      </AuthButton>
+      <AddDemand visible={addDemand.visable} onCancel={() => addDemandInfo({visable:false})}></AddDemand>
+      <BatchDel visible={batchDel.visable} demandIds={batchDel.demandIds} onCancel={() => showBatchDel({visable:false, demandIds: ''})} onSuccess={() => showBatchDel({visable:false, demandIds:'' })}/>
+      <Table rowSelection={rowSelection}
+        style={{marginTop:'30px'}} dataSource={data.records} columns={columns} pagination={false} rowKey="activityList" />
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />
+      </div>
+    </>
+  )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/h5SampleManager/h5Sample/add.jsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, InputNumber, Checkbox, Row, Col} from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import router from 'umi/router';
+import moment from 'moment';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import AuthButton from '@/components/AuthButton';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+import TextArea from 'antd/lib/input/TextArea';
+
+const { Option } = Select;
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+
+const header = props => {
+  const sampleId  = props.location.query.id;
+  const sampleName  = props.location.query.sampleName;
+  const [sampleData, setSampleData] = useState({})
+
+//   useEffect(() => {
+//     getSampleData(sampleId);
+//   },[])
+
+//   // 查询列表
+//   const getSampleData = (demandId) => {
+//       request({ ...apis.taH5SampleManager.taH5DemandById, urlData: {id: demandId} }).then((data) => {
+//           setDemandData(data)
+//           props.form.setFieldsValue(data)
+//       })
+//   }
+
+  // 跳转到编辑
+  const toDetail = rowData => () => {
+    if(rowData) {
+      router.push({
+      pathname: '/h5SampleManager/h5Demand/edit',
+      query: {
+        id: demandId,
+      },
+    });
+      return
+    }
+  }
+
+  function handleSubmit (e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err){
+        values.sampleId = sampleId
+        values.sampleName = sampleName
+        request({ ...apis.taH5SampleManager.addTaH5Demand, data: { ...values },}).then((data) => {
+          message.info("保存成功")
+          router.go(-1);
+        }).catch((err) => {
+          message.info(err.msg || err.message)
+        })
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form;
+
+  return (
+    <>
+      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
+        <Form.Item label="样例名">
+          {/* {getFieldDecorator('sampleName')(<Input disabled={true}/>)} */}
+          <span>{sampleName}</span>
+        </Form.Item>
+        <Form.Item label="下单人">
+          {getFieldDecorator('orderer',{
+          rules: [
+            {
+              required: true,
+              message: '请填写下单人',
+            },
+          ],
+        })(<Input maxLength={20}/>)}
+        </Form.Item>
+        <Form.Item label="联系方式">
+          {getFieldDecorator('phone',{
+          rules: [
+            {
+              required: true,
+              message: '请填写正确的联系方式',
+              // max:11,
+              // min:11,
+              pattern: new RegExp('^1[0-9]{10}$'),
+            },
+          ],
+        })(<Input/>)}
+        </Form.Item>
+        <Form.Item label="需求描述">
+          <span style={{color:'rgba(0, 0, 0, 0.45)', fontSize:'14px'}}>请在下方填写定制化内容，如替换样例中的企业名称、logo文案等，如暂不确定，可先不填，提交后可在H5需求单详情中继续修改</span>
+          {getFieldDecorator('demandContent')(<Wangedit />)}
+        </Form.Item>
+        <Form.Item style={{ width: '400px', margin: 'auto', display: 'flex', justifyContent: 'space-between' }}>
+            <Button type="primary" htmlType="submit">保存</Button>
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            <Button onClick={() => router.go(-1)}>取消</Button>
+         </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/h5SampleManager/h5Sample/components/ContactInfo.jsx

@@ -0,0 +1,258 @@
+import React, { useEffect, useState } from 'react'
+import { Button, Radio, Icon, Form, Input, Row, Col, Modal, notification, Checkbox, Select, InputNumber } from 'antd';
+import { render } from 'react-dom';
+import request from '../../../../utils/request';
+import apis from '../../../../services/apis';
+import styles from './style.less';
+import cardImg from '../../../../assets/card.png';
+import girlImg from '../../../../assets/girl.png';
+import boyImg from '../../../../assets/boy.png';
+
+
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 24 },
+    sm: { span: 3 },
+  },
+  wrapperCol: {
+    xs: { span: 24 },
+    sm: { span: 16 },
+  },
+};
+
+/**
+ * 项目类型 form 表单子组件
+ *
+ * @param {*} props
+ */
+class TypeForm extends React.Component {
+
+  componentDidMount() {
+    console.log(this.props.type, 'this.props.type')
+    this.props.form.setFieldsValue(this.props.type)
+  }
+
+  onChange(e, name) {
+    // console.log(e)
+    this.props.form.validateFieldsAndScroll((err, values) => {
+      if (!err) {
+        this.props.onSuccess(values)
+      }
+    });
+  }
+
+  close() {
+    this.props.onClose(this.props.form.getFieldsValue(['buildingTypeId']))
+  }
+
+  render() {
+    const { getFieldDecorator } = this.props.form;
+
+    return (
+      <>
+        <Col span={24} className={styles.card} >
+          <Form {...formItemLayout} style={{ padding: '30px 26px' }}>
+            <div className={styles.flexItem}>
+              <img src={this.props.type.avatar} height="50px" width="50px" style={{ borderRadius: '50%', margin: ' 0 7px 0 10px' }} /><span>{this.props.type.contactName}</span>
+            </div>
+            <div className={styles.flexItem} style={{ justifyContent: 'space-between' }}>
+              <div>
+                {this.props.type.sex != '' && this.props.type.sex != null && <div className={styles.flexItem}>
+                  <div className={styles.left}> 性别 </div>
+                  <div className={styles.right} style={{ display: 'flex', alignItems: 'center' }}>{this.props.type.sex == '1' ? '男' : '女'}<img src={this.props.type.sex == '1' ? boyImg : girlImg} height="16px" width="16px" style={{ marginLeft: '5px' }} /></div>
+                </div>}
+                {this.props.type.appellation != '' && this.props.type.appellation != null && <div className={styles.flexItem}>
+                  <div className={styles.left}><img src={cardImg} height="18px" width="24px" /></div>
+                  <div className={styles.right}>{this.props.type.appellation}</div>
+                </div>}
+                {this.props.type.telephone != '' && this.props.type.telephone != null && <div className={styles.flexItem}>
+                  <div className={styles.left}> 固话 </div>
+                  <div className={styles.right}>{this.props.type.telephone}</div>
+                </div>}
+                {this.props.type.phone != '' && this.props.type.phone != null && <div className={styles.flexItem}>
+                  <div className={styles.left}> 手机 </div>
+                  <div className={styles.right}>{this.props.type.phone}</div>
+                </div>}
+                {this.props.type.mail != '' && this.props.type.mail != null && <div className={styles.flexItem}>
+                  <div className={styles.left}> 邮箱 </div>
+                  <div className={styles.right}>{this.props.type.mail}</div>
+                </div>}
+                {this.props.type.address != '' && this.props.type.address != null && <div className={styles.flexItem}>
+                  <div className={styles.left}> 联系地址 </div>
+                  <div className={styles.right}>{this.props.type.address}</div>
+                </div>}
+              </div>
+              {this.props.type.wxCardImg != null && this.props.type.wxCardImg != '' &&
+              <div style={{ textAlign: 'center' }}>
+                <img src={this.props.type.wxCardImg} height="80px" width="80px" />
+                <p style={{ margin: ' 0px', fontSize: '0.096rem', color: '#666' }}>扫码添加微信好友</p>
+                <p sstyle={{ margin: ' 0px', fontSize: '0.096rem', color: '#666' }}>备注H5活动咨询</p>
+              </div>}
+            </div>
+          </Form>
+        </Col>
+      </>
+    )
+  }
+}
+
+const WrappedTypeForm = Form.create({ name: 'TypeForm' })(TypeForm);
+
+/**
+ *项目类型组件
+ *
+ * @param {*} props
+ */
+class ProjectTypeBody extends React.Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      one: false,
+      projectType: [],
+      defaultCheckboxValue: [], // 多选框默认选中的值
+      visible: true,
+      data: [],
+      sampleId: props.sampleId,
+      // data: [{ buildingTypeId: '1', buildingTypeName: '公寓', price: '10', decoration: '全包', rightsYear: '10', status: '1' }, { buildingTypeId: '2', buildingTypeName: '住宅', price: '10', decoration: '全包', rightsYear: '10', status: '1' }, { buildingTypeId: '3', buildingTypeName: '太平房', price: '10', decoration: '全包', rightsYear: '10', status: '1' }],
+    }
+  }
+
+  componentDidMount() {
+    this.getList({ pageNum: 1, pageSize: 999 })
+  }
+
+  componentDidUpdate(prevProps) {
+    // 典型用法（不要忘记比较 props）：
+    if (this.props.value !== prevProps.data && !this.state.one) {
+      this.setValue()
+      this.setState({ one: true })
+    }
+  }
+
+  onSuccess = (values, item) => {
+    const newData = this.getNewProjectType(values)
+    this.setState({ data: newData })
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(newData)
+    }
+  }
+
+  onCheckboxChange = checkedValues => {
+    const checked = (`${checkedValues}` || '').split(',')
+    const { projectType } = this.state
+    const buildingType = projectType.filter(item => checked.includes(`${item.buildingTypeId}`))
+
+    const tempDate = buildingType.map(item => ({ buildingTypeId: item.buildingTypeId, buildingTypeName: item.buildingTypeName, startPrice: null, endPrice: null, priceType: "average", decoration: null, rightsYear: null, status: '1' }))
+    const updateProjectDate = this.updateProjectType(tempDate)
+    console.log('updateProjectDate: ', updateProjectDate)
+    this.setState({ data: updateProjectDate })
+    this.setState({ defaultCheckboxValue: updateProjectDate.map(item => item.buildingTypeId) })
+  }
+
+  onClose = e => {
+    console.log(2)
+    const { data } = this.state
+    console.log('onClose——data: ', data)
+    console.log('onClose: ', e.buildingTypeId)
+    const buildingType = data.filter(item => e.buildingTypeId !== item.buildingTypeId)
+    console.log('onClose——data111: ', buildingType)
+    this.setState({ data: buildingType })
+    this.setState({ defaultCheckboxValue: buildingType.map(item => item.buildingTypeId) })
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(buildingType)
+    }
+  }
+
+  getNewProjectType = values => {
+    const data = []
+    this.state.data.map(item => {
+      if (item.buildingTypeId === values.buildingTypeId) {
+        data.push(values)
+      } else {
+        data.push(item)
+      }
+    })
+    console.log('getNewProjectType', getNewProjectType)
+    return data
+  }
+
+  updateProjectType = values => {
+    // 获取所有复选框选中的id
+    const valueIdArray = values.map(item => item.buildingTypeId)
+    // console.log('valueIdArray: ', valueIdArray)
+
+    // 获取 data 中已经赋值的数据  交集
+    const valueData = this.state.data.filter(item => valueIdArray.includes(item.buildingTypeId))
+    // console.log('valueData: ', valueData)
+
+    // 获取 非 data中数据(也就是没有赋值)，交集
+    const trueValueArr = valueData.map(item => item.buildingTypeId)
+    const trueValueData = values.filter(item => !trueValueArr.includes(item.buildingTypeId))
+
+    // console.log('trueValueData: ', trueValueData)
+
+    // 把两个 数组的值，合并返回
+    return valueData.concat(trueValueData)
+  }
+
+  getList = params => {
+    request({ ...apis.taH5SampleManager.taContactList, urlData: { id: this.state.sampleId } }).then(res => {
+      this.setState({ data: res.records })
+      console.log(this.state.data, 'data');
+    }).catch(err => {
+      this.openNotificationWithIcon('error', err.message)
+    })
+  }
+
+  setValue = () => {
+    let tempData = []
+    let tempCheckboxValue = []
+    const { value } = this.props
+    // console.log('value: ', value)
+    if (value !== undefined && value !== null) {
+      tempData = value
+      tempCheckboxValue = tempData.map(item => item.buildingTypeId)
+      this.setState({ defaultCheckboxValue: tempCheckboxValue })
+      this.setState({ data: tempData })
+    }
+  }
+
+  openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description: '',
+    })
+  }
+
+  handleOk = e => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  handleCancel = e => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  showMadel = () => {
+    this.setState({ visible: true })
+    this.getList({ pageNum: 1, pageSize: 999 })
+  }
+
+  render() {
+    return (
+      <>
+        <Row type="flex" justify="space-between">
+          {
+            this.state.data.map(item => <WrappedTypeForm type={item} key={item.buildingTypeId} onSuccess={(e) => this.onSuccess(e, item)} onClose={(e) => this.onClose(e)} />)
+          }
+        </Row>
+      </>
+    )
+  }
+}
+
+export default ProjectTypeBody

src/pages/h5SampleManager/h5Sample/components/style.less

@@ -0,0 +1,26 @@
+.card{
+    position: relative;
+    border: 1px solid #eee;
+    margin-top: 16px;
+    min-width: 480px;
+    box-shadow: 0px 0px 10px 4px rgba(0;0;0;0.12);
+    border-radius: 6px;
+   
+    .flexItem{
+        display: flex;
+        align-items: center;
+        .left{
+            font-size: 0.096rem;
+            color: #666;
+            width: 0.4rem;
+            text-align: right;
+            line-height: 0.2rem;
+            margin-right: 0.2rem;
+        }
+        .right{
+            font-size: 0.1rem;
+            color: #333;
+            text-align: right;
+        }
+    }
+}

src/pages/h5SampleManager/h5Sample/detail.jsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, DatePicker, InputNumber, Checkbox, Row, Col } from 'antd';
+import { FormattedMessage } from 'umi-plugin-react/locale';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import router from 'umi/router';
+import moment from 'moment';
+import apis from '../../../services/apis';
+import request from '../../../utils/request';
+import AuthButton from '@/components/AuthButton';
+import Wangedit from '../../../components/Wangedit/Wangedit'
+import DragableUploadImageList from './components/ContactInfo'
+import TextArea from 'antd/lib/input/TextArea';
+import copy from 'copy-to-clipboard';
+import copyImg from '../../../assets/copy.png';
+
+const { Option } = Select;
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+
+const header = props => {
+  const sampleId = props.location.query.id;
+  const [demandData, setDemandData] = useState({})
+  const [demandNum, setDemandNum] = useState()
+
+  useEffect(() => {
+    getDemandData(sampleId);
+  }, [])
+
+  // 查询列表
+  const getDemandData = (demandId) => {
+    request({ ...apis.taH5SampleManager.taH5SampleById, urlData: { id: sampleId } }).then((data) => {
+      setDemandData(data)
+      setDemandNum(data.demandNum)
+      props.form.setFieldsValue(data)
+    })
+  }
+
+  // 跳转到编辑
+  const toDetail = rowData => () => {
+
+    request({ ...apis.taH5SampleManager.taH5SampleById, urlData: { id: sampleId } }).then((data) => {
+      if (rowData) {
+        router.push({
+          pathname: '/h5SampleManager/h5Sample/add',
+          query: {
+            id: sampleId,
+            sampleName: demandData.sampleName
+          },
+        });
+        return
+      }
+    }).catch(err => {
+      message.info("该H5样例已取消发布或已删除")
+    })
+
+    
+  }
+  const toCancel = () => {
+    router.go(-1)
+  }
+
+  function viewDemand() {
+    router.push({
+      pathname: '/h5SampleManager/h5Demand/list',
+      query: {
+        id: sampleId,
+        sampleName: demandData.sampleName,
+      },
+    });
+  }
+
+  //打开新页面
+  const copyLink = (e) => {
+    copy(e)
+    message.info('复制成功')
+  }
+
+  function handleSubmit(e) {
+  }
+
+  function newTab(e) {
+    console.log(e, 'eeeeeeee')
+    const newWin = window.open('about:blank');
+    newWin.location.href = e
+  }
+
+  const { getFieldDecorator } = props.form;
+
+  return (
+    <>
+      <Form labelCol={{ span: 6 }} wrapperCol={{ span: 14 }} style={{ position: 'relative' }} onSubmit={handleSubmit}>
+        <Form.Item label="样例名">
+          <span>{demandData.sampleName}</span>
+        </Form.Item>
+        {demandData.sampleTryLink != '' && demandData.sampleTryLink != null && <Form.Item label="样例体验链接" help="请复制发送到手机，用手机微信打开，PC端打开样式比例与手机端不同，以手机端为准">
+          <span>{demandData.sampleTryLink}</span><span style={{ marginLeft: '10px' }}><a onClick={(e) => copyLink(demandData.sampleTryLink)} style={{ color: 'orange' }}> <img src={copyImg} height="16px" width="14px" /> 复制链接</a></span>
+        </Form.Item>}
+        {demandData.sampleTryCode != '' && demandData.sampleTryCode != null && <Form.Item label="样例体验小程序码/二维码" help="请使用微信扫码查看样例体验">
+          <img src={demandData.sampleTryCode} height="100px" width="120px" />
+        </Form.Item>}
+        {demandData.taContactList != null && demandData.taContactList != '' && <Form.Item label="联系人">
+          <span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>若您想在您的小程序举办类似活动，请联系以下联系人咨询，或直接点击底部的 提交需求 按钮下单，下单后与联系人沟通定制活动</span>
+          <DragableUploadImageList sampleId={sampleId}></DragableUploadImageList>
+        </Form.Item>}
+        <Form.Item label="样例内容">
+          {demandData.sampleType === 'link' && <div><span style={{ color: 'rgba(0, 0, 0, 0.45)', fontSize: '14px' }}>点击链接查看内容</span><br/></div>}
+          {demandData.sampleType === 'rich' ? getFieldDecorator('sampleContent')(<div dangerouslySetInnerHTML={{ __html: demandData.sampleContent}}></div>) : getFieldDecorator('sampleContentLink')(<a style={{ color: "blue" }} href={demandData.sampleContentLink} target="_blank" >{demandData.sampleContentLink}</a>)}
+        </Form.Item>
+        <Form.Item wrapperCol={{ span: 15, offset: 7 }}>
+          <div style={{ margin: '0.16rem 0 0.06rem' }}>
+            <Button type="primary" onClick={toDetail(sampleId)} style={{ marginRight: '20px' }}>
+              提交需求
+          </Button>
+            <Button danger onClick={() => toCancel()} style={{ marginLeft: '20px' }}>
+              取消
+          </Button>
+          </div>
+        </Form.Item>
+        <div style={{ position: 'fixed', right: '0.4rem', bottom: '6%' }}>
+          <div style={{ display: 'flex', alignItems: 'center', minWidth: '1.1rem', justifyContent: 'space-between' }}>我想办类似活动 <span style={{ color: '#EF273A', margin: '0 0.1rem' }}>>></span>
+            <Button type="primary" onClick={toDetail(sampleId)} >
+              提交需求
+              </Button>
+          </div>
+
+          {demandNum != 0 && <div style={{ display: 'flex', alignItems: 'center', minWidth: '1.1rem', justifyContent: 'space-between', marginTop: '10px' }}>已有{demandNum + '个'}需求单 <span style={{ margin: '0 0.1rem' }}>>></span>
+            <Button danger onClick={() => viewDemand()}>
+              查看需求
+            </Button>
+          </div>
+          }
+        </div>
+      </Form>
+    </>
+  )
+}
+
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/h5SampleManager/h5Sample/list.jsx

@@ -0,0 +1,198 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, message, Col, Pagination, Alert, notification, Modal } from 'antd';
+import moment from 'moment';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+import Styles from './style.less';
+import { router } from 'umi';
+import AuthButton from '@/components/AuthButton';
+import SelectCity from '../../../components/SelectButton/CitySelect'
+
+
+const { Option } = Select;
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { Meta } = Card;
+
+const tempDate = [{ code: 's101' }]
+
+function openNotificationWithIcon(type, message) {
+  notification[type]({
+    message,
+    description:
+      '',
+  });
+}
+
+/**
+ *卡片
+ *
+ * @returns
+ */
+function CartBody(props) {
+  const { data } = props
+
+  function toEdi(record) {
+    router.push({
+      pathname: '/h5SampleManager/h5Sample/detail',
+      query: {
+        id: record.sampleId,
+      },
+    })
+  }
+  const tagList = data.tag.split(',')
+
+  // src={((data.buildingImg && data.buildingImg[0]) || {}).url}background: `url(${item.caseCoverImg})` style={{ background: `url(((data.buildingImg && data.buildingImg[0]) || {}).url)` }}
+  const { buildingImg } = data
+  console.log("buildingImg1: ", data.coverImg)
+  return (
+    <Card
+      hoverable
+      onClick={() => toEdi(data)}
+      style={{ minWidth: '330px', borderRadius: '12px', margin: '10px', boxShadow: '0px 0px 16px 2px rgba(0,0,0,0.12)' }}
+    // cover={}
+    // bodyStyle={{ padding: '10px 20px' }}
+    >
+      {/* 因为 background 方式设置图片背景，如果 图片url 存在空格或者其他特殊字符，导致显示不出来，需要进行 encodeURI(xxx) 转码 */}
+      {tagList.length > 0 && <div className={Styles.recommderTagBox}>
+        {tagList.map((tag, index) =>
+          <span key={index + 'tag'} style={index % 2 == 0 ? { background: '#4886FF' } : { background: '#34BD28' }} className={Styles.recommderTag}>{tag}</span>
+        )}
+      </div>
+
+      }
+      <img className={Styles.cover} style={{ backgroundImage: `url('` + data.coverImg + `')` }}   ></img>
+      <p className={Styles.cardText} style={{ padding: '0.05rem 0.096rem' }}>
+        {/* <span className={Styles.title}>样例名</span> */}
+        <span style={{ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }}>{data.sampleName}</span>
+      </p>
+    </Card>
+  )
+}
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+function body(props) {
+  const { getFieldDecorator } = props.form
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [dataSource, setDataSource] = useState({ records: [], size: 0 })
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    getList({ pageNum: 1, pageSize: 9 })
+  }, [])
+
+  function getList(params) {
+    // 网路请求
+    request({ ...apis.taH5SampleManager.taH5Sample, params: { ...params } }).then(res => {
+      setDataSource(res)
+      console.log("res:", res)
+    }).catch(err => {
+      // eslint-disable-next-line no-unused-expressions
+      <Alert
+        style={{
+          marginBottom: 24,
+        }}
+        message={err}
+        type="error"
+        showIcon
+      />
+    })
+  }
+
+  // 提交事件
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFields((err, values) => {
+      if (!err) {
+        // eslint-disable-next-line no-console
+        console.log('提交数据: ', values)
+        const { startDate } = values
+        if (values.startDate !== undefined) {
+
+          values.startDate = `${moment(startDate).format('YYYY-MM-DDT00:00:00.000')}Z`
+        }
+        getList({ pageNum: 1, pageSize: 9, ...values })
+      }
+    });
+  }
+
+  // Change 事件
+  function handleSelectChange(e) {
+    // eslint-disable-next-line no-console
+    console.log(e)
+  }
+
+  // 分页
+  function onChange(pageNumber) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    getList({ pageNum: pageNumber, pageSize: 9, ...props.form.getFieldsValue() })
+  }
+
+
+  /**
+   * 重置搜索
+   */
+  function handleReset() {
+    props.form.resetFields();
+    getList({ pageNum: 1, pageSize: 9 })
+  }
+
+  function onSuccess() {
+    getList({ pageNum: 1, pageSize: 9 })
+  }
+
+
+  return (
+    <>
+      <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form.Item>
+          {getFieldDecorator('sampleName')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="样例名"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          {getFieldDecorator('tag')(
+            <Input
+              prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+              placeholder="标签"
+            />,
+          )}
+        </Form.Item>
+        <Form.Item>
+          <Button type="primary" htmlType="submit">
+            搜索
+            </Button>
+          <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+            重置
+            </Button>
+        </Form.Item>
+      </Form>
+
+      {/* 卡片内容，显示楼盘项目  */}
+      <Row style={{ padding: ' 0 10px' }}>
+        {
+          dataSource.records.map((item, _) => (
+            <Col span={8}>
+              <CartBody data={item} key={item.buildingId} onSuccess={() => onSuccess()} />
+            </Col>
+          ))
+        }
+      </Row>
+      {/* 分页 */}
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
+        <Pagination showQuickJumper defaultCurrent={1} total={dataSource.total} onChange={onChange} pageSize={dataSource.size} />
+      </div>
+    </>
+  );
+}
+const WrappedBody = Form.create({ name: 'body' })(body);
+
+export default WrappedBody

src/pages/h5SampleManager/h5Sample/style.css

@@ -0,0 +1,56 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 0.106rem;
+  color: #333;
+  line-height: 1.5;
+  display: flex;
+  align-items: center;
+  position: relative;
+  margin-bottom: 0.08rem;
+}
+.cardItem {
+  font-size: 0.106rem;
+  font-weight: 400;
+  color: #666;
+  display: flex;
+  align-items: center;
+  line-height: 1.5;
+  font-size: 0.106rem;
+  margin-bottom: 0.08rem;
+
+}
+.ediText {
+  font-size: 0.106rem;
+  color: #ff925c;
+  position: absolute;
+  right: 0;
+}
+.title {
+  display: inline-block;
+  width: 0.54rem;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/pages/h5SampleManager/h5Sample/style.less

@@ -0,0 +1,338 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 0.096rem;
+  color: #333;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.cardItem{
+  font-size: 0.106rem;
+  font-weight: 400;
+  color: #666;
+  display: flex;
+  align-items: center;  
+  margin-bottom: 0.08rem;
+  .title{
+    display: inline-block;
+    width: 0.58rem;
+  
+    min-width: 0.58rem;
+    justify-content: space-between;
+    text-align: justify;
+    text-align-last:justify
+  }
+  
+}
+// .cardText{
+//   font-size: 0.106rem;
+//   font-weight: 400;
+//   color: #666;
+//   display: flex;
+//   align-items: center;  
+//   margin-bottom: 0.08rem;
+//   .title{
+//     display: inline-block;
+//     width: 0.58rem;
+  
+//     min-width: 0.58rem;
+//     justify-content: space-between;
+//     text-align: justify;
+//     text-align-last:justify
+//   }
+  
+// }
+.ediText {
+  font-size: 0.106rem;
+  color: #ff925c;
+  position: absolute;
+  right: 0;
+
+}
+
+
+.address { 
+  width: 400px;
+  height: 24px; 
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+  overflow: hidden;
+}
+.cover{
+  width: 100%;
+
+  padding-bottom: 66.8%;
+  background-size: 100% 100% !important;
+ 
+  border-radius: 12px 12px 0 0;
+  
+    // height: '14vw';
+}
+.recommderTagBox{
+  position: absolute;
+  width: 100%;
+  bottom: 0.33rem;
+  text-align: right;
+
+}
+.recommderTag{
+ 
+  color: #fff;
+  line-height: 0.13rem;
+  // width: 0.4rem;
+  background:rgba(52,189,40,1);
+  text-align: center;
+  border-radius: 4px;
+  font-size: 0.09rem;
+  display: inline-block;
+  margin-left: 0.1rem;
+  padding: 0 0.08rem;
+  margin-top: 10px;
+
+}
+.SubmitButton {
+  background: rgba(239,39,58,1);
+  border-radius: 7px;
+  border: 0px;
+}
+.text {
+  color: rgba(239,39,58,1);
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  background: #50be00;
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+
+.cardItem{
+  color: #666;
+  display: flex;
+  align-items: center; 
+  line-height: 1.5;
+  font-size: 0.106rem;
+  margin-bottom: 0.08rem; 
+}
+.ediText {
+  font-size: 0.106rem;
+  color: #ff925c;
+  line-height: 24px;
+  position: absolute;
+  right: 0;
+}
+.title{
+  display: inline-block;
+  width:  0.54rem;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last:justify
+}
+
+.address { 
+  width: 400px;
+  height: 24px; 
+  text-overflow: ellipsis; 
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.pitchButton { 
+  border-color: rgba(255,126,72,1);
+  background-color: rgba(255,126,72,1);
+  color: rgba(255,255,255,1); 
+}
+.noButton {
+  border-color: rgba(255,126,72,1);
+  color: rgba(255,126,72,1);
+}
+.displayS {
+  display: none;
+}
+
+
+// 客户详情样式
+.cardBox{
+  display: flex;
+  .leftBox{
+    width:1000px;
+    min-width:350px;
+    height:1000px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    margin-right: 30px;
+    padding: 30px;
+    overflow: hidden;
+  }
+  .rightBox{
+    width:865px;
+    min-width:342px;
+    height:290px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    margin-right: 30px;
+    padding: 30px;
+    overflow: hidden;
+  }
+  .rightBox{
+    width:-webkit-fill-available;
+    height:315px;
+    min-width: 100%;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .rightBoxCentre{
+    width:865px;
+    height:345px;
+    min-width: 60%;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .leftBoxCentre{
+    width:100%;
+    height:345px;
+    background:rgba(255,255,255,1);
+    box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+    border-radius:8px;
+    display: inline-block;
+    padding: 30px;
+    overflow: hidden;
+    position: relative;
+  }
+  .tit{
+    font-size:0.15rem;
+    font-weight:600;
+    color:#222;
+    margin: 10px 0 0 0;
+  }
+  .flexBox{
+    display: flex;
+    align-items: end;
+  }
+  .touxiang{
+    width: 120px;
+    width: 120px;
+    border-radius: 6px;
+    margin: 30px 0 20px 0;
+  }
+  .touxiangphoto{
+    width: 80px;
+    height: 80px;
+    margin: 38px 0 0px 0;
+  }
+  .infoItem{
+    color:#666;
+    font-size: 0.1rem;
+    margin: 0 0 30px 0;
+    
+  }
+  .rightItem{
+    color:#666;
+    font-size: 0.1rem;
+    margin: 0 0 15px 0;
+  }
+  .right{
+    width: 25%;
+    min-width: 1.3rem;
+    margin-left: 0.1rem;
+    padding-top: 0.3rem;
+    // position: absolute;
+    // top:108px;
+    // left:170px;
+  }
+  .rightphone{
+  
+    position: absolute;
+    top:108px;
+    left:170px;
+  }
+  .left{
+    position: absolute;
+    top:108px;
+    left:60%;
+  
+  }
+  .rightInfo{
+    width: 25%;
+    min-width: 1.3rem;
+    margin-right: 0.1rem;
+    padding-top: 0.3rem;
+    // position: absolute;
+    // top:108px;
+    // left:80%;
+  }
+
+  .Centered{
+    width: 25%;
+    // position: absolute;
+    // top:108px;
+    // left:30%;
+    min-width: 1.3rem;
+    margin: 0 0 15px 0;
+    color:#666;
+    font-size: 0.1rem;
+    padding-top: 0.3rem;
+  }
+
+  .rightCentered{
+    // position: absolute;
+    // top:108px;
+    // left:55%;
+    width: 25%;
+    min-width: 1.3rem;
+    margin: 0 0 15px 0;
+    padding-top: 0.3rem;
+    color:#666;
+    font-size: 0.1rem;
+  }
+  
+}
+.recordBox{
+  width:100%;
+  background:rgba(255,255,255,1);
+  box-shadow:0px 0px 16px 2px rgba(0,0,0,0.12);
+  border-radius:8px;
+  margin-top: 30px;
+  padding: 30px;
+  .tableName{
+    font-size:24px;
+    font-weight:600;
+    color:#222;
+  }
+}
+

src/pages/h5SampleManager/h5Sample/style.wxss

@@ -0,0 +1,53 @@
+.SubmitButton {
+  background: #3a91d5;
+  border-radius: 7px;
+  border: 0px;
+}
+.SelectFrom {
+  width: 180px;
+  background: #ffffff;
+  border-radius: 7px;
+  border: 1px solid #dbdbdb;
+}
+.addButton {
+  border-radius: 4px;
+  border: 0px;
+  margin: 10px 0px;
+}
+.cardText {
+  font-size: 0.106rem;
+  color: #333;
+  line-height: 24px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.cardItem {
+  font-size: 0.106rem;
+  font-weight: 400;
+  color: #666;
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.08rem;
+}
+.ediText {
+  font-size: 0.106rem;
+  color: #ff925c;
+  position: absolute;
+  right: 0;
+  margin-bottom: 0.08rem;
+}
+.title {
+  display: inline-block;
+   width: 0.54rem;
+  justify-content: space-between;
+  text-align: justify;
+  text-align-last: justify;
+}
+.address {
+  width: 400px;
+  height: 24px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

src/pages/swiper/index.jsx

@@ -0,0 +1,123 @@
+import React, { useState, useRef, Alert } from "react";
+import Swiper from 'swiper';
+import router from 'umi/router';
+import request from '../../utils/request'
+import apis from '../../services/apis';
+import styles from './style.less'
+import closeImg from '../../assets/close.png';
+import classNames from 'classnames';
+import 'swiper/css/swiper.min.css';
+
+const storageKey = 'showSwiperIndex';
+
+class swiper extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            visible: true,
+            bannerList: []
+        }
+
+        this.slider = null
+    }
+
+    componentDidMount() {
+        this.getbannerList({ pageNumber: 1, pageSize: 999, type: 'sample' })
+
+
+    }
+
+
+    getbannerList(params) {
+
+        request({ ...apis.indexEcharts.indexBanner, params: { ...params } }).then(res => {
+            this.setState({ bannerList: res.records || [] }, () => {
+                const bannerShow = window.localStorage.getItem(storageKey)
+
+                if (bannerShow) {
+                    //swiper初始化
+                    const { bannerList } = this.state
+                    if (bannerList.length > 1) {
+                        this.swiper = new Swiper('.swiper-container', {
+                            slidesPerView: 1,
+                            loop: true,
+                            autoplay: {
+                                disableOnInteraction: false,
+                            },
+                            touchRatio: 1.5,
+                            pagination: {
+                                el: '.swiper-pagination',
+                                bulletElement: 'li',
+                                clickable: true,
+                                bulletActiveClass: 'antd-pro-pages-swiper-style-active',
+                            },
+                            observer: true,
+                            observeParents: true,
+                        })
+                    } else {
+                        this.swiper = new Swiper('.swiper-container', {
+                            loop: false,
+                            observer: true,
+                            observeParents: true,
+                        })
+                    }
+
+                }
+            })
+        }).catch(err => {
+
+            <Alert
+                style={{
+                    marginBottom: 24,
+                }}
+                message={err}
+                type="error"
+                showIcon
+            />
+        })
+    }
+    handleSwiperItem(item) {
+        const aTag = document.createElement('a')
+
+        aTag.setAttribute('href', `${window.location.origin}${window.location.pathname}#/h5SampleManager/h5Sample/detail?id=${item.targetId}`);
+        aTag.setAttribute('target', '_blank')
+        document.body.appendChild(aTag)
+        aTag.click();
+
+    }
+
+    closeSwiper() {
+        this.setState({
+            visible: false
+        })
+        window.localStorage.removeItem(storageKey)
+    }
+    render() {
+
+        const { visible, bannerList } = this.state
+        const showSwiper = window.localStorage.getItem(storageKey)
+        return (
+            <>
+                {bannerList.length > 0 && visible && showSwiper && <div className={styles.mask}>
+                    <div className={styles.content}>
+                        <img src={closeImg} alt="" className={styles.close} onClick={() => this.closeSwiper()} />
+                        <div className={classNames(['swiper-container', styles.carousel])}  >
+                            <div className={classNames(['swiper-wrapper', styles.carousel])} >
+                                {bannerList.map((item, index) =>
+                                    <div key={'swiper' + index} className={classNames(['swiper-slide', styles.carouselItem])} onClick={() => this.handleSwiperItem(item)}>
+                                        <img style={{ width: '100%', height: '100%', borderRadius: '10px' }} src={item.noticeImg} alt="" />
+                                        <div className={styles.title}>{item.title}</div>
+                                    </div>
+                                )}
+                            </div>
+                            <div className={classNames(['swiper-pagination', styles.dots])}  ></div>
+                        </div>
+                    </div>
+                </div>}
+            </>
+        )
+    }
+}
+
+
+export default swiper

src/pages/swiper/style.less

@@ -0,0 +1,88 @@
+.mask{
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0,0,0,0.32);
+    position: fixed;
+    z-index: 999;
+    top: 0;
+    left: 0;
+}
+
+.content{
+    width: 32vw;
+    min-width: 757px;
+    height: 21.3vw;
+    min-height: 504px;
+    position: absolute;
+    left: 50%;
+    top: 110px;
+    transform: translateX(-50%);
+    border-radius: 10px;
+    .close{
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        top: -22px;
+        right: -22px;
+        z-index: 9;
+    }
+}
+
+.dots{
+    position: absolute;
+    bottom: 11px;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    text-align: center;
+    li {
+        position: relative;
+        display: inline-block;
+        width: 14px;
+        height: 2px;
+        margin: 0 3px;
+        padding: 0;
+        cursor: pointer;
+        background: #fff;
+        opacity: 0.6;
+        &.active{
+            width: 16px;
+            height: 3px;
+            background: #fff;
+            opacity: 1;
+        }
+    }
+}
+.carousel {
+    width: 32vw;
+    min-width: 757px;
+    height: 21.3vw;
+    min-height: 504px;
+    border-radius: 10px;
+    // overflow: hidden;
+    
+    .carouselItem{
+        width: 32vw;
+        min-width: 757px;
+        height: 21.3vw;
+        min-height: 504px;
+        position: relative;
+        display: inline-block;
+        .title{
+            font-size: 0.12rem;
+            color: #fff;
+            position: absolute;
+            display: block;
+            width: 100%;
+            height: 0.16rem;
+            bottom: 30px ;
+            padding: 0 40px;
+            text-align: center;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+        }
+    }
+}