```
// 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});
}
})
```
