实现以下业务逻辑

1. 购物车动画
2. 购物车内加减

一、购物车动画

cascadeToggle: function () {
        //切换购物车开与关
    if (that.data.maskVisual == 'show') {
        that.cascadeDismiss();
    } else {
        that.cascadePopup();
    }
},
cascadePopup: function () {
    // 购物车打开动画
    var animation = wx.createAnimation({
        duration: 500,
        timingFunction: 'ease-in-out',
    });
    this.animation = animation;
    animation.translateY(-285).step();
    this.setData({
        animationData: this.animation.export(),
        maskVisual: 'show'
    });
},
cascadeDismiss: function () {
        // 购物车关闭动画
    this.animation.translateY(285).step();
    this.setData({
        animationData: this.animation.export(),
        maskVisual: 'hidden'
    });
}

通过点击控制显示与隐藏，<view class="ft" bindtap="cascadeToggle">

而<view>层级通过z-index来解决，其中底部购物车.ft区别权重最高，设为999，其次是弹窗主体.modal-content，其余默认不设定。

二、购物车加减

首先要读取购物车数据，即cartData，它是以foodId为key，数量为value的object，所以需要转换为array，才能很好地被遍历。

cartToArray: function (foodId) {
    // 需要判断购物车数据中是否已经包含了原商品，从而决定新添加还是仅修改它的数量
    var cartData = that.data.cartData;
    var cartObjects = that.data.cartObjects;
    var query = new Bmob.Query('Food');
    // 查询对象
    query.get(foodId).then(function (food) {
        // 从数组找到该商品，并修改它的数量
        for (var i = 0; i < cartObjects.length; i++) {
            if (cartObjects[i].food.id == foodId) {
                // 如果是undefined，那么就是通过点减号被删完了
                if (cartData[foodId] == undefined) {
                    delete cartObjects[i];
                } else {
                    cartObjects[i].quantity = cartData[foodId];
                }
                that.setData({
                    cartObjects: cartObjects
                });
                // 成功找到直接返回，不再执行添加
                return ;
            }
        }
        // 添加商品到数组
        var cart = {};
        cart.food = food;
        cart.quantity = cartData[foodId];
        cartObjects.push(cart);
        that.setData({
            cartObjects: cartObjects
        });
    });
}

然后在add/subtract方法末尾中调用它就可以购物车键值对转换成对象数组。

那接下来就顺理成章了，直接购物车小弹窗里将cartObjects渲染就可以了。

<view class="modal-body">
    <view class="item" wx:for="{{cartObjects}}">
        <view class="title">{{item.food.title}}</view>
        <view class="fee">{{item.food.price * item.quantity}}</view>
        <view class="stepper">
            <!-- 减号 -->
            <view class="symbol subtract" bindtap="subtract" wx:if="{{cartData[item.food.objectId]}}" data-food-id="{{item.food.objectId}}">-</view>
            <!-- 数量 -->
            <view class="value">{{cartData[item.food.objectId]}}</view>
            <!-- 加号 -->
            <view class="symbol add" bindtap="add" data-food-id="{{item.food.objectId}}">+</view>
        </view>
    </view>
</view>

得益于MVVM数据绑定，因此在购物车里点加减也实时地同步了商品列表中显示的数量

汇总

amount: function() {
    var cartObjects = that.data.cartObjects;
    var amount = 0;
    cartObjects.forEach(function (item, index) {
        amount += item.quantity * item.food.get('price');
    });
    that.setData({
        amount: amount
    });
}

这里多请求了一次网络，由于请求是异步的，所以我将汇总代码丢在网络请求里，于cartToArray方法内。

TODO

改为scroll-view显示，并且高度自适应行数，直至一个max-height高度

源码下载：关注公众号【黄秀杰】，回复112。