1. 程式人生 > 其它 >一、購物車表格設計

一、購物車表格設計

      <div class="chosetype">
        <table>
          <thead>
            <tr>
              <th width="29%">商品</th>
              <th width="31%">訂單詳情</th>
              <th width="13%">收貨人</th>
              <th>金額</th>
              <th>狀態</th>
              <th>操作</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class
="orders"> <table class="order-item" v-for="item in orderInfo.records" :key="item.id" > <thead> <tr> <th colspan="5"> <span class="ordertitle" >{{ item.createTime }}&nbsp;&nbsp;訂單編號{{ item.outTradeNo }}
<span class="pull-right delete" ><img src="../images/delete.png" /></span ></span> </th> </tr> </thead> <tbody> <tr v-for="(item1, index1) in item.orderDetailList
" :key="item1.skuId" > <td width="60%"> <div class="typographic"> <el-image :src="item1.imgUrl" :preview-src-list="[item1.imgUrl]" style="width: 100px; height: 100px" ></el-image> <a href="#" class="block-text">{{ item1.skuName }}</a> <span>x{{ item1.skuNum }}</span> <a href="#" class="service">售後申請</a> </div> </td> <td :rowspan="item.orderDetailList.length" v-show="index1 === 0" width="8%" class="center" > {{ item.consignee }} </td> <td :rowspan="item.orderDetailList.length" v-show="index1 === 0" width="13%" class="center" > <ul class="unstyled"> <li>總金額¥{{ item.totalAmount }}</li> <li>線上支付</li> </ul> </td> <td :rowspan="item.orderDetailList.length" v-show="index1 === 0" width="8%" class="center" > <a href="#" class="btn">{{ item.orderStatusName }} </a> </td> <td :rowspan="item.orderDetailList.length" v-show="index1 === 0" width="13%" class="center" > <ul class="unstyled"> <li> <a href="mycomment.html" target="_blank">評價|晒單</a> </li> </ul> </td> </tr> </tbody> </table> </div>