本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、目标效果

• 规格的数量不确定，即可能还有多个规格。
• 规格可从服务器读取。
• 每个规格单独控制加减。
• 最终可以获得每个规格的所选数量。

二、循环出规格

假设服务器返回的规格数据如下：

"salelist": [
	 {
	     "id": 29,
	     "moviesid": 2,
	     "univalent": "100"
	 },
	 {
	     "id": 30,
	     "moviesid": 2,
	     "univalent": "1000"
	 },
	 {
	     "id": 31,
	     "moviesid": 2,
	     "univalent": "10000"
	 }
 ]

按照数据循环出每个规格：

<div class="buy-item-box" v-for="item in salelist">
    <div class="buy-item-left">
        <text style="font-size: 36rpx;font-weight: bold;text-align: center;height: 150rpx;line-height: 150rpx;">{{item.univalent}}</text>
    </div>
    <div class="buy-item-right">
        <div class="buy-action-btn">
            <image src="../../static/dec-fill.png" style="width: 50rpx;height: 50rpx;" @click="decNum(item.id)" v-if="buyInfo[item.id] > 0"></image>
            <image src="../../static/dec.png" style="width: 50rpx;height: 50rpx;" v-if="buyInfo[item.id] == 0"></image>
        </div>
        <div class="buy-action-btn">
            <text style="text-align: center;color: #7A7474;font-size: 40rpx;">{{buyInfo[item.id]}}</text>
        </div>
        <div class="buy-action-btn">
            <image src="../../static/add-fill.png" style="width: 50rpx;height: 50rpx;" @click="addNum(item.id)"></image>
        </div>
    </div>
</div>

定义初始化数据：

data () {
    return {
        buyInfo: {}
    }
}

三、JavaScript 逻辑

onLoad(e) {
    var _this = this;
    uni.request({
        url: '',
        data: {},
        success: (res) => {
            var salelist = res.data.data.salelist;
            var res = {};
            // 创建初始购买数量信息
            for (let i = 0; i < salelist.length; i++) {
                res[salelist[i].id] = 0;
            }
            _this.buyInfo = res;
        }
    });
}

加方法：

addNum (saleId) {
    var obj = this.buyInfo;
    if (saleId in obj) {
        obj[saleId]++;
    } else {
        obj[saleId] = 1;
    }
}

减方法：

decNum (saleId) {
    var obj = this.buyInfo;
    if (saleId in obj) {
        if (obj[saleId] >= 1) {
            obj[saleId]--;
        }
    } else {
        obj[saleId] = 0;
    }
}

核心思想为利用每个规格的id作为对象的键名，值进行加减。 最终得到的数据效果：

{"29":3, "30":7, "31":1}