加减数量 小程序

2019-07-30_151134.png

//data中赋上初始值
data: {

    num: 1,

    price:1,

  }

  /* 加数 */
  addCount: function (e) {
    console.log("刚刚您点击了加1");
    var num = this.data.num;
    var price = this.data.price;
    // 总数量-1  
    if (num < 1000) {
      num++;      
    }
    this.setData({
      num: num,//加一后重新赋值
      price: price*num//加过数量后价格赋值
    });
  },
  /* 减数 */
  delCount: function (e) {
    console.log("刚刚您点击了减1");
    var num = this.data.num;
    var price = this.data.price;
    if (num > 1) {
      num--;
    }
    this.setData({
      num: num,
      price: price * num
    });
  },

  

<view class='total'>
   <!-- <text>数量：</text><text class='num'>1</text><text>￥</text><text class='price'>{{price}}</text><text class='buy'>立即购买</text> -->
   <text>数量：</text>
  <view class="stepper">  
      <!-- 减号 -->  
      <text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>  
      <!-- 数值 -->  
      <input class="number" type="number" bindchange="bindManual" value="{{num}}"  disabled="disabled"/>  
      <!-- 加号 -->  
      <text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>  
  </view>  
    <view class='price'>￥{{price}}</view>
    <view class='buy' bindtap='nowbuy'>立即购买</view>
</view>

样式

.total {
  width: 100%;
  color: #545454;
  font-size: 28rpx;
  background: white;
  padding-left: 30rpx;
  position: fixed;
  height: 100rpx;
  bottom: 0;
  left: 0;
  line-height: 100rpx;
  display: flex;
}

.total .num {
  color: #f44336;
  border: 1rpx solid #f44336;
  padding: 10rpx 20rpx;
  margin-right: 170rpx;
  line-height: 100rpx;
}

.total .price {
  color: #f44336;
  margin-left: 20%;
  font-size: 32rpx;
}

.total .buy {
  background: #f44336;
  color: white;
  text-align: center;
  padding: 0 60rpx;
  position: absolute;
  right: 0;
  top: 0;
  line-height: 100rpx;
  font-size: 32rpx;
}
/*数量加减*/
.carts-num{
  position: absolute;
  left: 100rpx;
  bottom: 23rpx;
  display: flex;
  align-items: center;
  text-align: center; 
  height: 50rpx;
}
.view_text_center{
  border: 1rpx solid #ebebeb;
  font-size: 30rpx;  
  display: inline-block;
  color: #333;
  height: 50rpx;
  line-height: 50rpx;
  width: 76rpx;
  vertical-align: middle;
}
.carts-num .minus, .carts-num .plus{
  border: 1rpx solid #ebebeb;
  font-size: 30rpx;  
  display: inline-block;
  color: #333;
  height: 50rpx;
  line-height: 50rpx;
  width: 45rpx;
  vertical-align: middle;
}

  
/*加号和减号*/  
.stepper .sign {  
    width: 20px;  
    line-height: 22px;  
    text-align: center;  
    float: left;  
}  
  
/*数值*/  
.stepper .number {  
    width: 30px;  
    height: 20px;  
    float: left;  
     margin: 0 auto;   
    text-align: center;  
    font-size: 12px;  
    color: #000000;
    /*给中间的input设置左右边框即可*/  
    border-left: 1rpx solid #818284;  
    border-right: 1rpx solid #818284;  
    /* border: 1rpx solid #818284;   */
}  
  
/*普通样式*/  
.stepper .normal{  
    color: black;  
}  
/*禁用样式*/  
.stepper .disabled{  
    color: #ccc;  
}  
button{
  width: 90%;
  color: white;
  background:#DFB741;
  margin:30px auto;  
}
.stepper {  
    width:73px;  
    height: 22px;  
    /*给主容器设一个边框*/  
    border: 1rpx solid #818284;  
    border-radius: 3px;  
    margin:auto 0;  
    background: white;
}