06.25 微信小程序微商城（五）：動態API實現商品詳情頁（下）技术頭條網

看效果

開發計劃

1、加入購物車懸浮框、商品數量、價格計算、收藏和加入購物車功能開發
2、調用加入購物車API加入購物車

根據商品ID獲取商品詳情API數據模型

訪問：https://100boot.cn/ 選擇微商城案例，如下圖所示：

下方還有詳細的數據模型可以查看哦！

detail.wxml


<view>
 <image> 
 <view>
 <image> 
 <button>加入購物車/<button>
 <button>立即購買/<button>/<view>#template模板引用<import><view>
 <view>
 <view>
 <view>
 <icon>
 <image>
 <view>
 <text>￥{{goods.totalMoney}}/<text>
 <text>銷量 {{goods.buyRate}} 件/<text>
 <text>商品編碼：{{goods.goodsId}}/<text>
 /<view>
 /<view>
 <text>
 <view>
 <text>購買數量/<text>
 <view>
 
 <template> 
 /<view>
 /<view>
 <text>
 <button>確定/<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
 });
 }
 })
}