[微信小程序]商城之购买商品数量实现

这里有三种变更数量的方式， 加号，减号，input输入 ， 这里做了限制，数量不能小于等于0并且不能超过现有库存，下面是功能实现代码。

如果有不懂的，可以加入微信小程序开发交流qq群（173683895）一起探讨

<view class="dian">
<view class="cun page_row">购买数量:</view>
<view class="stepper">
<!-- 减号 -->
<text bindtap="bindMinus">-</text>
<!-- 数值 -->
<input type="number" bindchange="pay_num" value="{{buy_num}}" />
<!-- 加号 -->
<text bindtap="bindPlus">+</text>
</view>
</view>

var util = require("../../utils/util.js")
var app = getApp();
Page({
data: {
buy_num:1
},

// 减号 1
bindMinus: function (e) {
if (this.data.buy_num > 1) {
this.pay_num(this.data.buy_num - 1)
}
},
// 加号 1
bindPlus: function (e) {
this.pay_num(this.data.buy_num + 1)
},
pay_num: function (e) {
var that = this;
if (e > 0) {
buy_num = e
}
if (e.type == 'change') {
//如果是input的change事件 buy_num 就赋值为用户手动输入的值
buy_num = e.detail.value;
}
console.log(buy_num, this.data.arr_num)
if (Number(buy_num) < Number(this.data.arr_num)) {
//判断用户输入的数量是否超过库存
wx.request({
url: '/goods_choose_num',
method: 'post',
data: {
id: pay_goods_id,//商品id
num: buy_num,//购买数量
},
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
if (res.data.status == 1) {
that.setData({
buy_num: buy_num //如果返回成功的状态就存入buy_num对象
});
}
}
})
} else {
wx.showToast({
title: '已超出现有库存',
duration: 2000,
});
//如果用户输出的数量已经超出现有的库存，就返回上一次保存的buy_num对象
buy_num = that.data.buy_num
this.setData({
buy_num: that.data.buy_num
})
}

},
})

/*数量*/
.dian{
width: 70%;
display: inline-block;
margin-top: 35rpx;
margin-bottom: 160rpx;
}
.cun{
margin: 5px;font-size:30rpx;
padding-left: 20rpx;
width: 25%
}
.stepper {
text-align: right;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 200rpx;
overflow: hidden;
margin-left: 250rpx;
border-radius:29rpx;
background: #f2f2f2;
}
.stepper text {
background-color: #fff;
border: 1px solid #eee;
border-radius:50%;
width: 26px;
height: 26px;
line-height: 26px;
text-align: center;
font-weight: 900;
color: #939393;
}
.stepper input {
width: 30px;
height: 25px;
text-align: center;
/*background-color: #f2f2f2;*/
/*border-top:  1px solid #666;
border-bottom:  1px solid #666;*/
}