购物车js部分

window.onload = function () {

    //数据

    var imgPath = ["./imgs/selectn.png", "./imgs/selecty.png"];

    var data = [{

        title: ["长城（Great Wall）额定650W", "长城（Great Wall）额定650W", "长城（Great Wall）额定650W", "长城（Great Wall）额定650W"]

    }, {

        dalites: ["轻奢蓝", "优雅黑", "开心白", "无虑蓝"]

    }, {

        imgs: ["./imgs/t1.jpg", "./imgs/t1.jpg", "./imgs/t1.jpg", "./imgs/t1.jpg"]

    }, {

        price: ["￥1192.28", "￥2558", "￥451", "￥1551"]

    }]

 

    //遍历数据

    let box = document.querySelector('.box');

    for (let i = 0; i < data[0].title.length; i++) {

        // console.log(i);

        for (k in data[i]) {

            var div = ` <div class="box"> 

                   <div class="block">

                       <div class="check">

                           <img src="${imgPath[0]}" alt="">

                       </div>

                       <div class="info">

                           <img src="${data[2].imgs[i]}" alt="">

                           <h4>${data[0].title[i]}</h4>

                       </div>

                       <div class="text">

                           <p>${data[1].dalites[i]}</p>

                           <div class="price">

                               <span class="pic">${data[3].price[i]}</span>

                               <span>/件</span>

                               <div class="num">

                                   <a href="javascript:;" class="less">-</a><span class="count">0</span><a href="javascript:;" class="add">+</a>

                               </div>

                           </div>

                       </div>

                   </div>`

        }

        box.innerHTML += div;

        // }

    }

    //     //模态框

    let total = `    <div class="dash">

        <div class="box2">

        <div class="chkAll">

            <img src="./imgs/selectn.png" alt=""><span>全选</span>

            <p>注：商品不支持退款</p>

        </div>

        <div class="money">

            <span>合计：</span>

            <span class="tip">￥0.00</span>

            <button>结算(0)</button>

        </div>

    </div>

    <div class="box3">

        <div class="icon">

            <img src="./imgs/indexq.png" alt="">

            <p>首页</p>

        </div>

        <div class="icon">

            <img src="./imgs/gwch.png" alt="">

            <p>首页</p>

        </div>

        <div class="icon">

            <img src="./imgs/mineq.png" alt="">

            <p>首页</p>

        </div>

    </div>

</div>

</div>`

    box.innerHTML += total;

 

    //小费

    let tip = document.querySelector('.tip');

    //获取控制数量的标签

    const less = document.querySelectorAll('.less');

    const add = document.querySelectorAll('.add');

    //总数量

    let num = 0;

    let price = 0;

    //找到价格标签

    let pic = document.querySelectorAll('.pic');

    //找到数量标签

    let nums = document.querySelectorAll('.count');

    //总钱数

    var money = 0;

    

    for (let i = 0; i < less.length; i++) {

        //减少

        less[i].addEventListener('click', function () {

            num = this.nextElementSibling.innerHTML;

            num--;

            if (num < 0) {

                alert('该商品数量为0，不可继续递减了')

            } else {

                this.nextElementSibling.innerHTML = num;

            }

            //找到价格标签

            price = this.parentNode.parentNode.children[0];

            price = price.innerHTML.split('￥')[1];

            money = price * num <= 0 ? 0 : price * num;

            tip.innerHTML = '￥' + money.toFixed(2);

        }, false)

 

        //增加

        add[i].addEventListener('click', function () {

            num = this.previousElementSibling.innerHTML;

            num++;

            // num++;

            this.previousElementSibling.innerHTML = num;

            // //找到价格标签

            price = this.parentNode.parentNode.children[0];

            price = price.innerHTML.split('￥')[1];

            money += Number(price * num);

            tip.innerHTML = '￥' + money.toFixed(2);

        }, false)

    }

    getSum();

    //获取总件数

    function getSum() {

        let count = 0; //计算总件数

        let money = 0; //计算总价钱

        pic.forEach((v) => {

            money += parseInt(v.innerHTML.split('￥')[1]);

            // console.log(money.toFixed(2));

        });

        nums.forEach((v) => {

            // console.log(v);

            count += parseInt(v.innerHTML)

        })

        tip.innerHTML = '￥' + (money * count).toFixed(2);

    }

 

    //选中

    let count = 0;

    const chk = document.querySelectorAll('.check');

    //每件商品的价格

 

    //单选

    for (let i = 0; i < chk.length; i++) {

        chk[i].addEventListener('click', function () {

            count++;

            if (count % 2 != 0) {

                this.children[0].src = imgPath[1];

            } else {

                this.children[0].src = imgPath[0];

            }

        }, false)

    }

 

    //全选

    const chkAll = document.querySelector('.chkAll');

    chkAll.addEventListener('click', function () {

        count++;

        for (let i = 0; i < chk.length; i++) {

            if (chkAll.click && count % 2 != 0) {

                this.children[0].src = imgPath[1];

                chk[i].children[0].src = imgPath[1];

            } else {

                this.children[0].src = imgPath[0];

                chk[i].children[0].src = imgPath[0];

                tip.innerHTML = '￥' + parseFloat(0.00);

            }

        }

    }, false)

 

}