sessionStorage存储购物车

Posted 2020-10-25 MR崔

<template>
    <div id="mall" class="mall">
        <div class="mask" v-show="showShopcart" @click="toggleShopcart"></div>

        <flexbox :gutter="0" class="cart-box">
            <flexbox-item :span="1/3">
                <div  style="height: 100%" style="position: relative;margin-left: 20px;" @click="toggleShopcart">
                    <icon name="cart" scale="4"></icon>
                    <span class="cartNum">{{shopCart.number}}</span>
                </div>
            </flexbox-item>
            <flexbox-item :span="1/3">
                <div class="totalMoney" @click="toggleShopcart" style="line-height: 60px;">￥{{shopCart.price}}</div>
            </flexbox-item>
            <flexbox-item :span="1/3" class="order">
                <span @click="takeMeal" style="height: 60px;display: block;">下单</span>
            </flexbox-item>
        </flexbox>
        <flexbox :gutter="0" id="all-order" v-show="showShopcart">
            <flexbox-item style="width: 100%;">
                <scroller lock-x height="300px" ref="scroller" @on-scroll="scrolling">
                    <div>
                        <div class="cart-title">购物车</div>
                        <div class="mealOrder-list" v-for="(item,index) in shopCart.items">
                            <div class="left-border">
                                <p class="order-date inner-box" v-for="(i,index) in item" v-if="index<1">{{i.sale_date}}</p>
                                <div class="inner-box food-box" v-for="(i,index) in item">
                                    <flexbox>
                                        <flexbox-item :span="1/2" class="meal-detial">
                                            <span>{{i.food_id}}</span>
                                            <span>{{i.food_name}}</span>
                                        </flexbox-item>
                                        <flexbox-item :span="1/6" class="money">
                                            ￥<span>{{i.price*i.number/100}}</span>
                                        </flexbox-item>
                                        <flexbox-item :span="1/3" class="pay-number" style="margin-left: 0">
                                            <div class="mealNumber">
                                                <span @click="minusCount(i)" class="changeButton leftButton">-</span>
                                                <span class="changeNumber">{{i.number}}</span>
                                                <span @click="addCart(i)" class="changeButton rightButton">+</span>
                                            </div>
                                        </flexbox-item>
                                    </flexbox>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroller>
            </flexbox-item>
        </flexbox>
        <flexbox :gutter="0" id="wrapper">
            <flexbox-item>
                <scroller lock-x height="-55" ref="scroller" @on-scroll="scrolling">
                    <div id="scroller-wrapper">
                        <swiper height="150px" :loop="true" dotsPosition="center" :auto="true">
                            <swiper-item v-for="(item, index) in ads" :key="index">
                                <img :src="imgUrl+item.url" alt="" class="imgSize" style="height: 150px;width: 100%;">
                            </swiper-item>
                        </swiper>
                        <flexbox class="selectMeal">
                            <flexbox-item :span="6">
                                <flexbox class="selectTime">
                                    <flexbox-item :span="1/6">
                                        <icon name="time" scale="3"></icon>
                                    </flexbox-item>
                                    <flexbox-item :span="2/3">
                                        <div style="height: 30px;margin-top: -26px;">
                                            <group>
                                                <selector placeholder="请选择日期" v-model="weekDateSelect" :value-map="[‘date‘,‘label‘]" :options="weekDate" @on-change="changeMenu()">
                                                </selector>
                                            </group>
                                        </div>
                                    </flexbox-item>
                                    <flexbox-item :span="1/6" class="good-list__buy" >
                                    </flexbox-item>
                                </flexbox>
                            </flexbox-item>
                            <flexbox-item :span="6">
                                <flexbox class="meal">
                                    <flexbox-item :span="1/6">
                                        <icon name="knife" scale="4"></icon>
                                    </flexbox-item>
                                    <flexbox-item :span="2/3">
                                        <div style="height: 30px;margin-top: -26px;">
                                            <group>
                                                <selector placeholder="请选择" v-model="foodTypeSelect" :options="foodType" :value-map="[‘food_type‘, ‘type_name‘]" @on-change="changeMenu()">
                                                </selector>
                                            </group>
                                        </div>
                                    </flexbox-item>
                                    <flexbox-item :span="1/6">
                                    </flexbox-item>
                                </flexbox>
                            </flexbox-item>
                        </flexbox>
                        <div id="product" class="product clearfix">
                            <div id="product_nav" :class="[{‘sticky‘: sticky}, ‘product_nav‘]">
                                <template v-for="(item,index) in cells">
                                    <div class="sortList" @click="changeMenu(item.id)">
                                        <div class="nav__item-label">{{item.name}}</div>
                                    </div>
                                </template>
                            </div>
                            <div id="product_list" class="product_list">
                                <div class="good-list vux-1px-b" v-for="(item,index) in menu" v-if="menu.length > 0">
                                    <flexbox>
                                        <flexbox-item :span="1/3" class="good-list__img">
                                            <img width="100%" height="100px" src="http://mjd-midas.b0.upaiyun.com/store_food_img/10126/2017/02/07/kfh8ehud5a0s5c6m.jpg">
                                        </flexbox-item>
                                        <flexbox-item :span="1/2">
                                            <div class="good-list__name">
                                                 <span class="good-list__name-cell">{{item.food_name}}</span>
                                            </div>
                                            <div class="good-list__price">￥{{item.price/100}}</div>
                                        </flexbox-item>
                                        <flexbox-item :span="1/6" class="good-list__buy"
                                                      @click.native="addCart(item)">
                                            <div class="addToCart" style="position: relative;right: 20px;top: 20px;">
                                                <icon name="cart" scale="3" style="position: absolute;left: 4px;bottom: 4px;"></icon>
                                            </div>
                                        </flexbox-item>
                                    </flexbox>
                                </div>
                                <div v-if="menu.length === 0" style="text-align: center">
                                    <img src="/img/nothing.jpg" alt="" style="width: 50%;margin-top: 20px;">
                                    <h4 style="color: #9ea0a0;">暂无菜品销售</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </scroller>
            </flexbox-item>
        </flexbox>
    </div>
