Vue 单页面开发----实战五 购物车功能

由于是使用的VUE版的YDUI。所以购物车的标准按照规定的写法来。

【1】展示商品信息

这个就很简单了，找到对应的样式，该添加的添加，该修改的样式稍微修改一下。控制选中了哪些商品有个双向数据绑定的变量。可以查阅一下文档信息。

【2】删除功能

要用到v-show，或者v-if指令绑定一个变量来实现购物车商品的删除。

但是很多情况下我们获取后台的商品list并没有这个变量属性。那么该怎么办呢。$set()方法实现添加属性。

在获取到list的时候给每个商品添加一个是否可以见的属性值：

// 用isShow属性来表示该商品是否显示或隐藏状态，在对应的div位置绑定v-if或v-show指令
let _list = response.list;
_list.forEach(element => {
    if (typeof (element.isShow) == 'undefined') {
        this.$set(element, 'isShow', true);
    }
});

那么我们在选择需要删除的商品后，会得到所有选择的商品id。然后在list中遍历商品ld，来实现对isShow属性的控制：

//后台已经删除成功，遍历list改变isShow的属性值
if (response.errCode == '0') {
     this.list.forEach(element => {
         let index = this.sellectCommodityIds.indexOf(element.commodityId);
         if (index > -1 ) {
             element.isShow = false;
             //将删除的商品ID从数组中移除。
             this.sellectCommodityIds.splice(index, 1);
         }
      });
      this.calculateMoney();
}

【3】商品增减数量，选择商品。

文档中使用的是：yd-spinner。给该标签绑定一个回调方法，会自动返回val绑定的值及增减后的值。

选择商品使用的是一个双向数据绑定的变量。

计算总金额之类的就很简单了。也可以直接在前台计算。直接使用list里面的值遍历哪些被选中了，当然获取单价及数量。当然这个金额只是为了方便而已。

计算总金额最好写成一个计算属性来做。因为很多操作都需要重新计算金额。