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中删除指定数组中指定的元素的代码
Feb 12 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
Router解决跨模块下的页面跳转示例
Jan 11 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
angular4 共享服务在多个组件中数据通信的示例
Mar 30 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 Javascript
element-ui点击查看大图的方法示例
Dec 14 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 获取页面中指定内容的实现类
2014/01/23 PHP
php命名空间学习详解
2014/02/27 PHP
Symfony核心类概述
2016/03/17 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
如何编写高质量JS代码
2014/12/28 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
微信小程序Redux绑定实例详解
2017/06/07 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
python自定义类并使用的方法
2015/05/07 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python3.6简单的操作Mysql数据库的三个实例
2018/10/17 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
Python自动化测试基础必备知识点总结
2021/02/07 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
军训自我鉴定
2013/12/14 职场文书
航空学院求职信
2014/06/11 职场文书
python3实现常见的排序算法(示例代码)
2021/07/04 Python