仿美团页面-订单页&“我的”页面

分类：HTML5作者：编程之家用户

订单页效果图：

目录结构

 

 

 order.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>order</name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"script>
        (function(){
            //这段代码放在所有的样式文件之前，设置html根元素的fontSize
            var docEl=document.documentElement;

             setRem(){
                 这个10不是固定的，只是计算出来的rem要和cssrem插件setting中设置的37.5保持一致
                 iphone6设备宽度是375，因此基准值刚好是10
                 remdocEl.clientWidth/10;获取基准值
                docEl.style.fontSizerem+"px;动态设置html根元素的fontSize
            }

            setRem();

            window.addEventListener(resize,setRem);

            用户每次浏览页面的时候， 就会触发pagesshow方法（有兼容性问题）
            window.addEventListener(pageshow(e){
                 使用e.presisted就是判断当前页面是不是在缓存中加载
                 如果缓存中加载（就是为true的时候），重新设置rem
                if(e.persisted){
                    setRem();
                }
            });
        })();

    link rel="stylesheet" href="../lib/reset.css"><!-- 拷贝一份通用重置样式 -->
    ="order.css"="../common/common.css"body>

     头部开始 div class="header">订单div 头部结束 -->

     订单列表开始 ="wrap">
        ="order-list"></="loading">加载中 订单列表结束  底部菜单开始 ="bottom-bar" 底部菜单结束 script src="../lib/jquery.min.js"="order.js"="../common/common.js"html>

order.css

