實現以下業務邏輯

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高度