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

247 lines
8.1 KiB
JavaScript
Raw Normal View History

2023-09-22 15:41:37 +08:00
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,
};