sessionStorage存儲購物車
<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>
相關文章
- 1. vue購物車本地存儲(購物車功能三)
- 2. 購物車獲取內存中購物車數據
- 3. 瀏覽器 Localstorage 緩存 -- 購物車 存儲案例
- 4. 購物車（註冊、登陸、購物、購物車、結賬）
- 5. 購物車
- 6. shopping購物車
- 7. 仿購物車
- 8. Webfrom --購物車
- 9. python 購物車
- 10. python購物車
- 更多相關文章...
- • MySQL存儲過程簡介 - MySQL教程
- • MySQL存儲引擎精講（附帶各種存儲引擎的對比） - MySQL教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. vue購物車本地存儲(購物車功能三)
- 2. 購物車獲取內存中購物車數據
- 3. 瀏覽器 Localstorage 緩存 -- 購物車 存儲案例
- 4. 購物車（註冊、登陸、購物、購物車、結賬）
- 5. 購物車
- 6. shopping購物車
- 7. 仿購物車
- 8. Webfrom --購物車
- 9. python 購物車
- 10. python購物車