详情样式修改

src/pages/afterSale/components/detail.jsx

 import React from 'react';
-import { Modal, Row, Col, Input } from 'antd';
+import { Modal, Row, Col } from 'antd';
 
-const { TextArea } = Input;
 const AppealDetail = props => {
   const { modalVisible, onCancel, data } = props;
   return (
@@ -41,30 +40,43 @@ const AppealDetail = props => {
               <p>商家退货地址:{data.merchantAddress}</p>
             </Col>
           </Row>
-          <Row gutter={[10, 20]}>
-            <Col span={12}>
-              <p>是否同意售后:{data.isAgree}</p>
+          <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
+          <Row type="flex" gutter={[10, 20]}>
+            <Col span={13}>
+              <p>是否同意售后: {data.isAgree}</p>
             </Col>
-            <Col span={12}>
-              <p>商家拒绝原因:{data.serviceReason}</p>
+          </Row>
+          <Row type="flex" gutter={[10, 20]} style={{ marginBottom: '10px' }}>
+            <Col span={4}>商家拒绝原因:</Col>
+            <Col span={20}>
+              <p style={{ width: '70%', marginLeft: '-25px' }}> {data.serviceReason}</p>
             </Col>
           </Row>
+
           <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
-            <Col span={3}>售后凭证：</Col>
+            <Col span={12}>争议问题描述: {data.disputeDesc}</Col>
+            {/* <Col span={16}>
+              <TextArea value={data.disputeDesc} />
+            </Col> */}
+          </Row>
+          <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
+
+          <Row type="flex" align="middle" gutter={[10, 20]} style={{ minHeight: '100px' }}>
+            <Col>售后凭证： </Col>
             {data.proofs &&
               data.proofs.split(',').map(item => (
-                <Col key={item} span={8}>
+                <Col key={item} span={4}>
                   <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]}>
+          <Row
+            type="flex"
+            justify="start"
+            align="middle"
+            gutter={[10, 20]}
+            style={{ minHeight: '100px' }}
+          >
             <Col span={3}>补充资料：</Col>
             {data.supplement &&
               data.supplement.split(',').map(item => (
@@ -73,22 +85,31 @@ const AppealDetail = props => {
                 </Col>
               ))}
           </Row>
+          <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
           <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>
+            <Col span={8}>{+data.appealResult === 1 ? '同意' : '不同意'}</Col>
           </Row>
+          {+data.appealResult === 2 && (
+            <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
+              <Col span={5}>售后申诉拒绝原因：</Col>
+              <Col span={10} style={{ marginLeft: '-20px' }}>
+                {data.refuseReason}
+              </Col>
+            </Row>
+          )}
+          {+data.appealResult === 1 && [
+            <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>
       ) : (
         '暂无详情信息'