uniapp 实现动态多规格数量控制操作

一、目标效果

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

二、循环出规格

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

"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}