vue实现购物车功能(商品分类)


Posted in Javascript onApril 20, 2020

本文实例为大家分享了vue实现购物车功能的具体代码,供大家参考,具体内容如下

new Vue({
 el: "#app",
 data: {
 cIndex: 0,
 lists: [
  {
  title: "推荐商品",
  goods: [
   {
   id: 0,
   img: './images/goods.png',
   name: '散称樱桃1',
   price: '10.00',
   num: 0
   },
   {
   id: 1,
   img: './images/goods.png',
   name: '散称樱桃1',
   price: '10.00',
   num: 0
   }
 
  ]
  },
  {
  title: "推荐商品",
  goods: [
   {
   id: 2,
   img: './images/goods.png',
   name: '散称樱桃2',
   price: '20.00',
   num: 0
   },
   {
   id: 3,
   img: './images/goods.png',
   name: '散称樱桃2',
   price: '20.00',
   num: 0
   },
  ]
  },
 ],
 carArr: [],
 appearCar: false,
 },
 computed:{
 alltotal:function () {
  var alltotal = 0;
  var allNum = 0;
  for(var i = 0,len = this.lists.length;i<len;i++){
  for(var j = 0,goodsLen = this.lists[i].goods.length;j<goodsLen;j++){
   alltotal += parseInt(this.lists[i].goods[j].num)*parseFloat(this.lists[i].goods[j].price);
   allNum += parseInt(this.lists[i].goods[j].num);
  }
  }
  return [alltotal,allNum]
 },
 },
 methods: {
 leftTap: function (index) {
  this.cIndex = index
 },
 showCar: function () {
  if (this.carArr.length == 0) {
  this.appearCar = false
  } else {
  this.appearCar = !this.appearCar
  }
 
 },
 //商品数量加
 addNum: function (data) {
  data.num++;
  var carArr = this.carArr;
  var isCar = false;
  if (carArr == 0) {
  carArr.push(data)
  }
  for (var i = 0, len = carArr.length; i < len; i++) {
  if (data.id == carArr[i].id) {
   isCar = true
  }
  }
  if (!isCar) {
  carArr.push(data)
  }
 },
 reduceNum: function (data) {
  if (data.num <= 0) return;
  var carArr = this.carArr;
  data.num--;
  var isCar = false;
  for (var i = 0, len = carArr.length; i < len; i++) {
  if (carArr[i].num <= 0) {
   carArr.splice(i, 1)
  }
  }
 },
 carAddNum: function (index) {
  this.carArr[index].num++
 },
 carReduceNum: function (index) {
  this.carArr[index].num--;
  if (this.carArr[index].num <= 0) {
  this.carArr.splice(index, 1)
  }
  if (this.carArr.length == 0) {
  this.appearCar = !this.appearCar
  }
 },
 // 清空
 delCar: function () {
  confirm('确定清空购物车吗?');
  var cur = this.cIndex;
  var goods = this.lists[cur].goods
  if (true) {
  this.carArr = [];
  this.appearCar = !this.appearCar;
  for(var i = 0,len = this.lists.length;i<len;i++){
   for(var j = 0,goodsLen = this.lists[i].goods.length;j<goodsLen;j++){
   this.lists[i].goods[j].num=0;
   }
  }
  }
 },
 Settlement:function () {
  if(this.alltotal[0]<=0){
  console.log('我不动')
  }else{
  window.location.href = 'cashierPay.html'
  }
 }
 }
})

html页面

<div id="app" v-cloak>
 <div class='box'>
 <div class='boxleft'>
  <div class='boxla'>
  <img src='./images/sm.png'/>
  <span>扫码</span>
  </div>
  <ul class='boxlbox'>
  <template v-for="(item,index) in lists">
   <li @click='leftTap(index)' :class="{boxlb_cheak:cIndex==index}" class='boxlb'>
   <span class='boxlb_inner' :class="{boxlb_inner_cheak:cIndex==index}">{{item.title}}</span>
   </li>
  </template>
  </ul>
 </div>
 <ul class='boxright'>
  <li class='boxri' v-for="(item,index) in lists[cIndex].goods">
  <img class='boxri_img' :src='item.img'/>
  <div class='boxri_text'>
   <div class='boxrit_left'>
   <p class='boxritl_name'>{{item.name}}</p>
   <p class='boxritl_price'>¥{{item.price}}</p>
   </div>
   <div class='boxrit_right'>
   <img @click='reduceNum(item)' v-show="item.num>0" class='boxrit_right_img' src='./images/minus.png'/>
   <span class='boxrit_right_num' v-show="item.num>0">{{item.num}}</span>
   <img @click='addNum(item)' class='boxrit_right_img' src='./images/add.png'/>
   </div>
  </div>
  </li>
 </ul>
 </div>
 <footer class='footer'>
 <div class='cartImgBox'>
  <img class='cartImg' src='./images/car.png' @click='showCar'/>
  共{{alltotal[1]}}件商品
 </div>
 <div class='footerb'>¥{{alltotal[0]}}</div>
 <div @click='Settlement' class='footerc'>结算</div>
 </footer>
 <!-- 购物车 -->
 
 <div class='shop-car-mask' v-show="appearCar">
 <div class='shop-com'>
  <div class='shop-title'>
  <span>已选商品</span>
  <span @click="delCar">清空</span>
  </div>
  <ul class="car-shopList">
  <template v-for='(item,index) in carArr'>
   <li class='car-list'>
   <div class='car-img'>
    <img :src='item.img'/>
   </div>
   <div class='car-name'>{{item.name}}</div>
   <div class='car-num'>¥{{item.price}}</div>
   <div class='boxrit_right2'>
    <img @click='carReduceNum(index)' class='boxrit_right_img2' src='./images/minus.png'/>
    <span class='boxrit_right_num2'>{{item.num}}</span>
    <img @click='carAddNum(index)' class='boxrit_right_img2' src='./images/add.png'/>
   </div>
   </li>
  </template>
  </ul>
 </div>
 </div>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
jQuery回车实现登录简单实现
Aug 20 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
react build 后打包发布总结
Aug 24 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
JavaScript 去重和重复次数统计
Mar 31 Javascript
vue实现淘宝购物车功能
Apr 20 #Javascript
javascript利用键盘控制小方块的移动
Apr 20 #Javascript
vue实现购物车的监听
Apr 20 #Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 #Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 #Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 #Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 #Javascript
You might like
php 应用程序安全防范技术研究
2009/09/25 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
详解PHP队列的实现
2019/03/14 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
js实现常用排序算法
2016/08/09 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
Vue多组件仓库开发与发布详解
2019/02/28 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
Python中zip()函数用法实例教程
2014/07/31 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
python读取并写入mat文件的方法
2019/07/12 Python
Django 项目重命名的实现步骤解析
2019/08/14 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
Python字节单位转换实例
2019/12/05 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
护理专业本科生自荐信
2013/10/01 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
工作所在部门证明
2014/09/21 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
国庆横幅标语
2014/10/08 职场文书
交通事故协议书范文
2014/10/23 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
Go使用协程交替打印字符
2021/04/29 Golang