在input输入值后如何更改列表总价格以及总数量，想了好久都没有想出来，请各位大神帮忙解决一下。。。。。。。
这个是商品列表wxml：
<!--item--> <block wx:for="{{goodslist}}"> <view class="goods"> <!--左侧图片盒子--> <view> <image src="{{item.imgUrl}}" class="good-img" /> </view> <!--右侧说明部分--> <view class="good-cont"> <!--上--文字说明--> <view class="goods-navigator"> <text class="good-name">{{item.name}}</text> </view> <!--下--价格部分--> <view class="good-price"> <text>￥{{item.price}}</text> <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" data-status="0"/> </view> </view> </view> </block> </view>
|
这个是商品列表js：
Page({ data: { goodslist: [ { id:"001", imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg", name:"女装T恤中长款大码摆裙春夏新款", price:"65.00" }, { id:"002", imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg", name:"火亮春秋季 男青年修身款圆领男士T恤", price:"68.00" } ] }, // 加入购物车 addcart:function(e){ this.setData({ toastHidden:false }); // 遍历列表 与 购物车列表 for (var i in this.data.goodslist){ // 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项 if(this.data.goodslist[i].id == e.target.id){ // 给goodsList数组的当前项添加count元素，值为1，用于记录添加到购物车的数量 this.data.goodslist[i].count = 1; // 获取购物车的缓存数组（没有数据，则赋予一个空数组） var arr = wx.getStorageSync('cart') || []; // 如果购物车有数据 if(arr.length>0){ // 遍历购物车数组 for(var j in arr){ // 判断购物车内的item的id，和事件传递过来的id，是否相等 if(arr[j].id == e.target.id){ // 相等的话，给count+1（即再次添加入购物车，数量+1） // arr[j].count = arr[j].count + 1; // 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可） try { wx.setStorageSync('cart', arr) } catch (e) { console.log(e) } // 返回（在if内使用return，跳出循环节约运算，节约性能） return; } } // 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组 arr.push(this.data.goodslist[i]); } // 购物车没有数据，把item项push放入当前数据（第一次存放时） else{ arr.push(this.data.goodslist[i]); } // 最后，把购物车数据，存放入缓存 try { wx.setStorageSync('cart', arr) // 返回（在if内使用return，跳出循环节约运算，节约性能） return; } catch (e) { console.log(e) } } } }}) |
这个是购物车wxml：
<!--要是够车内没有数据，就行显示没有数据--><view class="cart" hidden="{{iscart}}"> <image src="/images/cart.png" /> <view>购物车什么都没有，赶快去购物吧</view></view><!--要是有数据，就显示数据--><view class="cartList" hidden="{{!iscart}}"> <!--header--> <view class="baoyou"></view> <!--list item--> <block wx:for="{{cart}}"> <view class="goods"> <!--左侧图片--> <view> <image src="{{item.imgUrl}}" class="good-img" /> </view> <!--右侧说明部分--> <view class="good-cont"> <!--文字说明--> <view class="goods-navigator"> <text class="good-name">{{item.name}}</text> </view> <!--价钱和购物加减的父盒子--> <view class="good-price"> <text class="price">￥{{item.price}}</text> <view class="btn-box"> <view class="btn"> <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button> <input type="digit" maxlength="5" value="{{item.count}}" bindinput="bindReplaceInput" /> <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button> </view> <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods" /> </view> </view> </view> </view> </block> <!--footer--> <view class="total"> <view class="total_text">合计： <text>￥{{total}}</text> </view> <button class="total_js" size="mini">去结算({{goodsCount}})</button> </view></view> |
这个是购物车js：
Page({ data: { iscart: false, cart: [], //数据 count: 1, total: 0, //总金额 goodsCount: 0, //数量 }, onLoad: function (options) { }, bindReplaceInput: function (e) { this.setData({ count: e.detail.value }) }, onShow: function () { // 获取产品展示页保存的缓存数据（购物车的缓存数组，没有数据，则赋予一个空数组） var arr = wx.getStorageSync('cart') || []; // 有数据的话，就遍历数据，计算总金额 和 总数量 if (arr.length > 0) { this.data.total = 0; this.data.goodsCount = 0; for (var i in arr) { this.data.total += Number(arr[i].price) * Number(arr[i].count); this.data.goodsCount += Number(arr[i].count); } // 更新数据 this.setData({ iscart: true, cart: arr, total: this.data.total, goodsCount: this.data.goodsCount }); } }, /**输入 */ inputCount:function(e){ }, /* 减数 */ delCount: function (e) { console.log(e) // 获取购物车该商品的数量 // [获取设置在该btn的id,即list的index值] if (this.data.cart[e.target.id.substring(3)].count <= 1) { return; } // 商品总数量-1 this.data.goodsCount -= 1; // 总价钱 减去 对应项的价钱单价 this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price); // 购物车主体数据对应的项的数量-1 并赋给主体数据对应的项内 this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count; // 更新data数据对象 this.setData({ cart: this.data.cart, total: this.data.total, goodsCount: this.data.goodsCount }) // 主体数据重新赋入缓存内 try { wx.setStorageSync('cart', this.data.cart) } catch (e) { console.log(e) } }, /* 加数 */ addCount: function (e) { // 商品总数量+1 this.data.goodsCount += 1; // 总价钱 加上 对应项的价钱单价 this.data.total += Number(this.data.cart[e.target.id.substring(3)].price); // 购物车主体数据对应的项的数量+1 并赋给主体数据对应的项内 this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count; // 更新data数据对象 this.setData({ cart: this.data.cart, total: this.data.total, goodsCount: this.data.goodsCount }) // 主体数据重新赋入缓存内 try { wx.setStorageSync('cart', this.data.cart) } catch (e) { console.log(e) } }, /* 删除item */ delGoods: function (e) { // 商品总数量 减去 对应删除项的数量 this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count; // 总价钱 减去 对应删除项的单价*数量 this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count; // 主体数据的数组移除该项 this.data.cart.splice(e.target.id.substring(3), 1); // 更新data数据对象 this.setData({ cart: this.data.cart, total: this.data.total, goodsCount: this.data.goodsCount }) // 主体数据重新赋入缓存内 try { wx.setStorageSync('cart', this.data.cart) } catch (e) { console.log(e) }
}) |
用bindinput，触发即可
输入数字时 总金额以及数量做出相应的改变
不是太理解?您是想用户输入数字,还是+ -按钮进行加减..
刚刚写了 但是输入框只显示加或减时的数量 输入的不显示
写一个方法用来计算所有商品的价格x数量的和是多少，然后当输入框值改变后，调一下这个方法