面向对象编程

  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 }