收藏
回答

input输入值改变视图

问题模块
API和组件

在input输入值后如何更改列表总价格以及总数量,想了好久都没有想出来,请各位大神帮忙解决一下。。。。。。。

这个是商品列表wxml:

<view class="container">

 <view class="goodslist">

    <!--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>

</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)
    }

  }


})


最后一次编辑于  2017-05-25  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

5 个回答

  • 李健杰
    李健杰
    05-06

    用bindinput,触发即可

    05-06
    赞同
    回复
  • 好好学习 天天向上
    好好学习 天天向上
    2017-05-25

    输入数字时     总金额以及数量做出相应的改变

    2017-05-25
    赞同
    回复
  • 追梦的人(IT大叔一枚)
    追梦的人(IT大叔一枚)
    2017-05-25

    不是太理解?您是想用户输入数字,还是+ -按钮进行加减..


    2017-05-25
    赞同
    回复
  • 好好学习 天天向上
    好好学习 天天向上
    2017-05-25

    刚刚写了   但是输入框只显示加或减时的数量       输入的不显示

    2017-05-25
    赞同
    回复
  • 知晓
    知晓
    2017-05-25

    写一个方法用来计算所有商品的价格x数量的和是多少,然后当输入框值改变后,调一下这个方法

    2017-05-25
    赞同
    回复