<template>
<div class="goods">
<aside>
<ul>
<a
:href="'#' + item.name"
v-for="(item, index) in goodsObj"
:key="index"
:class="{ active: currentIndex === index }"
@click="liClick(index)"
>
<p>{{ item.name }}</p>
</a>
</ul>
</aside>
<!-- 右侧分类榜 -->
<div class="list">
<ul>
<li v-for="(item, index) in changeObj" :id="item.name" :key="index">
<h1 class="title">{{ item.name }}</h1>
<ul>
<!-- 右侧列表食品 -->
<li
v-for="(food, indexs) in item.foods"
:key="indexs"
class="food-item"
>
<img
:src="food.image"
alt=""
class="icon"
@click="detail(food)"
/>
<div class="content">
<h2>{{ food.name }}</h2>
<p>{{ food.description }}</p>
<div class="extra">
<span>月售{{ food.sellCount }}份</span>
<span>好评率 {{ food.rating }}% </span>
</div>
<div class="money">
<span>￥{{ food.price }} </span>
</div>
<div class="number-container">
<button
class="btn btn-light btn-sm"
v-show="food.show"
@click="changeDel(index, indexs)"
>
-
</button>
<span class="number-box" v-show="food.show">
{{ food.selectNum }}
</span>
<button
class="btn btn-light btn-sm"
@click="changeAdd(index, indexs)"
>
+
</button>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<Food :foodsDetial="foodsDetial" @updateFood="updateFood"/>
</div>
</template>
<script>
import { getGoodsData } from "@/axios/index.js";
import Food from "@/components/Food.vue";
import bus from "@/eventBus.js";
export default {
name: "goods",
data() {
return {
currentIndex: 0,
goodsObj: [],
changeObj: [],
foodsDetial: {},
};
},
props: {},
components: {
Food,
},
computed: {
newGoodsObj() {
this.goodsObj.map((el, in11) => {
el.foods.forEach((elem, index) => {
this.$set(elem, "selectNum", 0);
this.$set(elem, "show", false);
this.$set(elem, "in1", in11);
this.$set(elem, "in2", index);
});
return el;
});
return this.goodsObj;
},
filteNumGoods() {
let css = this.changeObj.map((el) => {
return el.foods.filter((ele) => {
return ele.selectNum !== 0;
});
});
return css;
},
arrAll() {
let arr = [];
this.filteNumGoods.forEach((el) => {
el.forEach((elm) => {
arr.push(elm);
});
});
return arr;
},
allPrice() {
return this.arrAll.reduce((pro, now) => {
return (pro += now.price * now.selectNum * 1);
}, 0);
},
},
watch: {
goodsObj: {
handler() {
this.changeObj = this.newGoodsObj;
},
deep: true,
},
changeObj: {
handler() {
let that = this;
this.$parent.$parent.$children.forEach(function (el) {
if (el.$options.name === "Cart") {
el.goodsData = {
data: that.arrAll,
add: that.changeAdd,
del: that.changeDel,
clean: that.changeClean,
};
}
});
// this.$root.$children.forEach(function (el) {
// if (el.$options.name === "TabBar") {
// el.goodsData = {
// data: that.allPrice,
// };
// }
// });
},
deep: true,
},
},
methods: {
updateFood(foodsDetial){
this.foodsDetial = foodsDetial
console.log(this.foodsDetial);
this.changeObj[foodsDetial.in1].foods[foodsDetial.in2].selectNum +=1
this.changeObj[foodsDetial.in1].foods[foodsDetial.in2].show = true;
},
liClick(index) {
this.currentIndex = index;
},
detail(params) {
// console.log(params);
this.foodsDetial = params;
console.log( this.foodsDetial);
this.$store.commit("showFood");
// console.log(this.foodObj);
},
changeAdd(oindex, tindex) {
this.changeObj[oindex].foods[tindex].show = true;
this.changeObj[oindex].foods[tindex].selectNum += 1;
this.sendComputed();
},
changeDel(oindex, tindex) {
this.changeObj[oindex].foods[tindex].selectNum -= 1;
this.sendComputed();
if (this.changeObj[oindex].foods[tindex].selectNum == 0) {
this.changeObj[oindex].foods[tindex].show = false;
}
},
changeClean() {
this.changeObj.forEach((el1) => {
el1.foods.forEach((el2) => {
el2.show = false;
el2.selectNum = 0;
});
});
},
sendComputed() {
bus.$emit("shareComputed", this.allPrice);
},
},
mounted() {},
created() {
getGoodsData().then(
(res) => {
this.goodsObj = res.data.data;
},
(err) => {
console.log(err);
}
);
},
};
</script>
<style lang="less" scoped>
.goods {
display: flex;
border-top: 3px solid rgba(7, 17, 27, 0.1);
}
aside {
flex: 0 0 80px;
width: 80px;
height: 540px;
float: left;
ul {
height: 540px;
a {
background-color: #f3f5f7;
height: 60px;
display: block;
line-height: 20px;
overflow: hidden;
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
p {
margin: 0 auto;
width: 80%;
margin-top: 15px;
}
}
}
}
.list {
flex: 1;
height: 540px;
overflow: scroll;
h1 {
text-indent: 2rem;
font-size: 14px;
background-color: #f3f5f7;
border-left: 5px solid #d9dde1;
}
.food-item {
border-bottom: 1px solid rgba(7, 17, 27, 0.1);
display: flex;
align-items: center;
overflow: hidden;
position: relative;
.icon {
width: 50px;
height: 50px;
margin-left: 15px;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-left: 10px;
h2 {
font-size: 14px;
margin-top: 12px;
height: 14px;
line-height: 14px;
margin-bottom: 10px;
}
p {
width: 220px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 12px;
line-height: 12px;
font-size: 12px;
margin-bottom: 10px;
}
.extra {
height: 12px;
line-height: 12px;
font-size: 12px;
margin-bottom: 10px;
span {
margin-right: 10px;
}
}
.money {
height: 14px;
margin-bottom: 10px;
line-height: 14px;
span {
font-size: 14px;
}
}
.number-box {
display: inline-block;
width: 24px;
text-align: center;
margin: 0 2px;
font-size: 15px;
color: black;
color: rgba(147, 153, 159);
}
.number-container {
position: absolute;
bottom: 15px;
right: 0;
font-weight: 700;
}
button {
width: 24px;
height: 24px;
font-size: 12px;
border-radius: 50%;
color: deepskyblue;
background-color: #fff;
border: 1px solid deepskyblue;
}
button:nth-of-type(2) {
width: 24px;
height: 24px;
font-size: 12px;
border-radius: 50%;
color: #fff;
background-color: deepskyblue;
border: 1px solid deepskyblue;
}
}
}
}
.active {
background-color: #fff;
color: black;
font-size: 13px;
font-weight: 700;
}
</style>
1073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
