仿美團--詳情頁與購物車開發

效果圖首先是目錄結構 menu.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>menu</title> <meta name="viewport" content="width=device-w ...

效果圖

首先是目錄結構

menu.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <meta 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;

            function setRem(){
                // 這個10不是固定的，只是計算出來的rem要和cssrem插件setting中設置的37.5保持一致
                // iphone6設備寬度是375，因此基準值剛好是10
                var rem=docEl.clientWidth/10;//獲取基準值
                docEl.style.fontSize=rem+"px";//動態設置html根元素的fontSize
            }

            setRem();

            window.addEventListener("resize",setRem);

            //用戶每次瀏覽頁面的時候， 就會觸發pagesshow方法（有相容性問題）
            window.addEventListener("pageshow",function(e){
                // 使用e.presisted就是判斷當前頁面是不是在緩存中載入
                // 如果緩存中載入（就是為true的時候），重新設置rem
                if(e.persisted){
                    setRem();
                }
            });
        })();

    </script>
    <link rel="stylesheet" href="../lib/reset.css"><!-- 拷貝一份通用重置樣式 -->
    <link rel="stylesheet" href="menu.css">
    <link rel="stylesheet" href="../common/common.css">
</head>
<body>
    <!-- 頭部開始 -->
    <div class="nav">
        <div class="back-icon"></div>
        <h4 class="title">深圳麥當勞前海二餐廳</h4>
    </div>
    <!-- 頭部結束 -->

    <!-- tab開始 -->
    <div class="tab-bar"></div>
    <!-- tab結束 -->

    <!-- 點菜內容開始 -->
    <div class="menu-inner">
        <!-- 左側tab -->
        <div class="left-bar">
            <div class="left-bar-inner"></div>
        </div>
        <!-- 右側商品 -->
        <div class="right-content">
            <p class="right-title"></p>
            <div class="right-list">
                <div class="right-list-inner"></div>
            </div>
        </div>
        <!-- 購物車 -->
        <div class="shop-bar"></div>
        <!-- 遮罩 -->
        <div class="mask hide"></div>
    </div>
    <!-- 點菜內容結束 -->

    <script src="../lib/jquery.min.js"></script>
    <script src="menu.js"></script>
    <script src="../common/common.js"></script>
</body>
</html>

menu.css

/*header-tab*/
.tab-bar{
    font-size:0.426667rem;
    display:flex;
    border-bottom:0.026667rem solid #f0f0f0;
    margin-top:1.706667rem;
}
.tab-bar .tab-item{
    flex:1;
    height:1.2rem;
    line-height:1.2rem;
    position: relative;
    color:#666;
    text-align:center;
    text-decoration: none;
}
.tab-bar .tab-item.active::after{
    content:"";
    display: block;
    position: absolute;
    width:1.6rem;
    height:0.106667rem;
    bottom:0;
    background:#ffd161;/*美團黃*/
    /*設置居中*/
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}

/*menu-inner*/
.menu-inner{
    position: absolute;
    top:2.933333rem;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    overflow:hidden;
}
.menu-inner .left-bar{
    width:2.266667rem;
    background:#efefef;
    overflow:auto;
    height:100%;
    -webkit-overflow-scrolling:touch;/*局部滾動，尤其是移動端ios*/
}
.menu-inner .left-bar-inner{
    padding-bottom:2.266667rem;
}
.menu-inner .left-item{
    font-size:0.373333rem;
    color:#656565;
    text-align:center;
    border-bottom:0.026667rem solid #bfbfbf;
    display: flex;
    justify-content: center;
    height:1.6rem;
}
.menu-inner .left-item.active{
    background:#fff;
}
.menu-inner .item-text{
    text-align:center;
    align-self:center;
}
.menu-inner .item-icon{
    width:0.533333rem;
    height:0.533333rem;
    display: inline-block;
    margin-right:0.16rem;
    vertical-align:-0.106667rem;
}
.menu-inner .right-content{
    flex:1;
    margin-left:0.266667rem;
    height:100%;
    overflow:hidden;
    -webkit-overflow-scrolling:touch;/*觸屏滾動*/
}
.menu-inner .right-title{
    font-size:0.346667rem;
    color:#333;
    margin-top:0.266667rem;
    padding-left:0.106667rem;
    border-left:0.053333rem solid #ffd161;
}
.menu-inner .right-list{
    height:100%;
    overflow:auto;/*可滾動*/
}
.menu-inner .right-list-inner{
    font-size:0.426667rem;
    padding-bottom:2.266667rem;
}
.right-list-inner .menu-item{
    display: flex;
    padding:0.666667rem 0;
    border-bottom:0.026667rem solid #f0f0f0;
    position: relative;
}
.right-list-inner .img{
    width:1.653333rem;
    height:1.653333rem;
    margin-right:0.266667rem;
}
.right-list-inner .menu-item-right{
    flex:1;
}
.right-list-inner .item-title{
    font-size:0.426667rem;
    color:#2f2f2f;
}
.right-list-inner .item-desc,
.right-list-inner .item-zan{
    color:#a9a9a9;
    font-size:0.32rem;
    margin-top:0.16rem;
    line-height:0.373333rem;
    padding-right:0.106667rem;
}
.right-list-inner .item-desc{
    line-height:0.453333rem;
}
.right-list-inner .item-price{
    margin-top:0.266667rem;
    color:#fe4d3d;
    font-size:0.48rem;
}
.right-list-inner .unit{
    color:#a9a9a9;
    font-size:0.32rem;
}
.right-list-inner .select-content{
    position: absolute;
    right:0.24rem;
    bottom:0.56rem;
    display: flex;
}
.right-list-inner .minus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/minus.png);    
    background-size:cover;
}
.right-list-inner .count{
    font-size:0.4rem;
    color:#2f2f2f;
    width:0.666667rem;
    height:0.666667rem;
    line-height:0.666667rem;
    margin:0 0.053333rem;
    text-align:center;
}
.right-list-inner .plus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/plus.png);    
    background-size:cover;
}

