shopping-cart.git

github线上展示网址：https://chenmonkey.github.io/shopping-cart/

一、准备阶段

1、预备知识

2、过滤器filter：对接口返回的字段进行一个业务转换

3、引入已创建好的cart.html、adress.html、css文件、img文件、data文件（.json文件相当于数据库）

二、购物车实现

1、创建一个vue的实例

（1）创建package.json

（2）安装Vue（--save：把软件安装到开发的这个仓库中去），将vue.min.js复制放在js/lib文件夹下

（3）安装vue-resource，将vue-resource.min.js复制放在js/lib文件夹下

在项目中隐藏了文件夹node_modules，但是在电脑的文件里有显示

（4）创建cart.js文件（Vue实例）

2、通过v-for指令渲染产品数据

（1）使用resource插件调用json数据

this.$http.get("data/cartData.json",{"id":123}).then(function(res){}

（2）v-for渲染产品数据

<div class="item-name">{{item.productName}}</div>

<dd v-for="part in item.parts" v-text="part.partsName"></dd>（v-for里面可以套v-for）

<div class="item-price">{{item.productPrice}}</div>

<div class="item-price-total">{{item.productPrice*item.productQuantity}}</div>

3、vue过滤器的使用

（1）ES6语法：箭头函数：res=>{}

res=>{}它的作用域指向外层, 内层的this和外层的this达到同一个级别（=>相当于function；res相当于参数；{函数体}）

cartView:function(){
   let _this=this;
   this.$http.get("data/cartData.json",{"id":123}).then(res=>{
   this.productList=res.body.result.list;
   this.totalMoney=res.body.result.totalMoney;
});
}

（2）filters对数据金额进行转换

a. 对商品的金额进行格式化：属性值 | 过滤器名：<div class="item-price">{{item.productPrice | formatMoney}}</div>

filters:{ //（局部）过滤器
  formatMoney:function(value){
   return "￥"+value.toFixed(2); //返回货币符号和两位小数
  }
}

b. 对总金额进行格式化：<div class="item-price-total">{{item.productPrice*item.productQuantity | formatMoney}}</div>

c. 全局过滤器（写在vue实例之外）

Vue.filter("money",function(value,type){

return "￥" +value.toFixed(2)+type;

})

<div class="item-price-total">{{item.productPrice*item.productQuantity | money('元')}}</div>

4、单件商品金额计算和单选全选功能

（1）单件商品金额计算：

changeMoney:function(product,way){
   if(way>0){
product.productQuantity++;
   }else{
product.productQuantity--;
if(product.productQuantity<1){
product.productQuantity=1;
}
}
   }

（2）单击选择商品

a. 当在<a>标签中的class中添加check时，选择商品

b. 在<a>标签中绑定class，class是个object，object对象有一个键和值

c. 在cart.js中

selectedProduct:function(item){
  if(typeof item.checked=='undefined'){    //判断item里的checked是否存在
   //Vue.set(item,"checked",true);    //Vue全局注册，在item里面添加一个checked属性
      this.$set(item,"checked",true);    //局部注册
  }else{
   item.checked=!item.checked;
  }
}

（3）全选与取消全选

在cart.html：

在cart.js中：

selectedAll:function(flag){
   this.checkAll=flag;
   var _this=this;
   this.productList.forEach(function(item,index){
   if(typeof item.checked=='undefined'){
                _this.$set(item,"checked",true);
           }else{
             item.checked=_this.checkAll;
           }
});
}

5、商品总金额计算、删除功能

（1）商品总金额计算

a.    <div class="item-total">
                  Item total: <span class="total-price">{{totalMoney | formatMoney}}</span>
                </div>

   b.    calTotalPrice:function(){
   var _this=this;
_this.totalMoney=0;//遍历之前总金额清零
   this.productList.forEach(function(item,index){
   if(item.checked){
   _this.totalMoney+=item.productPrice*item.productQuantity;
   }
   })

}

c. 在changeMoney、selectedProduct、selectedAll方法里调用calTotalPrice方法

（2）删除功能

在cart.html中：

<div class="md-modal modal-msg md-modal-transition" id="showModal" v-bind:class="{'md-show':delFlag}"> //双向绑定，控制提示框的显示与隐藏

<div class="md-overlay" v-if="delFlag"></div> //遮罩层，点击删除时一起弹出来的阴影层

在cart.js中：

delConfirm:function(item){
       this.delFlag=true;
       this.curProduct=item;
    },
    delProduct:function(){
    var index=this.productList.indexOf(this.curProduct);//获取当前商品的索引
    this.productList.splice(index,1);
    this.delFlag=false;
    }

三、地址列表案例

1、通过v-for指令渲染地址数据以及数组过滤

（1）构建Vue实例

new Vue({
el:'.container',
data:{
  addressList:[]
},
mounted:function(){//钩子函数
  this.$nextTick(function(){
   this.getAddressList();
  }) ;
},

filters:{
},
methods:{
  getAddressList:function(){    /*渲染地址*/
    }
   })

  }
}
})；

（2）使用resource插件调用json数据

this.$http.get("data/address.json").then(response=>{}

（3）使用v-for渲染出地址

<dt>{{item.userName}}</dt>
<dd class="address">{{item.streetName}}</dd>
<dd class="tel">{{item.tel}}</dd>

（4）默认只显示3张地址卡片，实现对数据的过滤

computed:{
filterAddress:function(){
return this.addressList.slice(0,this.limitNum);
}
}

（5）点击more，显示所有地址卡片

在指令里面不要使用this

2、卡片选择、设置默认等功能实现

（1) 卡片选择（每一张卡片都对应着一个索引）

（2）设为默认

当新的地址设为默认后，原默认地址取消

setDefault:function(addressId){ /*选择默认地址*/
this.addressList.forEach(function(address,index){
   if(address.addressId==addressId){
address.isDefault=true;
}else{
address.isDefault=false;
   }
   })
  }

（3）配送方式选择

3、删除地址功能

与购物车中删除商品功能相似

4、修改地址功能

在address.html中

在address.js中

revConfirm:function(item){
   this.revFlag=true;
   this.currentIndex=item;
  }

慕课网学习之使用vue实现购物车和地址选配功能