Vue实现商品分类菜单数量提示功能
人气:0如上所示,这篇我们将商品分类菜单显示数量的提示完善,是软件更加易于使用。
好先让我回顾一下上节课的内容,Goods组件,数量提示功能最终需要在Goods组件内显示。
<template> <div class="goods"> <div class="menu-wrapper" ref="menuScroll"> <ul> <!--专场--> <li class="menu-item" :class="{'current':currentIndex===0}" @click="selectMenu(0)"> <p class="text"> <img :src="container.tag_icon" v-if="container.tag_icon" class="icon"> {{container.tag_name}} </p> </li> <li class="menu-item" v-for="(item,index) in goods" :class="{'current':currentIndex===index+1}" @click="selectMenu(index+1)" > <p class="text"> <img :src="item.icon" v-if="item.icon" class="icon"> {{item.name}} </p> <i class="num" v-show="calculateCount(item.spus)">{{calculateCount(item.spus)}}</i>//通过i标签展示数量 </li> </ul> </div> <!-- 右侧商品列表 --> <div class="foods-wrapper" ref="foodScroll"> <!--专场--> <ul> <li class="container-list food-list-hook"> <div v-for="item in container.operation_source_list"> <img :src="item.pic_url"> </div> </li> <!-- 具体分类--> <li v-for="item in goods" class="food-list food-list-hook"> <h3 class="title">{{item.name}}</h3> <!--具体商品列表--> <ul> <li v-for="food in item.spus" class="food-item"> <div class="icon" :style="head_bg(food.picture)"></div> <div class="content"> <h3 class="name">{{food.name}}</h3> <p class="desc" v-if="food.description">{{food.description}}</p> <div class="extra"> <span class="saled">{{food.month_saled_content}}</span> <span class="praise">{{food.praise_content}}</span> </div> <img class="product" :src="food.product_label_picture" v-show="food.product_label_picture" > <p class="price"> <span class="text">¥{{food.min_price}}</span> <span class="unit">/{{food.unit}}</span> </p> </div> <div class="cartcontrol-wrapper"> <Cartcontrol :food="food"></Cartcontrol> </div> </li> </ul> </li> </ul> </div> <Shopcart :poiInfo="poiInfo" :selectFoods="selectFoods"></Shopcart> </div> </template>
<script> import BScroll from "better-scroll"; import Shopcart from "components/Shopcart/Shopcart"; import Cartcontrol from "components/Cartcontrol/Cartcontrol"; export default { data() { return { container: {}, goods: [], poiInfo: {}, listHeight: [], menuScroll: {}, foodScroll: {}, scrollY: 0 }; }, components: { BScroll, Shopcart, Cartcontrol }, created() { this.$axios .get("api/goods") .then(response => { let json = response.data; if (json.code === 0) { // 重点 this.container = json.data.container_operation_source; this.goods = json.data.food_spu_tags; console.log(this.goods) this.poiInfo = json.data.poi_info; this.$nextTick(function() { this.initScroll(); // 左右联动 // 右->左 // 计算区间 this.caculateHeight(); }); } }) .catch(function(error) { // handle error console.log(error); }); }, computed: { // 根据右侧判断左侧index currentIndex() { for (let i = 0; i < this.listHeight.length; i++) { let start = this.listHeight[i]; let end = this.listHeight[i + 1]; if (this.scrollY >= start && this.scrollY < end) { return i; } } return 0; }, selectFoods() { let foods = []; this.goods.forEach(good => { good.spus.forEach(food => { if (food.count > 0) { foods.push(food); } }); }); return foods; } }, methods: { head_bg(imgName) { return "background-image: url(" + imgName + ");"; }, initScroll() { this.menuScroll = new BScroll(this.$refs.menuScroll, { click: true }); this.foodScroll = new BScroll(this.$refs.foodScroll, { probeType: 3, click: true }); this.foodScroll.on("scroll", pos => { this.scrollY = Math.abs(Math.round(pos.y)); }); }, caculateHeight() { let foodList = this.$refs.foodScroll.getElementsByClassName( "food-list-hook" ); let height = 0; this.listHeight.push(height); for (let i = 0; i < foodList.length; i++) { height += foodList[i].clientHeight; this.listHeight.push(height); } // [0, 215, 1343, 2425, 3483, 4330, 5823, 7237, 8022, 8788, 9443] }, selectMenu(index) { // console.log(index); let foodlist = this.$refs.foodScroll.getElementsByClassName( "food-list-hook" ); // 根据下标,滚动到相对应的元素 let el = foodlist[index]; // 滚动到对应元素的位置 this.foodScroll.scrollToElement(el, 100); }, calculateCount(spus) { console.log(spus) let count = 0; spus.forEach(food => { if (food.count > 0) { count += food.count; } }); return count; }, } }; </script>
注意methods方法中的calculateCount函数实现计算个数,数量来自于增减组件内Cartcontrol。
calculateCount(spus) { console.log(spus) let count = 0; spus.forEach(food => { if (food.count > 0) { count += food.count; } }); return count; },
以上是spus数据
Cartcontrol组件控制商品增减
通过组件Cartcontrol接受了来自父组件的传值,并且我们在组件内添加商品的增减功能。
<template> <div class="cartcontrol"> <transition name="move"> <div class="cart-decrease" @click="decreaseCart" v-show="food.count"> <span class="inner icon-remove_circle_outline"></span> </div> </transition> <div class="cart-count" v-show="food.count">{{food.count}}</div> <div class="cart-add icon-add_circle" @click="increaseCart"> <i class="bg"></i> </div> </div> </template>
<script> import Vue from 'vue' export default { props:{ food:{ type:Object } }, methods:{ decreaseCart(){ this.food.count--;//this指向了vue实例 }, increaseCart(){ if(!this.food.count){ Vue.set(this.food,'count',1); }else{ this.food.count++; } } } }; </script>
完善购物车内的数量统计
<template> <div class="shopcart" :class="{'highligh':totalCount>0}"> <div class="shopcart-wrapper"> <div class="content-left"> <div class="logo-wrapper" :class="{'highligh':totalCount>0}"> <span class="icon-shopping_cart logo" :class="{'highligh':totalCount>0}"></span> <i class="num" v-show="totalCount">{{totalCount}}</i> </div> <div class="desc-wrapper"> <p class="total-price" v-show="totalPrice">¥{{totalPrice}}</p> <p class="tip" :class="{'highligh':totalCount>0}">另需{{shipping_fee_tip}}</p> </div> </div> <div class="content-right" :class="{'highligh':totalCount>0}">{{payStr}}</div> </div> </div> </template> <script> // 导入BScroll import BScroll from "better-scroll"; export default { props: { min_price_tip: { type: String, default: "" }, shipping_fee_tip: { type: String, default: "" }, selectFoods: { type: Array, default() { return [ /* { min_price: 10, count: 3 }, { min_price: 7, count: 1 } */ ]; } } }, computed: { // 总个数 totalCount() { let num = 0; this.selectFoods.forEach(food => { num += food.count; }); return num; }, // 总金额 totalPrice() { let total = 0; this.selectFoods.forEach(food => { total += food.min_price * food.count; }); return total; }, // 结算按钮显示 payStr() { if (this.totalCount > 0) { return "去结算"; } else { return this.min_price_tip; } } }, components: { BScroll } }; </script>
现在商品分类菜单的数量提示就完成了。
总结
以上所述是小编给大家介绍的Vue实现商品分类菜单数量提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
加载全部内容