/*shopbar*/
.shop-bar{
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:99;
}
.shop-bar .choose-content{
    background:#fff;
}
.shop-bar .content-top{
    height:0.933333rem;
    background-color:#f4f4f4;
    font-size:0.293333rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.shop-bar .clear-car{
    margin:0 0.133333rem 0 0.266667rem;
    position: relative;
}
.shop-bar .clear-car::after{
    content:"";
    width:0.346667rem;
    height:0.346667rem;
    display: block;
    background-image:url(images/clear.jpeg);
    background-size:cover;
    position: absolute;
    top:-0.026667rem;
    left:-0.373333rem;
}
.shop-bar .bottom-content{
    height:1.333333rem;
    display: flex;
    background:rgba(51,51,51,.9);
}
.shop-bar .shop-icon{
    width:1.466667rem;
    height:1.466667rem;
    background-image:url(images/shop-icon.png);
    background-size:cover;
    margin-top:-0.4rem;
    margin-left:0.32rem;
    position: relative;
}
.shop-bar .dot-num{
    position: absolute;
    background-color: #fb4e44;
    width:0.4rem;
    height:0.4rem;
    font-size:0.32rem;
    color:#fff;
    border:0.026667rem solid #fff;
    border-radius:50%;
    right:0;
    top:0.053333rem;
    text-align: center;
    line-height:0.4rem;
}
.shop-bar .price-content{
    flex:1;
    padding-top:0.213333rem;
    padding-left:0.186667rem;
}
.shop-bar .total-price{
    font-size:0.533333rem;
    color:#fff;
}
.shop-bar .total-price-span{

}
.shop-bar .other-price{
    font-size:0.32rem;
    color:#999;
    margin-top:0.053333rem;
}
.shop-bar .shipping-fee{

}
.shop-bar .submit-btn{
    width:2.933333rem;
    height:100%;
    background:#ffd161;
    color:#333;
    font-size:0.426667rem;
    line-height:1.333333rem;
    text-align:center;
}
.choose-item{
    display: flex;
    font-size:0.4rem;
    color:#2f2f2f;
    height:0.933333rem;
    align-items: center;
    padding:0.266667rem 0;
    border-bottom:0.026667rem solid #ddd;
}
.choose-item .item-name{
    flex:1;
    padding-left:0.266667rem;
}
.choose-item .price{
    margin:0 0.666667rem 0 0.133333rem;
}
.choose-item .total{

}
.choose-item .select-content{
    position: relative;
    margin-right:0.213333rem;
    display: flex;
}
.choose-item .minus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/minus.png);    
    background-size:cover;
}
.choose-item .plus{
    width:0.666667rem;
    height:0.666667rem;
    background-image:url(images/plus.png);    
    background-size:cover;
}
.choose-item .count{
    font-size:0.4rem;
    color:#2f2f2f;
    width:0.666667rem;
    height:0.666667rem;
    line-height:0.666667rem;
    margin:0 0.053333rem;
    text-align:center;
}
.menu-inner .mask{
    position: fixed;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background-color: rgba(0,0,0,.7);
}

