Vue3电商项目实战-个人中心模块8【18-订单详情-商品信息】

---

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>