新增基础详情页、DetailList组件

src/components/detail/BasicDetail.vue

@@ -1,9 +1,36 @@
 <template>
   <div>
     <a-card :bordered="false">
-      <a-tooltip slot="title" title="test" >
+      <detail-list title="退款详情">
-        <a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
+        <detail-list-item term="取货单号">1000000000</detail-list-item>
-      </a-tooltip>
+        <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>

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>