仿美团外卖-首页实现

1、环境搭建

基于node.js的http-server服务器搭建

https://www.npmjs.com/package/http-server

cnpm install http-server -g

 

2、首页实现

创建一个目录,叫webapp,在里面创建一个index.html

打开cmd,进入webapp目录,输入以下代码:

http-server

 

 

3、在浏览器输入网址:http://127.0.0.1:8080/

成功访问到index.html

 

打开sublime-首选项-插件设置-cssrem-settings-user

37.5是iphone6设备的通用设置

{
    "px_to_rem": 37.5,//px转rem的单位比例,默认为40
    "max_rem_fraction_length": 6,//px转rem的小数部分的最大长度。默认为6。
    "available_file_types": [".css",".less",".sass",".html"]
    //启用此插件的文件类型。默认为:[".css",".sass"]
}

 

4、移动端滚动加载

 

 

 

首页效果图:

 

首先是目录结构

 

 index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</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"><!-- 拷贝一份通用重置样式 -->
    ="index.css"="../common/common.css"body 头部开始 div class="header">
        ="search-bar">
            ="bar-location">
                ="location-icon"></div="location-text">宁波市="search-btn"="place-holder">鸡翅>    
        img src="images/header-bg.jpg" class="header-img" 头部结束 -->

     类目开始 ="category-content clearfix" 使用js动态渲染 --> 类目结束  列表开始 ="list-content"h4 ="list-title"span ="title-line"span>附近商家h4="list-wrap"="loading">加载中 列表结束  底部菜单开始 ="bottom-bar" 底部菜单结束 script ="../lib/jquery.min.js"="index.js"="../common/common.js"html>

index.css

