商场购物车-自己搭建 this.shop.items 怎么加进购物车

<template>
    <div>
            <flexbox>
                <flexbox-item :span="4" class='flexbox-item_left'>
                    <scroller lock-x height="-46" ref="scrollerEvent">
                        <div class="flex-demo">
                          <div  v-for="i in cell_list" class="aside_cell">
                                {{i.cell_name}}
                          </div>
                           <div class="clearHeight"></div>
                        </div>
                    </scroller>
                   
                </flexbox-item>
                <flexbox-item :span="8">
                    <scroller lock-x height="-46" ref="scrollerEvent">
                        <div class="flex-demo" >
                            <div  v-for="i in food_menu_list" class="cell_food_detail">
                                <flexbox>
                                    <flexbox-item :span="4" >
                                        <div class="flex-demo img_size" >{{i.imgSrc}}</div>
                                    </flexbox-item>
                                    <flexbox-item>
                                        <div class="flex-demo">
                                            <div class="foodTitle"> {{i.food_title}}</div>
                                            <div>{{i.standard}}</div>
                                            <div>${{i.price}}</div>
                                            <div class="addCart" @click='addCart(i)'>+</div>
                                       </div>
                                    </flexbox-item>
                                </flexbox>
                            </div>
                            <div class="clearHeight"></div>
                        </div>
                    </scroller>
                  
                </flexbox-item>
            </flexbox>
            <div id="shopCart"> 
                <flexbox>
                    <flexbox-item :span="8"><div class="flex-demo" @click='toggleShopCart'>购物车</div></flexbox-item>
                    <flexbox-item><div class="flex-demo" @click='placeOrder'>下单</div></flexbox-item>
                     <flexbox-item><div class="flex-demo" @click='goToIviewPage'>iview页面</div></flexbox-item>
                </flexbox>   
            </div>
             <flexbox :gutter="0" id="all-order" v-show="showShopCart">
                    <flexbox-item style=" 100%;">
                        <scroller lock-x height="300px" ref="scroller" >
                            <div>
                                <div class="cart-title">购物车</div>
                                <div v-for="(item,key) in shopCart.items">
                                    <div>我是KEY{{key}}</div>  //spa1
                                    <div>我是item{{item}}</div>//

 //console.log(this.shopCart)  

                                    <div v-for="i in item">
                                         <flexbox>
                                            <flexbox-item :span="6">
                                                <div class="flex-demo">
                                                    <div>{{i.food_title}}</div>
                                                    <div>${{i.price}}</div>
                                                </div>
                                            </flexbox-item>
                                            <flexbox-item>
                                                <div class="flex-demo flex-demo_center" >
                                                    <span class="unicode" @click='minusCart(i)'>-</span>
                                                    <span>{{i.number}}</span>
                                                    <span class="unicode" @click='addCart(i)'>+</span>
                                                </div>
                                            </flexbox-item>
                                        </flexbox>
                                    </div>
                                </div>
                            </div>
                        </scroller>
                    </flexbox-item>
        </flexbox>
    </div>
</template>

