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

Posted 2020-10-22 MR崔

 

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

        
            <scroller height="200px" @on-scroll="onScroll" ref="scrollerEvent"  v-show="show1">
                <div>
                    <div class="box2"  v-for="item in shopCart.items">
                        <div v-for="(i,index) in item" v-if="index<1">{{i.foodDate}}</div>
                        <div v-for="i in item">
                            {{i.foodName}}
                            <span @click="minusCount(i)">-</span>
                            <br/>
                            <span>{{i.number}}</span>
                            <span @click="addCount(i)">+</span>
                        </div>
                    </div>
                </div>    
            </scroller>
        
        <hr>
        <div>
            <div>

                <span>{{shopCart.number}}</span>
                <span>{{shopCart.price}}</span>
                <span @click=\'detailCart()\'>购物车详情</span>
                <span @click="confirmMeals()"> 下单</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:3,
                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: {
            minusCount(i){
                if(i.number==0){
                    return
                }else{
                     i.number -=1;
                     this.shopCart.number -=1;
                     this.detailProduct.number -=1;
                     var storage = window.localStorage;
                storage.clear();

                    if(i.number==0){
                        console.log(1111);
                    var abc=this.shopCart.items[i.foodDate];
                    for(var j=0;j<abc.length;j++){
                        if(i.foodId==abc[j].foodId){
                            abc.splice(j,1);
                            console.log(abc);
                        }
                    }
                    storage.setItem(\'jmd_cart\',JSON.stringify(this.shopCart));
                }
                }
            },
            addCount(i){
                i.number +=1;
                this.shopCart.number +=1;
                this.shopCart.price +=Number(i.price);
                var storage = window.localStorage;
                storage.clear();
                storage.setItem(\'jmd_cart\',JSON.stringify(this.shopCart));
                console.log(this.shopCart);
            },
            confirmMeals(){
                this.$router.push({path:"/cart"});
            },
            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];
                 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+"this.shopCart");
                storage.setItem(\'jmd_cart\',JSON.stringify(this.shopCart));

            },
            detailCart(){
                this.show1=!this.show1;
            }

        },
        created(){
            var storage = window.localStorage;
            var cartStore =  JSON.parse(storage.getItem(\'jmd_cart\'));
            if(cartStore){
            this.shopCart=cartStore;
            }
        }
    }
</script>

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