问答

小程序input输入,另一个数字实时相减,请问怎么处理呢?

作者:admin 2021-04-22 我要评论

view class="receids-box" view class="cell-title"优惠金额/view view class="recedis-price-ipt" view¥/view input type="digit" value="{{value}}" bindblur...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
<view class="receids-box">
  <view class="cell-title">优惠金额</view>
  <view class="recedis-price-ipt">
    <view>¥</view>
    <input type="digit" value="{{value}}" bindblur="priceIpt" placeholder="仅可小于账单金额"/>
  </view>
  <view class="receids-red" hidden="{{show}}">仅可小于账单金额</view>
  <view class="receids-gary">原账单金额:¥{{price}}</view>
  <view class="cell-title">优惠后账单金额</view>
  <view class="recedis-price">¥<text>{{priceVariety}}</text></view>
</view>

<view class="current-bottom">
  <view class="current-link">确定</view>
</view>
.receids-box {
  padding: 10rpx 30rpx 30rpx;
  margin-top: 20rpx;
  background: #fff;
  box-sizing: border-box;
}

.receids-box .cell-title {
  padding: 0;
  font-size: 28rpx;
  color: #212121;
}

.recedis-price-ipt {
  display: flex;
  width: 100%;
  height: 88rpx;
  margin: 20rpx 0;
  line-height: 88rpx;
  border-bottom: 1rpx solid #BA9574;
}

.recedis-price-ipt view {
  margin-right: 10rpx;
  font-size: 50rpx;
}

.recedis-price-ipt input {
  width: 100%;
  height: 88rpx;
  font-size: 48rpx;
}

.receids-red {
  font-size: 28rpx;
  color: #FF6B62;
  line-height: 40rpx;
}

.receids-gary {
  margin-bottom: 30rpx;
  font-size: 28rpx;
  color: #aaa;
  line-height: 40rpx;
}

.recedis-price {
  margin: 10rpx 0 20rpx;
  padding: 20rpx;
  font-size: 36rpx;
  color: #BA9574;
  background: #FFF9F3;
  border: 1rpx solid #f5dbc6;
  box-sizing: border-box;
  border-radius: 10rpx;
}

.upload-box {
  background: #FFF9F3;
  border: 1rpx solid #f5dbc6;
  border-radius: 10rpx;
}
.current-bottom {
  z-index: 2;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 86rpx;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.current-link{
  width: 100%;
  height: 86rpx;
  line-height: 86rpx;
  text-align: center;
  font-size: 28rpx;
  color: #fff;
  background: #FF6B62;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    value: '',
    price: '100',
    priceVariety: 100,
    show: true
  },
  priceIpt: function (e) {
    console.log(e.detail.value)
    let value = e.detail.value;
    let price = this.data.price;
    let priceVar = this.data.priceVariety;
    let show = this.data.show;
    let num = 0;

    if (value >= priceVar) {
      show = false;
      num = price;
    } else {
      show = true;
      num = priceVar - value;
      if (num >= price) {
        num = price
      }
      console.log(num)
    }
    this.setData({
      priceVariety: num,
      show: show
    })
  },
})

image

我在input输入数字后,下面的棕色数字100要减去input实时输入后的值,然后100会实时变成这个相减的值,input不管输入多少,下面都是用100减。现在可以相减,就是会一直累加。还有清空后再输入会无法相减,请问怎么处理啊?

###

看了楼主,发现有些小问题。
第一个,计算的部分

if (value >= priceVar) {
      show = false;
      num = price;
    } else {
      show = true;
      num = priceVar - value;
      if (num >= price) {
        num = price
      }
      console.log(num)
    }

应该先判断input是否为空,即value是否为空或者为undefined的情况,然后才能进行下面的判断。

if(value && value != '') {
    if (value >= priceVar) {
      show = false;
      num = price;
    } else {
      show = true;
      num = price - value;
      if (num >= price) {
        num = price
      }
      console.log(num)
    }
} else {
    value = 0
    price = 100
    priceVar = 100
}

第二个: 每次输入的时候是使用100减,那么使用原价格(price)来做计算,而不是priceVar

num = price - value

priceVar每计算一次就变化一次。原价格price类似常量。没做任何计算,不会变。

###

就一直

let num = price - value
this.setData({
    priceVariety: num
})

应该就可以了吧

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 求助!Mysql workbench connections出

    求助!Mysql workbench connections出

  • c++ 的dll 转golang可以调用

    c++ 的dll 转golang可以调用

  • c++的 new int{10}  和 new int(10) 有

    c++的 new int{10} 和 new int(10) 有

  • Grafana MySQL为数据源时, 折线图无法

    Grafana MySQL为数据源时, 折线图无法

腾讯云代理商
海外云服务器