1. 程式人生 > >[微信小程式]商城之購買商品數量實現

[微信小程式]商城之購買商品數量實現

正文:

這裡有三種變更數量的方式, 加號,減號,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;*/ }