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 相关文章推荐
jquery自定义属性(类型/属性值)
May 21 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
js中事件的处理与浏览器对象示例介绍
Nov 29 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
Mar 05 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
vue 实现上传组件
May 31 Vue.js
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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
javascript中this关键字详解
2016/12/12 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue中nextTick用法实例
2019/09/11 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
python在文本开头插入一行的实例
2018/05/02 Python
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
C++面试题目
2013/06/25 面试题
室内设计自我鉴定
2013/10/15 职场文书
公司年会主持词
2014/03/22 职场文书
2014年征兵标语
2014/06/20 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
CAD实训总结范文
2015/08/03 职场文书
领导干部学习心得体会
2016/01/23 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
2019年大学生暑期社会实践调查报告模板
2019/11/07 职场文书