分享一一一京东taro实现购物车...........

taro成熟了嘛？坑还多吗？

逻辑实现：

a、点击全选，实现全选
b、单选
c、单选全部选择完时，全选自动勾选
d、全选后，取消一个单选的，则全选自动取消
e、自动计算订单金额

此坑踩了良久啊！
直接上代码，作为参考把！

import Taro, { Component } from '@tarojs/taro';
import { connect } from '@tarojs/redux';
import { View, Image, Button, Checkbox,Label ,Text,CheckboxGroup } from '@tarojs/components';
import { getCartList, delCartItem,getTotalMoney } from './service';

import './index.scss';

class Cart extends Component {
  config = {
    navigationBarTitleText: '购物车',
  };

  constructor() {
    super(...arguments)
    this.state = {
      cartItems: [],//当前购物车列表
      checkAll:false,//是否全选
      totalMoney:0,
      arr:[]             //购物车每个item的d
    }
  }

  onDeleteClothing = e => {
    const id = e.currentTarget.dataset.id;
    Taro.showModal({
      content: '是否删除该商品？',
    }).then(res => {
      if (res.confirm) {
        delCartItem(id).then(() => {
          this.setState({
            checkAll:false
          });
          // this.loadCartItems()
          Taro.navigateTo({
            url: `/pages/cart/index`,
          })
        })
      }
    });
  };

  componentDidMount = () => {
    // 加载商品列表
    this.loadCartItems()
  };

  componentDidShow() {
    // 设置衣袋小红点
    if (this.props.cartItems.length > 0) {
      Taro.setTabBarBadge({
        index: 1,
        text: String(this.props.cartItems.length),
      });
    } else {
      Taro.removeTabBarBadge({
        index: 1,
      });
    }
  }

  goHome() {
    if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
      Taro.navigateTo({
        url: '/pages/home/index',
      });
    } else {
      Taro.switchTab({
        url: '/pages/home/index',
      });
    }
  }

  loadCartItems() {
    getCartList().then(res => {
      res.data.map((item,index)=>{
        item.checked = false;
      })
      this.setState({
        cartItems: res.data
      })
    })
  }

  buy() {
    console.log(this.state.arr)
    let ids = JSON.stringify(this.state.arr)
    if(!ids.length){
      Taro.showToast({
        title: '请选择下单商品~~~',
        icon: 'none',
      });
    }else{
    Taro.navigateTo({
      url: `/pages/goOrder/index?id=${ids}`,
    })
  }
  }
  loadCartMoney(cartItemIds){
    getTotalMoney(cartItemIds).then(res => {
      this.setState({
        totalMoney:res.data.totalMoney
      })
    })
  }
  checkAll=(e)=>{
    // console.log(e.target.checked)
    //全选逻辑
    var items = [...this.state.cartItems]
    //checked取反
    items.map((item,index)=>{
      if(e.target.checked){
        items[index].checked = true
      }else{
        items[index].checked = false
      }
      this.setState({
        cartItems:items,
        checkAll:true
      })
    })

    let arr =[];
    for (let elem of this.state.cartItems.values()) {
      if(elem.checked){
        arr.push(elem.id);
      }
    }
    
    this.setState({
      arr:arr
    })

    console.log(arr)
    this.loadCartMoney(arr.join(','));
  }
  
  changeState=(e)=>{
    console.log(e.target.value)
    //单个选择  用cartItems作为参照  更改状态
    var items = [...this.state.cartItems]

    if(!e.target.checked){
      items.map((item,index)=>{
          if(e.target.value == item.id){
            item.checked = false;
          }
      })
    }else{
      items.map((item,index)=>{
        if(e.target.value == item.id){
          item.checked = true;
        }
      })
    }
    
    this.setState({
      cartItems:items,
      checkAll:false
    })
    // console.log(this.state.cartItems)
    // console.log(this.state.checkAll)
    let nums = 0;
    for (let elem of this.state.cartItems.values()) {
      if(elem.checked){
        nums += 1;
        if(nums == this.state.cartItems.length){       //如果等于length 代表单选中  已经全部选中
          this.setState({
            checkAll:true
          })
        }else{
          this.setState({
            checkAll:false
          })
        }
      }
    }

    let arr =[];
    for (let elem of this.state.cartItems.values()) {
      if(elem.checked){
        arr.push(elem.id);
      }
    }
    this.setState({
      arr:arr
    })

    console.log(arr)
    this.loadCartMoney(arr.join(','));
  }
  handleClick = e => {
    Taro.navigateTo({
      url: `/pages/detail/index?id=${e.currentTarget.dataset.id}`,
    })
  }
  render() {
    const { cartItems,checkAll,arr,totalMoney} = this.state;
    const isH5 = Taro.getEnv() === Taro.ENV_TYPE.WEB;
    return (
      
        {cartItems.length == 0 ? (
          
            
            
              立即去挑选商品
            
          
        ) : (
          
              
                    
                         全选
                    
                   
                    
                    
                    {cartItems.map(item => (
                      
                        
                        
                        
                          
                            
                              
                            
                            
                              {item.productName}
                              数量 {item.count}
                              
                                {`${item.productAttributeL1Name} | ${item.productAttributeL2Name}`}
                              
                            
                          
                          
                            
                          
                        
                        
                      
                    ))}
                    
              
              
                
                  
                    合计：
                    
                      {totalMoney}元
                    
                  
                  
                    去结算
                  
                  
                    如有失效商品，建议删除，以免占用购物车总数
                  
                
              
          
        )}
      
    );
  }
}

export default Cart;

有问题欢迎知道。共同交流改进。

欢迎star本人github：https://github.com/flyku