/*header*/
.header{
    width:100%;
    height:1.706667rem;iphone顶部一般都设置成64px*/
    background-color:#fff;
    border-bottom:1px solid #b2b2b2;
    font-size:0.453333rem;
    color:#333;
    text-align:center;
    line-height: 1.706667rem;
    font-weight:bold;
}
order-list
.order-list{

}
.order-list .order-item{
    border-top:0.346667rem solid #efefef;使用border实现上下的间距*/
}
.order-list .order-item-inner{
    display: flex;
    padding-bottom:0.48rem;0.026667rem solid #e0e0e0;
}
.order-list .item-img{1.066667rem;
    margin-top:0.213333rem;
    margin-left:0.426667rem;
    让img变成圆角 block;
    border-radius: 50%;
}
.order-list .item-right{
    flex:1;充满剩余宽度0.4rem;0.373333rem;
}
.order-list .item-top{1.466667rem;
    padding-top:0.053333rem;
    align-items: center;
.order-list .order-name{0.426667rem;4.8rem;设置了one-line，超出时会显示省略号600;
}
.order-list .arrow{
    css3的方式实现箭头
    border:0.026667rem solid #999;
    border-width:0.026667rem 0.026667rem 0 0;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
.order-list .order-state{0.373333rem;#999;
}
.order-list .item-bottom{

}
.order-list .product-item{#666;0.32rem;
}
.order-list .product-count{
    float:right;
    margin-right:0.4rem;
}
.order-list .p-total-count{0.32rem;    
}
.order-list .total-price{#151515;
    letter-spacing: 0.026667rem;
}
.order-list .evalution{
    padding:0.266667rem 0;
}
.order-list .evalution-btn{2.666667rem;0.853333rem;#6b450a;
    background:#ffd161;0.266667rem;
}
.loading{0.266667rem 0;#ccc;
}
.wrap{1.333333rem;
}

order.js

(function(){

    //加载订单列表
     initList(){
        订单卡片的模板字符串
        var itemTpl='<div class="order-item">'+
                        '<div class="order-item-inner">'+
                            '<img src=$poi_pic class="item-img" />'+
                            '<div class="item-right">'+
                                '<div class="item-top">'+
                                    '<p class="order-name one-line">$poi_name</p>'+订单名
                                    '<div class="arrow"></div>'+箭头
                                    '<div class="order-state">$status_description</div>'+订单状态
                                '</div>'+
                                '<div class="item-bottom">$getProduct</div>'+需要再次循环
                            '</div>'+
                        '</div>'+
                        '$getComment'+评价
                    '</div>';
        var itemHtml=""var page=0;当前页
        var isLoading=false;当前是否处于加载中

        获取列表数据
         getList(){
            page++;
            isLoading=true;

            $.get("../json/orders.json",(data){
                
                模拟线上延迟
                setTimeout((){
                    var list=data.data.digestlist || [];
                    list.forEach((item,index){
                        var str=itemTpl
                                .replace("$poi_pic",item.poi_pic)图片
                                .replace("$poi_name",item.poi_name)订单名
                                .replace("$status_description",item.status_description)订单状态
                                .replace("$getProduct",getProduct(item))循环显示订单中的商品
                                .replace("$getComment",getComment(item));评价按钮
                        itemHtml+=str;
                    })
                    $(".order-list").append(itemHtml);
                    isLoading=false;                    
                },1000);
            })
        }

        getList();默认先请求一次    

        获取单个订单中的所有商品
         getProduct(data){
            var list=data.product_list || [];
            list.push({type:"more"});总计
            var str="";

            list.forEach((item){
                if(item.type==="more"){
                    str+=getTotalPrice(data);data是每个订单，item是单个订单中的每个商品
                }else{
                    str+='<div class="product-item">'+item.product_name+
                             '<div class="product-count">'+"x"+item.product_count+'</div>'+
                          '</div>';
                }
            })
            return str;
        }

        获取单个订单中的总价
         getTotalPrice(data){
            var str='<div class="product-item">'+
                        '<span>...</span>'+
                        '<div class="p-total-count">'+
                            '总计：'+data.product_count+'个菜品，实付：'+
                            '<span class="total-price">￥'+data.total+'</span>'+
                        '</div>'+
                    '</div>';
            获取评价按钮
         getComment(data){
            var evalution=!data.is_comment;0代表不需要评价
            if(evalution){
                return '<div class="evalution clearfix">'+
                           '<div class="evalution-btn">评价</div>'+
                        '</div>';
            }{
                return '';
            }

        }

        滚动加载
        window.addEventListener("scroll",1)">(){
            var clientHeight=document.documentElement.clientHeight;视窗高度
            var scrollHeight=document.body.scrollHeight;body滚动过的总长
            var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;body滚动过的总长

            var preDis=30;提前的预值
            if((scrollTop+clientHeight)>=(scrollHeight-preDis)){
        
                自定义页面，一次最多滚动3页
                if(page<3){
                    if(isLoading) ;
                    getList();            
                }{
                    $(".loading").text("加载完成");
                }
            }
        });
    }

     init(){
        initList();加载订单列表
    }

    init();相当于组件入口
    
})();

模拟数据orders.json

{"data":{"list_types":[],"bottom_tips":"仅显示最近一年的外卖订单","category":0,"cursor":"","uncomment_count":1,"has_unread_refund_order":0,"refund_count":0,"digestlist":[{"wm_order_id":26369341039195665,"hash_id":"26369341039195665","status":8,"status_description":"订单完成","poi_name":"十七味黄焖鸡米饭（南新店）","poi_pic":"http://p1.meituan.net/waimaipoi/957ad35a1ca2ff8408f0f5c6ca0758ab32768.jpg","wm_poi_id":306227873113610,"total":21.52,"order_time":1525057616,"is_comment":0,"comment_status":0,"comment":{"ship_score":0,"ship_time":0,"comment":"","order_comment_score":0,"praise_food_tip":""},"app_delivery_tip":"由美团快送提供配送服务","has_status_bubble":0,"poi_phone_list":[],"pay_status":3,"logistics_status":40,"wm_order_pay_type":2,"remain_pay_time":0,"wm_poi_valid":1,"poi_source_id":1,"longitude":113916648,"latitude":22531532,"order_again_switch":1,"order_id":10089910774,"is_deletable":1,"source_order_code":"","product_list":[{"spuId":0,"product_name":"配套折扣煎蛋","product_count":1},{"spuId":0,"product_name":"（大份）鲜指天椒黄焖鸡米饭+青菜","product_count":1}],"product_kinds":2,"product_count":2,"plat_from":0,"order_source":7,"estimate_arrival_time":0,"button_list":[{"code":1001,"title":"再来一单","click_url":"","priority":60,"highlight":0},{"code":2010,"title":"评价","priority":50,"highlight":1}],"business_type":0,"scheme":"","wm_poi_view_id":"306227873113610"},{"wm_order_id":4945784281702787,"hash_id":"4945784281702787","status":9,"status_description":"订单取消","poi_name":"深圳麦当劳前海餐厅","poi_pic":"http://p0.meituan.net/waimaipoi/aa86bc1b9a218ea5e094b861c03b59b94873.jpg","wm_poi_id":435175676223011,"total":313.0,"order_time":1524493468,"comment_status":1,"app_delivery_tip":"由 商家 提供配送服务","pay_status":1,"logistics_status":0,"longitude":113917168,"latitude":22530784,"order_id":9970715715,"product_name":"麦乐送专享 五五开黑餐 送5张闪卡","product_name":"美团王者双人餐 送2张闪卡","order_source":4,"highlight":0}],"wm_poi_view_id":"435175676223011"},{"wm_order_id":16170042065453392,"hash_id":"16170042065453392","poi_name":"谷麦轩煲仔饭现炒快餐","poi_pic":"http://p0.meituan.net/waimaipoi/333d0a7946d5ec23f89593016526e13b40960.jpg","wm_poi_id":524545355722178,"total":20.8,"order_time":1524309867,"longitude":113916584,"latitude":22531260,"order_id":9924746863,"product_name":"煎蛋","product_name":"肉沫四季豆煲仔饭（微辣）","product_name":"加辣","product_kinds":5,"product_count":5,"wm_poi_view_id":"524545355722178"},{"wm_order_id":4222323158934634,"hash_id":"4222323158934634","poi_name":"小橙都古法冒菜（南新店）","poi_pic":"http://p1.meituan.net/waimaipoi/8b2b00292ed6f2ed762858485c66a32a536824.jpg","wm_poi_id":464806655577077,"total":24.0,"order_time":1523763633,"app_delivery_tip":"由美团专送提供高品质送餐服务","longitude":113916680,"latitude":22531382,"order_id":9800299872,"product_name":"鱼豆腐","product_name":"中辣","product_name":"腐竹","product_kinds":7,"product_count":7,"wm_poi_view_id":"464806655577077"},{"wm_order_id":33779311016392491,"hash_id":"33779311016392491","poi_name":"饭萌（桃园店）","poi_pic":"http://p1.meituan.net/waimaipoi/9b366e135ac72f591c2013a6cb0df04f35987.jpg","wm_poi_id":356053788686811,"total":18.5,"order_time":1523672032,"longitude":113916696,"latitude":22531462,"order_id":9774288243,"product_name":"香辣口水鸡饭.","product_kinds":1,"product_count":1,"wm_poi_view_id":"356053788686811"},{"wm_order_id":4222321085269066,"hash_id":"4222321085269066","total":28.0,"order_time":1521372051,"is_comment":1,"longitude":113916688,"latitude":22531388,"order_id":9281226973,"product_name":"大辣","product_name":"鹌鹑蛋","product_kinds":9,"product_count":9,"wm_poi_view_id":"464806655577077"}],"has_unread_comment_order":0,"type":1,"hasmore":1,"recent_eat":{"poi_count_desc":"","poi_count":0,"title":"","poi_list":[]}},"code":0,"msg":"成功"}

