微信小程序项目_秋泊优选42

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