第170天：面向对象-产品详情页开发

 1 /**
 2  * Created by Administrator on 2018/2/4.
 3  */
 4 
 5 function Product(){
 6     //名称
 7     this.name="";
 8     //原价
 9     this.price=0;
10     //团购价
11     this.groupPrice=0;
12     //数量
13     this.buySum=0;
14     //描述
15     this.description="";
16     //图片
17     this.images=[{small:'',big:''},{small:'',big:''},{small:'',big:''}];
18 }
19 
20 Product.prototype={
21     //绑定基本信息
22     bindBasic:function(){
23         $('#pname').html(this.name);
24         $('#price').html(this.price);
25         $('#groupPrice').html(this.groupPrice);
26         $('#buyCount').html(this.buySum);
27         $('#description').html(this.description);
28     
30     },
31     //绑定图片列表
32     bindImages:function(){
33         //拼接
34         var str='';
35         for(var i=0;i<this.images.length;i++){
36             str+='<li>';
37             str+='<img class="etalage_thumb_image" src="'+this.images[i].small+'" class="img-responsive" />';
38             str+='<img class="etalage_source_image" src="'+this.images[i].big+'" class="img-responsive" />';
39             str+='</li>';
40 
41         }
42 
43         $('.etalage').html(str);
44 
45         $('#etalage').etalage({
46             thumb_image_width: 250,
47             thumb_image_height: 300
48         });
49 
50     }
51 }

 1 /**
 2  * Created by Administrator on 2018/2/4.
 3  */
 4 function Cart(){
 5     //购物车的产品个数
 6     this.sum=0;
 7     //总价格
 8     this.allPrice=0;
 9     //产品列表
10     this.products=[];
11 }
12 
13 Cart.prototype={
14     //结算 计算总价格
15     accountClose:function(){
16         var sum=0;
17         for(var i=0;i<this.products.length;i++){
18             sum+=this.product[i].price;
19         }
20         return sum;
21     },
22 
23     //获取产品总数
24     getSum:function(){
25         return this.products.length;
26     },
27 
28     //绑定基本信息 个数+总价格
29     bindBasic:function(){
30         //个数
31         $('.cartsum').html(this.getSum());
32         //总价格
33         $('.allPrice').html(this.accountClose());
34     },
35 
36     //绑定列表
37     bindList:function(){
38         var str='';
39         for(var i=0;i<this.products.length;i++){
40             str+='<div class="cart_box">';
41             str+='<div class="message">';
42             str+='<div class="alert-close"></div>';
43             str+='<div class="list_img"><img src="'+this.products[i].images.small+'" class="img-responsive" alt=""/></div>';
44             str+='<div class="cart_box">';
45         }
46 
47       $('.shopping_cart').html(str);
48 
49 
50 
51     }
52 
53 
54 
55 }

 1 /**
 2  * Created by Lenovo on 2016/1/3.
 3  */
 4 
 5 
 6 /* 使用对象 搭积木*/
 7 
 8 /*绑定产品*/
 9 
10 window.onload =function(){
11 
12     /*实例化一个对象：为什么只有一个实例：再次理解抽象和具体：类和实例的区别*/
13     var product =  new Product();
14     product.name='HM休闲服登山包2018';
15     product.description='今天心情好，很好，非常好，马上过年了，真的真的真的好开心！';
16     product.price=194;
17     product.groupPrice=180;
18     product.buySum=20000;
19     /*数据结构：变量 数组（分成两种） json字典*/
20     product.images=[
21         {small:'../images/s11.jpg',big:'../images/s11.jpg'},
22         {small:'../images/s12.jpg',big:'../images/s12.jpg'},
23         {small:'../images/s13.jpg',big:'../images/s13.jpg'}
24     ];
25 
26 
27     /*面向对象编程*/
28     /*使用*/
29 
30     //现在：先宏观思考怎么做，然后再写细节
31 
32     /*绑定基本信息*/
33     product.bindBasic();
34 
35     /*绑定图片*/
36     product.bindImages();
37 
38 
39 //绑定事件
40 $('#btnaddcart').click(function(){
41     //购物车新增一个产品
42     cart.products.push(product);
43     //更新购物车 - 重新绑定购物车
44     cart.bindBasic();
45     cart.bindList();
46     //滑动到最顶部
47     $(window).scrollTop(0);
48 });
49 
50 
51 
52     /*绑定购物车*/
53 
54     var cart = new Cart();
55     cart.sum=10;
56     cart.allprice=8000;
57 
58     //假设购物车中已经有三个产品
59     cart.products.push(product);
60     cart.products.push(product);
61     cart.products.push(product);
62 
63     //绑定基本信息
64     cart.bindBasic();
65     //绑定购物车里面的产品列表
66     cart.bindList();
67 }