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


Posted in Javascript onJuly 26, 2019

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

如上所示,这篇我们将商品分类菜单显示数量的提示完善,是软件更加易于使用。

好先让我回顾一下上节课的内容,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;
  },

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

以上是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实现商品分类菜单数量提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
索趣科技的答案
Feb 07 Javascript
代码生成器 document.write()
Apr 15 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
基于vue、react实现倒计时效果
Aug 26 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 #Javascript
微信小程序设置滚动条过程详解
Jul 25 #Javascript
vuejs移动端实现div拖拽移动
Jul 25 #Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 #Javascript
vue实现一拉到底的滑动验证
Jul 25 #Javascript
微信小程序实现图片选择并预览功能
Jul 25 #Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 #Javascript
You might like
php GUID生成函数和类
2014/03/10 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JS控制表格隔行变色
2006/06/26 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
详解Python中的多线程编程
2015/04/09 Python
深入Python函数编程的一些特性
2015/04/13 Python
python使用wxPython打开并播放wav文件的方法
2015/04/24 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
美国领先的家居装饰和礼品商店:Kirkland’s
2017/01/30 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
信息部岗位职责
2013/11/12 职场文书
经济国贸专业求职信
2014/06/18 职场文书
森林防火宣传标语
2014/06/27 职场文书
贷款委托书怎么写
2014/08/02 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang
MySQL创建管理LIST分区
2022/04/13 MySQL