1 //购物车 2 function Cart(){ 3 this.products = []; 4 this.total = 0; 5 this.count = 0; 6 } 7 Cart.prototype.createHtml = function(product){ 8 return `<div class="product-item" id="pro_item_${product.id}"> 9 <a href="${product.url}" class="pro-img" style="background-image: url(${product.img});"></a> 10 <div class="desc"> 11 <p><a href="${product.url}">${product.title}</a></p> 12 <p>￥ ${product.price} x <span>${product.count}</span></p> 13 </div> 14 <div class="del_btn"> 15 <svg t="1573541919112" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10741" width="22" height="22"><path d="M512 32c265.6 0 480 214.4 480 480s-214.4 480-480 480S32 777.6 32 512 246.4 32 512 32z" fill="#EB5454" p-id="10742"></path><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m0-960C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z" fill="#FFFFFF" p-id="10743"></path><path d="M320 480h384c19.2 0 32 12.8 32 32s-12.8 32-32 32H320c-19.2 0-32-12.8-32-32s12.8-32 32-32z" fill="#FFFFFF" p-id="10744"></path></svg> 16 </div></div>`; 17 } 18 Cart.prototype.delete = function(product){ 19 let that = this; 20 let option = { 21 url:"/sm/mm.php", 22 dataType:"json", 23 type:"post", 24 data:`action=cart_remove&ids[]=${product.delId}`, 25 success:function(data){ 26 if(data.status){ 27 let index = that.products.indexOf(product); 28 that.products.splice(index,1); 29 $(`#pro_item_${product.id}`).remove(); 30 that.updateTotal(); 31 32 }else{ 33 notice.updateNotice("notice-error",`移除商品失败: ${data.message}`); 34 console.error(`移除商品失败: ${data.message}`); 35 } 36 }, 37 error:function(xhr){ 38 notice.updateNotice("notice-error",`操作发生错误：${xhr.status} ${xhr.statusText}`); 39 console.error(`操作发生错误：${xhr.status} ${xhr.statusText}`); 40 } 41 } 42 $.ajax(option); 43 } 44 Cart.prototype.updateTotal = function(){ 45 this.count = 0; 46 this.total = 0; 47 for(let i = 0;i<this.products.length;i++){ 48 let product = this.products[i]; 49 this.count += product.count; 50 this.total += product.count * product.price; 51 } 52 let isEmpty = this.count == 0; 53 document.getElementsByClassName("prduct-cart-empty")[0].style.display = isEmpty ? "flex" : "none"; 54 document.getElementsByClassName("prduct-list")[0].style.display = isEmpty? "none": "block"; 55 $("#cart-total .count").text(this.count); 56 $("#cart-total .total").text(this.total); 57 $(".header-cart .count").attr('data-count',this.count); 58 } 59 Cart.prototype.updateCart = function(product){ 60 product = { 61 id:product.goodsid, 62 title:product.title, 63 img:product.thumb, 64 price:product.ggprice, 65 count:Number(product.total), 66 delId:product.id, 67 url:product.url, 68 } 69 let pro = this.products.find(m=>m.id == product.id); 70 if(pro){ 71 pro.count++; 72 document.getElementById(`pro_item_${product.id}`).children[1].children[1].children[0].innerText= pro.count 73 }else{ 74 this.products.unshift(product); 75 document.getElementsByClassName("prduct-list")[0].innerHTML += cart.createHtml(product); 76 // 动态添加事件 77 $(document).on('click', `#pro_item_${product.id} .del_btn`, function(event){ 78 cart.delete(product); 79 }); 80 } 81 this.updateTotal(); 82 } 83 Cart.prototype.getCart = function(){ 84 let option = { 85 url:"/sm/mm.php?action=cart_list", 86 dataType:"json", 87 type:"get", 88 data:"", 89 success:function(data){ 90 if(data.status){ 91 cart.products=[]; 92 document.getElementsByClassName("prduct-list")[0].innerHTML=""; 93 for(let i=0;i<data.data.length;i++){ 94 cart.updateCart(data.data[i]); 95 } 96 }else{ 97 notice.updateNotice("notice-error",`获取购物袋失败: ${data.message}`); 98 console.error(`获取购物袋失败: ${data.message}`); 99 } 100 }, 101 error:function(xhr){ 102 notice.updateNotice("notice-error",`操作发生错误：${xhr.status} ${xhr.statusText}`); 103 console.error(`操作发生错误：${xhr.status} ${xhr.statusText}`); 104 } 105 } 106 $.ajax(option); 107 } 108 let cart = new Cart(); 109 function getProduct(){ 110 let detail = $("#product_detail"); 111 // let img = $($("#products-banner").find(".main-img-item")[0]).css("backgroundImage").split('(')[1].split(')')[0] 112 // if(img.indexOf('"') > -1){ 113 // img = img.split('"')[1].split('"')[0]; 114 // } 115 let id = Number(detail.find("#pro_id").val()); 116 // let title = detail.find(".proTitle").text(); 117 // let price = Number(detail.find(".proPrice span").text()); 118 let total = 1; 119 // let cur = { 120 // goodsid:id, 121 // title:title, 122 // thumb:img, 123 // ggprice:price, 124 // total:total, 125 // } 126 let option = { 127 url:"/sm/mm.php", 128 dataType:"json", 129 type:"post", 130 data:`id=${id}&num=${total}&action=cart_add`, 131 success:function(data){ 132 if(data.status){ 133 // cart.updateCart(cur); 134 cart.getCart(); 135 notice.updateNotice("notice-success","已为您加入购物袋！") 136 }else{ 137 notice.updateNotice("notice-error",`加入购物袋失败: ${data.message}`); 138 console.error(`加入购物袋失败: ${data.message}`); 139 } 140 }, 141 error:function(xhr){ 142 notice.updateNotice("notice-error",`操作发生错误：${xhr.status} ${xhr.statusText}`); 143 console.error(`操作发生错误：${xhr.status} ${xhr.statusText}`); 144 } 145 } 146 $.ajax(option); 147 }
1 <div class="cart-content"> 2 <p class="tip-title"> <strong>最新加入的商品</strong></p> 3 <div class="prduct-list"></div> 4 <div class="prduct-cart-empty"> 5 <svg t="1573549688905" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13577" width="30" height="30"><path d="M278.016 933.888a64.512 64.512 0 1 0 129.024 0 64.512 64.512 0 1 0-129.024 0Z" p-id="13578" fill="#8a8a8a"></path><path d="M940.032 569.344l49.152-263.68c2.56-14.336-6.656-28.16-20.992-30.72s-28.16 6.656-30.72 20.992l-49.152 263.68c-6.144 32.256-32.768 56.32-65.536 58.88L298.496 660.48c-32.768-206.848-57.344-354.816-73.728-445.952L215.04 161.792c-5.12-27.648-9.216-45.568-11.776-54.272-20.992-71.168-132.096-50.176-144.384-47.616-14.336 3.072-23.552 16.896-20.48 31.232s16.896 23.552 31.232 20.48c31.744-6.656 78.848-5.12 83.456 10.752 9.728 32.256 44.032 236.544 102.912 606.208 8.192 51.712 51.712 89.088 103.936 89.088l540.16 2.048c14.336 0 26.112-11.776 26.112-26.112s-11.776-26.112-26.112-26.624l-540.16-2.048c-26.112 0-48.128-18.944-52.224-45.056-0.512-2.56-0.512-5.12-1.024-7.68l520.192-41.472c56.32-4.096 102.912-46.08 113.152-101.376z" p-id="13579" fill="#8a8a8a"></path><path d="M757.248 933.888a64.512 64.512 0 1 0 129.024 0 64.512 64.512 0 1 0-129.024 0Z" p-id="13580" fill="#8a8a8a"></path><path d="M446.464 432.128l-71.168 98.304h60.928c6.656 0 12.288 5.632 12.288 12.288 0 6.656-5.632 12.288-12.288 12.288H346.624c-7.168 0-12.288-5.632-12.288-12.288 0-2.56 1.024-5.12 2.56-7.68l72.192-97.792h-56.32c-6.656 0-12.288-5.632-12.288-12.288 0-6.656 5.632-12.288 12.288-12.288h83.968c7.168 0 12.288 5.632 12.288 12.288-0.512 2.56-1.024 5.12-2.56 7.168z" p-id="13581" fill="#8a8a8a"></path><path d="M639.488 269.824L568.32 368.128h60.928c6.656 0 12.288 5.632 12.288 12.288 0 6.656-5.632 12.288-12.288 12.288h-89.6c-7.168 0-12.288-5.632-12.288-12.288v-0.512c0-2.56 1.024-5.12 2.56-7.68l72.192-97.792h-56.32c-6.656 0-12.288-5.632-12.288-12.288 0-6.656 5.632-12.288 12.288-12.288H629.76c7.168 0 12.288 5.632 12.288 12.288-0.512 3.072-1.024 5.632-2.56 7.68z" p-id="13582" fill="#8a8a8a"></path><path d="M866.304 116.736l-102.912 143.36h88.064c10.24 0 17.92 8.192 17.92 17.92 0 10.24-8.192 17.92-17.92 17.92h-130.048c-10.24 0-18.432-8.192-18.432-18.432v-0.512c0-4.096 1.024-7.68 3.584-10.752l104.96-142.336h-82.432c-10.24 0-17.92-8.192-17.92-17.92 0-10.24 8.192-17.92 17.92-17.92h122.368c10.24 0 18.432 8.192 18.432 18.432 0 3.584-1.024 7.168-3.584 10.24z" p-id="13583" fill="#8a8a8a"></path></svg> 6 <span>您的购物袋是空的，赶紧选购吧！</span> 7 </div> 8 <div class="total-bottom" id="cart-total"> 9 共<strong><span class="count">0</span></strong>件商品，共计<strong>￥ <span class="total">0</span></strong> 10 </div> 11 <div class="cart-buy-qrcode"> 12 <img src="qrcode.png" alt=""> 13 </div> 14 <div class="total-bottom" style="background-color: #fff;"> 15 <strong>微信扫码购买</strong> 16 </div> 17 </div>
js 面向对象编程
1 .header-cart{ 2 display: inline-block; 3 margin-top: 22px; 4 position: relative; 5 cursor: pointer; 6 margin-right: 10px; 7 text-align: center; 8 display: flex; 9 display: -webkit-flex; 10 flex-direction: column; 11 justify-content: center; 12 } 13 .header-cart .cart-icon .count::after{ 14 content: attr(data-count); 15 position: absolute; 16 right: -7px; 17 top: 0px; 18 width: 22px; 19 height: 22px; 20 color: #fff; 21 background-color: #ffa066; 22 font-size: 12px; 23 border-radius: 100%; 24 text-align: center; 25 padding: 3px 4px; 26 display: block; 27 } 28 .header-cart .cart-content{ 29 right: -1000px; 30 opacity: 0; 31 } 32 .header-cart .cart-content:hover, 33 .header-cart .cart-icon:hover + .cart-content 34 { 35 opacity: 1; 36 right: 0; 37 } 38 .hasLogin .phoneTail{ 39 font-size:13px; 40 color:#fff; 41 margin-bottom: 0; 42 } 43 .header-cart .cart-content{ 44 position: absolute; 45 right: -1000px; 46 width: 300px; 47 /* max-100%; */ 48 top: 52px; 49 background-color: #fff; 50 border: 1px solid #ededed; 51 transition: .5s; 52 z-index: 10; 53 } 54 .header-cart .cart-content::before{ 55 content: ""; 56 position: absolute; 57 border-top: 10px solid #fff; 58 border-right: 10px solid #fff; 59 transform: rotate(-45deg); 60 top: -10px; 61 right: 11px; 62 border-bottom: 10px solid transparent; 63 border-left: 10px solid transparent; 64 } 65 .header-cart .cart-content .prduct-cart-empty{ 66 display:flex; 67 display:-webkit-flex; 68 justify-content: center; 69 align-items: center; 70 padding: 20px 0px; 71 } 72 .header-cart .cart-content .prduct-cart-empty span{ 73 margin: 0px 10px; 74 color: #999; 75 } 76 .header-cart .cart-content .tip-title{ 77 padding: 10px; 78 text-align: left; 79 } 80 .header-cart .cart-content .total-bottom{ 81 padding: 10px; 82 background-color: #eeeeee; 83 letter-spacing: 2px; 84 padding: 10px; 85 } 86 .header-cart .cart-content .prduct-list{ 87 margin-bottom: 10px; 88 max-height: 50vh; 89 overflow-y: auto; 90 } 91 .header-cart .cart-content .product-item{ 92 display: flex; 93 display: -webkit-flex; 94 padding: 10px; 95 } 96 .header-cart .cart-content .product-item .pro-img{ 97 width: 60px; 98 height: 60px; 99 background-size: cover; 100 background-repeat: no-repeat; 101 background-position: center; 102 border: 1px solid #ededed; 103 } 104 .header-cart .cart-content .product-item .desc p{ 105 height: 20px; 106 margin: 0; 107 padding: 0px 10px; 108 width: 200px; 109 font-size: 13px; 110 text-align: left; 111 } 112 .header-cart .cart-content .product-item .desc p a{ 113 text-decoration: none; 114 } 115 .header-cart .cart-content .product-item .desc p a, 116 .header-cart .cart-content .product-item .desc p a:focus, 117 .header-cart .cart-content .product-item .desc p a:active{ 118 color:#333; 119 } 120 .header-cart .cart-content .product-item .desc p a:hover{ 121 color: #ffa066; 122 } 123 124 .header-cart .cart-content .product-item .desc p:first-child{ 125 height: 40px; 126 text-overflow: -o-ellipsis-lastline; 127 overflow: hidden; 128 text-overflow: ellipsis; 129 display: -webkit-box; 130 -webkit-line-clamp: 2; 131 -webkit-box-orient: vertical; 132 } 133 .header-cart .cart-content .product-item .del_btn{ 134 height: 22px; 135 align-self: center; 136 } 137 138 /* 购物车二维码 */ 139 .header-cart .cart-content .cart-buy-qrcode{ 140 width:60%; 141 margin:0 auto; 142 } 143 .header-cart .cart-content .cart-buy-qrcode img{ 144 width:100%; 145 }