diff --git a/src/components/detail/BasicDetail.vue b/src/components/detail/BasicDetail.vue
index 85b7e18..da227ee 100644
--- a/src/components/detail/BasicDetail.vue
+++ b/src/components/detail/BasicDetail.vue
@@ -1,9 +1,36 @@
<template>
<div>
<a-card :bordered="false">
- <a-tooltip slot="title" title="test" >
- <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
- </a-tooltip>
+ <detail-list title="退款详情">
+ <detail-list-item term="取货单号">1000000000</detail-list-item>
+ <detail-list-item term="状态">已取货</detail-list-item>
+ <detail-list-item term="销售单号">987654321</detail-list-item>
+ <detail-list-item term="子订单">1234567890</detail-list-item>
+ </detail-list>
+ <a-divider style="margin-bottom: 32px"/>
+ <detail-list title="用户信息">
+ <detail-list-item term="用户姓名">付小小</detail-list-item>
+ <detail-list-item term="联系电话">18100000001</detail-list-item>
+ <detail-list-item term="常用快递">菜鸟仓储</detail-list-item>
+ <detail-list-item term="取货地址">浙江省杭州市西湖区万塘路19号</detail-list-item>
+ <detail-list-item term="备注">无</detail-list-item>
+ </detail-list>
+ <a-divider style="margin-bottom: 32px"/>
+ <div class="title">退货商品</div>
+ <a-table
+ style="margin-bottom: 24px"
+ :columns="goodsColumns"
+ :dataSource="goodsData"
+ :pagination="false"
+ >
+ </a-table>
+ <div class="title">退货进度</div>
+ <a-table
+ :columns="scheduleColumns"
+ :dataSource="scheduleData"
+ :pagination="false"
+ >
+ </a-table>
</a-card>
</div>
</template>
@@ -12,12 +39,173 @@
import ACard from 'vue-antd-ui/es/card/Card'
import ATooltip from 'vue-antd-ui/es/tooltip/Tooltip'
import AAvatar from 'vue-antd-ui/es/avatar/Avatar'
+import DetailList from '../tool/DetailList'
+import ADivider from 'vue-antd-ui/es/divider/index'
+import ATable from 'vue-antd-ui/es/table'
+
+const DetailListItem = DetailList.Item
+
+const goodsColumns = [
+ {
+ title: '商品编号',
+ dataIndex: 'id',
+ key: 'id'
+ },
+ {
+ title: '商品名称',
+ dataIndex: 'name',
+ key: 'name'
+ },
+ {
+ title: '商品条码',
+ dataIndex: 'barcode',
+ key: 'barcode'
+ },
+ {
+ title: '单价',
+ dataIndex: 'price',
+ key: 'price',
+ align: 'right'
+ },
+ {
+ title: '数量（件）',
+ dataIndex: 'num',
+ key: 'num',
+ align: 'right'
+ },
+ {
+ title: '金额',
+ dataIndex: 'amount',
+ key: 'amount',
+ align: 'right'
+ }
+]
+
+const goodsData = [
+ {
+ id: '1234561',
+ name: '矿泉水 550ml',
+ barcode: '12421432143214321',
+ price: '2.00',
+ num: '1',
+ amount: '2.00'
+ },
+ {
+ id: '1234562',
+ name: '凉茶 300ml',
+ barcode: '12421432143214322',
+ price: '3.00',
+ num: '2',
+ amount: '6.00'
+ },
+ {
+ id: '1234563',
+ name: '好吃的薯片',
+ barcode: '12421432143214323',
+ price: '7.00',
+ num: '4',
+ amount: '28.00'
+ },
+ {
+ id: '1234564',
+ name: '特别好吃的蛋卷',
+ barcode: '12421432143214324',
+ price: '8.50',
+ num: '3',
+ amount: '25.50'
+ }
+]
+
+const scheduleColumns = [
+ {
+ title: '时间',
+ dataIndex: 'time',
+ key: 'time'
+ },
+ {
+ title: '当前进度',
+ dataIndex: 'rate',
+ key: 'rate'
+ },
+ {
+ title: '状态',
+ dataIndex: 'status',
+ key: 'status'
+ },
+ {
+ title: '操作员ID',
+ dataIndex: 'operator',
+ key: 'operator'
+ },
+ {
+ title: '耗时',
+ dataIndex: 'cost',
+ key: 'cost'
+ }
+]
+
+const scheduleData = [
+ {
+ key: '1',
+ time: '2017-10-01 14:10',
+ rate: '联系客户',
+ status: 'processing',
+ operator: '取货员 ID1234',
+ cost: '5mins'
+ },
+ {
+ key: '2',
+ time: '2017-10-01 14:05',
+ rate: '取货员出发',
+ status: 'success',
+ operator: '取货员 ID1234',
+ cost: '1h'
+ },
+ {
+ key: '3',
+ time: '2017-10-01 13:05',
+ rate: '取货员接单',
+ status: 'success',
+ operator: '取货员 ID1234',
+ cost: '5mins'
+ },
+ {
+ key: '4',
+ time: '2017-10-01 13:00',
+ rate: '申请审批通过',
+ status: 'success',
+ operator: '系统',
+ cost: '1h',
+ },
+ {
+ key: '5',
+ time: '2017-10-01 12:00',
+ rate: '发起退货申请',
+ status: 'success',
+ operator: '用户',
+ cost: '5mins'
+ }
+]
+
export default {
name: 'BasicDetail',
- components: {AAvatar, ATooltip, ACard}
+ components: {ATable, ADivider, DetailListItem, DetailList, AAvatar, ATooltip, ACard},
+ data () {
+ return {
+ goodsColumns,
+ goodsData,
+ scheduleColumns,
+ scheduleData
+ }
+ }
}
</script>
-<style scoped>
-
+<style lang="less" scoped>
+ .title {
+ color: rgba(0,0,0,.85);
+ font-size: 16px;
+ font-weight: 500;
+ margin-bottom: 16px;
+ }
</style>
diff --git a/src/components/tool/DetailList.vue b/src/components/tool/DetailList.vue
new file mode 100644
index 0000000..781e098
--- /dev/null
+++ b/src/components/tool/DetailList.vue
@@ -0,0 +1,102 @@
+<template>
+ <div>
+ <div class="title">{{title}}</div>
+ <a-row>
+ <slot></slot>
+ </a-row>
+ </div>
+</template>
+
+<script>
+import ACol from 'vue-antd-ui/es/grid/Col'
+import ARow from 'vue-antd-ui/es/grid/Row'
+const Item = {
+ name: 'DetailListItem',
+ props: {
+ term: {
+ type: String,
+ required: false
+ }
+ },
+ methods: {
+ renderTerm (h, term) {
+ return h(
+ 'div',
+ {
+ attrs: {
+ class: 'term'
+ }
+ },
+ [term]
+ )
+ },
+ renderContent (h, content) {
+ return h(
+ 'div',
+ {
+ attrs: {
+ class: 'content'
+ }
+ },
+ [content]
+ )
+ }
+ },
+ render (h) {
+ const term = this.renderTerm(h, this.$props.term)
+ const content = this.renderContent(h, this.$slots.default)
+ return h(
+ ACol,
+ {
+ props: {
+ xs: 24,
+ sm: 12,
+ md: 8
+ }
+ },
+ [term, content]
+ )
+ }
+}
+export default {
+ name: 'DetailList',
+ Item: Item,
+ props: ['title'],
+ components: {ARow, ACol}
+}
+</script>
+
+<style lang="less">
+ .title {
+ font-size: 16px;
+ color: rgba(0,0,0,.85);
+ font-weight: 500;
+ margin-bottom: 16px;
+ }
+ .term {
+ // Line-height is 22px IE dom height will calculate error
+ line-height: 20px;
+ padding-bottom: 16px;
+ margin-right: 8px;
+ color: rgba(0,0,0,.85);
+ white-space: nowrap;
+ display: table-cell;
+ &:after {
+ content: ':';
+ margin: 0 8px 0 2px;
+ position: relative;
+ top: -0.5px;
+ }
+ }
+ .content{
+ line-height: 22px;
+ width: 100%;
+ padding-bottom: 16px;
+ color: rgba(0,0,0,.85);
+ display: table-cell;
+ }
+ .term,
+ .content{
+ padding-bottom: 8px;
+ }
+</style>