Taro+vue3+NutUI实现微信小程序的购物车功能

这个功能主要是使用原生的标签+js+css实现的，目前在项目中属于定制化开发，后期可以考虑封装成组件，简单的记录一下

 
    <--左边tab切换分类-->
      
        
          
{{ item?.name }}
          

            {{
              getDistance(
                item?.positionLatitude,
                item?.positionLongitude,
                state.currentLat,
                state.currentLon
              )
            }}
          
        
      
    <--右边是种类条目，可增减-->
      
        
          
          
            
              {{ item?.name }}
            
            
              物资数量
              {{
                item?.quantity
              }}
              可用
              {{
                item?.availableQuantity
              }}
            
            
              使用用途
              {{ item?.uses }}
              
                
                

                  +
                
              
            
          
        
        
          暂无物资
        
      
    
    <--底部操作按钮-->
    
      
已选{{ state.chooseList.length }}项
      确定选择
      查看选择
    

 //种类tab切换事件
    siteChange(v, id) {
      this.state.indexNm = v;
      this.state.tabValue = id;
      this.state.goodsList = this.state.siteList[v].goods;
    },
 //初始化
    numAdd(e) {
      this.state.flag = true;
      this.state.goodsList.map((el) => {
        if (el.id === e.target.dataset.id) {
          this.state.chooseList.push(el);
          el.numValue = 1;
        }
        this.state.chooseList = this.state.chooseList.filter((item, index) => {
          return this.state.chooseList.indexOf(item) === index;
        });
        return el;
      });
    },

效果图