</template>
<script>
    import Client from ‘../../service/Client‘
    import { Swiper, SwiperItem, Flexbox, FlexboxItem, Scroller, Tab, TabItem ,XNumber, Group,Alert, XHeader, Selector } from ‘vux‘

    export default {
        data() {
            return {
                cells:[],
                foodTypeSelect: ‘‘,
                weekDateSelect:‘‘,
                cellIdSelect:"",
                menu:{},
                foodType:[],
                weekDate:{},
                ads:[],
                imgUrl:‘‘,
                showShopcart:false,
                shopCart:{
                    number:0,
                    price:0,
                    totalMoney:0,
                    items: {
                    }
                },
            }
        },
        created(){
            this.getMenuData()
            this.getStorage()
        },
        methods: {
            minusCount(i){
                if(i.number==0){
                    return
                }else{
                    i.number -=1;
                    this.shopCart.number -=1;
                    this.shopCart.totalMoney -=Number(i.price);
                    this.shopCart.price = this.shopCart.totalMoney/100;
                    var storage = window.sessionStorage;
                    storage.clear();
                    if(i.number==0){
                        var deleteShopCart=this.shopCart.items[i.sale_date];
                        for(var j=0;j<deleteShopCart.length;j++){
                            if(i.food_id==deleteShopCart[j].food_id){
                                deleteShopCart.splice(j,1);
                            }
                        }
                    }
                    if(this.shopCart.number==0){
                        this.showShopcart = !this.showShopcart;
                    }
                    storage.setItem(‘shopCart‘,JSON.stringify(this.shopCart));
                }
            },
            takeMeal(){
                if(this.shopCart.number === 0){
                    this.$vux.alert.show({
                        title: ‘您的购物车是空的‘,
                        content: ‘请将菜品加入购物车‘
                    })
                }else{
                    this.$router.push({ path: ‘pay‘ });
                }
            },
            toggleShopcart:function () {
                this.showShopcart = !this.showShopcart;
            },
            addCart:function (item) {
                if (this.shopCart.items[item.sale_date] === undefined) {
                    this.shopCart.items[item.sale_date] = []
                }

                let isExist = false
                for( let i in this.shopCart.items[item.sale_date]) {
                    let inCartItem = this.shopCart.items[item.sale_date][i]

                    if (inCartItem.id === item.id) {
                        inCartItem.number += 1
                        isExist = true
                        break
                    }
                }

                if (!isExist) {
                    item.number = 1
                    this.shopCart.items[item.sale_date].push(item)
                }
                this.shopCart.number +=1
                this.shopCart.totalMoney +=Number(item.price);
                this.shopCart.price = this.shopCart.totalMoney/100;
                window.sessionStorage.setItem(‘shopCart‘,JSON.stringify(this.shopCart))
            },
            changeMenu(cellId){
                if (cellId !== undefined) {
                    this.cellIdSelect = cellId
                }
                this.$set(this.shopCart, ‘items‘, {})
                this.shopCart.price = 0
                this.shopCart.number = 0
                this.shopCart.totalMoney=0
                window.sessionStorage.clear()
                this.getMenuData(this.weekDateSelect, this.foodTypeSelect, this.cellIdSelect)
            },
            getStorage(){
                  let cartStorage = JSON.parse(window.sessionStorage.getItem(‘shopCart‘))
            if(cartStorage){
                this.shopCart = cartStorage
            }
            },
            getMenuData(date, type, cell){

                this.$vux.loading.show({
                    text: ‘加载中‘
                })

                let postData = {
                    mealType:type,
                    mealDate:date,
                    cellId:cell
                }

                Client.post(‘/mobile/api/get-data‘, postData).then((response) => {
                    this.$vux.loading.hide()
                    let result = response.data.data
                    if (response.status === 200 && response.data.status === 1) {
                        this.foodType = result.foodType
                        this.cells = result.cells
                        this.weekDate = result.weekDate
                        this.menu = result.storeFoodMenu
                        this.foodTypeSelect = result.mealType
                        this.weekDateSelect = result.mealDate
                        this.cellIdSelect = result.cellId
                        this.ads = result.storeAd
                        this.imgUrl = result.url
                    } else if (response.status === 200 && response.data.status === 0) {
                        this.menu = []
                    } else {
                        this.$vux.toast.show({
                            text: response.data.message,
                            type: ‘cancel‘
                        })
                    }
                }).catch((error)=>{
                    this.$vux.loading.hide()
                    this.$vux.toast.show({
                        text: ‘服务器错误‘,
                        type: ‘cancel‘
                    })
                })
            }
        },
        components: {
            Flexbox,
            FlexboxItem,
            Scroller,
            Swiper,
            SwiperItem,
            XNumber,
            Group,
            Alert,
            XHeader,
            Selector
        }
    }
