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必备 api中英文对照的chm手册 下载
May 03 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
JavaScript数组去重的两种方法推荐
Apr 05 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
jQuery Dialog 取消右上角删除按钮事件
Sep 07 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
vuejs实现下拉框菜单选择
Oct 23 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
Python实现建立SSH连接的方法
2015/06/03 Python
python逆向入门教程
2018/01/15 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
真正的英国宝藏:Mappin & Webb
2019/05/05 全球购物
个人简历自荐信
2013/12/05 职场文书
入党积极分子介绍信
2014/01/17 职场文书
企业内部培训方案
2014/02/04 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
比赛口号大全
2014/06/10 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
高一地理教学工作总结
2015/08/12 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
python中的被动信息搜集
2021/04/29 Python
golang 实现Location跳转方式
2021/05/02 Golang