## 商品訂單頁
說明：仿“餓了么”訂單頁
代碼如下：
order_win.html
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" type="text/css" href="../../../css/aui.css"/>
<style>
body{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
.aui-bar-warning {
background-color: #3bafda;
}
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav aui-bar-info" id="aui-header">
<a class="aui-pull-left" id="back" tapmode onclick="closeWin()">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">餓了么訂單</div>
</header>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript">
function closeWin(){
api.closeWin();
}
apiready = function(){
api.parseTapmode();
var header = $api.byId('aui-header');
$api.fixStatusBar(header);
var headerPos = $api.offset(header);
api.openFrame({
name: 'order_frm',
url: 'order_frm.html',
bounces:true,
rect: {
x:0,
y:headerPos.h,
w:'auto',
h:'auto'
}
});
};
</script>
</html>
```
order_frm.html
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>test</title>
<link rel="stylesheet" type="text/css" href="../../../css/aui.css">
<link rel="stylesheet" type="text/css" href="../../../css/aui-flex.css">
<style type="text/css">
.order {
background: #ffffff;
}
.order-info {
font-size: 0.875em;
width: 100%;
}
.order-info span {
color: #333;
margin-right: 5px;
}
.order-info time {
color: #999999;
font-size: 0.75em;
}
.order-info i.aui-iconfont {
color: #999;
font-size: 0.875em;
}
.order-icon img {
width: 80%;
border-radius: 5px;
}
.order-title {
font-size: 1em;
color: #333;
padding-bottom: 10px;
margin-bottom: 10px;
}
.order-title > i.aui-iconfont {
font-size: 0.87em;
color: #999999;
}
p.goods-list {
font-size: 0.75em;
color: #999;
margin-bottom: 8px;
}
p.count-info {
font-size: 0.75em;
color: #999;
padding-bottom: 5px;
}
p.count-info span {
margin: 0 3px;
}
p.count-info strong {
color: #666;
font-size: 1em;
font-weight: 700;
}
.btn {
/*margin: 5px;*/
}
.btn .aui-btn {
font-size: 0.75em;
}
.btn .aui-btn:first-child {
margin-right: 10px;
}
.aui-border-b:after {
border-color: #ddd;
}
</style>
</head>
<body >
<section class="aui-content order">
<div class="aui-flex-col order-info aui-padded-10">
<div class="aui-flex-item-12">
<span>訂單已完成</span>
<time>2016-04-12 12:00:00</time>
<i class="aui-iconfont aui-icon-delete aui-pull-right"></i>
</div>
</div>
<div class="aui-flex-col">
<div class="aui-flex-item-2 order-icon aui-text-right">
<img src="../../../image/demo2.png" />
</div>
<div class="aui-flex-item-10 aui-padded-0-15">
<p class="order-title aui-border-b">民生街朝天鍋 <i class="aui-iconfont aui-icon-right"></i></p>
<p class="goods-list">
蔥段
<em class="aui-pull-right">× 1</em>
</p>
<p class="goods-list">
土豆絲
<em class="aui-pull-right">× 1</em>
</p>
<p class="goods-list">
蘿卜辣椒
<em class="aui-pull-right">× 1</em>
</p>
<p class="goods-list">
咸菜
<em class="aui-pull-right">× 1</em>
</p>
<p class="aui-text-right aui-border-b count-info">
共<span>5</span>份，實付<strong>￥16.00</strong>
</p>
</div>
</div>
<div class="aui-flex-col aui-padded-15 btn">
<div class="aui-flex-item-12 aui-text-right">
<div class="aui-btn aui-btn-outlined aui-btn-info">再來一單</div>
<div class="aui-btn aui-btn-outlined aui-btn-warning">評價得1600積分</div>
</div>
</div>
</section>
<section class="aui-content order">
<div class="aui-flex-col order-info aui-padded-10">
<div class="aui-flex-item-12">
<span>訂單已完成</span>
<time>2016-04-12 12:00:00</time>
<i class="aui-iconfont aui-icon-delete aui-pull-right"></i>
</div>
</div>
<div class="aui-flex-col">
<div class="aui-flex-item-2 order-icon aui-text-right">
<img src="../../../image/demo3.png" />
</div>
<div class="aui-flex-item-10 aui-padded-0-15">
<p class="order-title aui-border-b">民生街朝天鍋 <i class="aui-iconfont aui-icon-right"></i></p>
<p class="goods-list">
蔥段
<em class="aui-pull-right">× 1</em>
</p>
<p class="goods-list">
雞蛋
<em class="aui-pull-right">× 1</em>
</p>
<p class="goods-list">
土豆絲
<em class="aui-pull-right">× 1</em>
</p>
<p class="aui-text-right aui-border-b count-info">
共<span>5</span>份，實付<strong>￥16.00</strong>
</p>
</div>
</div>
<div class="aui-flex-col aui-padded-15 btn">
<div class="aui-flex-item-12 aui-text-right">
<div class="aui-btn aui-btn-outlined aui-btn-info">再來一單</div>
<div class="aui-btn aui-btn-outlined aui-btn-warning">評價得1600積分</div>
</div>
</div>
</section>
<section class="aui-content order">
<div class="aui-flex-col order-info aui-padded-10">
<div class="aui-flex-item-12">
<span>訂單已完成</span>
<time>2016-04-12 12:00:00</time>
<i class="aui-iconfont aui-icon-delete aui-pull-right"></i>
</div>
</div>
<div class="aui-flex-col">
<div class="aui-flex-item-2 order-icon aui-text-right">
<img src="../../../image/demo1.png" />
</div>
<div class="aui-flex-item-10 aui-padded-0-15">
<p class="order-title aui-border-b">民生街朝天鍋 <i class="aui-iconfont aui-icon-right"></i></p>
<p class="goods-list">
蔥段
<em class="aui-pull-right">× 1</em>
</p>
<p class="goods-list">
蔥段
<em class="aui-pull-right">× 1</em>
</p>
<p class="goods-list">
蔥段
<em class="aui-pull-right">× 1</em>
</p>
<p class="aui-text-right aui-border-b count-info">
共<span>5</span>份，實付<strong>￥16.00</strong>
</p>
</div>
</div>
<div class="aui-flex-col aui-padded-15 btn">
<div class="aui-flex-item-12 aui-text-right">
<div class="aui-btn aui-btn-outlined aui-btn-info">再來一單</div>
<div class="aui-btn aui-btn-outlined aui-btn-warning">評價得1600積分</div>
</div>
</div>
</section>
<body>
</html>
```
- APP模塊
- 歡迎頁
- 頭部模塊
- 底部模塊
- 圖文列表
- 商品展示
- 文字列表
- 內容頁一
- 評論頁
- N宮格
- 獲得上一級的欄目名稱
- 搜索模塊
- 圖標
- 幻燈模塊
- 消息頁
- 個人中心
- 個人中心—我的收藏
- 個人中心—資料修改
- 個人中心—我的錢包（賬戶）
- 咨詢頁面
- APP模板
- 注冊 頁面一
- 注冊 頁面二
- 登錄 頁面一
- 登錄 頁面二
- 忘記密碼 頁面一
- 會員中心 首頁一
- 會員中心 首頁二
- 會員中心 首頁三
- 會員中心 資料修改
- 申請審核步驟
- 商品訂單一
- 游戲頁面
- 新聞列表頁
- 圖文列表頁
- 商品列表頁
- 商品詳情頁
- 聊天
- 消息列表
- 聊天界面
- 發布需求
- 前端框架
- CSS Framework
- trim 字符處理
- dom 選擇器
- 樣式
- evt 事件
- 選擇元素
- 屬性
- 文本
- 位置
- json
- 設置
- 提示
- AJAX
- storage 本地存儲
- API對象
- 常用函數
- openWin()
- closeWin()
- apiready
- fixStatusBar(header)
- api.setRefreshHeaderInfo
- api.openFrame
- randomSwitchBtn(index,name)
- APP常用圖片
- asd