</script>
<style lang="less">
    @import "~vux/src/styles/1px.less";
</style>
<style lang="scss">
    .mask{
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left:0;
        z-index: 10;
        background: rgba(0,0,0,0.5);
    }
    .mall {
        position: relative;
        .store {
            background-color: rgba(0, 0, 0, 0.4);
            border: 1px #dddddd solid;
            border-radius: 8px;
            position: absolute;
            left: 15px;
            top: 15px;
            z-index: 2;
            line-height: 25px;
            padding: 0 5px;
            color: #f0f0f0;
            font-size: 14px;

            &__icon-right, &__icon-location {
                vertical-align: top;
                height: 18px;
                margin: 3px;
            }
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        .product {
            &_nav{
                width: 22%;
                float: left;
                height: 100%;
                background-color: #F6F1E9;

                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;

                .nav__item {
                    text-align: center;
                    padding: 0.5em 0;

                    &-img{
                        width: 40%;
                        margin-bottom: 5px;
                    }

                    &-label{
                        font-size: 12px;
                        color: #5e5e5e;
                    }

                    &.active {
                        background-color: white;
                    }
                }

                &.sticky {
                    position: fixed;
                    top:0;
                }
            }

            &_list{
                width: 78%;
                float: right;
            }
        }

        .good-list {
            padding: 1rem 0.5rem;
            background-color: white;

            &__img {
                max-height: 80px;
                height: 80px;
                overflow: hidden;
            }
            &__name {

                font-size: 14px;
                display: table;

                &-cell{
                    display: table-cell;
                    vertical-align:middle;
                }
            }

            &__price {
                margin-top: 10px;
                font-size: 0.9rem;
                color: red;
            }

            &__spec{
                color: rgb(154, 154, 154);
            }

            &__buy {
                img {
                    margin-left: -4px
                }
                .addToCart{
                    height: 38px;
                    border:1px solid #6B7D8E;
                    border-radius: 50%;
                }
            }
        }

        .sticky-tab {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: white;
            z-index: 2;
        }
        #element {
            background: red;
            position: absolute;
            border-radius: 50%;
            z-index: 100
        }
    }
    #all-order{
        max-height: 300px;
        position: fixed;
        z-index: 30;
        bottom: 60px;
        left: 0;
        background: #ffffff;
        .mealOrder-list{
            .order-date{
                padding-bottom:10px;
                border-bottom:2px solid #666;
            }
            .left-border{
                border-left:2px solid #0DD874;
                margin-bottom: 20px;
                .food-box{
                    padding: 15px 0;
                    .mealNumber{
                        border:1px solid #666666;
                        width: 112px;
                        height: 30px;
                        span{
                            display: inline-block;
                        }
                        .changeButton{
                            width: 30px;
                            line-height:30px;
                            text-align: center;
                        }
                        .leftButton{
                            border-right: 1px solid #cccccc;
                            color: #ff4500;
                        }
                        .rightButton{
                            border-left: 1px solid #cccccc;
                            color: #ff4500;
                        }
                        .changeNumber{
                            text-align: center;
                            line-height: 30px;
                            width: 40px;
                        }
                    }
                }
            }
        }
        .cart-title{
            background: #efefef;
            line-height: 50px;
            padding-left: 15px;
            color:#888;
            font-size: 18px;
        }
        .inner-box{
            margin-left: 10px;
            .meal-detial{
                font-weight: 600;
            }
            .money{
                color: orangered;
            }
            .pay-number{
                margin-left: 0;
                .weui-cell{
                    padding: 10px 0;
                }
            }
        }
        .food-box{
            border-bottom: 1px solid #cccccc;
        }
    }
    .cart-box{
        position: fixed;
        bottom: 0px;
        left:0;
        z-index: 40;
        height: 60px;
        width: 100%;
        cursor:pointer;
        border-radius:3px;
        background: #ffffff;
        border-top: 1px solid #ccc;
        .totalMoney{
            color:red;
            font-size: 18px;
            font-weight: 600;
        }
        .order{
            background: #1dc01e;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 60px;
        }
        .cartNum{
            position: absolute;
            left:26px;
            top:-6px;
            display: inline-block;
            height: 16px;
            width: 16px;
            line-height: 16px;
            text-align: center;
            background: #F74C31;
            color: #FFFFFF;
            border:1px solid #F74C31;
            border-radius: 50%;
            font-size: 13px;
        }
    }
    .selectMeal{
        background: #6B7D8E;
        color: #fff;
        .selectTime{
            margin:10px 6px;
            border-right: 1px solid #ffffff;
        }
        select{
            width:100%;
            height: 30px;
            line-height: 30px;
        }
    }
    #product{
        overflow: hidden;
        #product_nav{
            width:30%;
            min-height: 394px;
            float: left;
            background: #e4e4e4;
            padding-top: 8px;
            .sortList{
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            .sortList:hover{
                background: #6b7d8e;
            }
        }
        #product_list{
            float: right;
            width: 65%;
            height: 100%;
            .good-list{
                /*border: 1px solid #333399;*/
                margin: 10px 0;
            }
        }
    }
</style>