添加售后申诉

config/config.js

@@ -122,6 +122,11 @@ export default {
               name: 'settleManage',
               component: './settleManage',
             },
+            {
+              path: '/appeal',
+              name: 'appeal',
+              component: './afterSale/appeal',
+            },
             {
               component: './404',
             },

src/pages/afterSale/appeal/index.jsx

+import React, { useState } from 'react';
+import ProTable from '@ant-design/pro-table';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+// import { FormInstance } from 'antd/lib/form';
+import Detail from '../components/detail';
+import ImgModal from '../components/imgModal';
+import styles from './styles.less';
+import { columns } from './staticdata';
+import { query, getDetail } from './services';
+
+const Appeal = () => {
+  // const protable = useRef();
+  // const ref = useRef(FormInstance);
+  const [detailModal, changeDetailModal] = useState(false);
+  const [imgModal, changeImgModal] = useState(false);
+  const [selectedRow, getRow] = useState({});
+  const [imgData, getImgData] = useState([]);
+  const [imgTitle, changeImgTitle] = useState('');
+
+  const audit = async row => {
+    console.log('selected-row', row);
+  };
+  const openDetail = async row => {
+    const detailData = await getDetail({ appealNo: row.appealNo });
+    changeDetailModal(true);
+    getRow(detailData);
+  };
+  const openImgModal = imgList => {
+    // const list = ['https://www.baidu.com/img/flexible/logo/pc/result@2.png'];
+    getImgData(imgList);
+    // getImgData(list);
+    changeImgModal(true);
+    changeImgTitle('查看图片');
+  };
+  const closeModal = params => {
+    if (params === 'Detail') {
+      changeDetailModal(false);
+      return;
+    }
+    changeImgModal(false);
+  };
+  const res = {
+    audit,
+    openDetail,
+    openImgModal,
+  };
+
+  return (
+    <PageHeaderWrapper>
+      <ProTable
+        search={{
+          collapsed: false,
+          collapseRender: () => null,
+        }}
+        columns={columns(res)}
+        request={params => query({ ...params })}
+        rowKey="appealNo"
+        expandIconColumnIndex={10}
+        key="appealNo"
+        bordered
+        className={styles.table}
+        toolBarRender={false}
+        scroll={{ x: '100%' }}
+      />
+      <Detail
+        data={selectedRow}
+        modalVisible={detailModal}
+        onCancel={() => closeModal('Detail')}
+      ></Detail>
+      <ImgModal
+        imgData={imgData}
+        modalVisible={imgModal}
+        title={imgTitle}
+        onCancel={() => closeModal('imgModal')}
+      ></ImgModal>
+    </PageHeaderWrapper>
+  );
+};
+export default Appeal;

src/pages/afterSale/appeal/services.js

