Commit 7d05ae02 authored by 王苓芝's avatar 王苓芝

详情样式修改

parent 1fbbb801
import React from 'react'; import React from 'react';
import { Modal, Row, Col, Input } from 'antd'; import { Modal, Row, Col } from 'antd';
const { TextArea } = Input;
const AppealDetail = props => { const AppealDetail = props => {
const { modalVisible, onCancel, data } = props; const { modalVisible, onCancel, data } = props;
return ( return (
...@@ -41,30 +40,43 @@ const AppealDetail = props => { ...@@ -41,30 +40,43 @@ const AppealDetail = props => {
<p>商家退货地址:{data.merchantAddress}</p> <p>商家退货地址:{data.merchantAddress}</p>
</Col> </Col>
</Row> </Row>
<Row gutter={[10, 20]}> <hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
<Col span={12}> <Row type="flex" gutter={[10, 20]}>
<p>是否同意售后:{data.isAgree}</p> <Col span={13}>
<p>是否同意售后: {data.isAgree}</p>
</Col> </Col>
<Col span={12}> </Row>
<p>商家拒绝原因:{data.serviceReason}</p> <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> </Col>
</Row> </Row>
<Row type="flex" justify="start" align="middle" gutter={[10, 20]}> <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 &&
data.proofs.split(',').map(item => ( data.proofs.split(',').map(item => (
<Col key={item} span={8}> <Col key={item} span={4}>
<img key={item} width="100%" src={item} alt="" /> <img key={item} width="100%" src={item} alt="" />
</Col> </Col>
))} ))}
</Row> </Row>
<Row type="flex" justify="start" align="middle" gutter={[10, 20]}> <Row
<Col span={5}>争议问题描述</Col> type="flex"
<Col span={16}> justify="start"
<TextArea value={data.disputeDesc} /> align="middle"
</Col> gutter={[10, 20]}
</Row> style={{ minHeight: '100px' }}
<Row type="flex" justify="start" align="middle" gutter={[10, 20]}> >
<Col span={3}>补充资料:</Col> <Col span={3}>补充资料:</Col>
{data.supplement && {data.supplement &&
data.supplement.split(',').map(item => ( data.supplement.split(',').map(item => (
...@@ -73,22 +85,31 @@ const AppealDetail = props => { ...@@ -73,22 +85,31 @@ const AppealDetail = props => {
</Col> </Col>
))} ))}
</Row> </Row>
<hr style={{ border: 'none', borderTop: '1px solid #eee', margin: '30px 0' }} />
<Row type="flex" justify="start" align="middle" gutter={[10, 20]}> <Row type="flex" justify="start" align="middle" gutter={[10, 20]}>
<Col span={3}>协商结果:</Col> <Col span={3}>协商结果:</Col>
<Col span={8}>{data.appealResult}</Col> <Col span={8}>{+data.appealResult === 1 ? '同意' : '不同意'}</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> </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> </div>
) : ( ) : (
'暂无详情信息' '暂无详情信息'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment