vue2.0实现购物车和地址选配功能

购物车案例功能：

创建一个Vue实例
v-for渲染产品数据
Filter对金额和图片进行格式化
v-on实现产品金额的动态计算

功能比较简单，但是涉及到平时项目中常见的业务逻辑。可谓麻雀虽小，五脏俱全。

数据渲染

vue-resource插件来获取后端数据（推荐使用vue-axios，官网说vue-resource已不再维护），这里用的是本地的json数据来模拟。引入vue.js ，vue-resource.js，自己的js.

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="js/lib/vue-resource.js"></script>
<script src="js/cart1.js"></script>

cart.js中创建vue实例，data中声明个productList:[]来渲染数据，methods中声明函数cartView()来获取数据,mounted函数来执行这个cartView（mounted函数是el中的模板html,dom渲染完成再执行）

new Vue({
  el: '#app',
  data: {
    productList: []
  },
  mounted () {
    this.$nextTick(function () {
      this.cartView()
    })
  },  
  methods:{
    cartView() {
      this.$http.get('../data/cartData.json').then(res => {
        this.productList = res.data.result.list;
      })
    }
  }
})

注意我使用都是es6的写法，这里使用箭头函数，就不需要再获取父级作用域的this了。省略了var_ this = this
官网说，mounted函数应该这样使用保险一些：

mounted: function () {
  this.$nextTick(function () {
    // 代码保证 this.$el 在 document 中
  })
}

直接打开html是一定会出问题的，因为这里使用ajax来模拟获取后台数据产生了跨域，我使用了live-server插件来热启动，在本地的服务器上查看。

过滤器

使用过滤器来美化一下价格的样式，加上￥，并保留小数点2位。

  filters: {
    money(value, type) {
      return '￥' + value.toFixed(2) + type
    }
  },

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

全局注册过滤器可以在其它页面引用，局部过滤器只能在这个实例中使用

Vue.filter('money', function (value, type) {
  return '$' + value.toFixed(2) + type
})

业务逻辑

商品数量的加减功能

  changeNumber(item, way) {
      if( way < 0) {
        item.productQuantity --;
        if(item.productQuantity < 1) {
          item.productQuantity = 1
        }
      }else{
        item.productQuantity ++;     
      }
    },

<a @click="changeNumber(item,-1)">-</a>
<input type="text" value="0" disabled  v-model="item.productQuantity">
<a @click="changeNumber(item, 1)">+</a>

changeNumber接受2个参数，第一个表示商品，第二个表示加或减

单选按钮的确认和取消

因为给的json数据里没有商品的选中和取消属性，我们就通过Vue.set来给商品注册这个属性，绑定class，如果为true，check样式就显示。并通过绑定点击事件来取反，来达到选择和取消。

 selectProduct(item) {
      if (typeof item.checked == 'undefined') {
        this.$set(item, 'checked', true)
      }else{
        item.checked = !item.checked
      }
    }

 <a  class="item-check-btn" :class="{'check': item.checked}" @click="selectProduct(item)">

全选按钮的确认和取消

这个功能我们就可以在data中注册个属性来表示。声明属性checkAll:false ，并绑定到class上，表示默认的是没有选中。绑定点击事件，传入参数true表示全选，此时checkAllFlag中this.checkAll = true，全选生效。同理，传入false，this.checkAll = false，取消全选

<span class="item-check-btn" :class="{'check':checkAll}" @click="checkAllFlag(true)">
<a class="item-del-btn" :class="{'check':checkAll}" @click="checkAllFlag(false)" >

checkAllFlag(flag) {
      this.checkAll = flag;
 }

那么，怎么通过全选达到商品也被选中的效果呢？

    checkAllFlag(flag) {
      this.checkAll = flag;
      this.productList.forEach((item, index) => {
        if(typeof item.checked == 'undefined') {
          this.$set(item, 'checked', flag)
        }else{
          item.checked = flag
        }
      })
    }

全选的时候，传入参数true，checkAll属性为true，同时，遍历商品的列表，给商品注册checked：true。取消全选同理。

总金额的计算

定义一个方法来计算总计额返回给data里的totalMoney.注意的是商品被选中的时，即item.checked为true时，totalMoney才计算。

   calcTotalMoney() {
      this.totalMoney = 0;
      this.productList.forEach((item, index) => {
        if(item.checked) {
          this.totalMoney += item.productPrice*item.productQuantity
        }
      })
    }

删除订单功能

data中声明delFlag默认为false，小垃圾桶图标绑定事件，删除界面v-bind:class=“{‘md-show’: delFlag}” ，md-show样式在delFlag=true的时候应用了。关闭按钮绑定点击事件delFlag=false，这里注意的是有一个遮罩层，用v-if=“delFlag”来控制显示和隐藏。

小垃圾桶绑定事件delConfirm(item)，让curProduct变量来保存此时的商品item。

    delConfirm(item) {
      this.delFlag = true;
      this.curProduct = item //声明curProduct属性来保存此时的item
    },

然后在删除功能中，获取这个商品item的index，再用splice方法删除。

    delProduct() {
      var index = this.productList.indexOf(this.curProduct)
      this.productList.splice(index, 1);
      this.delFlag = false
    }

好了，到这里，购物车的一些基本功能基本上都实现了。

地址选配功能

跟购物车功能类似，或许数据，挂在到mounted函数上，这里不同的是用计算属性computed获取数组的3项，然后在dom中渲染，

   computed: {
        filterAddress: function () {
            return this.addressList.slice(0, this.limitNum) //获取addressList的前三个
        }
    },

 <li v-for="(item,index) in filterAddress" ></li>

列表选项问题，配送方式的点击选中如下实现：

 <li :class="{'check':shippingMethod == 1}" @click="shippingMethod = 1">
    <div class="name">标准配送</div>
    <div class="price">Free</div>
</li>
 <li :class="{'check':shippingMethod == 2}" @click="shippingMethod = 2">
    <div class="name">高级配送</div>
    <div class="price">180</div>
</li>

地址列表如下实现：

 <li v-for="(item,index) in filterAddress"  :class="{'check': index == currentIndex}"  @click="currentIndex = index">

点击此地址，将索引index赋值给currentIndex,那么cunrrentIndex==index成立时，check样式实现。
这里是很好的2种不同情况下的实现方式，在以后的项目中可能会经常遇到。

vue2.0实现购物车和地址选配功能

推荐阅读更多精彩内容