简单购物车之商品列表的实现

这里主要是为了体现面向对象的思维，也就是js部分的内容，所以布局比较简单，仅供参考，可以后期自己修改

首先附上css部分

<style>
    #cont{width:1000px;overflow: hidden;margin: 30px auto;border: solid 1px black;}
    #cont .goods{width: 250px;float: left;border: solid 1px black;box-sizing: border-box;text-align: center;}
   .goods img{width: 80%;}
   .goods span{display: block;margin: 10px 0;}
   .goods p{margin: 0;height: 40px;line-height: 20px;overflow: hidden;}
   .goods input{display: block;margin: 0 auto;}
 </style>

html布局

被注释部分只是为了方便下面js的数据拼接，用ES6新增的语法可以很容易的拼接数据

现在正式开始咯

<script>
     let data = [{
        img:"https://img12.360buyimg.com/n7/jfs/t1/39543/8/11748/122729/5d2edfcbE100bb150/5afccb1354c96752.jpg",
        price:"79.00",
        name:"南野田园 番石榴红心 红心芭乐 台湾新鲜芭乐 新鲜水果 孕妇水果 京东生鲜 红心芭乐5斤装 （ 送酸梅粉）",
        goodsId:"111111"
    },{
        img:"https://img11.360buyimg.com/n1/s190x190_jfs/t1/105599/34/11005/165579/5e27b8acEbc72f156/7e994f565512bd2d.jpg",
        price:"178.00",
        name:"【顺丰空运】山东大樱桃大连车厘子京东新鲜",
        goodsId:"2222222"
    },{
        img:"https://img14.360buyimg.com/n7/jfs/t1/18248/19/11660/84851/5c91d394E37adf3ee/14e0df1095c42dbf.jpg",
        price:"32.00",
        name:"寻味君 甜杨桃5斤 新鲜水果京东",
        goodsId:"3333333"
    },{
        img:"https://img14.360buyimg.com/n7/jfs/t25519/90/761689188/694412/a788e670/5b7bd4bbN6f5e9cdb.jpg",
        price:"88.00",
        name:"【推荐】丹东肥沃的黑土地孕育了草莓的香甜口感【新鲜】每天现摘现发，精选好果，产地直发",
        goodsId:"4444444"
    }];

    class GoodsList{
        constructor(){
            this.data = data;
            this.cont = document.getElementById('cont')
        }

        init(){
            var str = '';
            for(var i=0;i<data.length;i++){
                str += `<div class="goods" index="${ this.data[i].goodsId }">
                        <img src="${ this.data[i].img }" alt="" srcset="">
                        <span>${ this.data[i].price }</span>
                        <p>${ this.data[i].name }</p>
                        <input type="button" value="加入购物车" class="add">
                        </div>`
            }
            this.cont.innerHTML = str;
        }

        addEvent(){
            var that = this;
            this.cont.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.className === "add"){
                    that.goodsId = tar.parentNode.getAttribute("index");
                    that.setData();
                }
            }
        }

        setData(){
            // console.log(this.goodsId);
            // var gm = localStorage.getItem("goodsMsg") ? JSON.parse(localStorage.getItem("goodsMsg")) : [];
            // if(gm.length < 1){
            //     // 1-1.没有存过，直接存
            //     gm.push({
            //         goodsId:this.goodsId,
            //         num:1,
            //         msg:当前商品的所有数据
            //     });
            var gm = localStorage.getItem("goodsMsg");
            if(gm === null){
                // 1-1.没有存过，直接存
                gm = [{
                    goodsId:this.goodsId,
                    num:1,
                    msg:this.getData(this.goodsId)
                }];
            }else{
                gm = JSON.parse(gm);
                // 1-2.存过数据了
                // 先判断，这次点的，在老数据中有没有
                var zhuangtai = 0;
                for(var i=0;i<gm.length;i++){
                    // 1-2-1.有：数量+1
                    if(gm[i].goodsId === this.goodsId){
                        gm[i].num++;
                        zhuangtai = 1;
                        break;
                    }
                }
                if(zhuangtai == 0){
                    // 1-2-2.没有：给数组，新增一个数据
                    gm.push({
                        goodsId:this.goodsId,
                        num:1,
                        msg:this.getData(this.goodsId)
                    })
                }
            }
             // 以上这个if里面只是在判断操作获取到的数据，并没有存回去，所以最终操作完之后，需要将数据存到本地存储中
             localStorage.setItem("goodsMsg",JSON.stringify(gm));
        }

        // 单独封装为了方便获取所有数据中，某个数据的功能
        // 根据传入的id获取
        getData(id){
            // 遍历的时候，比较，符合，返回这个数据
            for(var i=0;i<this.data.length;i++){
                if(this.data[i].goodsId === id){
                    return this.data[i];
                }
            }
            // 没有符合，返回空对象，保持数据格式一致
            return {};
        }
    }
        
    var gl = new GoodsList();
    gl.init();
    gl.addEvent();
</script>

data里的数据是我们模拟的后端数据，后期是不需要的，这里仅用的js，所以就先自己模拟
另外链接也都是自己随便上京东找的图片地址链接。
到此为止，简单的商品列表就实现了，购物车的实现下一篇见！