我們繼續接著昨天的購物車寫，主要把剩下的數量加減 template 模板、選中計算功能實現掉！

template模板

如果拿購物車（上）來做應該會報錯的因為引用不到 template模板，接下來我們來實現！

template.wxml

template.wxss

/*主容器*/ .stepper { 
 width:90px; 
 height: 26px; 
 /*給主容器設一個邊框*/ 
 border: 1rpx solid #000000; 
 border-radius: 3px; 
 margin:0 auto; 
} 
 /*加號和減號*/ .stepper text { 
 width: 24px; 
 line-height: 26px; 
 text-align: center; 
 float: left; 
} 
 /*數值*/ .stepper input { 
 width: 40px; 
 height: 26px; 
 float: left; 
 margin: 0 auto; 
 text-align: center; 
 font-size: 12px; 
 color: #000000; /*給中間的input設置左右邊框即可*/ 
 border-left: 1rpx solid #000000; 
 border-right: 1rpx solid #000000; 
} 
 /*普通樣式*/ .stepper .normal{ 
 color: black; 
} 
 /*禁用樣式*/ .stepper .disabled{ 
 color: #ccc; 
}

備註

在這裡要特別強調一下在引用template模板的時候一定要注意路徑不要錯了，如下圖所示我放置的地方：

cart.js

勾選事件

 //勾選事件處理函數 
 switchSelect: function (e) { // 獲取item項的id，和數組的下標值 
 var Allprice = 0, i = 0; let id = e.target.dataset.id,

 index = parseInt(e.target.dataset.index); this.data.carts[index].isSelect = !this.data.carts[index].isSelect; //價錢統計
 if (this.data.carts[index].isSelect) { this.data.totalMoney = this.data.totalMoney + (this.data.carts[index].price * this.data.carts[index].count);
 } else { this.data.totalMoney = this.data.totalMoney - (this.data.carts[index].price * this.data.carts[index].count);
 } //是否全選判斷
 for (i = 0; i < this.data.carts.length; i++) {
 Allprice = Allprice + (this.data.carts[index].price * this.data.carts[index].count);
 } if (Allprice == this.data.totalMoney) { this.data.isAllSelect = true;
 } else { this.data.isAllSelect = false;
 } this.setData({ carts: this.data.carts, totalMoney: this.data.totalMoney, isAllSelect: this.data.isAllSelect,
 })
 },

全選時間

//全選
 allSelect: function (e) { //處理全選邏輯
 let i = 0; if (!this.data.isAllSelect) { this.data.totalMoney = 0; for (i = 0; i < this.data.carts.length; i++) { this.data.carts[i].isSelect = true; this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);

 }
 } else { for (i = 0; i < this.data.carts.length; i++) { this.data.carts[i].isSelect = false;
 } this.data.totalMoney = 0;
 } this.setData({ carts: this.data.carts, isAllSelect: !this.data.isAllSelect, totalMoney: this.data.totalMoney,
 })
 },

結算

toBuy() {
 wx.showToast({
 title: '去結算',
 icon: 'success',
 duration: 3000
 }); this.setData({
 showDialog: !this.data.showDialog
 });
 },

減數量

/* 減數 */
 delCount: function (e) { var index = e.target.dataset.index; console.log("剛剛您點擊了加一"); var count = this.data.carts[index].count; // 商品總數量-1
 if (count > 1) { this.data.carts[index].count--;
 } // 將數值與狀態寫回 
 this.setData({ carts: this.data.carts
 }); console.log("carts:" + this.data.carts); this.priceCount();
 },

加數

/* 加數 */
 addCount: function (e) { var index = e.target.dataset.index; console.log("剛剛您點擊了加+"); var count = this.data.carts[index].count; // 商品總數量+1 
 if (count < 10) { this.data.carts[index].count++;
 } // 將數值與狀態寫回 
 this.setData({ carts: this.data.carts
 }); console.log("carts:" + this.data.carts); this.priceCount();
 },

價格計算

priceCount: function (e) { this.data.totalMoney = 0; for (var i = 0; i < this.data.carts.length; i++) { if (this.data.carts[i].isSelect == true) { this.data.totalMoney = this.data.totalMoney + (this.data.carts[i].price * this.data.carts[i].count);
 } 


 } this.setData({ totalMoney: this.data.totalMoney,
 })
 }