## 一、訂單頁面概覽  ## 二、頁面結構 ``` <!--頭部開始--> <div class="header">訂單</div> <!--頭部結束--> <!--訂單列表開始--> <div class="wrap"> <div class="order-list"> <div class="order-item"> <div class="order-item-inner"> <img class="item-img" src="http://p1.meituan.net/waimaipoi/957ad35a1ca2ff8408f0f5c6ca0758ab32768.jpg"> <div class="item-right"> <div class="item-top"> <p class="order-name one-line">十七味黃燜雞米飯（南新店）</p> <div class="arrow"></div> <div class="order-state">訂單完成</div> </div> <div class="item-bottom"> <div class="product-item">配套折扣煎蛋<div class="p-conunt">x1</div> </div> <div class="product-item">（大份）鮮指天椒黃燜雞米飯+青菜<div class="p-conunt">x1</div> </div> <div class="product-item"><span>...</span> <div class="p-total-count">總計2個菜，實付<span class="total-price">￥21.52</span></div> </div> </div> </div> </div> <div class="evaluation clearfix"> <div class="evaluation-btn">評價</div> </div> </div> <div class="order-item"> <div class="order-item-inner"> <img class="item-img" src="http://p0.meituan.net/waimaipoi/aa86bc1b9a218ea5e094b861c03b59b94873.jpg"> <div class="item-right"> <div class="item-top"> <p class="order-name one-line">深圳麥當勞前海餐廳</p> <div class="arrow"></div> <div class="order-state">訂單取消</div> </div> <div class="item-bottom"> <div class="product-item">麥樂送專享 五五開黑餐 送5張閃卡<div class="p-conunt">x1</div> </div> <div class="product-item">美團王者雙人餐 送2張閃卡<div class="p-conunt">x1</div> </div> <div class="product-item"><span>...</span> <div class="p-total-count">總計2個菜，實付<span class="total-price">￥313</span></div> </div> </div> </div> </div> <div class="evaluation clearfix"> <div class="evaluation-btn">評價</div> </div> </div> </div> <div class="loading">加載中</div> </div> <!--訂單列表結束--> <!--底部欄開始--> <div class="bottom-bar"> <!-- 省略 --> </div> ``` ## 三、頁面樣式 ``` .order-item { border-top:0.346667rem solid #efefef; } .order-item .order-item-inner { display: flex; padding-bottom: 0.48rem; border-bottom: 1px solid #e0e0e0; } .order-item .item-img { width: 1.066667rem; height: 1.066667rem; margin-top: 0.213333rem; margin-left: 0.426667rem; display: block; border-radius: 50%; } .order-item .item-right { flex: 1; margin-left: 0.4rem; font-size: 0.373333rem; } .order-item .item-top { height: 1.466667rem; padding-top: 0.053333rem; display: flex; align-items: center; border-bottom: 1px solid #e0e0e0; } .order-item .order-name { font-size: 0.426667rem; width: 4.8rem; height: 0.426667rem; font-weight: 600; } .order-item .arrow { width: 0.213333rem; height: 0.213333rem; border: 1px solid #999; border-width: 1px 1px 0 0; transform: rotate(45deg); -webkit-transform: 45deg; } .order-item .order-state { font-size: 0.373333rem; margin-left: 1.066667rem; color: #999; } .order-item .product-item { font-size: 0.373333rem; color: #666; margin-top: 0.32rem; } .order-item .p-conunt { float: right; margin-right: 0.4rem; } .order-item .p-total-count { float: right; margin-right: 0.4rem; font-size: 0.32rem; } .order-item .total-price { font-size: 0.373333rem; color: #151515; margin-left: 0.053333rem; letter-spacing: 0.026667rem; } .order-item .evaluation { padding-top: 0.266667rem; padding-bottom: 0.266667rem; } .order-item .evaluation-btn { float: right; width: 2.666667rem; height: 0.853333rem; color: #6b450a; background-color: #ffd161; font-size: 0.373333rem; line-height: 0.853333rem; text-align: center; margin-right: 0.266667rem; } .loading { padding-top: 0.266667rem; padding-bottom: 0.266667rem; font-size: 0.426667rem; text-align: center; color: #ccc; } .wrap { padding-bottom: 2.666667rem; } ``` ## 四、本節作業 * 底部菜單欄：我們通過點擊底部菜單欄來切換顯示頁面，同時我們也需要切換底部圖標，利用`jquery`來完成這一行為。 * 同樣我們在訂單頁面也使用了底部菜單欄，為了避免大量重復代碼，我們將底部欄封裝成一個組件，頁面加載時初始化到頁面上。 * 訂單列表的加載同樣需要進行請求后端數據，我們模擬請求數據，通過`jquery`的`ajax`，請求`orders.json`來獲取數據，并動態的加載到頁面上。