//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;
}
网友评论