vue实现商城购物车功能


Posted in Javascript onNovember 27, 2017

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

首先,先上最终的效果图

vue实现商城购物车功能

效果并不是很好看,但是这不是重点。

首先,我们先看下布局:

<template>
 <div class="shopcar" id="demo04">
 <div class="header-title">
  <h3>购物车</h3>
 </div>
 <div class="car-list">
  <ul>
  <li class="car-item" v-for="(item,index) in good_list">
   <div class="input-block">
   <label class="input-label" :class="{active: item.is_selected}" :for="'car-checkbox-'+index" @click="select_one(index)"></label>
   </div>
   <div class="car-item-content">
   <div class="car-img">
    <img :src="item.img" />
   </div>
   <div class="car-cont">
    <h3>{{item.title}}</h3>
    <div class="cat-desc">
    <span v-for="spec in item.spec_item">{{spec}}</span>
    </div>
   </div>
   <div class="num">
    <span @click="reduce(index)">-</span>
    <span>{{item.num}}</span>
    <span @click="add(index)">+</span>
   </div>
   <div class="car-price">
    <span class="car-price">¥{{item.price}}</span>
    <span class="car-num">X{{item.num}}</span>
   </div>
   </div>
  </li>
  </ul>
 </div>
 <div class="car-footer">
  <div class="foot-car">
  <label for="foot-check" class="input-label" :class="{active: selected_all}" @click="slect_all"></label>
  </div>
  <div class="total-cont">
  <span>总价:{{totalPrice}}</span>
  <span>共{{totalNum}}件</span>
  </div>
  <div class="btn-box">
  <button>立即下单</button>
  </div>
 </div>
 </div>
</template>

非常常见的布局,微商城购物车随处可见,先说明下,在这里,实现选中的功能并不是用传统的label+checkbox实现,而是一个单独的label,目的是为了简化dom结构,在传统的jq项目或者zepto项目中,一般会会这样写,主要是为了方便操作demo,但是vue项目完全不用考虑dom的操作,怎么方便怎么来就ok。

在加些简单的样式,

.header-title
 height 42px
 line-height 42px
 background #f5f5f5
 border-bottom 1px solid #ddd
 .header-title h3
 font-weight normal
 text-align center
 .car-list 
 background #f2f2f2
 margin-top 12px
 padding 8px
 .car-item
 border-bottom 1px solid #ddd
 position relative
 height 76px
 overflow hidden
 .car-checkbox
 display none
 .input-block
 width 30px
 float left
 height 55px
 line-height 55px
 .input-label
 cursor pointer 
 position absolute 
 width 18px 
 height 18px 
 top 18px 
 left 0 
 background #fff 
 border:2px solid #ccc
 border-radius 50%
 .input-label:after 
 opacity 0 
 content '' 
 position absolute 
 width 9px 
 height 5px 
 background transparent 
 top 6px 
 left 6px 
 border 2px solid #333 
 border-top none 
 border-right none 
 -webkit-transform rotate(-45deg) 
 -moz-transform rotate(-45deg) 
 -o-transform rotate(-45deg) 
 -ms-transform rotate(-45deg) 
 transform rotate(-45deg) 
 .car-img
 width 64px
 height 64px
 float left
 overflow hidden
 .car-img img
 width 100%
 .input-label.active
 background #F15A24
 .car-cont 
 margin-left 100px
 .car-cont h3
 font-weight normal
 line-height 24px
 font-size 14px
 .car-price 
 position absolute
 right 12px
 bottom 0px
 width 40px
 height 40px
 text-align right
 .car-price span
 display block
 height 24px
 line-height 24px
 width 100%
 .car-footer 
 height 60px
 background #f5f5f5
 position fixed
 bottom 0
 left 0
 right 0
 .foot-car
 width 42px
 height 60px
 float left
 margin-left 12px
 position relative
 .total-cont 
 height 60px
 line-height 60px
 font-size 16px
 float left
 .total-cont span
 display inline-block 
 margin-left 12px
 .btn-box
 float right
 height 60px
 line-height 60px
 .btn-box button
 height 100%
 width: 100px
 border none
 background #F15A24
 color #fff
 font-size 16px
 .num
 position absolute
 top 28px
 right 25px
 width 120px
 .num span
 display inline-block
 width 28px
 height 28px
 float left
 text-align center
 line-height 28px
 border 1px solid #ddd
 font-size 14px

