vue 购物车 未成品-本地存储 根据日期列出对应菜品

<template>
    <div class="page-meal">
        <div class="meal__icon">
            <icon name="construct" scale="10"></icon>
        </div>
        <div class="meal__info">
            即将上线，敬请期待
        </div>
        <ul>
            <li v-for="item in items" @click="choseFood(item)">{{item.foodName}}{{item.price}}</li>
        </ul>
        <hr>

        <div v-transfer-dom>
            <scroller height="150px" @on-scroll="onScroll" ref="scrollerEvent"  v-show="show1">
                <div>
                    <div class="box2"  v-for="item in detailProduct">
                        <div v-for="(i,index) in item" v-if="index<1">{{i.foodDate}}</div>
                        <div v-for="i in item">
                            {{i.foodName}}
                            <group>
                                <x-number :min="0" :max="10" :value="i.number"   @on-change="change"></x-number>
                            </group>
                        </div>
                    </div>
                </div>    
            </scroller>
        </div>
        <hr>
        <div>
            <div>
                <span>{{shopCart.number}}</span>
                <span>{{shopCart.price}}</span>
                <span @click=‘takeMeals()‘>下单</span>
            </div>
        </div>

    </div>

</template>
<script>
import { Scroller, Divider,  Group, LoadMore ,Popup,XNumber } from ‘vux‘
    export default {
        components: {
            XNumber,
            Scroller,
            Popup,
            Divider,
            Group,
            LoadMore
        },
        data() {
            return {
                roundValue:"",
                show1:false,
                msg: ‘VUE‘,
                items:[
                        {"foodName":"青椒肉丝","foodId":"1","foodDate":"2018-1-1","price":"5"},
                        {"foodName":"胡萝卜肉丝","foodId":"2","foodDate":"2018-1-1","price":"5"},
                        {"foodName":"鱼香肉丝","foodId":"3","foodDate":"2018-1-2","price":"3"},
                        {"foodName":"韭黄鸡蛋","foodId":"4","foodDate":"2018-1-3","price":"3"},
                        {"foodName":"韭菜鸡蛋","foodId":"5","foodDate":"2018-1-3","price":"1"},
                        {"foodName":"西葫芦鸡蛋","foodId":"6","foodDate":"2018-1-3","price":"1"},
                        {"foodName":"青椒鸡蛋","foodId":"7","foodDate":"2018-1-3","price":"6"},
                        {"foodName":"番茄鸡蛋","foodId":"8","foodDate":"2018-1-3","price":"7"},
                        {"foodName":"洋葱鸡蛋","foodId":"9","foodDate":"2018-1-3","price":"8"}
                    ],
                shopCart:{
                    number:0,
                    price:0,
                    items:{}
                },
                detailProduct:{}   
            }
        },
        methods: {
            change(val){
                console.log(val);
  
            },
            choseFood(item){
            var storage = window.localStorage;
            if(this.shopCart.items[item.foodDate] ===undefined){
                this.shopCart.items[item.foodDate]=[]
            }
            let isExist=false;
            for(var i=0;i<this.shopCart.items[item.foodDate].length;i++){
                 let inCartItem = this.shopCart.items[item.foodDate][i];
                //  console.log(inCartItem);
                 if (inCartItem.foodId === item.foodId) {
                        inCartItem.number += 1
                        isExist = true
                        break
                    }
            }
            
                if (!isExist) {
                    item.number = 1;
                    this.shopCart.items[item.foodDate].push(item);
                }
                this.shopCart.number +=1;
                this.shopCart.price +=Number( item.price);

                console.log(this.shopCart.items);
            storage.setItem(‘jmd_cart‘,JSON.stringify(this.shopCart.items));

            },
            takeMeals(){
                this.show1=!this.show1;
                 var storage = window.localStorage;
                 var cartStore =  JSON.parse(storage.getItem(‘jmd_cart‘));
                    var arr = []
                    console.log(cartStore);
                for (var i in cartStore) {
                    arr.push(cartStore[i]); //属性
                    //arr.push(object[i]); //值
                }
                console.log(arr);
                console.log()

                 this.detailProduct=cartStore;
                 console.log(this.detailProduct);
            }

        }
    }
</script>

<style lang="scss">
    .meal__icon{
        margin: 30px auto 10px auto;
        text-align: center;
    }
    .meal__info {
        text-align: center;
        color: #999;
    }
</style>