商品详情页规格弹出层（小程序）

click me




 

   
   
      ￥{{gg_price}}
      请选择规格已选择:{{gg_txt}}ml
   
   
   
      规格
      
        {{item.guige}}ml
      
   
   
   
        数量
        
           
              
            -
              
            
              
            +
            
        
   
   
   
    加入购物车
    立即购买
   

/*使屏幕变暗  */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
 
  width: 94%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding:20rpx 3%;
}
 
.commImg{
  position: absolute;
  width:150rpx;
  height:150rpx;
  background:#fff;
  border:1px solid #f5f5f5;
  z-index: 12;
  left: 20px;
  top: -35px;
  padding:20rpx;
  border-radius: 20rpx;
}
.commImg image{
  width:100%;
  height:100%;
}
 
.column{
  display: flex;
  flex-direction: column;
}
 
.sku-price {
  color: red;
  position: relative;
  left: 250rpx;
  margin: 1rpx;
}
.sku-title {
  position: relative;
  left: 250rpx;
  font-size: 12px;
  margin: 1rpx;
}
 
.line{
  width: 95%;
  height: 2rpx;
  display: inline-block;
  margin: 30rpx 0rpx 5rpx 0rpx;
  background-color: #f2f2f2;
  text-align: center;
}
 
.gg-title,.quantity-title{
  font-size:12px;
  color:#999;
  height:26px;
  margin-top:5px;
  line-height:26px;

}
 
.gg text{
  width:100rpx;
  height:50rpx;
  line-height:50rpx;
  float:left;
  background:#f2f2f2;
  text-align: center;
  margin:20rpx 0 0 26rpx;
  font-size:12px;
  border-radius: 5px;
}
.gg .active{
  color:#fff;
  background:#e64340;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.row .quantity-position {
  position: absolute;
  margin-top:5px;
  right:50rpx;
}
 
.btn{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.button-add{
  width:50%;
  border:0px;
  background:#4CAF50;
  color:#fff;
  border-radius: 0px;
}
.button-buy{
  width:50%;
  background:#C59906;
  color:#fff;
  border-radius: 0px;
}
 
 
/*数量加减样式*/
/*主容器*/  
.stepper {  
    width: 80px;  
    height: 26px;  
    /*给主容器设一个边框*/  
    border: 1px solid #ccc;  
    border-radius: 3px;  
    margin:0 auto;  
}  
  
/*加号和减号*/  
.stepper text {  
    width: 19px;  
    line-height: 26px;  
    text-align: center;  
    float: left;  
}  

.stepper .disabled{
  color:#ccc;
}
  
/*数值*/  
.stepper input {  
  padding:0px;
    width: 40px;  
    height: 26px;  
    float: left;  
    margin: 0 auto;  
    text-align: center;  
    font-size: 12px;  
    /*给中间的input设置左右边框即可*/  
    border-left: 1px solid #ccc;  
    border-right: 1px solid #ccc;  
}  
  
/*普通样式*/  
.stepper .normal{  
    color: black;  
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    showModalStatus: true,//是否显示
    gg_id: 0,//规格ID
    gg_txt: '',//规格文本
    gg_price: 0,//规格价格
    guigeList: [{ guige: '100', price: '150' }, { guige: '200', price: '150' }, { guige: '300', price: '150' }],
    num: 1,//初始数量
    minusStatus: 'disabled'
  },

  filter: function (e) {
    //console.log(e);
    var self = this, id = e.currentTarget.dataset.id, txt = e.currentTarget.dataset.txt, price = e.currentTarget.dataset.price
    self.setData({
      gg_id: id,
      gg_txt: txt,
      gg_price: price
    });
  },

  /* 点击减号 */
  bindMinus: function () {
    var num = this.data.num;
    // 如果大于1时，才可以减  
    if (num > 1) {
      num--;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    this.setData({
      num: num,
      minusStatus: minusStatus
    });
  },
  /* 点击加号 */
  bindPlus: function () {
    var num = this.data.num;
    // 不作过多考虑自增1  
    num++;
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var minusStatus = num < 1 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    this.setData({
      num: num,
      minusStatus: minusStatus
    });
  },

  //显示对话框
  showModal: function () {
    // 显示遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
      showModalStatus: true
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export()
      })
    }.bind(this), 200)
  },
  //隐藏对话框
  hideModal: function () {
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 200,
      timingFunction: "linear",
      delay: 0
    })
    this.animation = animation
    animation.translateY(300).step()
    this.setData({
      animationData: animation.export(),
    })
    setTimeout(function () {
      animation.translateY(0).step()
      this.setData({
        animationData: animation.export(),
        showModalStatus: false
      })
    }.bind(this), 200)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
})