最近在学习stylus的使用,所以,就当做练习了。
接下就是javascript了。

export default {
 data () {
  return {
  good_list: [
   {
   title: 'Apple iPhone 6s 16GB 玫瑰金色 移动联通电信4G手机',
   img: "http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg",
   num: 2,
   price: 6070.00,
   spec_item:[
    '内存:16G',
    '网络:4G',
    '颜色:玫瑰金'
   ],
   is_selected: false
   },{
   title: 'Apple iPhone 6s 32GB 玫瑰金色 移动联通电信4G手机',
   img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
   num: 2,
   price: 4570.00,
   spec_item:[
    '内存:32G',
    '网络:4G',
    '颜色:玫瑰金'
   ],
   is_selected: true
   },{
   title: 'Apple iPhone 6s 8GB 玫瑰金色 移动联通电信4G手机',
   img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
   num: 2,
   price: 4870.00,
   spec_item:[
    '内存:8G',
    '网络:4G',
    '颜色:玫瑰金'
   ],
   is_selected: false
   },{
   title: 'Apple iPhone 6s 128GB 玫瑰金色 移动联通电信4G手机',
   img: 'http://sc.tywebs.cn/public/upload/goods/2017/04-27/a767693b9a84747f25335f0e33d3d380.jpg',
   num: 2,
   price: 10568.00,
   spec_item:[
    '内存:128G',
    '网络:4G',
    '颜色:玫瑰金'
   ],
   is_selected: true
   },
  ],
  totalPrice: 0,
  totalNum: 0,
  selected_all: false
  }
 },
 mounted: function () {
  this.getTotal();
 },
 watch: {
  'good_list': {
  handler: function (val, oldVal) {
   // console.log(val)
   return val;
  },
  deep: true
  }
 },
 methods: {
  getTotal () {
  this.totalPrice = 0
  this.totalNum = 0
  for (var i = 0; i < this.good_list.length; i++) {
   var _d = this.good_list[i]
   if(_d.is_selected){
   this.totalPrice += _d['price'] * _d['num']
   this.totalNum +=_d['num']
   }
  }
  },
  select_one (index) {
  if(this.good_list[index].is_selected == true){
   this.good_list[index].is_selected = false
  }else{
   this.good_list[index].is_selected = true
  }
  this.getTotal()
  },
  slect_all () {
  if(this.selected_all){
   for (var i = 0; i < this.good_list.length; i++) {
   this.good_list[i].is_selected = false;
   }
   this.selected_all = false   
  }else{
   for (var i = 0; i < this.good_list.length; i++) {
   this.good_list[i].is_selected = true;
   }
   this.selected_all = true   
  }
  this.getTotal()
  },
  reduce (index) {
  if(this.good_list[index].num <= 1) return;
  this.good_list[index].num --
  this.getTotal()
  },
  add (index) {
  this.good_list[index].num ++
  this.getTotal()
  }
 }
 }

这里用mock数据来代替后台请求数据的动作,为了方便测试,逻辑比较简单,首先getTotal这个方法用来计算选中的item的数量以及总价,select_one用来处理单个选中的逻辑,slect_all 用来处理全部选中以及全部取消选中的操作,reduce用来处理处理减操作,顾名思义add用来处理加的操作。当然在真实的开发中,还会有校验库存的动作,每次加减都要校验库存。数据处理也会更复杂,但是闻琴弦而知雅意,器原理都是相通的。

github地址传送门

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

Javascript 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
Dec 24 Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
React实现类似淘宝tab居中切换效果的示例代码
Jun 02 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 #Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 #Javascript
JavaScript实现修改伪类样式
Nov 27 #Javascript
Vue.js搭建移动端购物车界面
Jun 28 #Javascript
Vue实现购物车场景下的应用
Nov 27 #Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 #Javascript
vue购物车插件编写代码
Nov 27 #Javascript
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
js实现中文实时时钟
2020/01/15 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
浅析Python基础-流程控制
2016/03/18 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
python移位运算的实现
2019/07/15 Python
django序列化serializers过程解析
2019/12/14 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
《中国的气候》教学反思
2014/02/23 职场文书
ktv好的活动方案
2014/08/17 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python