/*header*/
.header{
    position: relative;
}
.header .search-bar{ absolute;
    width:100%;
    height:1.066667rem;
    display: flex;
    justify-content: center;
    align-items:center;
    padding-top: 0.213333rem;
}
.header .bar-location{
    margin-right:0.533333rem;
    border-radius:0.346667rem;
    background:rgba(0,.33);2.453333rem;0.746667rem;
}
.header .location-icon{ inline-block;0.4rem;
    vertical-align:0.266667rem;垂直方向的偏移量*/
    margin-left:0.213333rem;url(images/locationIcon.png);
    background-size:cover;设置图片平铺正常显示*/
}
.header .location-text{ relative;
    font-size:0.373333rem;
    color:#fff;-0.106667rem;
}
.header .location-text:after{
    content:"";
    background-image:url(images/arrowIcon.png);cover;

}
.header .search-btn{4.533333rem;0.8rem;
    background-color: #fff;0.533333rem;
}
.header .search-btn:before{url(images/searchIcon.png);cover;
    left: 0.213333rem;
    top:
.header .place-holder{#a9a9a9;14px;
    line-height:
.header .header-img{ 4.746667rem;
}

category
.category-content{
    padding-bottom:0.266667rem;
}
.category-content .category-item{
    float:left;25%;
    text-align: center;
}
.category-content .item-icon{1.253333rem;
}
.category-content .item-name{
    margin-top:0.373333rem;
}

list
.list-content{
    overflow:hidden;1.333333rem;
}
.list-content .list-title{0.426667rem;
    margin-bottom:0.133333rem;
}
.list-content .title-line{
    border-bottom:0.026667rem solid #949494;0.026667rem;
    margin:0 0.106667rem 0.106667rem 0.106667rem;
}
.list-content .list-wrap{

}
.list-content .r-item-content{0 0.266667rem;
    padding:0.4rem 0;#656565;
.list-content .item-img{2.293333rem;1.733333rem;
    border:1px solid #141414;
}
.list-content .item-info-content{
    flex:1;平分除了图片之外的剩余空间
    flex-direction:column;0.186667rem;hidden;
}
.list-content .brand{0.32rem;0.053333rem;#fff;
}
.list-content .brand-pinpai{#ffa627;
}
.list-content .brand-xindao{#21c56c;
}
.list-content .item-title{0.08rem;
    font-weight:500;#333;
}
.list-content .item-desc{0.32rem;
}
.list-content .item-score{left;
}
星级评分
.list-content .star-score{

}
.list-content .star{ 0.266667rem;0.266667rem;cover;
}
.list-content .fullStar{url(images/fullstar.png);
}
.list-content .halfStar{url(images/halfstar.png);
}
.list-content .noStar{url(images/gray-star.png);
}
.list-content .item-count{0.133333rem;
}
在js里先写distance再写time
float:right是从右往左排列
因此实际显示时time在distance的左边
.list-content .item-distance{right;
}
.list-content .item-time{
.list-content .item-price{0.64rem;
}
.list-content .item-pre-price{

}
.list-content .item-others{

}
.list-content .other-info{#898989; flex;    
}
.list-content .other-tag{0.373333rem;
}
.list-content .other-content{6.133333rem;0.026667rem;
}
.list-content .loading{0.266667rem 0;#ccc;
}

index.js

(function(){

    //加载类目
     initCategory(){
        类目的模板字符串
        var itemTpl='<div class="category-item">'+
                        '<img src=$url class="item-icon" />'+
                        '<p class="item-name">$name</p>'+
                    '</div>';
        var itemHtml="";

        获取category数据
        $.get("../json/head.json",(data){

            var list=data.data.primary_filter.splice(0,8);只取前8条数据
            list.forEach((item,index){
                var str=itemTpl
                        .replace("$url"str;
            })
            $(".category-content").append(itemHtml);        
        })

        绑定item的click事件
        $(".category-content").on("click",".category-item",1)">(){
            alert("点击事件还未编写");
        });
    }    

    加载列表
     initList(){
        列表的模板字符串
        var itemTpl='<div class="r-item-content">'+
                        '<img src=$url class="item-img" />'+图片
                        '$brand'+图标
                        '<div class="item-info-content">'+
                            '<p class="item-title">$name</p>'+
                            '<div class="item-desc clearfix">'+详细
                                '<div class="item-score">$score</div>'+
                                '<div class="item-count">月售$count</div>'+
                                '<div class="item-distance">&nbsp;$distance</div>'+
                                '<div class="item-time">$time&nbsp;|</div>'+
                            '</div>'+
                            '<div class="item-price">'+
                                '<div class="item-pre-price">$minPrice</div>'+起送价
                            '</div>'+
                            '<div class="item-others">$others</div>'+活动描述
                        '</div>'+
                    '</div>'var page=0;当前页
        var isLoading=false;当前是否处于加载中

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

            $.get("../json/homelist.json",1)">(data){
        
                var list=data.data.poilist;
                list.forEach(itemTpl
                            .replace("$url"标签
                            .replace("$name",item.name)商品名
                            .replace("$score",getScore(item))星级评分
                            .replace("$count",getMonth(item))月售
                            .replace("$distance",item.distance)配送距离
                            .replace("$time",item.mt_delivery_time)配送时间
                            .replace("$minPrice",item.min_price_tip)起送价
                            .replace("$others",getOthers(item));商家活动
                    itemHtml+=str;
                })
                $(".list-wrap").append(itemHtml);
                isLoading=false;
            })
        }

        getList();默认先请求一次    

        渲染brand标签
         getBrand(data){
            if(data.brand_type){
                return '<div class="brand brand-pinpai">品牌</div>';
            }else{
                return '<div class="brand brand-xindao">新到</div>';
            }
        }

        月售大于999,返回999+
         getMonth(data){
            var num=data.month_sale_num;
            if(num>999){
                return '999+'return num;
            }
        }

        商家活动
         getOthers(data){
            var arr=data.discounts2;
            var str="";
            arr.forEach((data,1)">var _str='<div class="other-info">'+
                            '<img src=$icon class="other-tag">'+
                            '<p class="other-content one-line">$content</p>'+
                          '</div>';
                _str=_str.replace("$icon"_str;
            })
             str;
        }

        获取星级评分
         getScore(data){
            var itemTpl='<div class="star-score">$star</div>';
            var score=data.wm_poi_score||"";得到分数
            var scoreArr=score.toString().split(".");如评分为4.5,则拆分为4个整星,5个半星
            ;

            var fullStar=parseInt(scoreArr[0]);整星
            var halfStar=parseInt(scoreArr[1])>=5?1:0;半星四舍五入
            var noStar=5-fullStar-halfStar;无星

            for(var i=0;i<fullStar;i++){
                str+='<div class="star fullStar"></div>';
            }
            var i=0;i<halfStar;i++){
                str+='<div class="star halfStar"></div>'var i=0;i<noStar;i++){
                str+='<div class="star noStar"></div>'return itemTpl.replace("$star"滚动加载
        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(){
        initCategory();加载类目
        initList();加载列表
    }

    init();
    
})();

common是存在公共样式和公共脚本

common.css

bottomBar
.bottom-bar{ fixed;1.333333rem;
    bottom:0;
    border-top:1px solid #b6b6b6;rgba(246,246,.95);
}
.bottom-bar .btn-item{平分多余空间#999;
.bottom-bar .btn-item.active{#000;
}
.bottom-bar .index .tab-icon{url(images/homeIcon.png);
}
.bottom-bar .index.active .tab-icon{url(images/homeIconActive.png);
}
.bottom-bar .order .tab-icon{url(images/orderIcon.png);
}
.bottom-bar .order.active .tab-icon{url(images/orderIconActive.png);
}
.bottom-bar .my .tab-icon{url(images/myIcon.png);
}
.bottom-bar .my.active .tab-icon{url(images/myIconActive.png);
}
.bottom-bar .tab-icon{0.106667rem;0.666667rem;0.666667rem;
}
.bottom-bar .btn-name{

}

common.js

(加载底部菜单
     initBottomBar(){
        底部菜单的模板字符串
        var itemTpl='<a class="$key btn-item" href="#">'+
                        '<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").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();加载底部菜单
    
})();

lib存放了reset.css和jquery

reset.css一般网上都找得到,基本的浏览器重置样式

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { 0; 100%;
    font: inherit; baseline;
}
 HTML5 display-role reset for older browsers 
article,section { block;
}
body { 1;
}
ol,ul {
    list-style: none;
}
blockquote,q {
    quotes:
blockquote:before,blockquote:after,q:before,q:after { '';
table {
    border-collapse: collapse;
    border-spacing: 0;
}

清浮动
.clearfix::after { ' ';
    visibility: hidden; block;

    clear: both;
}

文字超出一行时显示省略号
.one-line {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hide { none;
}

json里放的是模拟的从服务器端读取到的数据

head.json

{"data":{"card_list":[],"across_banner_list":[],"primary_filter":[{"code":101065,"name":"美食","url":"http://p1.meituan.net/jungle/bd3ea637aeaa2fb6120b6938b5e468a13442.png","gray_url":"http://p1.meituan.net/jungle/a56275d9c97322e4c3b7663bd252b8726478.png","gray_switch":0,"skip_protocol":"channel?category_type=101065&category_text=%E7%BE%8E%E9%A3%9F","sequence":100,"brand_type":-1,"first_tag_codes":[],"second_tag_codes":[],"method":1691832,"bubble":null},{"code":20,"name":"美团超市","url":"http://p0.meituan.net/jungle/6b93ee96be3df7cf2bb6e661280b047d3975.png","gray_url":"http://p0.meituan.net/jungle/6b93ee96be3df7cf2bb6e661280b047d3975.png","skip_protocol":"channel?category_type=20&category_text=%E7%BE%8E%E5%9B%A2%E8%B6%85%E5%B8%82","sequence":200,{"code":21,"name":"生鲜果蔬","url":"http://p0.meituan.net/jungle/f33ed552c52b4466b6308a2c14dbc62d4882.png","gray_url":"http://p0.meituan.net/jungle/f33ed552c52b4466b6308a2c14dbc62d4882.png","skip_protocol":"channel?category_type=21&category_text=%E7%94%9F%E9%B2%9C%E6%9E%9C%E8%94%AC","sequence":300,{"code":101068,"name":"甜点饮品","url":"http://p0.meituan.net/jungle/45816fffb346c194d58e961fde7c0fad4901.png","gray_url":"http://p1.meituan.net/jungle/461a24456d08b3078d06b00fa48c479f6639.png","skip_protocol":"channel?category_type=101068&category_text=%E7%94%9C%E7%82%B9%E9%A5%AE%E5%93%81","sequence":400,{"code":101067,"name":"美团专送","url":"http://p0.meituan.net/jungle/f51c34aea31bf3685be15dedde2632bc5391.png","gray_url":"http://p0.meituan.net/jungle/ca853b7c6edc2ee64b313824f2e90e056892.png","skip_protocol":"channel?category_type=101067&category_text=%E7%BE%8E%E5%9B%A2%E4%B8%93%E9%80%81","sequence":500,{"code":950,"name":"正餐优选","url":"http://p1.meituan.net/jungle/1543bbcb048218424e2420a6934e17b24236.png","skip_protocol":"channel?category_type=950&category_text=%E6%AD%A3%E9%A4%90%E4%BC%98%E9%80%89","sequence":600,{"code":101085,"name":"快餐小吃","url":"http://p0.meituan.net/jungle/b528beea0749cb18dd34a38bd2439ed43867.png","gray_url":"http://p1.meituan.net/jungle/d6f9a9f8cf9dce142e70376275e902336720.png","skip_protocol":"channel?category_type=101085&category_text=%E5%BF%AB%E9%A4%90%E5%B0%8F%E5%90%83","sequence":700,{"code":101083,"name":"汉堡披萨","url":"http://p1.meituan.net/jungle/0e63b86b4ff14d214c1999a979fd21d14273.png","skip_protocol":"channel?category_type=101083&category_text=%E6%B1%89%E5%A0%A1%E6%8A%AB%E8%90%A8","sequence":800,{"code":101072,"name":"地方菜","url":"http://p1.meituan.net/jungle/b6033c2f9aa26cdf37ea24fb1346d2dc4690.png","skip_protocol":"channel?category_type=101072&category_text=%E5%9C%B0%E6%96%B9%E8%8F%9C","sequence":900,{"code":100182,"name":"免配送费","url":"http://p0.meituan.net/jungle/f5ef975cae40ecc1a21dae61f44575d59129.png","skip_protocol":"channel?category_type=100182&category_text=%E5%85%8D%E9%85%8D%E9%80%81%E8%B4%B9","sequence":1000,{"code":100179,"name":"新商家","url":"http://p1.meituan.net/jungle/d24bda7352a2af54dded09bdf532055b9416.png","gray_url":"http://p1.meituan.net/jungle/d9fa3bf08f16ab2777172f0ae3be34af6827.png","skip_protocol":"channel?category_type=100179&category_text=%E6%96%B0%E5%95%86%E5%AE%B6","sequence":1100,{"code":100252,"name":"炸鸡零食","url":"http://p0.meituan.net/jungle/0ce9a33a4accc536ac9e2d8d91951c924673.png","skip_protocol":"channel?category_type=100252&category_text=%E7%82%B8%E9%B8%A1%E9%9B%B6%E9%A3%9F","sequence":1200,{"code":1073,"name":"日韩料理","url":"http://p0.meituan.net/jungle/99f0d73d4b47490cda27df873f415ebf4891.png","skip_protocol":"channel?category_type=1073&category_text=%E6%97%A5%E9%9F%A9%E6%96%99%E7%90%86","sequence":1300,{"code":101073,"name":"鲜花蛋糕","url":"http://p1.meituan.net/jungle/76f6523e25c16df8641717ae1518c0235859.png","skip_protocol":"channel?category_type=101073&category_text=%E9%B2%9C%E8%8A%B1%E8%9B%8B%E7%B3%95","sequence":1400,{"code":100183,"name":"粥粉面","url":"http://p1.meituan.net/jungle/3dfc65491265db3ffd14b8d4d3240d3a4123.png","skip_protocol":"channel?category_type=100183&category_text=%E7%B2%A5%E7%B2%89%E9%9D%A2","sequence":1500,1)">null}],"bid_banner_list":[],"friend_feeds":{"logo":"","feed_list":[]},"bubble_max_num":16},"code":0,"msg":"成功"}

homelist.json

{"tgt_stids":"","data":{"poilist":[{"id":520752902260751,"mt_poi_id":611589,"name":"深圳麦当劳前海二餐厅","support_coupon":0,"is_favorite":0,"sort_reason_type":0,"sort_reason_tag":"","delivery_type":0,"mt_delivery_time":"30分钟","status":1,"origin_status":0,"status_desc":"","pic_url":"http://p0.meituan.net/xianfu/aa86bc1b9a218ea5e094b861c03b59b94873.jpg","pic_url_square":"","avg_delivery_time":30,"shipping_fee":9.0,"shipping_fee_discount":0,"min_price":0.0,"new_promotion":0,"discounts2":[{"id":-2,"type":11,"info":"本店支持开发票,开票金额0元起","icon_url":"http://p0.meituan.net/xianfu/476ba65ee80b6385bab292c085baed17940.png","use_icon_from_server":1,"display_code":2,"sequence":52}],"shipping_time_info":{"in_shipping_time":1,"beg_shipping_time":"","status_content":"","desc_content":"","reservation_status":0},"month_sale_num":1874,"wm_poi_score":4.7,"shipping_time_x":"","pre_book":0,"brand_type":28771,"sales":0,"priority":0,"wm_poi_opening_days":0,"buz_type":0,"across_book_offset_days":0,"across_book_max_days":0,"latitude":0,"longitude":0,"primitiveDistance":1.7976931348623157E308,"distance":"2.3km","poi_type_icon":"http://p1.meituan.net/aichequan/a88918ba8699e15a5d16d5d7e09ad0022192.png","ad_attr":"","shipping_fee_tip":"配送 ¥9","min_price_tip":"起送 ¥0","average_price_tip":"人均 ¥34","recommend_info":{"icon":"","recommend_reason":""},"support_pay":0,"invoice_support":0,"invoice_min_price":0,"charge_info":"","ad_type":0,"wm_poi_view_id":"520752902260751"},{"id":487054588838638,"mt_poi_id":108841731,"name":"尊宝比萨(依云伴山店)","mt_delivery_time":"35分钟","pic_url":"http://p1.meituan.net/waimaipoi/a069cda780cfad105f7d34b193f4cd8027807.jpg","avg_delivery_time":35,"shipping_fee":5.0,"min_price":30.0,"discounts2":[],"month_sale_num":1422,"wm_poi_score":4.9,"brand_type":729,"distance":"231m","shipping_fee_tip":"配送 ¥5","min_price_tip":"起送 ¥30","average_price_tip":"人均 ¥26","wm_poi_view_id":"487054588838638"},{"id":474066607761145,"mt_poi_id":162270405,"name":"汉堡王(深圳前海路店24295)","mt_delivery_time":"40分钟","pic_url":"http://p1.meituan.net/waimaipoi/9fd9882ec8bf2324eb557c1dae5cf98f18297.jpg","avg_delivery_time":40,"shipping_fee":3.5,"min_price":20.0,"discounts2":[{"id":103,"type":24,"info":"有机会领取商家代金券","icon_url":"http://p0.meituan.net/xianfu/c2c0f31d0ebf0f60af115d058169c492992.png","sequence":6},{"id":100,"type":20,"info":"实际支付1元返5元商家代金券","icon_url":"http://p0.meituan.net/xianfu/652eea4034250563fe11b02e3219ba8d981.png","sequence":7},{"id":-2,"month_sale_num":1922,"brand_type":201,"distance":"666m","shipping_fee_tip":"配送 ¥3.5","min_price_tip":"起送 ¥20","average_price_tip":"人均 ¥29","wm_poi_view_id":"474066607761145"},{"id":451140072331680,"mt_poi_id":164997827,"name":"乐凯撒比萨(泛海城市广场店)","pic_url":"http://p1.meituan.net/waimaipoi/2f388166d640e5d44e47f5e77a28bdb94021.jpg","discounts2":[{"id":100,"info":"实际支付50元返10元商家代金券","info":"本店支持开发票,开票金额30元起","month_sale_num":1312,"brand_type":1015,"distance":"862m","average_price_tip":"人均 ¥36","wm_poi_view_id":"451140072331680"},{"id":452411382692781,"mt_poi_id":160406256,"name":"赣味轩","pic_url":"http://p0.meituan.net/waimaipoi/a5bf86a9ef9e3cbec7f3b5267b0b330440960.jpg","shipping_fee":4.0,"month_sale_num":415,"wm_poi_score":4.1,"brand_type":0,"distance":"448m","poi_type_icon":"","shipping_fee_tip":"配送 ¥4","wm_poi_view_id":"452411382692781"},{"id":291027986539711,"mt_poi_id":159013460,"name":"三昧真火烧烤(玫瑰园店)","mt_delivery_time":"52分钟","pic_url":"http://p1.meituan.net/waimaipoi/99e7e5c78751e9890efebab6f82c127537374.jpg","avg_delivery_time":52,"shipping_fee":7.0,"min_price":38.0,"month_sale_num":790,"wm_poi_score":4.3,"brand_type":24482,"distance":"446m","shipping_fee_tip":"配送 ¥7","min_price_tip":"起送 ¥38","average_price_tip":"人均 ¥30","wm_poi_view_id":"291027986539711"},{"id":377786325921759,"mt_poi_id":165095587,"name":"刘啵麻辣烫(丽湾店)","pic_url":"http://p0.meituan.net/waimaipoi/4c78f294b8e0996bc936c35bf98656eb38912.jpg","shipping_fee":3.0,"min_price":15.0,"month_sale_num":1443,"wm_poi_score":4.5,"distance":"696m","shipping_fee_tip":"配送 ¥3","min_price_tip":"起送 ¥15","average_price_tip":"人均 ¥21","wm_poi_view_id":"377786325921759"},{"id":445831492763071,"mt_poi_id":165727660,"name":"老五川湘菜馆","pic_url":"http://p0.meituan.net/waimaipoi/3a996a79435e623b70d4dbd8102af4e334816.jpg","month_sale_num":1751,"wm_poi_score":4.0,"distance":"1.5km","wm_poi_view_id":"445831492763071"},{"id":405987081184270,"mt_poi_id":92315528,"name":"御味小厨","pic_url":"http://p0.meituan.net/waimaipoi/280d4fab631ebac64d65377b864253c861440.jpg","shipping_fee":2.0,"month_sale_num":1117,"wm_poi_score":4.6,"distance":"658m","shipping_fee_tip":"配送 ¥2","average_price_tip":"人均 ¥22","wm_poi_view_id":"405987081184270"},{"id":302057462510017,"mt_poi_id":40449256,"name":"京城御面堂(港城店)","pic_url":"http://p0.meituan.net/waimaipoi/f2a7378be06e4abc377ee41f04cc2eed84703.jpg","month_sale_num":1104,"wm_poi_score":4.2,"brand_type":100015833,"distance":"388m","average_price_tip":"人均 ¥24","wm_poi_view_id":"302057462510017"},{"id":377949534632602,"mt_poi_id":42953070,"name":"带头羊烧烤回香牛肉面","pic_url":"http://p1.meituan.net/waimaipoi/d1ab78ad5a12fcd36ed1ad1176d0cfcb216054.jpg","month_sale_num":366,"distance":"437m","average_price_tip":"人均 ¥27","wm_poi_view_id":"377949534632602"},{"id":449245991791699,"mt_poi_id":118898056,"name":"壹号田园(泛海拉菲店)","pic_url":"http://p0.meituan.net/waimaipoi/43a349cf1f18fee0db8d352a198de47430720.jpg","sequence":6}],"month_sale_num":1353,"distance":"550m","wm_poi_view_id":"449245991791699"},{"id":297646531125333,"mt_poi_id":150008555,"name":"口口川香","mt_delivery_time":"51分钟","pic_url":"http://p0.meituan.net/waimaipoi/ae4863a43ddd2c9820b72ddd2314868b45056.jpg","avg_delivery_time":51,"month_sale_num":113,"distance":"455m","average_price_tip":"","wm_poi_view_id":"297646531125333"},{"id":510659729105235,"mt_poi_id":159408752,"name":"盆派冒菜","mt_delivery_time":"37分钟","pic_url":"http://p0.meituan.net/waimaipoi/ccd80aee8d37010a366ffb2932edf7d4148803.jpg","avg_delivery_time":37,"min_price":19.0,"info":"实际支付45元返2元商家代金券","sequence":7}],"month_sale_num":834,"distance":"536m","min_price_tip":"起送 ¥19","average_price_tip":"人均 ¥20","wm_poi_view_id":"510659729105235"},{"id":558973816220252,"mt_poi_id":67673701,"name":"潮汕汤面","pic_url":"http://p0.meituan.net/waimaipoi/60be600e1a4db2129c999d27c89a8f53289247.jpg","month_sale_num":1170,"distance":"692m","wm_poi_view_id":"558973816220252"},{"id":328188043526831,"mt_poi_id":165595013,"name":"尊宝比萨(雷圳店)","mt_delivery_time":"56分钟","avg_delivery_time":56,"info":"实际支付69元返10元商家代金券","month_sale_num":279,"wm_poi_score":4.8,"wm_poi_view_id":"328188043526831"},{"id":489880677383884,"mt_poi_id":160510569,"name":"胡椒宅男(泛海店)","pic_url":"http://p1.meituan.net/waimaipoi/601ce474804c82175c95026dfe422b1419189.jpg","info":"本店支持开发票,开票金额100元起","month_sale_num":964,"brand_type":100021365,"distance":"630m","average_price_tip":"人均 ¥25","wm_poi_view_id":"489880677383884"},{"id":432332410558204,"mt_poi_id":160521699,"name":"曹小厨(前海店)","pic_url":"http://p0.meituan.net/waimaipoi/5705d0a4de98a897889e011071419edf45056.jpg","info":"本店支持开发票,开票金额50元起","month_sale_num":1631,"wm_poi_score":3.2,"distance":"2.2km","average_price_tip":"人均 ¥23","wm_poi_view_id":"432332410558204"}],"poi_has_next_page":true,"poi_total_num":959,"page_index":0,"page_size":20,"has_activity":false,"remind_infos":[],"rank_strategy_tag":"RK4002,RK6012,RK8004","rank_strategy_version":""},"msg":"成功"}

 

相关文章

HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码