微信小程序微商城（五）：动态API实现商品详情页（下）

怼烎@ 2022-05-22 13:39 199阅读 0赞

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

上一篇：[微信小程序微商城（四）：动态API实现商品详情页（上）][API]

看效果

![20e9b210e2d2cfb2bc7b66ce3a6d8bcb.gif][]

加入购物车.gif

开发计划

1、加入购物车悬浮框、商品数量、价格计算、收藏和加入购物车功能开发
    2、调用加入购物车API加入购物车

根据商品ID获取商品详情API数据模型

访问：[https://100boot.cn/][https_100boot.cn] 选择微商城案例，如下图所示：

![975a4227b369f61bf41172f5ce6de979.png][]

加入购物车和商品收藏API.jpg

下方还有详细的数据模型可以查看哦！

detail.wxml

<view class="detail-nav">
      <image bindtap="toCar" src="../../images/cart1.png" />  
      <view class="line_nav"></view>
       <image bindtap="addLike" src="{ {isLike?'../../images/enshrine_select.png':'../../images/enshrine.png'}}" /> 
      <button data-goodid="1"  class="button-green" bindtap="toggleDialog" >加入购物车</button>
      <button class="button-red" bindtap="immeBuy" formType="submit">立即购买</button>
    </view>
    
    
    #template模板引用
    <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="{ {goods.imgUrl}}"></image>
              <view class="column">
                <text class="sku-price">￥{
       {goods.totalMoney}}</text>
                <text class="sku-title">销量 {
       {goods.buyRate}} 件</text>
                <text class="sku-title">商品编码：{
       {goods.goodsId}}</text>
              </view>
            </view>
            <text class="border-line"></text>
            <view class="row">
              <text >购买数量</text>
              <view class="quantity-position">
                  
                   <template is="quantity" data="{ { ...goods,index:1}}" /> 
              </view>
            </view>
            <text class="border-line"></text>
    
            <button data-goodid="{ {goods.goodsId}}" class="button-addCar" bindtap="addCar" formType="submit">确定</button>
          </view>
        </view>

detail.wxss

#template 模板引用 @import "../template/template.wxss"; /* sku选择 */ .dialog__mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.7); display: none; } .dialog__container { position: fixed; bottom: 0; width: 100%; background: white; transform: translateY(150%); transition: all 0.4s ease; z-index: 11; } .dialog--show .dialog__container { transform: translateY(0); } .dialog--show .dialog__mask { display: block; } .image-sku { width: 200rpx; height: 200rpx; z-index: 12; position: absolute; left: 20px; top: -30px; border-radius: 20rpx; } .image-close { width: 40rpx; height: 40rpx; position: fixed; right: 20rpx; top: 10rpx; } .column { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; align-items: center; } .border-line { width: 100%; height: 2rpx; display: inline-block; margin: 30rpx 0rpx; background-color: gainsboro; text-align: center; } .sku-title { position: relative; left: 300rpx; margin: 1rpx; } .sku-price { color: red; position: relative; left: 300rpx; margin: 1rpx; } .row .quantity-position { position: absolute; right: 30rpx; display: flex; justify-content: center; flex-direction: column; }

detail.js

// 收藏-修改收藏状态 addLike() { this.setData({ isLike: !this.data.isLike }); ajax.request({ method: 'GET', url: 'collection/addShopCollection?key=' + utils.key + '&goodsId=' + goodsId, success: data => { console.log("收藏返回结果：" + data.message) wx.showToast({ title: data.message, icon: 'success', duration: 2000 }); } }) }, // 立即购买-待开发 immeBuy() { wx.showToast({ title: '购买成功', icon: 'success', duration: 2000 }); }, // 跳到购物车-待开发 toCar() { wx.navigateTo({ url: '../cart/cart' }) }, /** * sku 弹出 */ toggleDialog: function () { this.setData({ showDialog: !this.data.showDialog }); }, /** * sku 关闭 */ closeDialog: function () { console.info("关闭"); this.setData({ showDialog: false }); }, /* 减数 */ delCount: function (e) { console.log("刚刚您点击了减1"); var count = this.data.goods.count; // 商品总数量-1 if (count > 1) { this.data.goods.count--; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, /* 加数 */ addCount: function (e) { console.log("刚刚您点击了加1"); var count = this.data.goods.count; // 商品总数量-1 if (count < 10) { this.data.goods.count++; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, //价格计算 priceCount: function (e) { this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count; this.setData({ goods: this.data.goods }) }, /* 减数 */ delCount: function (e) { console.log("刚刚您点击了减1"); var count = this.data.goods.count; // 商品总数量-1 if (count > 1) { this.data.goods.count--; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, /* 加数 */ addCount: function (e) { console.log("刚刚您点击了加1"); var count = this.data.goods.count; // 商品总数量-1 if (count < 10) { this.data.goods.count++; } // 将数值与状态写回 this.setData({ goods: this.data.goods }); this.priceCount(); }, //价格计算 priceCount: function (e) { this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count; this.setData({ goods: this.data.goods }) }, /** * 加入购物车 */ addCar: function (e) { var count = this.data.goods.count; ajax.request({ method: 'GET', url: 'carts/addShopCarts?key=' + utils.key + '&goodsId=' + goodsId + '&num=' + count, success: data => { console.log("加入购物车返回结果：" + data.message) wx.showToast({ title: '加入购物车成功', icon: 'success', duration: 2000 }); } }) }

template模板使用

由于再加上template的源码太长了，大家可以直接下载源码使用就好。

备注

微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！

微信小程序微商城系列

[微信小程序微商城：开发者key获取][key]  
[微信小程序微商城（一）：https框架搭建并实现导航功能][https]  
[微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现][Link 1]  
[微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现][API]  
[微信小程序微商城（四）：动态API实现商品详情页（上）][API]

关注我们

如果需要源码可以关注“IT实战联盟”公\*众\*号并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~

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

[http_blog.100boot.cn]: http://blog.100boot.cn/
[API]: https://www.jianshu.com/p/6b18c33d5ee2
[20e9b210e2d2cfb2bc7b66ce3a6d8bcb.gif]: /images/20220522/53cd3f3039594ab8848ea41c1af2d740.png
[https_100boot.cn]: https://100boot.cn/
[975a4227b369f61bf41172f5ce6de979.png]: /images/20220522/3a1ad51829d74667a88b71de0ee391bd.png
[key]: https://www.jianshu.com/p/6f38ffb72dcd
[https]: https://www.jianshu.com/p/14722c41fdee
[Link 1]: https://www.jianshu.com/p/da176c8babeb