wxml
<!-- 商品数量 --><view class=‘shop-number‘> <view class=‘shop-number-left‘> <view class=‘shop-number-left-name‘>购买数量</view> <view class=‘shop-number-left-desc‘>每人限购3件</view> </view> <view class=‘shop-number-right‘> <view class="shop-number-right-reduce {{payPopUp.minusBtn?‘disable-btn‘:‘‘}}" bindtap=‘minusCount‘>-</view> <view class=‘shop-number-right-input‘>{{payPopUp.submited.pay_number}}</view> <view class="shop-number-right-plus {{payPopUp.addBtn?‘disable-btn‘:‘‘}}" bindtap=‘addCount‘>+</view> </view></view>
js
data: { payPopUp: { submited: { pay_number: 1, }, addBtn: false, minusBtn : true, }},
// 增加addCount: function() { let pay_number = this.data.payPopUp.submited.pay_number; if (pay_number != 3) { this.setData({ [‘payPopUp.submited.pay_number‘]: ++pay_number, [‘payPopUp.minusBtn‘]: false }) if (pay_number == 3) { this.setData({ [‘payPopUp.addBtn‘]: true }) } }},// 减少minusCount: function() { let pay_number = this.data.payPopUp.submited.pay_number; if (pay_number != 1) { this.setData({ [‘payPopUp.submited.pay_number‘]: --pay_number, [‘payPopUp.addBtn‘]: false }) if (pay_number == 1) { this.setData({ [‘payPopUp.minusBtn‘]: true }) } }}
wxss
/* 购买数量 */.shop-number { width: 670rpx; height: 120rpx; padding: 20rpx 0; box-sizing: border-box; display: flex; justify-content: space-between; border-bottom: 1rpx solid #f2f2f2; }.shop-number-left { width: 220rpx; height: 80rpx;}.shop-number-left-name { line-height: 40rpx; font-size: 34rpx;}.shop-number-left-desc { line-height: 40rpx; font-size: 22rpx; color: rgb(250, 99, 39);}.shop-number-right { width: 300rpx; display: flex; height: 80rpx; padding: 5rpx 0; box-sizing: border-box;}.shop-number-right view{ line-height: 70rpx; height: 70rpx; width: 100rpx; text-align: center; box-sizing: border-box; border: 1rpx solid #f2f2f2;}.shop-number-right-reduce { /* background: yellow; */ border-radius: 10rpx 0 0 10rpx; border-right: 0;}.shop-number-right-input { /* background: red; */ border-left: 0; border-right: 0;}.shop-number-right-plus { /* background: goldenrod; */ border-radius: 0 10rpx 10rpx 0; border-left: 0;}.shop-number-right-reduce,.shop-number-right-plus{ line-height: 60rpx !important;}.disable-btn { background: #f1f1f1;}