一件代发

+<template>
+  <table cellspacing="0" cellpadding="0" class="order-detail">
+    <thead>
+      <tr>
+        <template v-for="(cols, index) in tableCols">
+          <th :key="index" :style="'width: ' + cols.width">{{ cols.title }}</th>
+        </template>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="(goods, index) in tableData">
+        <tr :key="index">
+          <td>{{ goods.productSku }}</td>
+          <td>
+            <img
+              :src="
+                'http://shopmanage.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id=' +
+                  goods.productSku +
+                  '&size=40x60'
+              "
+            />
+          </td>
+          <td style="text-align: left">
+            <p>{{ goods.productName }}</p>
+            <p>{{ goods.prodcutCode }}</p>
+            <p>尺码：{{ goods.sizeName }} 颜色：{{ goods.colorName }}</p>
+          </td>
+          <td>{{ goods.buyNumber }}</td>
+          <td>{{ goods.retailPrice }}</td>
+          <td>{{ goods.salePrice }}</td>
+          <td>{{ goods.lastPrice }}</td>
+          <td>
+            {{
+              goodsPromos[goods.id] && goodsPromos[goods.id].couponsDiscountAmount
+                ? goodsPromos[goods.id].couponsDiscountAmount
+                : 0
+            }}
+          </td>
+          <td>{{ goodsPromos[goods.id] && goodsPromos[goods.id].yohoCoin ? goodsPromos[goods.id].yohoCoin : 0 }}</td>
+          <td>
+            {{ goodsPromos[goods.id] && goodsPromos[goods.id].redPackage ? goodsPromos[goods.id].redPackage : 0 }}
+          </td>
+          <td>
+            {{
+              goodsPromos[goods.id] && goodsPromos[goods.id].giftCardAmount ? goodsPromos[goods.id].giftCardAmount : 0
+            }}
+          </td>
+          <td>
+            {{
+              goodsPromos[goods.id] && goodsPromos[goods.id].activityAmount ? goodsPromos[goods.id].activityAmount : 0
+            }}
+          </td>
+          <td>{{ goods.subtotal }}</td>
+        </tr>
+      </template>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="13" style="text-align: left">
+          <span>实付金额：¥{{ orderInfo.lastOrderAmount }}</span>
+          <span>快递费：¥{{ orderInfo.shippingCost }}</span>
+        </td>
+      </tr>
+      <tr>
+        <td td colspan="13">
+          <div class="ivu-card">
+            <div class="ivu-card-head" style="text-align: left">
+              <p slot="title">使用优惠券</p>
+            </div>
+            <i-table border :columns="couponsTableCols" :data="couponsData"></i-table>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="13">
+          <template v-if="orderPromos">
+            <template v-for="(item, index) in orderPromos">
+              <Row :key="index">{{ item.promotionTitle }} {{ item.beginTime }} — {{ item.endTime }}</Row>
+            </template>
+          </template>
+          <template v-else>
+            <span>没有参加活动.</span>
+          </template>
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+</template>
+
+<script>
+export default {
+  name: 'DataTable',
+  props: {
+    orderInfo: {
+      type: Array,
+    },
+    tableData: {
+      type: Array,
+    },
+    couponsData: {
+      type: Array,
+    },
+    goodsPromos: {
+      type: Object,
+    },
+    orderPromos: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      tableCols: [
+        { title: 'sku', width: '8%' },
+        { title: '商品图片', width: '8%' },
+        { title: '商品信息', width: '10%' },
+        { title: '数量', width: '6%' },
+        { title: '吊牌价', width: '6%' },
+        { title: '销售价', width: '6%' },
+        { title: '成交价', width: '6%' },
+        { title: '优惠券', width: '6%' },
+        { title: 'YOHO币', width: '6%' },
+        { title: '红包', width: '6%' },
+        { title: '礼品卡', width: '6%' },
+        { title: '活动优惠', width: '6%' },
+        { title: '小计', width: '6%' },
+      ],
+      couponsTableCols: [
+        {
+          title: '优惠券名称',
+          key: 'couponTitle',
+        },
+        {
+          title: '优惠券面值',
+          key: 'couponAmount',
+        },
+        {
+          title: '优惠券金额调整',
+          key: 'couponAdjustAmount',
+        },
+        {
+          title: '费用承担类型',
+          key: 'feeSharingTypeStr',
+        },
+        {
+          title: '费用承担比例',
+          key: 'feeSharingRatio',
+        },
+      ],
+    };
+  },
+};
+</script>
+<style lang="scss">
+table.order-detail {
+  width: 100%;
+  height: auto;
+  thead {
+    th {
+      padding: 8px 0;
+      border: 1px solid #cccccc;
+      text-align: center;
+    }
+  }
+  tbody,
+  tfoot {
+    tr {
+      height: 35px;
+      td {
+        border: 1px solid #cccccc;
+        border-top: none;
+        border-right: none;
+        text-align: center;
+        padding: 5px;
+        span {
+          margin-left: 10px;
+          margin-right: 20px;
+        }
+      }
+      td:last-child {
+        border-right: 1px solid #cccccc;
+      }
+    }
+  }
+}
+</style>