记一次购物车实现map以及computed计算

编写商城系统过程中，购物车是不可缺少的一部分，可以说购物车功能的实现可以说是非常重要的。

本次实现需要前置知识：

1. vue 基操
2. JavaScript 的数组操作（点这里看教程 -> 菜鸟教程）

而针对单商户和多商户的数据结构又有所不同

单商户

  shopCart: [
    {
        id: 9000012,
        name: "商品名称",
        price: "99.99",
        count: 1, // 数量
        checked: false, // 选择
        ...其他
    }
  ];

多商户

  shopCart: [
    {
        id: 6000012,
        name: "商户名称",
        goods: [
            {
                id: 9000012,
                name: "商品名称",
                price: "99.99",
                count: 1, // 数量
                checked: false, // 选择
                ...其他
            }
        ]
    }
  ];

页面结构什么的我就不贴上来了，按照数据结构循环并添加对应的数据操作组件，复选框，步数按钮操作等

余下的就是对数据组的操作，商品选中，商品数量更新，全选，价格计算等

源代码

        computed: {
            // 计算选中商品总价
            totalPrice: function() {
                var totalPrice = 0;
                that.shopCart.map(store => {
                    store.goods.map(good => {
                        // 数据变更一定要操作，不然无返回
                        totalPrice += good.checked ? good.count * parseFloat(good.price) : 0;
                    })
                })
                return totalPrice
            }
        },
        methods: {
            // 打开滑动操作
            openSwipeAction(si, gi, swiper) {
                // 购物车数据
                let shopCart = that.shopCart;
                // 单个选择
                shopCart[si].goods[gi].swiper = !swiper;
                // 商品选中
                shopCart[si].goods.map((goods, index) => {
                    if (index != gi) goods.swiper = false;
                })
            },
            // 滑动删除操作
            deleteSwiperAction(si, gi){
                // 购物车数据
                let shopCart = that.shopCart;
                // 单个选择
                shopCart[si].goods.splice(gi, 1);
                // 店铺删除
                if (!shopCart[si].goods.length)
                    shopCart.splice(si, 1);
            },
            // 单个改变选中
            checkboxChange(e, si, gi, checked) {
                // 购物车数据
                let shopCart = that.shopCart;
                // 单个选择
                shopCart[si].goods[gi].checked = !checked;
                // 全选
                const check = shopCart.every(store => {
                    return true === store.goods.every(goods => {
                        return true === goods.checked;
                    })
                })
                // 全选
                that.checkAll = check ? true : false;

            },
            // 全选
            onCheckAll(e) {
                // 购物车数据
                let shopCart = that.shopCart;
                // 全选状态
                that.checkAll = e.value;
                // 店铺循环
                shopCart.map(store => {
                    // 商品选中
                    store.goods.map(goods => {
                        goods.checked = e.value;
                    })
                })
            },
            comfirmCart() {
                // 购物车数据
                let shopCart = that.shopCart;
                // 读取选中状态
                var confirmData = [];
                // 店铺循环
                shopCart.map(store => {
                    // 商品选中
                    var goods = store.goods.filter((item) => {
                        return item.checked === true;
                    })
                    // 选中商铺A
                    if (goods.length) confirmData.push({ ...store,
                        goods
                    });
                })
                console.log('提交确认订单： ', confirmData);
                // 写入缓存 - 到确认订单再读取
                uni.setStorageSync('trade', confirmData)
                // 跳转页面
                uni.navigateTo({
                    url: "/pages/order/confirm"
                })
            }
        }