2022-08-05 购物车的实现

前端OnTheRun

已于 2022-09-19 15:10:16 修改

阅读量98

点赞数

分类专栏：项目与应用文章标签： javascript 购物车 json ajax

于 2022-08-05 21:27:29 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/126185894

版权

项目与应用专栏收录该内容

57 篇文章 1 订阅

订阅专栏

1.商品详情页

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #cont {
            width: 1000px;
            border: solid 1px black;
            overflow: hidden;
            margin: 0 auto;
        }
        
        #cont .box {
            width: 250px;
            text-align: center;
            border: solid 1px black;
            box-sizing: border-box;
            float: left;
        }
        
        .box img {
            width: 200px;
        }
        
        .box p {
            margin: 10px 0;
        }
        
        .box p:nth-child(3) {
            line-height: 20px;
            height: 40px;
            overflow: hidden;
        }
        
        .box span {
            padding: 0 10px;
            display: block;
            margin: 10px auto;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: cyan;
            cursor: pointer;
        }
        
        .box span:active {
            background: blue;
            color: #fff;
        }
    </style>
</head>

<body>
    <h1>这是商品列表，去
        <a href="./cart.html"></a>
    </h1>
    <div id="cont">
        <p>卖完了，等待上架中...</p>
        <!-- <div class="box">
            <img src="https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg" alt="">
            <p>3999.00</p>
            <p>OPPO K7x 双模5G 4800万四摄 5000mAh长续航 90Hz电竞屏 黑镜6GB+128GB 30W闪充全网通</p>
            <span>加入购物车</span>
        </div> -->
    </div>
</body>
<script src="./data/goods.js"></script>
<script>
    /*商品详情页*/
    class List {
        constructor() {
                this.cont = document.getElementById("cont");
                this.load();
                this.addEvent();
            }
            // 1.拿数据
        load() {
                ajax().then(data => {
                    this.data = JSON.parse(data);
                    this.render();
                })
            }
            // 2.渲染页面
        render() {
                let str = "";
                this.data.forEach(val1 => {
                    // 对str格式渲染
                    str += `<div class="box" index="${val1.id}
                            <img src="${val1.proImg}">
                            <p>${val1.price}</p>
                            <p>${val1.proName}</p>
                            <span class="btn">加入购物车</span>
                        </div>`;
                });
                // 追加节点,让tbody页面得到渲染
                this.tbody.innerHTML = str;
            }
            // 3.追加点击事件
        addEvent() {
                const that = this;
                this.tbody.addEventListner("click", function(e) {
                    if (e.target.className == "btn") {
                        that.id = e.target.parentNode.getAttribute("index");
                        that.setData();
                    }
                })
            }
            // 4.存储数据
        setData() {
            const arr = localStorage.getItem("proData") ? JSON.parse(localStorage.getItem("proData")) : [];
            if (arr.length > 0) {
                let i = 0;
                const onoff = arr.some((val, idx) => {
                    i = idx;
                    return val.id === this.id;
                });
                if (onoff) {
                    arr[i].num++;
                } else {
                    arr.push({
                        id: this.id,
                        num: 1
                    })
                }
            } else {
                arr.push({
                    id: this.id,
                    num: 1
                })
            }
            localStorage.setItem("proData", JSON.stringify(arr));
        }
    }
    new List;
    // 异步拿取数据
    function ajax() {
        return new Promise(resolve => {
            setTimeout(() => {
                // 数据=>字符串
                resolve(JSON.stringify(data));
            }, 500);
        })
    }
</script>

</html>

2.购物车

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            width: 100px;
        }
    </style>
</head>

<body>
    <h1>这是购物车界面，<a href="./goodlist.html">继续购物</a></h1>
    <table border="1" width="800" align="center">
        <thead>
            <tr>
                <th>图片</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
                <th width="40">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>购物车为空,<a href="./goodlist.html">继续购物</a></td>
            </tr>
            <!-- <tr>
              <td><img src="" alt=""></td>
              <td>名称</td>
              <td>99.00</td>
              <td><input type="number" min="1" value="5"></td>
              <td>数量*单价</td>
              <td>删除</td>
            </tr> -->
        </tbody>
    </table>
</body>
<script src="./data/goods.js"></script>
<script>
    class Cart {
        constructor() {
                this.tbody = document.querySelector("tbody");
                this.load();
                this.addEvent();
            }
            // 拿数据
        load() {
                ajax({
                    url: "abcdefg"
                }).then(data => {
                    this.data = JSON.parse(data);
                    this.render();
                })
            }
            // 渲染页面
        render() {
                this.localData = localStorage.getItem("proData") ? JSON.parse(localStorage.getItem("proData")) : [];
                if (this.localData.length < 1) return;
                let str = "";
                this.data.forEach(val1 => {
                    this.localData.forEach(val2 => {
                        if (val1.proId === val2.id) {
                            str += `<tr index="${val2.id}">
                                <td><img src="${val1.proImg}" alt=""></td>
                                <td>${val1.proName}</td>
                                <td>${val1.price}</td>
                                <td><input class="set" type="number" min="1" value="${val2.num}"></td>
                                <td>${val2.num*val1.price}</td>
                                <td class="del">删除</td>
                            </tr>`;
                        }
                    })
                })
                this.tbody.innerHTML = str;
            }
            // 追加事件
        addEvent() {
                const that = this;
                this.tbody.addEventListener("click", function(eve) {
                    if (eve.target.className == "del") {
                        that.id = eve.target.parentNode.getAttribute("index");
                        eve.target.parentNode.remove();
                        that.setData(i => {
                            that.localData.splice(i, 1)
                        });
                    }
                });
                that.tbody.addEventListener("input", function(eve) {
                    if (eve.target.className == "set") {
                        that.id = eve.target.parentNode.parentNode.getAttribute("index");
                        that.setData(i => {
                            that.localData[i].num = eve.target.value
                        })
                    }
                })
            }
            // 存储数据
        setData(cb) {
            let i = 0;
            this.localData.some((val, idx) => {
                i = idx;
                return val.id === this.id;
            });
            cb(i);

            localStorage.setItem("proData", JSON.parse(this.localData));
        }
    }
    new Cart;

    function ajax() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve(JSON.stringify(data));
            }, 500);
        })
    }
</script>

</html>

前端OnTheRun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2022-08-05 购物车的实现

#### 1.商品详情页```html Document #cont { width: 1000px; border: solid 1px black; overflow: hidden; margin: 0 au
复制链接

扫一扫