|
|
<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: 'orderGoodsInfo',
|
|
|
props: ['orderInfo', 'tableData', 'couponsData', 'goodsPromos', 'orderPromos'],
|
|
|
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> |
|
|
\ No newline at end of file |
...
|
...
|
|