Authored by lzhy

一件代发

<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
... ...
<template>
<div class="ivu-card">
<div class="ivu-card-head">
<p slot="title">收货人信息</p>
</div>
<div class="ivu-card-body">
<Row>
<i-col span="12">收货人:{{ orderInfo.consigneeName }}</i-col>
<i-col span="12">手机号:{{ orderInfo.mobile }} </i-col>
</Row>
<Row>
<i-col span="24">
送货地址:{{ orderInfo.province }} {{ orderInfo.city }} {{ orderInfo.district }}
{{ orderInfo.street }}
</i-col>
</Row>
<Row>
<i-col span="24">详细地址:{{ orderInfo.address }}</i-col>
</Row>
<Row>
<i-col span="24">邮政编码:{{ orderInfo.zipCode }}</i-col>
</Row>
<Row>
<i-col span="24">物流公司:{{ orderInfo.expressName }}</i-col>
</Row>
<Row>
<i-col span="24">运单号:{{ orderInfo.expressNumber }} </i-col>
</Row>
</div>
</div>
</template>
<script>
export default {
name: 'OrderUserInfo',
props: ['orderInfo'],
data() {
return {}
},
};
</script>
... ...
export default [
{
path: 'step1.html',
name: 'step1',
component: () => import(/* webpackChunkName: "product.create" */ './step1'),
meta: {
pageName: '确认订单信息',
},
},
{
path: 'step2.html',
name: 'step2',
component: () => import(/* webpackChunkName: "product.create" */ './step2'),
meta: {
pageName: '确认发货/退货地址信息',
},
},
{
path: 'step3.html',
name: 'step3',
component: () => import(/* webpackChunkName: "product.create" */ './step3'),
meta: {
pageName: '选择物流服务',
},
},
];
... ...