文章目录
18-订单详情-商品信息
落地代码:
1.基础布局
<template>
<div class="order-info">
<!-- 商品列表 -->
<h3>订单商品</h3>
<table class="goods-table">
<thead>
<tr>
<th width="400">商品信息</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>实付</th>
</tr>
</thead>
<tbody>
<tr v-for="i in 3" :key="i">
<td>
<a href="javascript:;" class="product">
<img src="https://yanxuan-item.nosdn.127.net/f7a4f643e245d03771d6f12c94e71214.png" alt="" />
<div class="info">
<p class="name ellipsis">小米电视4A 32英寸</p>
<p class="attrs ellipsis">颜色:黑色 尺寸:32寸</p>
</div>
</a>
</td>
<td>¥1899</td>
<td>1</td>
<td>¥1899</td>
<td>¥1899</td>
</tr>
</tbody>
</table>
<!-- 收货信息 -->
<h3>收货信息</h3>
<div class="info-box">
<dl>
<dt>收<i></i>货<i></i>人:</dt>
<dd>周杰伦</dd>
</dl>
<dl>
<dt>联系方式:</dt>
<dd>180****1849</dd>
</dl>
<dl>
<dt>收货地址:</dt>
<dd>北京海淀区黄平路金燕龙</dd>
</dl>
</div>
<!-- 支付方式及送货时间 -->
<h3>支付方式及送货时间</h3>
<div class="info-box">
<dl>
<dt>支付方式:</dt>
<dd>180****1849</dd>
</dl>
<dl>
<dt>送货时间:</dt>
<dd>双休日、假日送货(适合于家庭地址)</dd>
</dl>
</div>
<!-- 发票信息 -->
<h3>发票信息</h3>
<div class="info-box">
<dl>
<dt>发票类型:</dt>
<dd>电子发票</dd>
</dl>
<dl>
<dt>发票内容:</dt>
<dd>日用品</dd>
</dl>
<dl>
<dt>发票抬头:</dt>
<dd>个人</dd>
</dl>
</div>
<!-- 订单信息 -->
<h3>订单信息</h3>
<div class="info-box">
<dl>
<dt>订单编号:</dt>
<dd>在线支付</dd>
</dl>
<dl>
<dt>下单时间:</dt>
<dd>2018-01-06 17:09:35</dd>
</dl>
</div>
<!-- 汇总信息 -->
<div class="sum-info">
<div class="info">
<div class="item">
<label>商品件数:</label>
<span>5件</span>
</div>
<div class="item">
<label>商品总价:</label>
<span>¥5697</span>
</div>
<div class="item">
<label>运<i></i>费:</label>
<span>0</span>
</div>
<div class="item">
<label>应付总额:</label>
<span class="price">¥5697</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'OrderInfo'
}
</script>
<style scoped lang='less'>
.order-info {
padding: 0 50px;
h3 {
font-weight: normal;
font-size: 16px;
padding: 25px 5px;
}
}
// 商品表格
.goods-table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
margin: 0 auto;
th {
font-weight: normal;
line-height: 60px;
background: #f5f5f5;
&:first-child {
text-align: left;
padding-left: 20px;
}
}
td {
border-bottom: 1px solid #f5f5f5;
text-align: center;
&:first-child {
padding-left: 20px;
border-left: 1px solid #f5f5f5;
}
&:last-child {
border-right: 1px solid #f5f5f5;
}
}
.product {
display: flex;
padding: 20px 0;
img {
width: 70px;
height: 70px;
border: 1px solid #f5f5f5;
}
.info {
align-self: center;
padding-left: 20px;
text-align: left;
p {
margin-bottom: 5px;
width: 280px;
}
.attrs {
color: #999;
}
}
}
}
// 信息盒子
.info-box {
border:1px solid #f5f5f5;
padding: 20px;
dl {
display: flex;
line-height: 30px;
dt {
width: 80px;
color: #999;
font-size: 14px;
i {
display: inline-block;
width: 0.5em;
}
}
dd {
flex: 1;
}
}
}
// 汇总信息
.sum-info {
padding: 30px 30px 100px 30px;
overflow: hidden;
.info {
width: 250px;
height: 160px;
float: right;
font-size: 16px;
.item {
line-height: 40px;
display: flex;
label {
width: 90px;
i {
display: inline-block;
width: 2em;
}
}
span {
flex: 1;
text-align: right;
padding-right: 30px;
&.price {
font-size: 20px;
color: @priceColor;
}
}
}
}
}
</style>
2.完成渲染
<template>
<div class="order-info">
<!-- 商品列表 -->
<h3>订单商品</h3>
<table class="goods-table">
<thead>
<tr>
<th width="400">商品信息</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>实付</th>
</tr>
</thead>
<tbody>
<tr v-for="item in order.skus" :key="item.id">
<td>
<a href="javascript:;" class="product">
<img :src="item.image" alt="" />
<div class="info">
<p class="name ellipsis">{
{item.name}}</p>
<p class="attrs ellipsis">{
{item.attrsText}}</p>
</div>
</a>
</td>
<td>¥{
{item.curPrice}}</td>
<td>{
{item.quantity}}</td>
<td>¥{
{item.realPay}}</td>
<td>¥{
{item.realPay}}</td>
</tr>
</tbody>
</table>
<!-- 收货信息 -->
<h3>收货信息</h3>
<div class="info-box">
<dl>
<dt>收<i></i>货<i></i>人:</dt>
<dd>{
{order.receiverContact}}</dd>
</dl>
<dl>
<dt>联系方式:</dt>
<dd>{
{order.receiverMobile}}</dd>
</dl>
<dl>
<dt>收货地址:</dt>
<dd>{
{order.receiverAddress}}</dd>
</dl>
</div>
<!-- 支付方式及送货时间 -->
<h3>支付方式及送货时间</h3>
<div class="info-box">
<dl>
<dt>支付方式:</dt>
<dd>180****1849</dd>
</dl>
<dl>
<dt>送货时间:</dt>
<dd>双休日、假日送货(适合于家庭地址)</dd>
</dl>
</div>
<!-- 发票信息 -->
<h3>发票信息</h3>
<div class="info-box">
<dl>
<dt>发票类型:</dt>
<dd>电子发票</dd>
</dl>
<dl>
<dt>发票内容:</dt>
<dd>日用品</dd>
</dl>
<dl>
<dt>发票抬头:</dt>
<dd>个人</dd>
</dl>
</div>
<!-- 订单信息 -->
<h3>订单信息</h3>
<div class="info-box">
<dl>
<dt>订单编号:</dt>
<dd>在线支付</dd>
</dl>
<dl>
<dt>下单时间:</dt>
<dd>{
{order.createTime}}</dd>
</dl>
</div>
<!-- 汇总信息 -->
<div class="sum-info">
<div class="info">
<div class="item">
<label>商品件数:</label>
<span>{
{order.totalNum}}件</span>
</div>
<div class="item">
<label>商品总价:</label>
<span>¥{
{order.totalMoney}}</span>
</div>
<div class="item">
<label>运<i></i>费:</label>
<span>{
{order.postFee}}</span>
</div>
<div class="item">
<label>应付总额:</label>
<span class="price">¥{
{order.payMoney}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'OrderInfo',
props: {
order: {
type: Object,
default: () => ({
})
}
}
}
</script>