|
|
|
<template>
|
|
|
|
<table cellspacing="0" cellpadding="0" class="order-table">
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<template v-for="(cols, key) in tableCols">
|
|
|
|
<th :key="key" :style="'width: ' + cols.width">{{ cols.title }}</th>
|
|
|
|
</template>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<template v-for="(item, index) in tableData">
|
|
|
|
<tr :key="index">
|
|
|
|
<td colspan="12" style="text-align: left">
|
|
|
|
<span>订单号：{{ item.orderCode }}</span>
|
|
|
|
<span>父订单号：{{ item.parentOrderCode }}</span>
|
|
|
|
<span>创建时间：{{ item.createTime | timeFormat }}</span>
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<template v-for="(goods, gkey) in item.goodsList">
|
|
|
|
<tr :key="gkey">
|
|
|
|
<td>
|
|
|
|
<img
|
|
|
|
src="http://shopmanage.yohobuy.com/platform/product/getRemoteImageUrlBySku?sku_id={{goods.productSku}}&size=40x60'"
|
|
|
|
/>
|
|
|
|
</td>
|
|
|
|
<td style="text-align: left">
|
|
|
|
<p>{{ goods.prodcutName }}</p>
|
|
|
|
<p>{{ goods.prodcutCode }}</p>
|
|
|
|
<p>尺码：{{ goods.sizeName }} 颜色：{{ goods.colorName }}</p>
|
|
|
|
</td>
|
|
|
|
<td>{{ goods.salePrice }}</td>
|
|
|
|
<td>{{ goods.buyNumber }}</td>
|
|
|
|
<td>{{ goods.productSkn }}</td>
|
|
|
|
<td>{{ goods.productSku }}</td>
|
|
|
|
<template v-if="key == 0">
|
|
|
|
<td :rowspan="item.goodsList.length">{{ item.consigneeName }}</td>
|
|
|
|
<td :rowspan="item.goodsList.length">{{ paymentStatusArr[item.paymentStatus] }}</td>
|
|
|
|
<td :rowspan="item.goodsList.length">{{ item.lastOrderAmount }}</td>
|
|
|
|
<td :rowspan="item.goodsList.length">{{ orderStatusArr[item.orderStatus] }}</td>
|
|
|
|
<td :rowspan="item.goodsList.length">
|
|
|
|
<i-button type="default" size="small" @click="goToDetail(item.orderCode)">查看订单</i-button>
|
|
|
|
</td>
|
|
|
|
</template>
|
|
|
|
</tr>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: 'DataTable',
|
|
|
|
props: {
|
|
|
|
tableData: {
|
|
|
|
type: Array,
|
|
|
|
},
|
|
|
|
paymentStatusArr: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
orderStatusArr: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
tableCols: [
|
|
|
|
{ title: '图片', width: '8%' },
|
|
|
|
{ title: '商品信息', width: '20%' },
|
|
|
|
{ title: '单价', width: '8%' },
|
|
|
|
{ title: '数量', width: '5%' },
|
|
|
|
{ title: 'SKN', width: '5%' },
|
|
|
|
{ title: 'SKU', width: '5%' },
|
|
|
|
{ title: '收货人', width: '5%' },
|
|
|
|
{ title: '支付状态', width: '5%' },
|
|
|
|
{ title: '实收金额', width: '5%' },
|
|
|
|
{ title: '订单状态', width: '5%' },
|
|
|
|
{ title: '操作', width: '10%' },
|
|
|
|
],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
goToDetail(code) {
|
|
|
|
this.$router.push({
|
|
|
|
name: 'order.detail',
|
|
|
|
params: {},
|
|
|
|
query: {
|
|
|
|
orderCode: code,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
table.order-table {
|
|
|
|
width: 100%;
|
|
|
|
height: auto;
|
|
|
|
thead {
|
|
|
|
background: #000000;
|
|
|
|
th {
|
|
|
|
padding: 8px 0;
|
|
|
|
border: 1px solid #cccccc;
|
|
|
|
color: #ffffff;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
tbody {
|
|
|
|
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> |
...
|
...
|
|
