<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="width: 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>
