fe / yoho-shop-manage · Commits

Go to a project

Authored by lzhy
Commit a653645bbe4efba683eb3e031e650526f1a4c43c 1 parent e45f0353

一件代发

Inline Side-by-side
Showing 1 changed file with 185 additions and 0 deletions
<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>
... ...