商品订单一 · APP模块

## 商品订单页说明：仿“饿了么”订单页 ![](https://box.kancloud.cn/2016-08-25_57be8e305af8f.png) 代码如下： 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> ```