web-app/store/modules/cart.js

import Vue from 'vue'
import { deepClone } from '@/common/util/index.js'

// 解压
const unzip = b64Data => {
	let strData = atob(b64Data);
	const charData = strData.split('').map(function (x) {
		return x.charCodeAt(0);
	});
	const binData = new Uint8Array(charData);
	const data = pako.inflate(binData);
	strData = String.fromCharCode.apply(null, new Uint16Array(data));
	return decodeURIComponent(strData);
}

// 压缩
const zip = str => btoa(pako.gzip(encodeURIComponent(str), {to: 'string'}))

const storage = list => {
	document.cookie = `CART=${zip(JSON.stringify(list))}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/;`
}

let cartinfo = []

try{
	cartinfo = document.cookie.split(';').findIndex((e) => e.match('CART')) == -1 ? [] : 
	JSON.parse(unzip(document.cookie.split(';')[document.cookie.split(';').findIndex((e) => e.match('CART'))].split('=')[1]))
}catch(e){
	cartinfo = []
}

export default {
	namespaced: true,
	state: {
		list: cartinfo
	},
	getters: {
		shopcarNum: state => { // 计算购车商品数量
			return state.list.reduce((t, e) => {
				return e.size.reduce((tt, ee, ii) => {
					return tt + e.cart[ii]
				}, t)
			}, 0)
		},
		choosedNum: state => { // 计算购车已选商品数量
			return state.list.reduce((t, e) => {
				return e.size.reduce((tt, ee, ii) => {
					return tt + (e.sizeChoosed[ii] ? e.cart[ii] : 0)
				}, t)
			}, 0)
		},
		choosedPrice: state => { // 计算购车已选商品价值
			return state.list.reduce((t, e) => {
				return e.size.reduce((tt, ee, ii) => {
					return tt + (e.sizeChoosed[ii] ? e.cart[ii] * e.money : 0)
				}, t)
			}, 0)
		},
		// choosedList: state => { // 获取购物车已选中的商品列表
		// 	const list = deepClone(state.list)
		// 	for(let i = list.length - 1; i >= 0; i --) {
		// 		if (!list[i].choosed) {
		// 			list.splice(i, 1)
		// 		} else {
		// 			list[i].typeList.forEach(ee => {
		// 				Object.keys(ee.choosed).forEach(eee => {
		// 					if (!ee.choosed[eee]) {
		// 						delete ee.size[eee]
		// 						delete ee.choosed[eee]
		// 					}
		// 				})
		// 			})
		// 		}
		// 	}
		// 	return list
		// },
		choosedAll: state => { // 计算购车是否为全选状态
			const list = deepClone(state.list)
			list.forEach(goodItem => {
				for(let i = goodItem.cart.length - 1; i >= 0; i --) {
					if (goodItem.cart[i] === 0) {
						goodItem.cart.splice(i, 1)
						goodItem.size.splice(i, 1)
						goodItem.size_id.splice(i, 1)
						goodItem.sizeChoosed.splice(i, 1)
					}
				}
			})
			return list.every(e => {
				return e.sizeChoosed.every(ee => ee)
			})
		}
	},
	mutations: {
		ADD(state, payload) { // 添加商品到购物车 (已存在合并,不存在添加)
			const index = state.list.findIndex(e => e.id === payload.id) // 检查添加商品是否存在于购物车中
			if(index === -1) {
				state.list.push(payload)
			} else {
				Object.assign(state.list[index], payload)
			}
			storage(state.list)
		},
		CLEAREMPTYITEM(state) {
			for(let i = state.list.length - 1; i >= 0; i --) {
				if (state.list[i].cart.reduce((t, e) => t + e, 0) === 0) { // 当某个尺码数量变为 0 时,进行一波操作,删除这件商品的这个类型或者商品
					state.list.splice(i, 1)
				}
			}
			storage(state.list)
		},
		COUNTCHANGE(state, payload) { // 修改购物商品数量相关操作
			Vue.set(state.list[payload.index].cart, payload.sizeIndex, payload.value)
			if (payload.del && payload.value === 0 && state.list[payload.index].cart.reduce((t, e) => t + e, 0) === 0) { // 当某个尺码数量变为 0 时,进行一波操作,删除这件商品的这个类型或者商品
				state.list.splice(payload.index, 1)
			}
			storage(state.list)
		},
		CHOOSEDCHANGE(state, payload) { // 修改选择状态相关操作
			if (payload.length === 3) { // 点击 选择/取消 商品类型, 选择/取消 该商品商品类型,同时和 选择/取消 商品联动
				state.list[payload[1]].sizeChoosed[payload[2]] = payload[0]
				state.list[payload[1]].choosed = state.list[payload[1]].sizeChoosed.some((e, i) => e && state.list[payload[1]].cart[i])
			} else if (payload.length === 2) { // 点击 选择/取消 商品, 选择/取消 该商品所有的类型
				state.list[payload[1]].choosed = payload[0]
				state.list[payload[1]].sizeChoosed = Array(state.list[payload[1]].sizeChoosed.length).fill(payload[0])
			} else { // 点击 取消/全选
				state.list.forEach((e, i) => {
					e.choosed = payload[0]
					e.sizeChoosed = Array(e.size.length).fill(payload[0])
				})
			}
			state.list = JSON.parse(JSON.stringify(state.list))
			storage(state.list)
		}
	}
}