38、购物车_商品删除功能
3.1当购物车的数量=1同时用户点击 “-"
弹窗提示询问用户是否要删除(showModal)API
1 确定直接执行删除
2 取消什么都不做
utils\asyncWx.js
// 将弹窗提示 封装为Promise 形式
/**
* Promise 形式showModal
* @param {object} param0 参数
*/
export const showModal=({
content})=>{
return new Promise((resolve, reject)=>{
wx.showModal({
title:'提示',
content: content,
success :(res) =>{
resolve(res);
},
fial:(err)=>{
reject(err);
}
})
})
}
pages\cart\index.js
import {
getSetting, chooseAddress, openSetting, showModal} from "../../utils/asyncWx.js";
// 在小程序代码里使用es7的async和await语法(引入解决报错的包)
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
data:{
address:{
},
cart:[],
allChecked:false,
totalPrice:0,
totalNum:0
},
onShow(){
// 1 获取缓存中的收货地址信息
const address=wx.getStorageSync('address');
// 获取缓存中的购物车数据
const cart=wx.getStorageSync("cart")||[];
this.setData({
address});
this.setCart(cart);
},
// 点击收货地址
async handleChooseAddress(){
try {
// 1 获取权限状态
const res1 = await getSetting();
const scopeAddress = res1.authSetting["scope.address"];
// 2 判断权限状态
if (scopeAddress === false){
await openSetting();
}
// 4 调用获取收货地址的 api
let address = await chooseAddress();
address.all=address.provinceName+address.cityName+address.countyName+address.detailInfo;
// 5 存入到缓存中
wx.setStorageSync("address", address);
} catch (error) {
console.log(error);
}
},
// 商品的选中
handeItemChange(e){
// 1 获取被修改的商品的id
const goods_id=e.currentTarget.dataset.id;
// 2 获取购物车数组
let {
cart }=this.data;
// 3 找到被修改的商品对象
let index=cart.findIndex(v=> v.goods_id === goods_id);
// 4 选中状态取反
cart[index].checked = !cart[index].checked;
this.setCart(cart);
},
// 设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
setCart(cart){
let allChecked=true;
// 总价格 总数量
let totalPrice = 0;
let totalNum = 0;
cart.forEach(v=>{
if(v.checked){
totalPrice += v.num * v.goods_price;
totalNum += v.num;
} else {
allChecked = false;
}
})
// 判断数组是否为空
allChecked=cart.length !=0 ? allChecked : false;
this.setData({
cart,
totalPrice,
totalNum,
allChecked
});
wx.setStorageSync("cart", cart);
},
// 商品全选功能
handleItemAllCheck(){
// 1 获取data中的数据
let {
cart,allChecked}=this.data;
// 2 修改值
allChecked=!allChecked;
// 3 循环修改cart数组中的商品选中状态
cart.forEach(v=>v.checked=allChecked);
// 4 把修改后的值填充回data或者缓存中
this.setCart(cart);
},
// 商品数量的编辑功能
async handleItemNumEdit(e){
// 1 获取传递过来的参数
const {
operation,id}=e.currentTarget.dataset;
// 2 获取购物车数组
let {
cart}=this.data;
// 3 找到需要修改的商品的索引
const index=cart.findIndex(v=>v.goods_id===id);
// 3.1 判断是否要执行删除
if(cart[index].num===1&&operation===-1){
// 弹窗提示
const res=await showModal({
content:"您是否要删除?"});
if (res.confirm) {
cart.splice(index,1);
this.setCart(cart);
}
}else{
// 4 进行修改数量
cart[index].num+=operation;
// 5 设置回缓存和data中
this.setCart(cart);
}
}
})