ddcat1115
9 years ago
9 changed files with 330 additions and 36 deletions
@ -0,0 +1,163 @@ |
|||
import React, { Component } from 'react'; |
|||
import { connect } from 'dva'; |
|||
import { Card, Badge, Table } from 'antd'; |
|||
import PageHeaderLayout from '../../layouts/PageHeaderLayout'; |
|||
import DescriptionList from '../../components/DescriptionList'; |
|||
import styles from './BasicProfile.less'; |
|||
|
|||
const { Description } = DescriptionList; |
|||
|
|||
const progressColumns = [{ |
|||
title: '时间', |
|||
dataIndex: 'time', |
|||
key: 'time', |
|||
}, { |
|||
title: '当前进度', |
|||
dataIndex: 'rate', |
|||
key: 'rate', |
|||
}, { |
|||
title: '状态', |
|||
dataIndex: 'status', |
|||
key: 'status', |
|||
render: text => ( |
|||
text === 'success' ? <Badge status="success" text="成功" /> : <Badge status="processing" text="进行中" /> |
|||
), |
|||
}, { |
|||
title: '操作员ID', |
|||
dataIndex: 'operator', |
|||
key: 'operator', |
|||
}, { |
|||
title: '耗时', |
|||
dataIndex: 'cost', |
|||
key: 'cost', |
|||
}]; |
|||
|
|||
@connect(state => ({ |
|||
profile: state.profile, |
|||
})) |
|||
export default class BasicProfile extends Component { |
|||
componentDidMount() { |
|||
const { dispatch } = this.props; |
|||
dispatch({ |
|||
type: 'profile/fetchBasic', |
|||
}); |
|||
} |
|||
|
|||
render() { |
|||
const { profile } = this.props; |
|||
const { basicGoods, basicProgress, basicLoading } = profile; |
|||
let goodsData = []; |
|||
if (basicGoods.length) { |
|||
let num = 0; |
|||
let amount = 0; |
|||
basicGoods.forEach((item) => { |
|||
num += Number(item.num); |
|||
amount += Number(item.amount); |
|||
}); |
|||
goodsData = basicGoods.concat({ |
|||
id: '总计', |
|||
num, |
|||
amount, |
|||
}); |
|||
} |
|||
const renderContent = (value, row, index) => { |
|||
const obj = { |
|||
children: value, |
|||
props: {}, |
|||
}; |
|||
if (index === basicGoods.length) { |
|||
obj.props.colSpan = 0; |
|||
} |
|||
return obj; |
|||
}; |
|||
const goodsColumns = [{ |
|||
title: '商品编号', |
|||
dataIndex: 'id', |
|||
key: 'id', |
|||
render: (text, row, index) => { |
|||
if (index < basicGoods.length) { |
|||
return <a href="">{text}</a>; |
|||
} |
|||
return { |
|||
children: <span style={{ fontWeight: 600 }}>总计</span>, |
|||
props: { |
|||
colSpan: 4, |
|||
}, |
|||
}; |
|||
}, |
|||
}, { |
|||
title: '商品名称', |
|||
dataIndex: 'name', |
|||
key: 'name', |
|||
render: renderContent, |
|||
}, { |
|||
title: '商品条码', |
|||
dataIndex: 'barcode', |
|||
key: 'barcode', |
|||
render: renderContent, |
|||
}, { |
|||
title: '单价', |
|||
dataIndex: 'price', |
|||
key: 'price', |
|||
render: renderContent, |
|||
}, { |
|||
title: '数量（件）', |
|||
dataIndex: 'num', |
|||
key: 'num', |
|||
render: (text, row, index) => { |
|||
if (index < basicGoods.length) { |
|||
return text; |
|||
} |
|||
return <span style={{ fontWeight: 600 }}>{text}</span>; |
|||
}, |
|||
}, { |
|||
title: '金额', |
|||
dataIndex: 'amount', |
|||
key: 'amount', |
|||
render: (text, row, index) => { |
|||
if (index < basicGoods.length) { |
|||
return text; |
|||
} |
|||
return <span style={{ fontWeight: 600 }}>{text}</span>; |
|||
}, |
|||
}]; |
|||
return ( |
|||
<PageHeaderLayout title="基础详情页"> |
|||
<Card bordered={false}> |
|||
<DescriptionList title="退款申请" style={{ marginBottom: 24 }}> |
|||
<Description term="取货单号">1000000000</Description> |
|||
<Description term="状态">已取货</Description> |
|||
<Description term="销售单号">1234123421</Description> |
|||
<Description term="子订单">3214321432</Description> |
|||
</DescriptionList> |
|||
<div className={styles.divider} /> |
|||
<DescriptionList title="用户信息" style={{ marginBottom: 24 }}> |
|||
<Description term="用户姓名">付小小</Description> |
|||
<Description term="联系电话">18100000000</Description> |
|||
<Description term="常用快递">菜鸟仓储</Description> |
|||
<Description term="取货地址">浙江省杭州市西湖区万塘路18号</Description> |
|||
<Description term="备注">没啥</Description> |
|||
</DescriptionList> |
|||
<div className={styles.divider} /> |
|||
<div className={styles.title}>退货商品</div> |
|||
<Table |
|||
style={{ marginBottom: 24 }} |
|||
pagination={false} |
|||
loading={basicLoading} |
|||
dataSource={goodsData} |
|||
columns={goodsColumns} |
|||
rowKey="id" |
|||
/> |
|||
<div className={styles.title}>退货进度</div> |
|||
<Table |
|||
style={{ marginBottom: 24 }} |
|||
pagination={false} |
|||
loading={basicLoading} |
|||
dataSource={basicProgress} |
|||
columns={progressColumns} |
|||
/> |
|||
</Card> |
|||
</PageHeaderLayout> |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
@import "~antd/lib/style/themes/default.less"; |
|||
|
|||
.divider { |
|||
border: 0; |
|||
border-top: 1px solid @border-color-split; |
|||
height: 1px; |
|||
margin: 0 0 24px 0; |
|||
} |
|||
|
|||
.title { |
|||
color: rgba(0, 0, 0, 0.85); |
|||
font-weight: 600; |
|||
margin-bottom: 16px; |
|||
} |
|||
Loading…
Reference in new issue