商品加入购物车的代码

加入购物车
页面布局分为两部分，第一部分为底部悬浮栏（购物车、收藏、加入购物车、立即购买），第二部分为加入购物车的隐藏布局主要用来选择商品属性和修改商品数量。
detail.wxml

<view class="detail-nav">
  <image bindtap="toCar" src="../../images/bottomNav/cart.png" />  
  <view class="line_nav"></view>
  <button data-goodid="1"  class="button-green" bindtap="toggleDialog" >加入购物车</button>
  <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
</view>

<!--加入购物车-->
<import src="../template/template.wxml" />
<view  wx:if=" isMask" class="dialog">
      <view class="dialog__mask" bindtap="toggleDialog" />
      <view class="dialog__container">
        <view class="row">
          <icon bindtap="closeDialog" class="image-close" type="cancel" size="25"/>
          <image class="image-sku" src="https://m.360buyimg.com/n12/jfs/t11317/108/1080677336/325163/f4c2a03a/59fd8b17Nbe2fcca3.jpg!q70.jpg"></image>
          <view class="column">
            <text class="sku-price">￥7935.84</text>
            <text class="sku-title">库存20件</text>
            <text class="sku-title">商品编码：1456778788</text>
          </view>
        </view>
        <text class="border-line"></text>
        <view class="row">
          <text >购买数量</text>
          <view class="quantity-position">
              <template is="quantity" data="{{ ...data}}" />  
          </view>
        </view>
        <text class="border-line"></text>
        <button data-goodid="1" class="button-addCar" bindtap="addCar" formType="submit">确定</button>
      </view>
    </view>

detail.js

// 立即购买
  immeBuy() {
    wx.showToast({
      title: '购买成功',
      icon: 'success',
      duration: 2000
    });
  },
  /**
     * sku 弹出
     */
  toggleDialog: function () {
    this.setData({
       isMask: !this.data. isMask
    });
  },
  /**
   * sku 关闭
   */
  closeDialog: function () {
    console.info("关闭");
    this.setData({
       isMask: false
    });
  },
  /* 减数 */
  delCount: function (e) {
    console.log("刚刚您点击了减一");
    var count = this.data.quantity1.quantity;
    // 商品总数量-1
    if (count > 1) {
      count -= 1;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var delStatus = count <= 1 ? 'disabled' : 'normal';
    // 只有大于10件的时候，才能normal状态，否则disable状态  
    var addStatus = count >= 10 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    this.setData({
      quantity1: {
        quantity: count,
        delStatus: delStatus,
        addStatus: addStatus
      }
    });
  },
  /* 加数 */
  addCount: function (e) {
    console.log("刚刚您点击了加一");
    var count = this.data.quantity1.quantity;
    // 商品总数量-1  
    if (count < 10) {
      count += 1;
    }

    // 只有大于一件的时候，才能normal状态，否则disable状态  
    var delStatus = count <= 1 ? 'disabled' : 'normal';
    // 只有大于10件的时候，才能normal状态，否则disable状态  
    var addStatus = count >= 10 ? 'disabled' : 'normal';
    // 将数值与状态写回  
    this.setData({
      quantity1: {
        quantity: count,
        delStatus: delStatus,
        addStatus: addStatus
      }
    });
  },
  /* 输入框事件 */
  bindManual: function (e) {
    var count = this.data.quantity1.quantity;
    // 将数值与状态写回  
    this.setData({
      count: count
    });
  },
  /**
   * 加入购物车
   */
  addCar: function (e) {
    console.log(e.target.dataset.goodid);
    wx.showToast({
      title: '加入购物车成功',
      icon: 'success',
      duration: 2000
    });
    console.info("关闭");
        this.setData({
        showDialog: false
    });
  },
  // 收藏
  addLike() {
    this.setData({
      isLike: !this.data.isLike
    });
  },
  // 跳到购物车
  toCar() {
    wx.switchTab({
      url: '/pages/cart/cart'
    })
  },
  // 立即购买
  immeBuy() {
    wx.showToast({
      title: '购买成功',
      icon: 'success',
      duration: 2000
    });
  },

商品数量加减模板（template）
1、创建template模板
在page目录下创建template文件，并生成template.js、template.json、template.wxml和template.wxss配套文件
2、template.wxml

<template name="quantity">
  <!-- 主容器 -->  
  <view class="stepper">  
      <!-- 减号 -->  
      <text class="{{delStatus}}" bindtap="delCount">-</text>  
      <!-- 数值 -->  
      <input type="number" bindchange="bindManual" value="{{quantity}}"  disabled="disabled"/>  
      <!-- 加号 -->  
      <text class="{{addStatus}}" bindtap="addCount">+</text>  
  </view>  
</template>

3、template.wxss

/*主容器*/  
.stepper {  
    width:110px;  
    height: 26px;  
    /*给主容器设一个边框*/  
    border: 1rpx solid #000000;  
    border-radius: 3px;  
    margin:0 auto;  
}  

/*加号和减号*/  
.stepper text {  
    width: 24px;  
    line-height: 15px;  
    text-align: center;  
    float: left;  
}  

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

/*普通样式*/  
.stepper .normal{  
    color: black;  
}  

/*禁用样式*/  
.stepper .disabled{  
    color: #ccc;  
}  

4、detail.wxml样式引用

<import src="../template/template.wxml" />

备注：template是在page目录下
5、detail.js初始化

data: {
      quantity: 1,
      min: 1,
      max: 20,
      delStatus: 'disabled',
      addStatus: 'normal',
     isMask:false
    },
    isLike: true,
    showDialog: false