這篇文章帶給大家的內容是關於微信小程式商城開發之動態API實現商品的詳情頁的程式碼(下) ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。
1、加入購物車懸浮框、商品數量、價格計算、收藏及加入購物車功能開發
2、呼叫加入購物車API加入購物車
瀏覽:https ://100boot.cn/ 選擇微商城案例,如下圖所示:
下方還有詳細的資料模型可以查看喔!
<!-- 底部悬浮栏 --><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="{{ ...item,index:index}}" /> --> <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>
#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; }
// 收藏-修改收藏状态 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 225e1917bd82da3b25d0bbfc5fd71357 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 71b9f2b36374d313947f83360b436306 { console.log("加入购物车返回结果:" + data.message) wx.showToast({ title: '加入购物车成功', icon: 'success', duration: 2000 }); } }) }
#由於再加上template的源碼太長了,大家可以直接下載原始碼使用就好。
相關推薦:
微信小程式商城開發之https框架的建構以及頂部和底部導航的實現
微信小程式商城開發之動態API實作商品的詳情頁的程式碼(上)以上是微信小程式商城開發之動態API實現商品的詳情頁的程式碼(下)的詳細內容。更多資訊請關注PHP中文網其他相關文章!