實現一個購物車頁面,需要哪些數據。整理下大概如下:
一個購物車商品列表(carts),列表裏的單個item包含:商品id(id),商品圖(image),商品名(title),單價(price),數量(amount),單選按鈕(selected);
全選按鈕,需要一個字段(selectAllStatus)表示是否全選;
總價(totalPrice);
總數量(totalNum)。
還有一個需要判斷的是購物車是否爲空(hasList)的字段。
購物車主要的幾個功能:商品數量的加減、單選、全選、計算總價格、總數量、商品刪除。
wxml代碼:
<!-- 購物車商品列表 -->
<view class="list">
<view wx:if="{{hasList}}">
<block wx:for="{{carts}}" wx:key="id">
<view class="item-section" bindlongpress="delItem" data-index="{{index}}">
<!-- 單選按鈕 是否選中顯示不同的圖標 -->
<view class="radio-section" wx:if="{{item.selected}}" data-index="{{index}}" bindtap="changeSelect">
<icon type="success_circle" color="#f00"></icon>
</view>
<view class="radio-section" wx:else data-index="{{index}}" bindtap="changeSelect">
<icon type="circle" color="#ccc"></icon>
</view>
<view class="cart-info">
<view class="img">
<!-- 圖片跳轉到詳情頁 -->
<navigator url="/pages/good-detail/good-detail?productId={{item.prodId}}">
<image src="{{item.prodPic}}" mode="aspectFill" />
</navigator>
</view>
<view class="info-rt">
<view class="title">{{item.prodName}}</view>
<view>
<view class="price">¥{{item.prodPrice}}</view>
<!-- 數量加減操作 -->
<view class="numarea">
<text class="sign num-minus" data-types="minus" data-index="{{index}}" bindtap="changeNum">-</text>
<text class="num-input">{{item.amount}}</text>
<text class="sign num-plus" data-types="plus" data-index="{{index}}" bindtap="changeNum">+</text>
</view>
</view>
</view>
</view>
</view>
</block>
</view>
<view wx:else>
<view>購物車還沒有商品哦~~</view>
<navigator open-type='switchTab' url="/pages/allproduct/allproduct" class="toShopping">去逛逛</navigator>
</view>
</view>
<!-- 底部操作欄 -->
<view class="bottom-box">
<view class="select-all" wx:if="{{selectAllStatus}}" data-select="{{selectAllStatus}}" bindtap="selectAll">
<icon type="success_circle" color="#f00"></icon>
<text>全選</text>
</view>
<view class="select-all" wx:else bindtap="selectAll">
<icon type="circle" color="#ccc"></icon>
<text>全選</text>
</view>
<view class="total-price">合計:¥{{totalPrice}}</view>
<view class="toBuy" bindtap="submitOrder" data-num ="{{totalNum}}">去結算({{totalNum}})</view>
</view>
代碼實現:
初始展示購物車商品
Page({
/**
* 頁面的初始數據
*/
data: {
carts: [], //購物車商品列表
hasList: false, // 列表是否有數據
totalPrice: 0, // 總價,初始爲0
totalNum: 0, //去結算括號裏的總數量
selectAllStatus: false, // 全選狀態
userId: '',
},
//根據userId得到購物車列表數據
getList: function() {
let that = this
let userId = that.data.userId
let carts = that.data.carts
wx.request({
url: 'xxx.com/api/ShoppingCar/getShoppingCar?userId=' + userId,
header: {
'content-type': 'application/json'
},
method: 'GET',
success: function(res) {
console.log(res)
let items = res.data.items
//當購物車不爲空才進行後續判斷操作
if(items !== null){
if (items.length > 0) {
that.setData({
hasList: true, // 有數據了,那設爲true
carts: res.data.items,
shoppingCarId: res.data.shoppingCarId,
buyerId: res.data.buyerId
})
} else {
console.log('購物車沒有商品')
}
} else{
return false
}
},
fail: function(res) {},
complete: function(res) {},
})
},
onShow: function(){
//onLoad 和onReady 只執行一次 所以數據放在onshow裏每次打開頁面都會執行
this.getList()
this.calcTotalPrice()
this.totalNum()
}
})
商品數量的加減:點擊+號,amount 加1,點擊-號,如果amount > 1,則減1;利用wxml頁面中綁定的type屬性,直接在方法中判斷是操作加號還是減號
//加減按鈕操作
changeNum: function(e) {
//console.log(e)
let that = this
let types = e.target.dataset.types, //加和減按鈕上分別設置了types屬性
index = e.target.dataset.index,
cartsData = that.data.carts; //初始購物車列表數據
console.log(cartsData[index])
let amount = cartsData[index].amount
if (types == 'minus') {
if (amount <= 1) { //不允許購物車數量低於1
wx.showToast({
title: '數量不能少於1',
})
return false
} else {
amount = amount - 1
cartsData[index].amount = amount
//修改數量後重新渲染頁面
that.setData({
carts: cartsData
})
}
}
if (types == 'plus') {
amount = amount + 1
cartsData[index].amount = amount
that.setData({
carts: cartsData
})
}
that.calcTotalPrice()
that.totalNum()
wx.request({
url: 'xxx.com/api/ShoppingCarItem/uptTransItem',
data: {
"transItemId": cartsData[index].transItemId,
"prodId": cartsData[index].prodId,
"amount": cartsData[index].amount,
"shoppingCarId": cartsData[index].shoppingCarId
},
header: {
'content-type': 'application/json'
},
method: 'POST',
success: function(res) {
console.log(res)
},
fail: function(res) {},
complete: function(res) {},
})
},
單選事件:
//單個商品選中事件
changeSelect: function(e) {
//console.log(e)
let cartsData = this.data.carts
let index = e.currentTarget.dataset.index
//切換選中狀態
cartsData[index].selected = !cartsData[index].selected
// 循環數組數據,判斷----選中/未選中[selected]
//新定義一個flag, 當循環商品的選中狀態爲true,flag+1;所有商品都爲選中狀態,則爲全選
let flag = 0
for (let i = 0, len = cartsData.length; i < len; i++) {
if (cartsData[i].selected == true) {
flag += 1
}
}
if (cartsData.length == flag) {
this.data.selectAllStatus = true;
} else {
this.data.selectAllStatus = false;
}
this.setData({
carts: cartsData,
selectAllStatus: this.data.selectAllStatus
})
this.calcTotalPrice()
this.totalNum()
},
全選事件:
//購物車全選按鈕
selectAll: function(e) {
//console.log(e)
let selectAllStatus = e.currentTarget.dataset.select; //先判斷是否爲全選
let cartsData = this.data.carts
//將true 轉爲 false(所有商品未選中狀態)
selectAllStatus = !selectAllStatus
for (let i = 0, len = cartsData.length; i < len; i++) {
cartsData[i].selected = selectAllStatus
}
// 頁面重新渲染
this.setData({
selectAllStatus: selectAllStatus,
carts: cartsData
})
this.calcTotalPrice()
this.totalNum()
},
計算總價格:
//計算商品總價
//總價 = 選中的商品1的 價格 * 數量 + 選中的商品2的 價格 * 數量 + ...
calcTotalPrice: function() {
//獲取商品列表數據
let cartsData = this.data.carts
//聲明一個變量接收數組列表price
let total = 0
for (let i = 0, len = cartsData.length; i < len; i++) {
if (cartsData[i].selected) { //判斷選中才會計算價格
total += cartsData[i].amount * cartsData[i].prodPrice;
}
}
this.setData({ // 最後賦值到data中渲染到頁面
carts: cartsData,
totalPrice: total.toFixed(2)
});
},
計算總數量:
//總數量
totalNum: function() {
let cartsData = this.data.carts
//新定義初始變量
let totalNum = 0
for (let i = 0, len = cartsData.length; i < len; i++) {
if (cartsData[i].selected) {
totalNum += cartsData[i].amount
}
}
this.setData({
totalNum: totalNum
})
},
刪除單個商品:
//刪除商品
delItem: function(e) {
//console.log(e)
let that = this
let cartsData = that.data.carts
let index = e.currentTarget.dataset.index
wx.request({
url: 'xxx.com/api/ShoppingCarItem/delTransItem?value=' + cartsData[index].transItemId,
header: {
'content-type': 'application/json'
},
method: 'POST',
success: function(res) {
console.log(res)
wx.showModal({
title: '提示',
content: '確認刪除嗎',
success: function(res) {
console.log(res)
wx.showModal({
title: '提示',
content: '確認刪除嗎',
success: function(res) {
console.log(res)
if (res.confirm) {
cartsData.splice(index, 1) //刪除購物車列表裏這個商品
that.setData({
carts: cartsData
})
that.calcTotalPrice()
that.totalNum()
// 如果購物車爲空
if (cartsData.length == 0) {
that.setData({ //修改標識爲false,顯示購物車爲空頁面
hasList: false
});
}
}
}
})
},
fail: function(res) {},
complete: function(res) {},
})
},