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 相关文章推荐
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
鼠标选择动态改变网页背景颜色的JS代码
Dec 10 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
基于angular实现树形二级表格
Oct 16 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
Php部分常见问题总结
2006/10/09 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
WordPress后台中实现图片上传功能的实例讲解
2016/01/11 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python实现媒体播放器功能
2018/02/11 Python
Flask框架WTForm表单用法示例
2018/07/20 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
HTML5标签大全
2016/11/23 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
项目计划书范文
2014/01/09 职场文书
学雷锋标兵事迹材料
2014/08/18 职场文书
教师工作失职检讨书
2014/09/18 职场文书
股东授权委托书
2014/10/15 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014年村官工作总结
2014/11/24 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python