目錄
32.商品加入購(gòu)物車邏輯實(shí)現(xiàn)（前端）
33.購(gòu)物車頁(yè)面收貨地址實(shí)現(xiàn)
34.購(gòu)物車商品列表顯示實(shí)現(xiàn)
37.購(gòu)物車商品復(fù)選框選中業(yè)務(wù)處理
38.購(gòu)物車全選復(fù)選框選中業(yè)務(wù)處理
39.購(gòu)物車商品數(shù)量編輯實(shí)現(xiàn)
40.購(gòu)物車商品數(shù)量為0判定是否刪除
42.商品詳情立即購(gòu)買邏輯實(shí)現(xiàn)
32.商品加入購(gòu)物車邏輯實(shí)現(xiàn)（前端）
1.先在product_detail下的index.wxml的view標(biāo)簽下添加bindtap
<view class="tool_item btn_cart" bindtap="handleCartAdd">
<view>加入購(gòu)物車</view>
</view>2.對(duì)應(yīng)在js文件夾下寫點(diǎn)擊事件handleCartAdd:商品加入購(gòu)物車
3.需要判斷商品加入購(gòu)物車的邏輯：一種是已經(jīng)存在購(gòu)物車中，如果再加，數(shù)量加一即可；還有是不存在購(gòu)物車中的。
```Java
// 點(diǎn)擊事件 商品加入購(gòu)物車
handleCartAdd(){
let cart=wx.getStorageSync('cart')||[];
console.log("cart="+cart);
let index=cart.findIndex(v=>v.id===this.productInfo.id);
if(index===-1){ // 購(gòu)物車?yán)锩娌淮嬖诋?dāng)前商品
this.productInfo.num=1;
cart.push(this.productInfo);
}else{ // 已經(jīng)存在
cart[index].num++;//數(shù)量加一
}
wx.setStorageSync('cart', cart); // 把購(gòu)物車添加到緩存中
//設(shè)置提示，加入成功
wx.showToast({
title: '加入成功',
icon:'success',
mask:true
})
},
```4.上面代碼優(yōu)化：可以將上面代碼封裝為setCartadd
// 點(diǎn)擊事件 商品加入購(gòu)物車
handleCartAdd(){
this.setCartadd();
wx.showToast({
title: '加入成功',
icon:'success',
mask:true
})
},
// 加入購(gòu)物車
setCartadd(){
let cart=wx.getStorageSync('cart')||[];
console.log("cart="+cart);
let index=cart.findIndex(v=>v.id===this.productInfo.id);
if(index===-1){ // 購(gòu)物車?yán)锩娌淮嬖诋?dāng)前商品
this.productInfo.num=1;
cart.push(this.productInfo);
}else{ // 已經(jīng)存在
cart[index].num++;
}
wx.setStorageSync('cart', cart); // 把購(gòu)物車添加到緩存中
},33.購(gòu)物車頁(yè)面收貨地址實(shí)現(xiàn)
1.先在第三個(gè)標(biāo)簽“購(gòu)物車”cart下的index.json添加頂部標(biāo)題
{
"usingComponents": {},
"navigationBarTitleText": "購(gòu)物車"
}2.開(kāi)始在cart下的index.wxml寫“獲取收貨地址”標(biāo)簽bindtap="handleChooseAddress" 作為點(diǎn)擊事件，并在index.less設(shè)置樣式。index.js寫具體的handleChooseAddress方法
1）index.wxml
```Java
<!-- 收貨地址 開(kāi)始 -->
<view class="recevie_address_row">
<view class="address_btn" wx:if="{{!address}}">
<button type="warn" plain bindtap="handleChooseAddress" >獲取收貨地址</button>
</view>
<view wx:else class="user_info_row">
<view class="user_info">
<view>收貨人：{{address.userName}},{{address.telNumber}}</view>
<view>{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
</view>
<view class="change_address_btn">
<button size="mini" plain>更換地址</button>
</view>
</view>
</view>
<!-- 收貨地址 結(jié)束 -->
```2）index.less：設(shè)置樣式包括：獲取收貨地址按鈕，更換地址按鈕。左右分采用伸縮盒子flex
.recevie_address_row{
.address_btn{
padding: 20rpx;
button{
width: 60%;
}
}
.user_info_row{
display: flex;
padding: 20rpx;
.user_info{
flex:5;
}
.change_address_btn{
flex:3;
text-align: right;
button{
border: 1px solid gray;
font-weight: normal;
}
}
}
}3）index.js
寫具體的handleChooseAddress方法:先在data里定義，再具體寫。由于獲取收貨地址基本不變?？纱嫒刖彺嬷校??wx.setStorageSync('address',?result)
data: {
address:{}
},
handleChooseAddress(){
wx.chooseAddress({
success: (result) => {
console.log(result)
wx.setStorageSync('address', result)
},
})
},然后onShow中監(jiān)聽(tīng)頁(yè)面顯示，從緩存中獲取地址
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
console.log("show")
const address=wx.getStorageSync('address');
this.setData({
address
})
},3.然后在頁(yè)面顯示，在index.wxml中寫，引入wx:if="{{!address}}"判斷沒(méi)有值的話顯示“獲取收貨地址”，有值的話顯示的是wx:else?class="user_info_row"
<!-- 收貨地址 開(kāi)始 -->
<view class="recevie_address_row">
<view class="address_btn" wx:if="{{!address}}">
<button type="warn" plain bindtap="handleChooseAddress" >獲取收貨地址</button>
</view>
<view wx:else class="user_info_row">
<view class="user_info">
<view>收貨人：{{address.userName}},{{address.telNumber}}</view>
<view>{{address.provinceName+address.cityName+address.countyName+address.detailInfo}}</view>
</view>
<view class="change_address_btn">
<button size="mini" plain>更換地址</button>
</view>
</view>
</view>
<!-- 收貨地址 結(jié)束 -->效果如下圖：
34.購(gòu)物車商品列表顯示實(shí)現(xiàn)
1.首先數(shù)據(jù)要顯示在頁(yè)面上，先在index.js的data里定義數(shù)據(jù)cart:[]。然后可以在onShow里獲取，如果購(gòu)物車是空的，可以||一個(gè)空數(shù)組。編譯后可以在AppData中查看是否存入數(shù)據(jù)：
?
onShow: function () {
console.log("show")
const address=wx.getStorageSync('address');
const cart=wx.getStorageSync('cart')||[];
this.setData({
address,
cart
})
},2.在cart包index.wxml下寫view標(biāo)簽，購(gòu)物車列表包括的要素有：復(fù)選框，商品圖片，商品信息。同時(shí)點(diǎn)擊商品圖片，點(diǎn)擊商品名可以跳轉(zhuǎn)，做法是navigator標(biāo)簽里寫url:"/pages/product_detail/index?id={{item.id}}"。大致思路仍然先寫標(biāo)簽，再設(shè)樣式
index.wxml:
<!-- 購(gòu)物車清單 開(kāi)始 -->
<view class="cart_content">
<view class="cart_main">
<view class="cart_item"
wx:for="{{cart}}"
wx:key="id"
>
<!-- 復(fù)選框 開(kāi)始 -->
<view class="cart_chk_wrap">
<checkbox-group>
<checkbox></checkbox>
</checkbox-group>
</view>
<!-- 復(fù)選框 結(jié)束 -->
<!-- 商品圖片 開(kāi)始 -->
<navigator class="cart_img_wrap" url="/pages/product_detail/index?id={{item.id}}">
<image mode="widthFix" src="{{baseUrl+'/image/product/'+item.proPic}}"></image>
</navigator>
<!-- 商品圖片 結(jié)束 -->
<!-- 商品信息 開(kāi)始 -->
<view class="cart_info_wrap">
<navigator url="/pages/product_detail/index?id={{item.id}}">
<view class="goods_name">{{item.name}}</view>
</navigator>
<view class="goods_price_wrap">
<view class="goods_price">
￥{{item.price}}
</view>
<view class="cart_num_tool">
<view class="num_edit">-</view>
<view class="goods_num">{{item.num}}</view>
<view class="num_edit">+</view>
</view>
</view>
</view>
<!-- 商品信息 結(jié)束 -->
</view>
</view>
</view>
<!-- 購(gòu)物車清單 結(jié)束 -->設(shè)置樣式，在index.less中
.cart_content{
background-color: #F5F5F5;
.cart_main{
padding: 2rpx 10rpx 10rpx 10rpx;
.cart_item{
display: flex;
background-color: white;
border-radius: 10px;
margin: 20rpx;
padding-right: 20rpx;
.cart_chk_wrap{
flex:1;
display: flex;
justify-content: center;
align-items: center;
margin: 20rpx;
}
.cart_img_wrap{
flex:2;
display: flex;
justify-content: center;
align-items: center;
background-color: #F5F5F5;
margin: 20rpx;
border-radius: 10px;
image{
width: 80%;
}
}
.cart_info_wrap{
flex:4;
display: flex;
flex-direction: column;
justify-content: space-around;
.goods_name{
font-weight: bolder;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.goods_price_wrap{
display: flex;
justify-content: space-between;
.goods_price{
color: var(--themeColor);
font-size: 34rpx;
}
.cart_num_tool{
display: flex;
.num_edit{
display: flex;
justify-content: center;
align-items: center;
width: 55rpx;
height: 55rpx;
}
.goods_num{
display: flex;
justify-content: center;
align-items: center;
width: 85rpx;
height: 55rpx;
background-color: #F5F5F5;
}
}
}
}
}
}
}37.購(gòu)物車商品復(fù)選框選中業(yè)務(wù)處理
復(fù)選框中，并設(shè)定點(diǎn)擊事件bindchange命名為：handleItemChange，在index.js下寫具體的商品選中事件處理方法：e作為事件源。e.currentTarget.dataset表示事件發(fā)生的當(dāng)前元素的數(shù)據(jù)集合，包含了該元素的屬性值。通過(guò)獲取該數(shù)據(jù)集合中的id屬性值，可以確定當(dāng)前用戶操作的是購(gòu)物車中哪一項(xiàng)商品。
// 商品選中事件處理
handleItemChange(e){
const {id}=e.currentTarget.dataset;
let {cart}=this.data;
let index=cart.findIndex(v=>v.id===id);
console.log(index)
cart[index].checked=!cart[index].checked;
this.setCart(cart);
},設(shè)置緩存方便下次打開(kāi)時(shí)存在緩存
// 設(shè)置購(gòu)物車狀態(tài) 重新計(jì)算 底部工具欄 全選 總價(jià) 總數(shù)量 重新設(shè)置緩存
setCart(cart){
let allChecked=true;
let totalPrice=0;
let totalNum=0;
cart.forEach(v=>{
if(v.checked){
totalPrice+=v.price*v.num;
totalNum+=v.num;
}else{
allChecked=false;
}
})
allChecked=cart.length!=0?allChecked:false;
this.setData({
cart,
allChecked,
totalNum,
totalPrice
})
// cart設(shè)置到緩存中
wx.setStorageSync('cart', cart);
}38.購(gòu)物車全選復(fù)選框選中業(yè)務(wù)處理
在cart包下的，index.js寫具體的商品全選事件handleItemAllCheck,點(diǎn)了之后是false狀態(tài)，需要取反，取反后每個(gè)新的屬性值allcheck設(shè)置到每個(gè)cart商品的屬性（foreach遍歷設(shè)置）
handleItemAllCheck(){
let {cart,allChecked}=this.data;
console.log(cart,allchecked)
allChecked=!allChecked;
cart.foreach(v=>v.checked=allChecked);
this.setCart(cart);
}39.購(gòu)物車商品數(shù)量編輯實(shí)現(xiàn)
購(gòu)物車?yán)锏纳唐窋?shù)量的加和減需要綁定tab事件，加1還是減1要帶operation參數(shù)，綁定參數(shù)
40.購(gòu)物車商品數(shù)量為0判定是否刪除
當(dāng)把商品數(shù)量減為0時(shí)，出現(xiàn)彈窗提示：您是否要?jiǎng)h除。設(shè)定彈窗出現(xiàn)條件：數(shù)量為1且操作為減一：cart[index].num===1?&&?operation?===?-1。刪除完之后重新this.setCart(cart)顯示頁(yè)面
// 商品數(shù)量的編輯功能
handleItemNumEdit(e){
const {id,operation}=e.currentTarget.dataset;
console.log(id,operation)
let {cart}=this.data;
let index=cart.findIndex(v=>v.id===id);
if(cart[index].num===1 && operation === -1){
wx.showModal({
title:'系統(tǒng)提示',
content:'您是否要?jiǎng)h除？',
// 點(diǎn)擊取消
cancelColor: 'cancelColor',
// 點(diǎn)擊確定
success:(res)=>{
if(res.confirm){
// 調(diào)用方法，指定索引刪除
cart.splice(index,1);
this.setCart(cart);
}
}
})
}else{
cart[index].num+=operation;
this.setCart(cart);
}
},42.商品詳情立即購(gòu)買邏輯實(shí)現(xiàn)
在product_detail包下
點(diǎn)擊商品下的立即購(gòu)買，會(huì)實(shí)現(xiàn)跳轉(zhuǎn)到購(gòu)物車頁(yè)面。
首先在html的“立即購(gòu)買”的view標(biāo)簽里添加bindtap="bandleBuy"事件文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-501248.html
<view class="tool_item btn_buy" bindtap="handleBuy">
<view>立即購(gòu)買</view>
</view>然后在index.js里寫具體的handleBuy方法文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-501248.html
// 點(diǎn)擊 立即購(gòu)買
handleBuy(){
this.setCartadd();
wx.switchTab({
url: '/pages/cart/index',
})
},到了這里，關(guān)于微信小程序購(gòu)物車頁(yè)面實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
