xlcs/atguigu-tuan/store/modules/cart.js

247 lines
8.1 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import Vue from "vue"
const state = {
cartList: [],
activityCartList: {}
};
const getters = {
// 检查商品是否存在于购物车中
checkProductExists(state) {
return function (skuId) {
const pos = state.cartList.findIndex(item => item.skuId === skuId)
return pos === -1 ? false : true;
}
},
// 获取单个商品的购买数量
getProductSkuNum(state) {
return function (skuId) {
const index = state.cartList.findIndex(item => item.skuId === skuId);
return index !== -1 ? state.cartList[index].skuNum : 0;
}
},
// 获取购物车商品信息列表
getCartInfoList(state) {
return state.activityCartList.carInfoVoList
},
// 是否显示包含多个商品的内容
showMultiCheckbox(state) {
return function (index) {
return state.activityCartList.carInfoVoList[index].cartInfoList.length > 1
}
},
// 确认多个商品项是否为选中
getMultiCheckCart(state) {
return function (index) {
return state.activityCartList.carInfoVoList[index].cartInfoList.every(item => item.isChecked === 1);
}
},
// 获取多个商品项的ids
getMultiCheckedIds(state) {
return function (index) {
let ids = []
state.activityCartList.carInfoVoList[index].cartInfoList.forEach(item => ids.push(item.skuId));
return ids.toString();
}
},
// 判断是否全选
isAllSelected(state) {
let isAllSelected = true;
state.activityCartList.carInfoVoList && state.activityCartList.carInfoVoList
.forEach(carInfoItem => {
carInfoItem.cartInfoList.forEach(cartInfoItem => {
if (cartInfoItem.isChecked === 0) {
isAllSelected = false;
return false;
}
})
})
return isAllSelected;
},
// 获取购物车价格信息
getCartPriceInfo(state) {
if (!state.activityCartList.totalAmount) {
return {
couponReduceAmount: 0,
originalTotalAmount: 0,
totalAmount: 0
}
}
return {
couponReduceAmount: state.activityCartList.couponReduceAmount,
originalTotalAmount: state.activityCartList.originalTotalAmount,
totalAmount: state.activityCartList.totalAmount
}
},
// 确认选中购物车的数量
getSelectedCount(state) {
let count = 0;
state.activityCartList.carInfoVoList && state.activityCartList.carInfoVoList
.forEach(carInfoItem => {
carInfoItem.cartInfoList.forEach(cartInfoItem => {
if (cartInfoItem.isChecked === 1) {
count += cartInfoItem.skuNum;
}
})
})
return count;
},
// 获取购物车优惠券信息列表
getCartCouponInfoList(state) {
return state.activityCartList.couponInfoList
},
}
const mutations = {
// 添加到购物车
addShopMutation(state, payload) {
state.cartList.push(payload);
},
// 获取不带活动的购物车列表
getCartListMutation(state, payload) {
state.cartList = payload;
},
// 修改购物车数量
changeSkuNumMutation(state, payload) {
// skuId为商品id
// value为+1或者-1操作的递增值
// currentBuyNum为number-box组件当前商品购物车的操作值
const {
skuId,
value,
currentBuyNum
} = payload
const index = state.cartList.findIndex(item => item.skuId === skuId);
// 如果当前购买数量小于1则删除该商品
if (currentBuyNum < 1) {
state.cartList.splice(index, 1)
} else {
state.cartList[index].skuNum += value
}
},
// 删除购物车
deleteShopMutation(state, payload) {
// 删除cartList中的数据
const cartListIndex = state.cartList.findIndex(item => item.skuId === payload);
state.cartList.splice(cartListIndex, 1)
},
// 获取带活动的购物车列表
getActivityCartListMutation(state, payload) {
state.activityCartList = payload
},
}
const actions = {
// 添加到购物车
async addShopAction({
commit,
state
}, payload) {
// 给对象添加响应式数据属性
Vue.set(payload, 'skuNum', 1)
Vue.set(payload, 'skuId', payload.id)
Vue.set(payload, 'isChecked', 1)
await this._vm.$u.api.getAddToCart({
skuId: payload.id,
skuNum: payload.skuNum,
})
commit('addShopMutation', payload)
},
// 获取不带活动的购物车列表
async getCartListAction({
commit
}) {
let result = await this._vm.$u.api.getCartList()
commit('getCartListMutation', result)
},
// 修改购物车数量
async changeSkuNumAction({
commit,
dispatch
}, payload) {
const {
skuId,
value,
currentBuyNum,
isCart
} = payload;
// 如果当前购买的数量小于1则需要将该商品从购物车中删除否则进行购物车数量的修改
if (currentBuyNum < 1) {
dispatch('deleteShopAction', payload)
} else {
await this._vm.$u.api.getAddToCart({
skuId: skuId,
skuNum: value,
})
commit('changeSkuNumMutation', payload)
}
// 通过isCart判断是否是在购物车里进行购物车数量的改变
// 如果是在购物车里进行数量变化,则还需要获取带活动的购物车列表
if (isCart) dispatch('getActivityCartListAction')
},
// 删除购物车
async deleteShopAction({
commit,
dispatch
}, payload) {
const {
skuId,
value,
currentBuyNum,
isCart
} = payload;
await this._vm.$u.api.deleteCart(skuId);
// 删除时如果是在购物车列表操作,则需要重新获取数据
if (isCart) await dispatch('getActivityCartListAction')
await commit('deleteShopMutation', skuId)
},
// 获取带活动的购物车列表
async getActivityCartListAction({
commit
}, payload) {
let showLoading = false;
if (payload) showLoading = true
let result = await this._vm.$u.api.getActivityCartList({
showLoading
})
commit('getActivityCartListMutation', result)
},
// 切换购物车商品的选中状态
async changeCheckCartAction({
commit,
dispatch
}, payload) {
let result = await this._vm.$u.api.getCheckCart(payload)
dispatch('getActivityCartListAction')
},
// 对指定的多个商品进行选择/反选
async changeMultiCheckedCartAction({
commit,
dispatch
}, payload) {
let result = await this._vm.$u.api.postBatchCheckCart(payload)
dispatch('getActivityCartListAction')
},
// 对所有购物车商品进行全选/反选
async changeAllCheckCartAction({
commit,
dispatch
}, payload) {
let result = await this._vm.$u.api.getCheckAllCart(payload)
dispatch('getActivityCartListAction')
},
};
export default {
namespaced: true,
state,
mutations,
actions,
getters,
};