修改common.js，实现底部菜单的点击效果

把这句

<a class="$key btn-item" href="#">

改为：

<a class="$key btn-item" href="../$key/$key.html">

把这句：

str+=itemTpl.replace("$key"

改为：

str+=itemTpl.replace(/\$key/g,item.key)正则解决全局替换的问题
                   .replace("$text",item.text);

common.js 完整代码

(加载底部菜单
     initBottomBar(){
        底部菜单的模板字符串
        var itemTpl='<a class="$key btn-item" href="../$key/$key.html">'+
                        '<div class="tab-icon"></div>'+
                        '<div class="btn-name">$text</div>'+
                    '</a>'var items=[{
            key:"index"
        },{
            key:"order"
        }];

        ;
        items.forEach((item){
            str+=itemTpl.replace(/\$key/g,1)">正则解决全局替换的问题
                   .replace("$text").append(str);

        判断当前属于哪个页面
        var arr=window.location.pathname.split("/");
        var page=arr[arr.length-1].replace(".html","");最后一个元素，去掉.html
        page=page==""?"index":page;默认显示首页
        $("a.btn-item").removeClass("active");
        $("a."+page).addClass("active");

    }    

    initBottomBar();加载底部菜单
    
})();

 

我的页面 效果图

 

目录结构

 

 

my.html

>my="my.css" 开始 ="my">
            img ="http://i.waimai.meituan.com/static/img/default-avatar.png" class="avatar"p ="nickname">美团小骑手 &gt;p="content"ul ="items">
                li ="address">收获地址管理li="money">商家代金券ul="email">意见反馈="question">常见问题="tel">客服电话：&nbsp;101-097-77="time">服务时间：&nbsp;9:00-23:00 结束 >

my.css

my
.my{

}
.my .header{4.266667rem;
    background-image:url(images/header.png);
    background-size:cover;
    overflow:hidden;
}
.my .avatar{1.92rem;
    margin:0 auto;block;0.08rem solid rgba(255,.4);50%;0.666667rem;
}
.my .nickname{ center;
}
.my .content{
    min-height:13.52rem;#eee;
}
.my .items{0.266667rem solid #eee;#fff;
}
.my .items li{1.2rem;
    position: relative;
    padding-left:0.693333rem;0.026667rem solid #e4e4e4;    
    line-height: 1.2rem;
}
.my .items li::before{
    content:""; absolute;
    top:
    left:0.026667rem;cover;
}
使用伪类实现箭头
.my .items li::after{">";0;
    right:0.16rem;#aaa;
}
.my .items li:last-child{none;
}
.my .address::before{url(images/address.png);
}
.my .money::before{url(images/money.png);
}
.my .email::before{url(images/email.png);
}
.my .question::before{url(images/question.png);
}
.my .tel{#ffb000;1.226667rem;
.my .time{#999;0.346667rem;
}

 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

HTML5和CSS3实现3D展示商品信息的代码
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法
利用Canvas模仿百度贴吧客户端loading小球的方法
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot