留言

src/pages/MessageList/index.tsx

@@ -1,9 +1,11 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { PageContainer } from '@ant-design/pro-layout';
 import Constants from '@/constants';
 import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
 import { handlePageQuery } from '@/utils/utils';
-import { pbcUserMessagePageUsingPost } from '@/services/pop-b2b2c/pbcUserMessageController';
+import { getMessageDetailUsingGet, pbcUserMessagePageUsingPost } from '@/services/pop-b2b2c/pbcUserMessageController';
+import { Avatar, Button, Col, Drawer, Row, Image, Divider } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
 
 /**
  * 查询表格
@@ -22,6 +24,12 @@ const fetchData = async (params: API.PageVO) => {
 const TableList: React.FC<{}> = () => {
   const actionRef = useRef<ActionType>();
 
+  const [currentRow, setCurrentRow] = useState<API.PbcUserMessage>();
+
+  const [openDrawer, handleOpenDrawer] = useState<boolean>(false);
+
+  const [loading, handleLoading] = useState<boolean>(false);
+
   const columns: ProColumns<API.PbcUserMessage>[] = [
     {
       title: '会员昵称',
@@ -35,6 +43,12 @@ const TableList: React.FC<{}> = () => {
       title: '商户名称',
       dataIndex: 'pbcBusinessName'
     },
+    {
+      title: '留言内容',
+      dataIndex: 'pbcMessage',
+      ellipsis: true,
+      search: false
+    },
     {
       title: '留言时间',
       dataIndex: 'pbcCreateAt',
@@ -46,6 +60,29 @@ const TableList: React.FC<{}> = () => {
       dataIndex: 'pbcReplyState',
       valueEnum: Constants.pbcReplyState
     },
+    {
+      title: '操作',
+      fixed: 'right',
+      valueType: 'option',
+      render: (text, record) => (
+        <Button type="link" loading={loading} onClick={() => {
+          if (record.pbcId) {
+            handleLoading(true);
+            getMessageDetailUsingGet({id: record.pbcId}).then(res => {
+              handleLoading(false);
+              if (res.retcode) {
+                handleOpenDrawer(true);
+                setCurrentRow(res.data);
+              }
+            }).catch(() => {
+              handleLoading(false);
+            })
+          }
+        }}>
+          查看详情
+        </Button>
+      ),
+    },
   ];
   return (
     <PageContainer
@@ -86,6 +123,64 @@ const TableList: React.FC<{}> = () => {
         options={false}
         toolBarRender={() => []}
       />
+      <Drawer
+        title={null} 
+        onClose={() => {
+          setCurrentRow({})
+          handleOpenDrawer(false)
+        }} 
+        width={600}
+        closeIcon={null}
+        footer={null}
+        destroyOnClose={true}
+        open={openDrawer}
+      >
+        <div>
+          <Row gutter={20} align="middle">
+            <Col flex="none">
+              <Avatar size={40} icon={<UserOutlined />} src={currentRow?.pbcUserImage} />
+            </Col>
+            <Col flex="auto">
+              <div style={{ marginBottom: 5, fontWeight: 'bold' }}>{currentRow?.pbcUserNickName}</div>
+              <div style={{ fontSize: 12, color: '#999' }}>{currentRow?.pbcCreateAt}</div>
+            </Col>
+          </Row>
+          <p style={{ margin: '20px 0', fontSize: 16, color: '#999' }}>{currentRow?.pbcMessage}</p>
+          <Image.PreviewGroup>
+            {currentRow?.pbcMessageImages?.split(',').map(e => <Image key={e} height={140} src={e} />)}
+          </Image.PreviewGroup>
+          <Row style={{ marginTop: 20, padding: 8, backgroundColor: 'rgb(242, 242, 242)' }} align='stretch'>
+            <Col flex="none">
+              <div style={{ marginRight: 10, width: 80, height: 80, backgroundImage: `url(${currentRow?.pbcProduct?.pbcProductImages?.split(',')[0]})`, backgroundRepeat: 'no-repeat', backgroundSize: 'cover' }}></div>
+            </Col>
+            <Col style={{ display: 'flex', justifyContent: 'space-between', flexDirection: 'column' }} flex="auto">
+              <div>{currentRow?.pbcProduct?.pbcProductTitle}</div>
+              <div style={{ fontSize: 18, color: 'goldenrod' }}>¥{currentRow?.pbcProduct?.pbcProductPrice}</div>
+            </Col>
+          </Row>
+          <Divider style={{ borderBlockStart: '10px solid rgba(5, 5, 5, 0.06)' }} />
+          <div>
+            {currentRow?.children?.map(e => (
+              <div key={e.pbcId}>
+                <Row gutter={20} align="middle">
+                  <Col flex="none">
+                    <Avatar size={40} icon={<UserOutlined />} src={e.pbcUserImage} />
+                  </Col>
+                  <Col flex="auto">
+                    <div style={{ marginBottom: 5, fontWeight: 'bold' }}>{e.pbcUserNickName}</div>
+                    <div style={{ fontSize: 12, color: '#999' }}>{e.pbcCreateAt}</div>
+                  </Col>
+                </Row>
+                <p style={{ margin: '20px 0', fontSize: 16, color: '#999' }}>{e.pbcMessage}</p>
+                <Image.PreviewGroup>
+                  {e.pbcMessageImages?.split(',').map(item => <Image key={item} height={140} src={item} />)}
+                </Image.PreviewGroup>
+                <Divider />
+              </div>
+            ))}
+          </div>
+        </div>
+      </Drawer>
     </PageContainer>
   );
 };