feats

config/routes.js

@@ -224,6 +224,17 @@ export default [
                 component: './property/lifeConsultant/Score',
                 hideInMenu: true,
               },
+              {
+                path: 'message-board',
+                name: '在聆听',
+                component: './property/messageBoard',
+              },
+              {
+                path: 'message-board/edit',
+                name: '留言历史',
+                component: './property/messageBoard/Edit',
+                hideInMenu: true,
+              },
               {
                 path: 'message-event',
                 name: '消息推送',

src/layouts/BlankLayout.jsx

@@ -1,21 +1,25 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
-const Layout = ({ children }) => (
-  <PageHeaderWrapper style={{height:'auto',background:'rgba(240,240,240,1)',paddingTop:'15px'}}>
-    <div
-      style={{
-        backgroundColor: '#fff',
-        padding: '32PX 28px',
-        border: '1px solid rgba(0, 0, 0, 0.12)',
-        boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
-        borderRadius: '2px',
-        minHeight:'60vh'
-      }}
-    >
-      {children}
-    </div>
-  </PageHeaderWrapper>
-);
+const Layout = ({ children }) => {
+  const [pageStyle, setPageStyle] = useState({
+    backgroundColor: '#fff',
+    padding: '32PX 28px',
+    border: '1px solid rgba(0, 0, 0, 0.12)',
+    boxShadow: '0 1px 4px rgba(0, 21, 41, 0.08)',
+    borderRadius: '2px',
+    minHeight:'60vh'
+  })
+
+  const domRef = useRef()
+
+  return (
+    <PageHeaderWrapper style={{height:'auto',background:'rgba(240,240,240,1)',paddingTop:'15px'}}>
+      <div style={pageStyle} ref={domRef}>
+        {children}
+      </div>
+    </PageHeaderWrapper>
+  )
+};
 
 export default Layout;

src/pages/property/messageBoard/Edit.jsx

@@ -0,0 +1,101 @@
+import { now } from 'lodash'
+import React, { useEffect, useState, useRef } from 'react'
+import { Row, Col, Button, Input } from 'antd'
+import Item from './components/Item'
+import { fetch, apis } from '@/utils/request'
+
+const getReplyList = fetch(apis.messageBoard.detail)
+const messageReply = fetch(apis.messageBoard.save)
+
+export default props => {
+  const [pageStyle, setPageStyle] = useState({})
+  const [loading, setLoading] = useState(false)
+  const [submitting, setSubmitting] = useState(false)
+  const [content, setContent] = useState()
+  const [listData, setListData] = useState([])
+  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 9999 })
+  const pgDom = useRef()
+  const imDom = useRef()
+
+  const msgId = props.location.query.id
+
+  const scrollToBottom = () => {
+    const t = setTimeout(() => {
+      imDom.current.scrollTop = imDom.current.scrollHeight
+      clearTimeout(t)
+    }, 200)
+  }
+
+  const sendMessage = () => {
+    setSubmitting(true)
+    messageReply({data: {
+      msgId,
+      content
+    }}).then(e => {
+      setListData(listData.concat({
+        msgId,
+        replyId: Math.random().toString(36).substring(2),
+        userId: 999,
+        content
+      }))
+      setContent()
+      setSubmitting(false)
+      scrollToBottom()
+    }).then(e => console.error(e) || setSubmitting(false))
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    getReplyList({params: queryParams, urlData: {id: msgId}}).then(res => {
+      const {records, ...pageInfo} = res || {}
+      setListData((records || []).reverse())
+      setLoading(false)
+      scrollToBottom()
+    }).catch(() => setLoading(false))
+  }, [msgId])
+
+  useEffect(() => {
+    const parent = pgDom.current.offsetParent
+    const pageHeight = document.body.offsetHeight
+    const domY = pgDom.current.offsetTop
+    const parentY = parent.offsetTop
+    const height = pageHeight - domY - (domY -  parentY) * 2
+    setPageStyle({
+      display: 'flex',
+      flexDirection: 'column',
+      height,
+    })
+  }, [])
+
+  return (
+    <div ref={pgDom} style={pageStyle}>
+      <div style={{flex: 'auto', overflowY: 'auto'}} ref={imDom}>
+      {
+        listData.map(item => {
+          const key = `${item.msgId}-${item.replyId}`
+          const right = !!item.userId
+          const name = item.userId ? '' : item.nickname
+          const avatar = item.userId ? 'https://zhiyun-image.oss-accelerate.aliyuncs.com/xiangsong/logo.png' : item.avatar
+
+          return (
+            <Item
+              key={key}
+              right={right}
+              name={name}
+              date={item.createDate}
+              avatar={avatar}
+              content={item.content}
+            />
+          )
+        })
+      }
+      </div>
+      <div style={{flex: 'none', marginTop: 24}}>
+        <div style={{display: 'flex'}}>
+          <div style={{flex: 'auto'}}><Input.TextArea value={content} onChange={e => setContent(e.target.value)} /></div>
+          <div style={{flex: 'none', marginLeft: 24}}><Button type="primary" loading={submitting} onClick={sendMessage}>提交</Button></div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/property/messageBoard/components/Item.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react'
+import moment from 'moment'
+import classNames from 'classnames'
+import Styles from './style.less'
+
+export default props => {
+  
+  const title = `${props.name} ${moment(props.date).format('YYYY-MM-DD HH:mm')}`
+
+  return (
+    <div className={classNames(Styles['message-item'], {[Styles.right]: props.right})}>
+      <div className={classNames(Styles['flex-row'], {[Styles.right]: props.right})}>
+        <div className={classNames(Styles.header, Styles.gutter)}></div>
+        <div className={classNames(Styles.gutter)}>
+          {props.right && <span className={Styles.title}>{moment(props.date).format('YYYY-MM-DD HH:mm')}</span>}
+          <span className={Styles.title}>{props.name}</span>
+          {!props.right && <span className={Styles.title}>{moment(props.date).format('YYYY-MM-DD HH:mm')}</span>}
+        </div>
+      </div>
+      <div className={classNames(Styles['flex-row'], {[Styles.right]: props.right})}>
+        <div className={classNames(Styles.header, Styles.gutter)}>
+          <img src={props.avatar} className={classNames(Styles.header, Styles.avatar)} alt=""/>
+        </div>
+        <div className={classNames(Styles.gutter)}>
+          <div className={classNames(Styles.poptip, {[Styles.right]: props.right})}>
+            {props.content}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/property/messageBoard/components/style.less

@@ -0,0 +1,114 @@
+
+.message-item {
+  position: relative;
+  max-width: 50%;
+
+  & + .message-item {
+    margin-top: 24px;
+  }
+
+  &.right {
+    margin-left: 50%;
+  }
+
+  .gutter {
+    margin: 0 8px;
+  }
+
+  .flex-row {
+    display: flex;
+    margin: 8px 0;
+
+    &.right {
+      flex-direction: row-reverse;
+    }
+
+    & > div:first-child {
+      flex: none;
+    }
+  }
+
+  .header {
+    min-width: 48px;
+    width: 48px;
+  }
+
+  .avatar {
+    min-width: 48px;
+    width: 48px;
+    height: 48px;
+    border: 1px solid rgba(0, 0, 0, .1);
+  }
+
+  .title {
+    display: inline-block;
+    font-size: 0.85em;
+    color: #666;
+
+    & + .title {
+      margin-left: 8px;
+    }
+  }
+
+  .poptip {
+    border: 1px solid #ff7063;
+    border-radius: 4px;
+    text-align: left;
+    padding: 8px;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: -16px;
+      right: auto;
+      top: 12px;
+      border-right: 8px solid #fff;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      border-left: 8px solid transparent;
+      z-index: 12;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: -18px;
+      right: auto;
+      top: 11px;
+      border-right: 9px solid #ff7063;
+      border-top: 9px solid transparent;
+      border-bottom: 9px solid transparent;
+      border-left: 9px solid transparent;
+      z-index: 10;
+    }
+
+    &.right {
+      &::before {
+        content: '';
+        position: absolute;
+        left: auto;
+        right: -16px;
+        top: 12px;
+        border-left: 8px solid #fff;
+        border-top: 8px solid transparent;
+        border-bottom: 8px solid transparent;
+        border-right: 8px solid transparent;
+        z-index: 12;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: auto;
+        right: -18px;
+        top: 11px;
+        border-left: 9px solid #ff7063;
+        border-top: 9px solid transparent;
+        border-bottom: 9px solid transparent;
+        border-right: 9px solid transparent;
+        z-index: 10;
+      }
+    }
+  }
+}

src/pages/property/messageBoard/index.jsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react'
+import { Table, Typography, Button, Form, Input, DatePicker } from 'antd'
+import { fetchList, apis } from '@/utils/request'
+import moment from 'moment'
+import NavLink from 'umi/navlink'
+import Search from '../components/Search'
+import List from '../components/List'
+
+const getMessageList = fetchList(apis.messageBoard.list)
+
+const Condition = props => {
+  const [dateRange, setDateRange] = useState([])
+
+  const handleSearch = vals => {
+    props.onSearch({
+      ...vals,
+      startDate: dateRange[0] ? dateRange[0].format('YYYY-MM-DD') : undefined,
+      endDate: dateRange[1] ? dateRange[1].format('YYYY-MM-DD') : undefined,
+    })
+  }
+
+  const handelReset = vals => {
+    setDateRange([])
+    props.onReset({
+      ...vals,
+      startDate: undefined,
+      endDate: undefined,
+    })
+  }
+
+  return (
+    <Search
+      onSearch={handleSearch}
+      onReset={handelReset}
+      render={form => {
+        const { getFieldDecorator } = form
+
+        return (
+          <>
+            <Form.Item label="名称">
+            {
+              getFieldDecorator('name')(<Input placeholder="名称" />)
+            }
+            </Form.Item>
+            <Form.Item label="手机">
+            {
+              getFieldDecorator('phone')(<Input placeholder="手机" />)
+            }
+            </Form.Item>
+            <Form.Item label="留言时间">
+              <DatePicker.RangePicker value={dateRange} onChange={v => setDateRange(v)} placeholder={['开始时间', '结束时间']} />
+            </Form.Item>
+          </>
+        )
+      }}
+    />
+  )
+}
+
+export default props => {
+  const [loading, setLoading] = useState(false)
+  const [listData, setListData] = useState([])
+  const [pagination, setPagination] = useState({})
+  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })
+
+  const handleSearch = vals => {
+    setQueryParams({
+      ...queryParams,
+      ...vals,
+      pageNum: 1,
+    })
+  }
+  
+  const handlePageChange = (pageNum, pageSize) => {
+    setQueryParams({
+      ...queryParams,      
+      pageNum,
+      pageSize,
+    })
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    getMessageList(queryParams).then(res => {
+      const [list, pageInfo] = res || {}
+      setListData(list)
+      setPagination(pageInfo)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [queryParams])
+
+
+  return (
+    <div>
+      <Condition onSearch={handleSearch} onReset={handleSearch} />
+      <div style={{margin: '24px auto 24px'}}> </div>
+      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey={row => `${row.msgId}-${row.replyId}`}>
+        <Table.Column title="头像" dataIndex="avatar" key="avatar" render={t => <img src={t} style={{ width: 64, height: 64 }} />} />
+        <Table.Column title="昵称" dataIndex="nickname" key="nickname" />
+        <Table.Column title="手机" dataIndex="phone" key="phone" />
+        <Table.Column title="留言时间" dataIndex="createDate" key="createDate" render={t => t ? moment(t).format('YYYY-MM-DD HH:mm') : ''} />
+        <Table.Column title="内容" dataIndex="content" key="content" render={t => <Typography.Text ellipsis>{t}</Typography.Text>} />
+        <Table.Column
+          title="操作"
+          key="action"
+          render={(_, row) => {
+            return (
+              <>
+                <NavLink to={`/property/message-board/edit?id=${row.msgId}`}>
+                  <Button type="link">详情</Button>
+                </NavLink>
+              </>
+            )
+          }}
+        />
+      </List>
+    </div>
+  )
+}

src/services/apis.js

@@ -69,6 +69,23 @@ export default {
       action: 'admin.person.export',
     }
   },
+  messageBoard: {
+    list: {
+      url: `${prefix}/message-board`,
+      method: 'get',
+      action: 'admin.messageBoard.list',
+    },
+    detail: {
+      url: `${prefix}/message-board/:id`,
+      method: 'get',
+      action: 'admin.messageBoard.detail',
+    },
+    save: {
+      url: `${prefix}/message-board`,
+      method: 'post',
+      action: 'admin.messageBoard.save',
+    }
+  },
   image: {
     uploadForAnt: {
       url: `${prefix}/antd/image`,