GululuQ-mp/pages/cart/cart.js

// 获取应用实例
const {API} = require('../../service/api.js');
Page({
    data:{
        cartList: [
            { id: 1, name: "商品A商品A商品A商品A商品A", price: 100, checked: false, count: 1 },
            { id: 2, name: "商品B商品B商品B商品B商品B", price: 200, checked: false, count: 2 },
            { id: 3, name: "商品C", price: 300, checked: false, count: 1 }
        ],
        isAllChecked: false, // 全选状态
        totalPrice:0,
        checkedCount:0,
        isManage:false, // 是否进入管理模式
    },
    // 获取购物车商品
    getCartProds(){
       API.getCartProds().then(res=>{
           this.handleCartsFn(res);
       })
    },
    // 处理商品函数
    handleCartsFn(value){
        let num = 0,checkIds=[];
        value.carts.forEach(item=>{
            if(item.checkFlag === "1"){
                num+=1;
                checkIds.push(item.id+'');
            }
        })
        this.setData({
             cartList:value.carts,
             totalPrice:value.checkedSumAmount,
             checkedIds:checkIds,
             isAllChecked:num === value.carts.length
        })
    },
    // 购物车选中/取消
    handleCheckboxFn(prodId){
        let {id} = this.data.cartList.filter(item=>item.id == prodId)[0];
       API.checkedCartProds({id}).then(res=>{
          this.handleCartsFn(res);
       })
    },
    // 选中/取消选中所有
    handleCheckedAll(){
        API.handleCheckedAll().then(res=>{
          
        })
    },
    // 取消选中所有
    handleUncheckedAll(){
        API.handleUncheckedAll().then(res=>{
            
        })
    },
    // 删除选中的商品
    deleteProd(){
        let ids = this.data.checkedIds;
        API.deleteCartProds({ids}).then(res=>{
            this.handleCartsFn(res);
        })
    },
    // 复选框变化事件
    handleCheckboxChange(e) {
        const oldCheckIds = this.data.checkedIds;
        const checkedIds = e.detail.value; // 选中的商品id数组（如 ['1', '2']）
        const cartList = this.data.cartList.map(item => {
        item.checkFlag = checkedIds.includes(item.id.toString());
            return item;
        });
        // 取消选中
        if(oldCheckIds.length > checkedIds.length){
           let id = oldCheckIds.filter(item=>!checkedIds.includes(item));
           this.handleCheckboxFn(id[0]);
        }else{
           this.handleCheckboxFn(checkedIds.at(-1));
        }
        this.setData({ 
            cartList,
            checkedIds,
            isAllChecked: checkedIds.length === this.data.cartList.length
        });
        this.calculateTotal(); // 计算总价
    },
    // 全选/取消全选
    toggleAll() {
        const isAllChecked = !this.data.isAllChecked;
        const cartList = this.data.cartList.map(item => {
            item.checkFlag = isAllChecked;
            return item;
        });
        this.setData({ cartList, isAllChecked });
        if(isAllChecked){
            this.handleCheckedAll();
        }else{
            this.handleUncheckedAll();
        }
        this.calculateTotal();
    },
    // 增加数量
    increaseCount(e) {
        const id = e.currentTarget.dataset.id;
        const cartList = this.data.cartList.map(item => {
        if (item.id == id) item.quantity++;
            return item;
        });
        this.setData({ cartList });
        this.calculateTotal();
    },
  
    // 减少数量
    decreaseCount(e) {
        const id = e.currentTarget.dataset.id;
        const cartList = this.data.cartList.map(item => {
        if (item.id == id && item.quantity > 1) item.quantity--;
            return item;
        });
        this.setData({ cartList });
        this.calculateTotal();
    },
    // 计算总价和选中数量
    calculateTotal() {
        let totalPrice = 0;
        let checkedCount = 0;
        this.data.cartList.forEach(item => {
        if (item.checkFlag) {
            totalPrice += item.price * item.quantity;
            checkedCount++;
        }
        });
        this.setData({ totalPrice, checkedCount });
    },
    // 管理按钮
    manageBut(){
        this.setData({
            isManage:!this.data.isManage
        })
    },
    onLoad(){
        this.getCartProds();
    }
})