页面框架
![]()
屏幕快照 2018-03-08 上午12.08.57.png
分析：数据都是用vuex购物车数据，首先也是需要拿到数据，在组件中引入，然后拿到购物车数据，通过computed获取即可。然后绑定获取的数据。
难点：增加减少数量。其实就是操作的是购物车里面的count属性即可，可以在vuex中写加减的两个方法，然后都是获取ID，通过循环购物车数组，比对ID，然后增减对应的数据的count即可。
功能
- 购物车加减
- 删除商品
- 商品勾选，全选
1 新建组件 ： cart.vue
index.js中引入
import Cart from '@/views/cart'
{
path: '/cart',
name: 'Cart',
component: Cart
}
2 删除商品，增减商品
2-1 首先需要引入购物车数据
// 引入数据
import itemsData from '@/lib/newItemsData'
// 弹窗
import prompt from '@/components/prompt'
2-2 增减数量功能 ： 在index.js中添加数量增减的方法
牢记： 增加减少数量，你需要控制的是购物车数据中的count属性，并且都是需要比对ID
思路：循环购物车数据，通过比对ID，找到对应的这条数据
computed: {
//获取购物车数据
carPanelData(){
return this.$store.state.carPanelData
},
//总数量
count(){
return this.$store.getters.totleCount
}
}
// 商品数量增加按钮
plusCarPanelData (state,id) {
state.carPanelData.forEach((goods,index) => {
if (goods.sku_id === id) {
if (goods.count >= goods.limit_num) {
state.maxOff = true
return
}
goods.count++
}
})
},
// 减少商品数量按钮
subCarPanelData (state,id) {
state.carPanelData.forEach((goods,index) => {
if (goods.sku_id === id) {
goods.count--
if (goods.count <= 1) {
goods.count = 1
}
}
})
}
======================
<span class="down"
:class="{'down-disabled':item.count<=1}"
@click="subCarPanelData(item.sku_id)"
>-</span>
<span class="up"
@click="plusCarPanelData(item.sku_id)"
:class="{'up-disabled':count>=item.limit_num}"
>+</span>
2-2 删除商品
删除商品的思路 ： 删除购物车的中这条数据。循环购物车数据，然后比对id，删除即可
delCarPanelData (state,id) {
// 通过比对ID，如果存在，就删除此条数据
state.carPanelData.forEach((goods,index) => {
if (goods.sku_id === id) {
state.carPanelData.splice(index,1)
return
}
})
}
===============
// 删除商品
delCarPanelData(id){
this.$store.commit('delCarPanelData',id)
}
3 商品单选
单选分析 ： 商品是否是选中状态，实际上是给这个商品加一个判断的属性，每次加进来购物车肯定是默认是选中状态的，取消之后才改变选中的值，那么在第一次添加的时候给它加一个判断的值。
// 第一次点击添加给数据加checked属性
Vue.set(goodsData,'checked',true)
在点击select按钮时，将这个属性值取反即可。
// 商品select
checkGoods (state,id) {
state.carPanelData.forEach((goods) => {
if (goods.sku_id === id) {
goods.checked = !goods.checked
return
}
})
}
===========
// 商品勾选按钮
checkGoodsHandel(id){
this.$store.commit('checkGoods',id)
}
4 商品全选触发
思路：涉及到计算，需要放到getters中。在方法中设置一个开关，默认是true，循环购物车数组，如果有一个不是选中的，那么就将开关设置为false。默认返回开关值即可。
// 全选
allChecked (state) {
let allChecked = true
state.carPanelData.forEach((goods) => {
if (!goods.checked) {
allChecked = false
return
}
})
return allChecked
}
============
// computer中 ： 全选
allChecked(){
return this.$store.getters.allChecked
}
============
<span class="blue-checkbox-new"
:class="{'checkbox-on':item.checked}" >
4 全选按钮点击
@click="allCheckGoods(allChecked)"
// vuex :全选按钮
allCheckGoods (state) {
state.carPanelData.forEach((goods) => {
goods.checked = !goods.checked
})
}
//组件
allCheckGoods(allChecked){
this.$store.commit('allCheckGoods')
}
5 购物详情页商品总数和总额计算
思路 ： 都是先设置一个变量，然后将计算结果返回给这个变量
checkedCount (state) {
let count = 0
state.carPanelData.forEach((goods) => {
if (goods.checked) {
count += goods.count
}
})
return count
}
// 购物详情页商品金额计算
checkedPrice (state) {
let price = 0
state.carPanelData.forEach((goods) => {
if (goods.checked) {
price += goods.count * goods.price
}
})
return price
}
==========
// 商品总数
checkedCount(){
return this.$store.getters.checkedCount
},
// 商品全额
checkedPrice(){
return this.$store.getters.checkedPrice
}
6 删除选中商品
循环购物车数组，将选中的商品在购物车中删除。用splice方法，第一个参数是删除的下标，第二个参数是删除的数量。
delCheckedGoods (state) {
state.carPanelData.forEach((goods,index) => {
if (goods.checked) {
state.carPanelData.splice(index,1)
}
})
}
注意 ： 这样写有一个问题！！！！之前面试被问到过！！！！
点击删除4个商品，结果只删除了两个。
原因： splice删除数据的时候是从第一位删除的，当第二次循环进来的时候，数据已经被改变了，所以前进过来的这一项数组就被跳过了。
解决小技巧 ： 正序删除会改变，那么就倒着删除。
// 删除选中商品
delCheckedGoods (state) {
let i = state.carPanelData.length
// i--：从后往前走
while (i--) {
// 如果某一项是选中的
if (state.carPanelData[i].checked) {
state.carPanelData.splice(i,1)
}
}
}
这个一个数组删除小技巧，需要牢记！！！
总结：这几个功能我自己一个都没做出来。主要是因为经验不足。
1.勾选商品，效果是如果选中的，点击就成了未选中，反之亦然。首先需要循环购物车数据，比对ID，将checked值取反即可
