二级联动加购物车部分功能

今天写了一个二级联动加购物车的小案例

先看二级联动的代码

<template>
	 <div class="home-container">
	 	<!-- 左右联动内容 -->
	    <div class="home-wrapper">
	      <!-- 左侧一级列表 -->
	        <div class="home-left-context">
	          <div v-for="(item,index) in sliderleft "
	          :key="index"
	          :class="current===index?'home-left-item-active':'home-left-item'"
	          @click="changecurrent(index)"
	          >
	            {{item.anchor_point}}
	          </div>
	        </div>
	        <!-- 右侧二级列表 -->
	        <div class="home-right-context" 
	          ref="right"
	          @mousewheel="onMouse">
	            <div v-for="(ele,index) in sliderleft "
	            :key="index"
	            class="home-right-item"
	            ref="block"
	            >
	              <div>{{ele.anchor_point}}</div>
	              <div v-for="(items,index) in ele.commodity_list "
	              :key="index" 
	              class="shop-list-item"
	              >
	                <div class="shop-list-item-img">
	                  <img :src=items.comm_image alt="">
	                </div>
	                <div class="shop-list-item-title">
	                  <div>{{items.comm_title}}</div>
	                  <div class="shop-list-count">
	                    <div>￥{{items.comm_price}}</div>
	                    <div class="shop-list-add-count"
	                    @click="addtocart(items)"
	                    >+</div>
	                  </div>
	                </div>
	              </div>
	            </div>
	        </div>
	    </div>
	 </div>
</template>
<script>
import '../css/home.css'
import Axios from "axios"

export default {
  data(){
    return{
      sliderleft:[],
      current:0,
      show:false
    }
  },
  filters:{
    num:function(value){
      // window.console.log(value)
      return value.toFixed(2)
    }
  },
  methods:{
    // 点击左侧一级列表，同步右边二级列表(右边列表滚动)
    changecurrent(index){
      this.current=index;
      // 通过ref属性，获取到点击左侧，右侧相应的内容
      var rightEle = this.$refs.block[this.current]
      // 将右侧相应的内容提升到顶部，behavior: "smooth"滚动效果
      rightEle.scrollIntoView({behavior: "smooth"})
      // 取消绑定的滚动事件
      this.$refs.right.removeEventListener('scroll',this.handscroll,true)
    },
    // 增加监听事件
    handscroll(event){
      // 获取右侧内容距离顶部的距离
      var scrolltop=event.target.scrollTop;
      // window.console.log(scrolltop)
      var rightitem=this.$refs.block;
      // 通过区间判断来修改左侧的index
      for (let index=0;index<rightitem.length;index++){
        if(scrolltop >=rightitem[index].offsetTop && scrolltop <rightitem[index+1].offsetTop){
          
          // 解决右侧最后一个同步不到左侧最后一个
          if(scrolltop>4000){
            this.current=rightitem.length-1;
          }else{
            this.current=index;
          }
        }
      }
    },
    // 右侧列表同步左侧
    onMouse(){
       this.$refs.right.addEventListener('scroll',this.handscroll,true)
    },
  },
  mounted(){
    Axios.get("http://localhost:8080/shoplist.json").then((resp)=>{
      // window.console.log(resp.data)
      this.sliderleft=resp.data
    }).catch((error)=>{
      window.console.log(error)
    })
  },
  //由于购物车使用了vuex所以需要通过计算属性来获取数据
  computed:{
    cartitem:function(){
      return this.$store.state.cartitem
    },
    totalPrice:function(){
      return this.$store.state.totalPrice
    }
  }
}
</script>

上面的代码实现了左右联动，接下在看购物车的代码
由于上面已经有了template跟script所以就不在写了

<div class="cart-show-container">
      <div class="cart-show-wrapper" @click="isshow">
        <div class="cart-show-img">
          <!-- <div> -->
            <img src="../assets/cart.png" alt="">
          <!-- </div> -->
          <div class="cart-item-count">{{cartitem.length}}</div>
        </div>
        <div class="cart-show-count">
          <div class="cart-show-price">￥{{totalPrice | num}}</div>
        </div>
        <div class="cart-show-pay">去结算</div>
      </div>
    </div>
    <!-- 计算总价 -->
    <div class="show-container" v-show="show">
      <div class="show-wrapper">
         <div @click="deleall">清空</div>
          <div v-for="(item,index) in cartitem "
          :key="index"
          class="show-cart-list"
          >
            <div>{{item.comm_title}}</div>
            <div>{{item.comm_price}}</div>
            <div class="show-list-count">
              <div class="show-cart-list-miuns"
              @click="minuscount(item)"
              >-</div>
              <div class="show-cart-list-count">{{item.count}}</div>
              <div class="show-cart-list-add"
               @click="addcount(item)"
              >+</div>
            </div>
          </div>
      </div>
    </div>
    //这是methods中的方法
    // 底部购物车隐藏显示
    isshow(){
      this.show=!this.show
    },
    // 增加商品到购物车
    addtocart(items){
      // window.console.log(items)
      this.$store.dispatch("getcartlist",items)
    },
    // 数量加
    addcount(item){
      // window.console.log(item)
      this.$store.dispatch("addcount",item)
    },
    // 数量减
    minuscount(item){
      // window.console.log(item)
      this.$store.dispatch("minuscount",item)
    },
    // 删除购物车内的商品
    deleall(){
      this.$store.dispatch("deleall")
      this.show=false
    },

购物车vuex代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cartitem:JSON.parse(localStorage.getItem("cart"))||[],
    totalPrice:0
  },
  mutations: {
    // 向购物车添加商品
    getcartlist(state,item){
      var index=state.cartitem.findIndex((ele)=>{
        return  ele.id===item.id
      })
      if(index!=-1){
        state.cartitem[index].count++
      }else{
        item.count=0;
        state.cartitem.push(item)
      }
      item.count++
      state.totalPrice=0
      state.cartitem.forEach((ele)=>{
        state.totalPrice+=ele.count*ele.comm_price
      })
      localStorage.setItem("cart",JSON.stringify(state.cartitem))
      // console.log(state.cartitem)

    },
    // 增加商品数量
    addcount(state,item){
        state.cartitem.forEach((ele)=>{
          return ele.id===item.id
        })
        
        item.count++
        state.totalPrice=0
        state.cartitem.forEach((ele)=>{
          state.totalPrice+=ele.count*ele.comm_price
        })
        localStorage.setItem("cart",JSON.stringify(state.cartitem))
    },
    // 减少商品数量
    minuscount(state,item){
      state.cartitem.forEach((ele)=>{
        return ele.id===item.id
      })
      if(item.count===1){
        item.count=1;
        return
      }
      item.count--
      state.totalPrice=0
      state.cartitem.forEach((ele)=>{
        state.totalPrice+=ele.count*ele.comm_price
      })
      localStorage.setItem("cart",JSON.stringify(state.cartitem))
    },
    // 删除购物车商品
    deleall(state){
      state.cartitem=[]
      state.totalPrice=0
      localStorage.setItem("cart",JSON.stringify(state.cartitem))
    }
  },
  actions: {
    getcartlist(context,item){
      // console.log(item)
      context.commit("getcartlist",item)
    },
    addcount(context,item){
      context.commit("addcount",item)
    },
    minuscount(context,item){
      context.commit("minuscount",item)
    },
    deleall(context){
      context.commit("deleall")
    }
  },
  modules: {
  }
})

仅个人理解，如有不足，请尽情指教