<script>
import { FlexboxItem, Flexbox, Scroller } from "vux";
export default {
  components: {
    FlexboxItem,
    Flexbox,
    Scroller
  },
  name: "home",
  data() {
    return {
    showShopCart:false,
      food_menu_list: [
        {
          imgSrc: "食物图片",
          food_title: "东鹏特饮",
          standard: "500ml/p瓶",
          price: "10",
          foodId: "1",
          versonID:"spa1",
          number:0
        },
        {
          imgSrc: "食物图片",
          food_title: "东鹏特饮2",
          standard: "500ml/p瓶",
          price: "10",
          foodId: "11",
          versonID:"spa1",
          number:0
        },
        {
          imgSrc: "食物图片",
          food_title: "哇哈哈矿泉水",
          standard: "500ml/p瓶",
          price: "20",
          foodId: "2",
          versonID:"spa2",
          number:0
        },
        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜1",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "3",
          versonID:"spa3",
          number:0
        },        
        
        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜2",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "4",
          versonID:"spa3",
          number:0
        },        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜3",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "5",
          versonID:"spa3",
          number:0
        },        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜4",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "6",
          versonID:"spa3",
          number:0
        },        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜5",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "7",
          versonID:"spa3",
          number:0
        },        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜6",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "8",
          versonID:"spa3",
          number:0
        },        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜7",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "9",
          versonID:"spa3",
          number:0
        },        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜8",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "10",
          versonID:"spa3",
          number:0
        },        {
          imgSrc: "食物图片",
          food_title: "农夫山泉有点甜9",
          standard: "500ml/p瓶",
          price: "310",
          foodId: "11",
          versonID:"spa3",
          number:0
        }
      ],
      cell_list: [
        { cell_name: "麵食", cell_id: "1" },
        { cell_name: "米飯", cell_id: "2" },
        { cell_name: "甜点", cell_id: "3" },
        { cell_name: "水果", cell_id: "4" },
        { cell_name: "涼菜", cell_id: "5" },
        { cell_name: "炒菜", cell_id: "6" },
        { cell_name: "盖浇饭", cell_id: "7" },
        { cell_name: "大盘鸡", cell_id: "8" },
        { cell_name: "水煮鱼", cell_id: "9" }, 
        { cell_name: "凉皮", cell_id: "10" }
      ],
      shopCart:{
          price:0,
          number:0,
          items:{}
      }
    };
  },
  created(){
      this.getShopCart()
  },
  methods: {
      minusCart(item){
          item.number -=1;
          if(item.number == 0){
              console.log(item.number)
        //   var currentFood=this.shopCart.items[item.versonID];
        console.log(item.foodId);
        console.log(this.shopCart.items[item.versonID]);
        var currentFood=this.shopCart.items[item.versonID];
          for(let i in currentFood){
              if(item.foodId ==currentFood[i].foodId){
                 currentFood.splice(i,1)
              }
          }
          }
      },
      getShopCart(){
          if(!this.$store.state.shopCart){

          }else{
              this.shopCart=this.$store.state.shopCart;
          }
      },
      goToIviewPage(){
        this.$router.push({ path: '/iview' });
      },
      placeOrder(){
          this.$store.commit('updateState',this.shopCart);
          this.$router.push({ path: '/second' });
      },    
      toggleShopCart(){
          this.showShopCart=!this.showShopCart
      },
      addCart(item){
          if(this.shopCart.items[item.versonID] === undefined){
              this.shopCart.items[item.versonID]=[]
          }
          let isExist=false
          for(let i in this.shopCart.items[item.versonID]){
              if(this.shopCart.items[item.versonID][i].foodId==item.foodId){
                  this.shopCart.items[item.versonID][i].number +=1;
                  isExist=true;
                  break;
              }
          }
          if(!isExist){
              item.number=1;
              this.shopCart.items[item.versonID].push(item)
          }
          console.log(this.shopCart)
        this.shopCart.number +=1;
        this.shopCart.price +=Number(item.price);
      }
  }
};
</script>
<style lang="less">
@import "~vux/src/styles/reset.less";
</style>
<style lang='scss'>
.flexbox-item_left{
    border-right:1px solid blue;
    background: #f2f2f2;
}
#all-order{
    max-height: 300px;
    position: fixed;
    z-index: 30;
    bottom: 60px;
    left: 0;
    background: #ccc;
}
#all-order .vux-flexbox{
    border-bottom: 1px solid green;
    padding: 8px 5px;

} 
#all-order .unicode{
    display: inline-block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid rgb(141, 138, 138);
    border-radius: 50%;
    font-size: 20px;
}
#all-order .flex-demo_center{
    text-align: center;
}
.aside_cell {
  text-align: center;
  padding: 8px;
  box-sizing: border-box;
  border-right: 1px solid #ccc;
  cursor: pointer;
}
.aside_cell:hover{
background: #fff;
}
.cell_food_detail {
  box-sizing: border-box;
  border: 1px solid red;
  height: 105px;
}
.cell_food_detail .vux-flexbox,
.cell_food_detail .vux-flexbox .vux-flexbox-item {
  height: 100%;
}
.foodTitle {
  max-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.addCart {
  color: red;
  font-size: 22px;
  border:1px solid #ccc;
  cursor: pointer;
}
.img_size {
  height: 100%;
  width: 100%;
}
#shopCart .vux-flexbox {
  position: absolute;
  bottom: 0px;
  background: red;
  cursor: pointer;
}
.clearHeight{
    height: 60px;
}

</style>