```
// pages/shop/index.js
import {
getCartList,
getCartDel,
getCartEdit
} from "../../service/api"
Page({
/**
* 頁面的初始數據
*/
data: {
cartList: [],//list
startx: 0,//開始x坐標
starty: 0,
allSelected : false,//全選按鈕是否選擇
countSelect : false,//結算背景顏色判斷
count : 0,//總金額
num : 0,//購物車選中的個數
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: async function (options) {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: async function () {
this.setData({countSelect : false,count : 0,num:0,allSelected:false})
// 每次切換到此頁面都需要刷新，所以放到此周期中
this.getList();
},
async getList(){
//獲取購物車列表
const res = await getCartList();
if (res.status == 200) {
//如果全選后，再刪除一個商品，解決數據異步請求后無法再選中問題
//先判斷是否全選
let allSelected = this.data.allSelected;
let list = res.data.result;
let num = 0;
let count = 0;
if(allSelected){
list.forEach((val, i) => {
val.selected = true;
count += parseFloat(val.price) * val.num
})
num = list.length;
}
this.setData({
cartList: res.data.result,
num : num,
count : count
})
}
},
//獲取觸摸時的位置
touchstart(e) {
this.setData({
startx: e.changedTouches[0].clientX,
starty: e.changedTouches[0].clientY
});
},
//獲取手指滑動后的實時位置
touchmove(e) {
//獲取當前滑動的元素的索引,開始的位置，和滑動后的位置
var index = e.currentTarget.dataset.index,
startx = this.data.startx,
starty = this.data.starty,
movex = e.changedTouches[0].clientX,
movey = e.changedTouches[0].clientY;
//判斷movex和startx的大小，得到左滑還是右滑
var list = this.data.cartList; //獲取list
//滑動之前把刪除按鈕都隱藏
list.forEach((val, i) => {
val.isMove = false;
})
if (movex < startx) { //左滑
// 讓這個元素控制左滑的屬性變成true，添加滑動的clas
list[index].isMove = true;
} else {
list[index].isMove = false;
}
this.setData({
cartList: list
}); //重新設置list
},
//刪除購物車
remove(e) {
let id = e.currentTarget.dataset.id;
let _that = this;
wx.showModal({
title: '提示',
content: '確定要刪除嗎？',
success (res) {
if (res.confirm) {
getCartDel(id).then(res=>{
if(res.status == 200){
//重新加載購物車
_that.getList();
wx.showToast({
title: '刪除成功',
image : '../../images/icon3.png',
})
}
})
} else if (res.cancel) {
wx.showToast({
title: '已取消刪除',
image : '../../images/icon2.png',
})
}
}
})
},
//點擊商品區域
itemClick(e){
let list = this.data.cartList;
// for(let i=0;i<=list.length;i++){
// list[i].isMove = false;
// }
list.forEach((val, i) => {
val.isMove = false;
})
//獲取列表索引
let index = e.currentTarget.dataset.index;
if(list[index].isMove){
list[index].isMove = false;
}
this.setData({cartList : list});
},
// 商品選擇
shopSelected(e){
let list = this.data.cartList;
let index = e.currentTarget.dataset.index;//獲取列表索引
let num = this.data.num;// 購物車選中的數據
let count = this.data.count;//總金額
let countSelect = this.data.countSelect;//結算背景顏色
let allSelected = this.data.allSelected;//全選按鈕
// 改變當前的選中值（取反）
list[index].selected = !list[index].selected;
//計算總金額
if(list[index].selected){
num++;
count +=parseFloat(list[index].price) * list[index].num;
}else{
num--;
if(num == 0){
count = 0
}else{
count -= parseFloat(list[index].price) * list[index].num ;
}
}
//改變結算區域的背景顏色
if(num > 0){
countSelect = true;
}else{
countSelect = false;
}
if(num == list.length){
allSelected = true;
}else{
allSelected = false;
}
this.setData({cartList : list,count,num,countSelect,allSelected});
},
//全選
selectAll(){
let list = this.data.cartList;
let num = this.data.num;// 購物車選中的數據
let count = this.data.count;//總金額
let countSelect = this.data.countSelect;//結算背景顏色
let allSelected = !this.data.allSelected;//全選按鈕圖標取反
//商品選中狀態，選中的商品的個數
if(allSelected){
num = list.length;
}else{
num = 0;
}
// 根據選中個數，計算總價，選中狀態，結算背景顏色
if(num == list.length || (num < list.length && num !== 0)){
countSelect = true;
list.forEach((val, i) => {
val.selected = true;
count += parseFloat(val.price) * val.num;
})
}else {
countSelect = false;
list.forEach((val, i) => {
val.selected = false;
})
count = 0
}
this.setData({allSelected,countSelect,count,cartList:list,num});
},
//增加商品數量
add(e){
let index = e.currentTarget.dataset.index;
let id = e.currentTarget.dataset.id;
let list = this.data.cartList;
let count = this.data.count;
list[index].num ++ ;
if(list[index].num > 9){
wx.showToast({
title: '數量不能超過9',
icon : 'none'
})
list[index].num = 9;
return false
}
// this.setData({cartList : list})
//更新數量接口
getCartEdit(id,list[index].num).then(res=>{})
// 如果當前選中狀態，總價需要更新
if(list[index].selected){
count += parseFloat(list[index].price) ;
}
this.setData({cartList : list,count});
},
//減少數量
async reduce(e){
let index = e.currentTarget.dataset.index;
let id = e.currentTarget.dataset.id;
let list = this.data.cartList;
let count = this.data.count;
list[index].num --
if(list[index].num < 1){
wx.showToast({
title : '數量不能小于1',
})
list[index].num = 1;
return false;
}
//更新數量接口
await getCartEdit(id,list[index].num).then(res=>{})
// 如果當前選中狀態，總價需要更新
if(list[index].selected){
count -= parseFloat(list[index].price) ;
if(list[index].num = 0){
list[index].price = 0;
}
}
this.setData({cartList : list,count});
}
})
```
