微信小程序開發(fā)項目實戰(zhàn)（微課版）課件 7-2 課件-購物車頁面詳情

項目七購物車模塊開發(fā)任務(wù)二購物車頁面詳情ShoppingcartpageDetails

購物車頁面設(shè)計應(yīng)該注重用戶界面的友好性和直觀性。購物車頁面應(yīng)該具有清晰簡潔的布局，突出顯示重要信息，讓用戶一目了然。購物車詳情頁面應(yīng)該包括商品名稱、價格、數(shù)量、小計、刪除和結(jié)算等基本信息。項目七購物車模塊開發(fā)任務(wù)描述購物車商品列表屬性類型描述bindchangeEventHandlecheckbox-group選中項發(fā)生改變時觸發(fā)change事件，detail={value:[選中的checkbox的value的數(shù)組]}屬性類型默認值描述valuestring

checkbox標識，選中時觸發(fā)checkbox-group的change事件，并攜帶checkbox的valuedisabledbooleanfalse是否禁用checkedbooleanfalse當前是否選中，可用來設(shè)置默認選中colorstring#09BB07checkbox的顏色，同css的color

checkbox-group多項選擇器，內(nèi)部由多個checkbox組成。

購物車里的商品左邊有復選框，使用小程序的表單組件checkbox，該組件包含了四個屬性值。購物車商品數(shù)量

為商品數(shù)量“-”和“+”按鈕添加reduceCount和addCount函數(shù)，實現(xiàn)購物車商品數(shù)據(jù)的增加與減少。購物車商品數(shù)量data:{

users:[

{name:'小明',age:28},

{name:'小紅',age:39},

{name:'小李',age:40},

{name:'小張',age:30}

]},onLoad(options){

letinfo=this.data.users;

info.forEach(function(item,index){

console.log(index+'姓名：'+info[index].name+'年齡：'+info[index].age);

})

info.forEach((item,index)=>{

console.log(index+'姓名：'++'年齡：'+item.age);})}

forEach()方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。購物車商品數(shù)量

settleCount(){

let

totalPrice=0;

this.data.cartList.forEach(item=>{

if(item.isChecked){

totalPrice+=item.salePrice*item.

quantity

}

})

this.setData({

totalPrice:totalPrice

})

},

在pages/goodsCart/goodsCart.js文件中，不管是減號還是加號按鈕，當點擊時，都需要進行總金額的計算，所以先完成計算總金額函數(shù)settleCount，獲得選中的商品，如果商品isChecked屬性為真時，則對商品的金額進行計算。代碼如下。購物車商品列表

<view

class="oper">

<view

class="reduce"data-id="{{item.id}}"

bindtap="reduceCount"

>-</view>

<input

value="{{item.quantity}}"

type="number"/>

<view

class="add"

data-id="{{item.id}}"

bindtap="addCount">+</view>

<viewclass="btn-del"data-index="{{item.id}}"bindtap="btnDel">刪除</view></view>購物車底部信息

<view

class="total-cart">

<view

class="all">

<checkbox-group

bindchange="checkAll">

<checkbox

value="1"

checked="false"></checkbox>

<text>全選</text>

</checkbox-group>

</view>

<view

class="total-price">

總價：<text

class="price">￥{{totalPrice}}</text>

</view>

<view

class="btn

btn-primary">去結(jié)算</view>

</view>

購物車底部信息包含了三個內(nèi)容，全選的復選框，選中的商品總價，結(jié)算按鈕。在pages/goodsCart/goodsCart.wxml文件中，為"total-cart"視圖容器編寫頁面布局代碼：購物車為空狀態(tài)<view

wx:else

class="no-result">

<view

class="no-content">

<image

src="/images/cring.png"></image>

<text>暫無商品</text>

<button

class="go-list"

bindtap="gotoList">前往添加商品</button>

</view></view>

當購物車頁面為空時，購物車頁面將定向到商品列表頁面。購物車為空狀態(tài)

gotoList:function(){

wx.navigateTo({

url:

'/pages/goodsList/goodsList'

})

}

在pages/goodsCart/goodsCart.js文件中，實現(xiàn)bindtap="gotoList"，當購物車為空時，跳轉(zhuǎn)到商品列表頁面選購商品。購物車為空狀態(tài)表wx.navigateTo參數(shù)屬性類型必填描述urlstring是需要跳轉(zhuǎn)到應(yīng)用內(nèi)非tabBar頁面的路徑(代碼包路徑),路徑后可以帶參數(shù)。參數(shù)與路徑之間使用?分隔，參數(shù)鍵與參數(shù)值用=相連，不同參數(shù)用&分隔；如'path?key=value&key2=value2'eventsObject否頁面間通信接口，用于監(jiān)聽被打開頁面發(fā)送到當前頁面的數(shù)據(jù)。successfunction否接口調(diào)用成功的回調(diào)函數(shù)，eventChannel參數(shù)，和被打開頁面進行通信failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

wx.navigateTo(Objectobject)保留當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層。購物車為空狀態(tài)

wx.navigateTo({

url:'test?id=1',events:{//為指定事件添加一個監(jiān)聽器，獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據(jù)

acceptDataFromOpenedPage:function(data){console.log(data)},},success:function(res){//通過eventChannel向被打開頁面?zhèn)魉蛿?shù)據(jù)res.eventChannel.emit('acceptDataFromOpenerPage',