微信小程序电商实战-商品详情加入购物车（下）

今天药忘吃喽~ 2022-05-27 01:35 275阅读 0赞

IT实战联盟博客：[http://blog.100boot.cn ][http_blog.100boot.cn]

上一篇：[微信小程序电商实战-商品详情（上）][-]  
今天会接着上一篇开始写商品详情页加入购物车的部分，先看效果：  
![加入购物车.gif][.gif]

实现效果

1. 商品轮播图片预览
    2. 商品收藏效果
    3. 加入购物车
    4. 商品数量加减
    5. 商品数量加减模板（template）编写

\#\#\#\#商品轮播图片预览效果  
\#\#\#\#\#detail.js

//预览图片
      previewImage: function (e) {
        var current = e.target.dataset.src;
        wx.previewImage({
          current: current, // 当前显示图片的http链接  
          urls: this.data.imgUrls // 需要预览的图片http链接列表  
        })
      }

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

<view class="detail-nav">
      <image bindtap="toCar" src="../../images/bottomNav/cart.png" />  
      <view class="line_nav"></view>
       <image bindtap="addLike" src="{
       {isLike?'../../images/bottomNav/enshrine_select.png':'../../images/bottomNav/enshrine.png'}}" /> 
      <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 class="dialog {
       { showDialog ? 'dialog--show' : '' }}">
          <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="{
       { ...quantity1}}" />  
              </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({
          showDialog: !this.data.showDialog
        });
      },
      /**
       * sku 关闭
       */
      closeDialog: function () {
        console.info("关闭");
        this.setData({
          showDialog: 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）  
由于后面购物车模块也需要商品数量加减的功能，在这里把这个功能做成了一个template模板，看下方流程：  
\#\#\#\#\#\#1、创建template模板  
在page目录下创建template文件，并生成template.js、template.json、template.wxml和template.wxss配套文件

\#\#\#\#\#\#2、template.wxml

\#\#\#\#\#\#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样式引用

备注：template是在page目录下

\#\#\#\#\#5、detail.js初始化

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

好了，复制上述代码就可以实现效果哦，赶紧试试吧！  
\#\#\#\#更多精彩内容  
[微信小程序电商实战-入门篇][- 1]  
[微信小程序电商实战-首页（上）][- 2]  
[微信小程序电商实战-首页（下）][- 3]  
[微信小程序电商实战-商品详情（上）][-]  
[微信小程序电商实战-商品列表流式布局][- 4]  
[微信小程序实战篇：基于wxcharts.js绘制移动报表][wxcharts.js]

\#\#\#\#关注我们  
如果需要源码可以关注“IT实战联盟”公*众*号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~

IT实战联盟博客：[http://blog.100boot.cn ][http_blog.100boot.cn]

[http_blog.100boot.cn]: http://blog.100boot.cn%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B
[-]: https://www.jianshu.com/p/6cee51acd018
[.gif]: /images/20220527/1562ee43fc5d4e4ca8fd410ac35e8921.png
[- 1]: http://www.jianshu.com/p/6e214401ffdd
[- 2]: http://www.jianshu.com/p/f490c62643d3
[- 3]: https://www.jianshu.com/p/7100a1268453
[- 4]: https://www.jianshu.com/p/72d57252b4ef
[wxcharts.js]: https://www.jianshu.com/p/04ddbabda874