Vue实现商品分类菜单数量提示功能

<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>

calculateCount(spus) {    console.log(spus)   let count = 0;   spus.forEach(food => {    if (food.count > 0) {     count += food.count;    }   });   return count;  },

<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>// 导入BScrollimport 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>