+import { stringify } from 'querystring';
+import _ from 'lodash';
+import request from '@/utils/request';
+// import config from '../../../../config/env.config';
+
+export async function query(params) {
+  const data = await request.post('/api/kdsp/op/appeal/list', {
+    prefix: 'http://yapi.quantgroups.com/mock/351',
+    data: stringify(_.omitBy(params, v => !v)),
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+  if (data.businessCode === '0000') {
+    console.log('data-query', data.data);
+
+    return { data: data.data.records || [], total: data.data.total };
+  }
+  return [];
+}
+export async function getDetail(params) {
+  const { data } = await request.post('/api/kdsp/op/appeal/info', {
+    data: stringify(_.omitBy(params, v => !v)),
+    // prefix: config.kdspApi,
+    prefix: 'http://yapi.quantgroups.com/mock/351',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+  });
+  return data;
+}

src/pages/afterSale/appeal/staticdata.js

+import { Button } from 'antd';
+import React from 'react';
+
+export function columns(res) {
+  console.log('res', res);
+  const { audit, openDetail, openImgModal } = res;
+  return [
+    {
+      title: '售后申诉单ID',
+      width: 120,
+      dataIndex: 'appealNo',
+      key: 'appealNo',
+    },
+    {
+      title: '售后单ID',
+      width: 120,
+      dataIndex: 'serviceNo',
+      key: 'serviceNo',
+    },
+    {
+      title: '订单ID',
+      width: 120,
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+    },
+    {
+      title: '介入单开始时间',
+      width: 120,
+      dataIndex: 'startDate',
+      key: 'startDate',
+      hideInTable: true,
+    },
+    {
+      title: '介入单结束时间',
+      width: 120,
+      dataIndex: 'endDate',
+      key: 'endDate',
+      hideInTable: true,
+    },
+    {
+      title: '商家名称',
+      width: 120,
+      dataIndex: 'merchantName',
+      key: 'merchantName',
+      hideInSearch: true,
+    },
+    {
+      title: '商家手机号',
+      width: 120,
+      dataIndex: 'merchantPhone',
+      key: 'merchantPhone',
+      hideInSearch: true,
+    },
+    {
+      title: '商家退款地址',
+      width: 120,
+      dataIndex: 'merchantAddress',
+      key: 'merchantAddress',
+      hideInSearch: true,
+    },
+    {
+      title: '是否同意售后',
+      width: 120,
+      dataIndex: 'isAgree',
+      key: 'isAgree',
+      hideInSearch: true,
+    },
+    {
+      title: '商家拒绝原因',
+      width: 120,
+      dataIndex: 'serviceReason',
+      key: 'serviceReason',
+      hideInSearch: true,
+    },
+    {
+      title: '售后凭证',
+      width: 120,
+      dataIndex: 'proofs',
+      key: 'proofs',
+      hideInSearch: true,
+      render: proofs => {
+        const list = proofs.split(',');
+        return <a onClick={() => openImgModal(list)}>查看</a>;
+      },
+    },
+    {
+      title: '申诉单创建时间',
+      width: 120,
+      dataIndex: 'appealTime',
+      key: 'appealTime',
+      hideInSearch: true,
+    },
+    {
+      title: '申诉单超时时间',
+      width: 120,
+      dataIndex: 'overtime',
+      key: 'overtime',
+      hideInSearch: true,
+    },
+    {
+      title: '争议问题描述',
+      width: 120,
+      dataIndex: 'disputeDesc',
+      key: 'disputeDesc',
+      hideInSearch: true,
+    },
+    {
+      title: '补充资料',
+      width: 120,
+      dataIndex: 'supplement',
+      key: 'supplement',
+      hideInSearch: true,
+      render: supplement => {
+        const list = supplement.split(',');
+        return <a onClick={() => openImgModal(list)}>查看</a>;
+      },
+    },
+    {
+      title: '协商结果',
+      width: 120,
+      dataIndex: 'appealResult',
+      key: 'appealResult',
+      hideInSearch: true,
+    },
+    {
+      title: '售后申诉拒绝原因',
+      width: 120,
+      dataIndex: 'refuseReason',
+      key: 'refuseReason',
+      hideInSearch: true,
+    },
+    {
+      title: '操作',
+      width: 220,
+      dataIndex: 'option',
+      valueType: 'option',
+      key: 'option',
+      render: (_, row) => [
+        <Button type="primary" key="1" onClick={() => audit(row)}>
+          审核
+        </Button>,
+        <Button type="primary" key="2" onClick={() => openDetail(row)}>
+          查看详情
+        </Button>,
+      ],
+    },
+  ];
+}

src/pages/afterSale/appeal/styles.less

+.table {
+  :global {
+    .ant-table-wrapper {
+      margin: 20px;
+    }
+  }
+}

src/pages/afterSale/components/detail.jsx

+import React from 'react';
+import { Modal, Row, Col, Input } from 'antd';
+
+const { TextArea } = Input;
+const AppealDetail = props => {
+  const { modalVisible, onCancel, data } = props;
+  return (
+    <Modal
+      destroyOnClose
+      title="查看详情"
+      width="800px"
+      visible={modalVisible}
+      onCancel={() => onCancel()}
+      onOk={() => onCancel()}
+      bodyStyle={{ maxHeight: '600px', minHeight: '200px', overflow: 'auto' }}
+      footer={[]}
+    >
+      {data ? (
+        <div>
+          <Row gutter={[10, 20]}>
+            <Col span={12}>
+              <p>申诉单ID:{data.appealNo}</p>
+            </Col>
+            <Col span={12}>
+              <p>订单ID:{data.orderNo}</p>
+            </Col>
+          </Row>
+          <Row gutter={[10, 20]}>
+            <Col span={12}>
+              <p>售后单ID:{data.serviceNo}</p>
+            </Col>
+            <Col span={12}>
+              <p>商家名称:{data.merchantName}</p>
+            </Col>
+          </Row>
+          <Row gutter={[10, 20]}>
+            <Col span={12}>
+              <p>商家手机号:{data.merchantPhone}</p>
+            </Col>
+            <Col span={12}>
+              <p>商家退货地址:{data.merchantAddress}</p>
+            </Col>
+          </Row>
+          <Row gutter={[10, 20]}>
+            <Col span={12}>
+              <p>是否同意售后:{data.isAgree}</p>
+            </Col>
+            <Col span={12}>
+              <p>商家拒绝原因:{data.serviceReason}</p>
+            </Col>
+          </Row>
+          <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
+            <Col span={3}>售后凭证：</Col>
+            {data.proofs &&
+              data.proofs.split(',').map(item => (
+                <Col key={item}>
+                  <img key={item} width="100%" src={item} alt="" />
+                </Col>
+              ))}
+          </Row>
+          <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
+            <Col span={5}>争议问题描述</Col>
+            <Col span={16}>
+              <TextArea value={data.disputeDesc} />
+            </Col>
+          </Row>
+          <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
+            <Col span={5}>补充资料：</Col>
+            {data.supplement &&
+              data.supplement.split(',').map(item => (
+                <Col key={item}>
+                  <img src={item} key={item} alt="" />
+                </Col>
+              ))}
+          </Row>
+          <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
+            <Col span={3}>协商结果：</Col>
+            <Col span={8}>{data.appealResult}</Col>
+            <Col span={5}>售后申诉拒绝原因：</Col>
+            <Col span={8}>{data.refuseReason}</Col>
+          </Row>
+          <Row type="flex" justify="start" align="middle" gutter={[10, 30]}>
+            <Col span={4}>商家退货地址：</Col>
+            <Col span={16}>{data.merchantAddress}</Col>
+          </Row>
+          <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
+            <Col span={3}>商家姓名：</Col>
+            <Col span={8}>{data.merchantAddress}</Col>
+            <Col span={3}>商家手机号：</Col>
+            <Col span={8}>{data.merchantPhone}</Col>
+          </Row>
+        </div>
+      ) : (
+        '暂无物流信息'
+      )}
+    </Modal>
+  );
+};
+
+export default AppealDetail;

src/pages/afterSale/components/imgModal.jsx

+import { Modal, Button, Row, Col } from 'antd';
+import React, { Component } from 'react';
+
+// eslint-disable-next-line react/prefer-stateless-function
+class imgModal extends Component {
+  state = {
+    imgModal: false,
+    selectImg: '',
+  };
+
+  render() {
+    const { modalVisible, title, imgData = [] } = this.props;
+    return (
+      <Modal
+        title={title}
+        visible={modalVisible}
+        footer={null}
+        onCancel={this.props.onCancel}
+        width="550px"
+        bodyStyle={{ minHeight: '150px', textAlign: 'center' }}
+      >
+        <Row type="flex" justify="center" align="middle" gutter={20}>
+          {imgData.map(item => (
+            <Col key={item}>
+              <img
+                onClick={() => {
+                  this.setState({ imgModal: true, selectImg: item });
+                }}
+                key={item}
+                width={150}
+                alt=""
+                src={item}
+              ></img>
+            </Col>
+          ))}
+        </Row>
+        <Button type="primary" onClick={this.props.onCancel} style={{ margin: 100 }}>
+          取消
+        </Button>
+        <Modal
+          title="附件详情"
+          visible={this.state.imgModal}
+          footer={null}
+          onCancel={() => this.setState({ imgModal: false })}
+          width="800px"
+        >
+          <img width="700px" src={this.state.selectImg} alt=""></img>
+        </Modal>
+      </Modal>
+    );
+  }
+}
+
+export default imgModal;