[微信小程式]商城之購買商品數量實現
正文:
這裡有三種變更數量的方式, 加號,減號,input輸入 , 這裡做了限制,數量不能小於等於0並且不能超過現有庫存,下面是功能實現程式碼。
<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;*/ }