menu.js

(function(){

    //載入左側類目
    function initLeftBar(){
        //左側類目的模板字元串
        var itemTpl='<div class="left-item">'+
                        '<div class="item-text">$getItemContent</div>'+
                    '</div>';
        var itemHtml="";
        var page=0;//當前頁
        var isLoading=false;//當前是否處於載入中

        //獲取列表數據
        function getList(){
            page++;
            isLoading=true;

            $.get("../json/food.json",function(data){

                var list=data.data.food_spu_tags || [];
                window.food_spu_tags=list;//把數據掛載到window對象上，方便其他模塊調用

                list.forEach(function(item,index){
                    var str=itemTpl.replace("$getItemContent",getItemContent(item));
                    var $target=$(str);

                    //將item數據掛載到left-item上面
                    $target.data("itemData",item);

                    $(".left-bar-inner").append($target);
                })

                $(".left-item").first().click();//預設顯示第一個tab

                isLoading=false;

                window.shopBar.changeShippingPrice(data.data.poi_info.shipping_fee || 0);//更新價格
            })

            //關於圖標的處理
            function getItemContent(data){
                if(data.icon){
                    return '<img class="item-icon" src='+data.icon+'>'+data.name;
                }else{
                    return data.name;
                }
            }
        }

        getList();//預設先請求一次    

        //滾動載入
        window.addEventListener("scroll",function(){
            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) return;
                    getList();            
                }else{
                    $(".loading").text("載入完成");
                }
            }
        });

        //左側tab點擊事件
        $(".menu-inner").on("click",".left-item",function(e){
            var $target=$(e.currentTarget);

            //添加點擊樣式
            $target.addClass("active");
            $target.siblings().removeClass("active");

            //將數據傳給右側詳情列表
            initRightContent($target.data("itemData"));//載入右側商品
        })
    }

    //載入右側商品
    function initRightContent(data){
        //右側商品的模板字元串
        var itemTpl='<div class="menu-item">'+
                        '<img src=$picture class="img">'+
                        '<div class="menu-item-right">'+
                            '<p class="item-title">$name</p>'+
                            '<p class="item-desc">$description</p>'+
                            '<p class="item-zan">$praise_content</p>'+
                            '<p class="item-price">￥$min_price<span class="unit">/$unit</span></p>'+
                        '</div>'+
                        '<div class="select-content">'+
                            '<div class="minus"></div>'+
                            '<div class="count">$chooseCount</div>'+
                            '<div class="plus"></div>'+
                        '</div>'+
                    '</div>';

        $(".right-list-inner").html("");

        var list=data.spus || [];
        list.forEach(function(item,index){
            //預設為0
            if(!item.chooseCount){
                item.chooseCount=0;
            }
            var str=itemTpl
                    .replace("$picture",item.picture)
                    .replace("$name",item.name)
                    .replace("$description",item.description)
                    .replace("$praise_content",item.praise_content)
                    .replace("$min_price",item.min_price)
                    .replace("$unit",item.unit)
                    .replace("$chooseCount",item.chooseCount);
            var $target=$(str);
            $target.data("itemData",item);//把數據掛載在data屬性上，方便以後獲取
            $(".right-list-inner").append($target);
        });

        //右側頂部title
        $(".right-title").text(data.name);

        //加號事件
        $(".menu-item").on("click",".plus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            $count.text(parseInt($count.text()||"0")+1);

            //更新掛載的數據
            var $item=$(e.currentTarget).parents(".menu-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount++;

            window.shopBar.renderItems();//購物車渲染
        })

        //減號事件
        $(".menu-item").on("click",".minus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            if($count.text()==0) return;

            $count.text(parseInt($count.text()||"0")-1);

            //更新掛載的數據
            var $item=$(e.currentTarget).parents(".menu-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount--;

            window.shopBar.renderItems();//購物車渲染
        })
    }        

    //shopbar
    function initShopBar(){
        //shopbar的購物車上部分模板字元串
        var itemTopTpl='<div class="choose-content hide">'+
                            '<div class="content-top">'+
                                '<div class="clear-car">清空購物車</div>'+
                            '</div>'+
                        '</div>';

        //shopbar的購物車下部分模板字元串
        var itemBottomTpl='<div class="bottom-content">'+
                                '<div class="shop-icon">'+
                                    '<div class="dot-num hide"></div>'+
                                '</div>'+
                                '<div class="price-content">'+
                                    '<p class="total-price">￥<span class="total-price-span">0</span></p>'+
                                    '<p class="other-price">另需配送&nbsp;￥<span class="shipping-fee">0</span></p>'+
                                '</div>'+
                                '<div class="submit-btn">去結算</div>'+
                            '</div>';

        var $strTop=$(itemTopTpl);
        var $strBottom=$(itemBottomTpl);

        $(".shop-bar").append($strTop);
        $(".shop-bar").append($strBottom);

        //渲染購物車數據
        function renderItems(){
            $strTop.find(".choose-item").remove();//每次操作之後先全部清空購物車
            var list=window.food_spu_tags || [];
            var totalPrice=0;

            var tpl='<div class="choose-item">'+
                        '<div class="item-name">$name</div>'+
                        '<div class="price">￥<span class="total">$price</span></div>'+
                        '<div class="select-content">'+
                            '<div class="minus"></div>'+
                            '<div class="count">$chooseCount</div>'+
                            '<div class="plus"></div>'+
                        '</div>'+
                    '</div>';

            list.forEach(function(item){
                item.spus.forEach(function(_item){
                    if(_item.chooseCount>0){
                        var price=_item.chooseCount*_item.min_price;
                        var row=tpl.replace("$name",_item.name)
                                   .replace("$price",price)//總價
                                   .replace("$chooseCount",_item.chooseCount);
                        totalPrice+=price;

                        //掛載數據
                        var $row=$(row);
                        $row.data("itemData",_item);
                        $strTop.append($row);
                    }
                })
                window.shopBar.changeAllPrice(totalPrice);//更新總價
                changeDot();//更新紅點
            })
        }
        window.shopBar.renderItems=renderItems;//將該方法暴露到全局

        //更新單商品總價
        function changeShippingPrice(str){
            $strBottom.find(".shipping-fee").text(str);
        }
        window.shopBar.changeShippingPrice=changeShippingPrice;

        //更新全商品總價
        function changeAllPrice(str){
            $strBottom.find(".total-price-span").text(str);
        }
        window.shopBar.changeAllPrice=changeAllPrice;

        //購物車裡的加號事件
        $strTop.on("click",".plus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            $count.text(parseInt($count.text()||"0")+1);

            //更新掛載的數據
            var $item=$(e.currentTarget).parents(".choose-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount++;//更新掛載數據，在列表裡也會同步更新

            window.shopBar.renderItems();//購物車渲染    

            //找到當前右側詳情的數據，進行聯動
            $(".left-item.active").click();        
        })

        //購物車裡的減號事件
        $strTop.on("click",".minus",function(e){
            var $count=$(e.currentTarget).parent("").find(".count");
            if($count.text()==0) return;

            $count.text(parseInt($count.text()||"0")-1);

            //更新掛載的數據
            var $item=$(e.currentTarget).parents(".choose-item").first();
            var itemData=$item.data("itemData");
            itemData.chooseCount--;//更新掛載數據，在列表裡也會同步更新

            window.shopBar.renderItems();//購物車渲染    

            //找到當前右側詳情的數據，進行聯動
            $(".left-item.active").click();        
        })

        //點擊顯示或者隱藏購物車
        $(".shop-icon").on("click",function(){
            $(".mask").toggle();
            $strTop.toggle();
        })

        //計算紅點中的數量
        function changeDot(){
            var counts=$strTop.find(".count");
            var total=0;
            for(var i=0;i<counts.length;i++){
                total+=parseInt($(counts[i]).text());
            }
            if(total>0){
                $(".dot-num").show().text(total);
            }else{
                $(".dot-num").hide();
            }
        }
    }        

    //暴露出來的方法
    window.shopBar={};

    function init(data){
        initLeftBar();//載入左側類目
        initShopBar();//載入購物車
    }    
    init();    
    


})();

common.css

/*header-tab*/
.tab-bar{
    font-size:0.426667rem;
    display:flex;
    border-bottom:0.026667rem solid #f0f0f0;
    margin-top:1.706667rem;
}
.tab-bar .tab-item{
    flex:1;
    height:1.2rem;
    line-height:1.2rem;
    position: relative;
    color:#666;
    text-align:center;
    text-decoration: none;
}
.tab-bar .tab-item.active::after{
    content:"";
    display: block;
    position: absolute;
    width:1.6rem;
    height:0.106667rem;
    bottom:0;
    background:#ffd161;/*美團黃*/
    /*設置居中*/
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
}

/*menu-inner*/
.menu-inner{
    position: absolute;
    top:2.933333rem;
    left:0;
    right:0;
    bottom:0;
    display: flex;
    overflow:hidden;
}
.menu-