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

Question

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

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

Answer 1

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

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类似常量。没做任何计算，不会变。

Answer 2

就一直

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

应该就可以了吧