vue购物车插件编写代码


Posted in Javascript onNovember 27, 2017

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

先上效果图

vue购物车插件编写代码

下面相关代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">


<link rel="stylesheet" href="../../css/mui.min.css">
<link rel="stylesheet" href="../../css/app.css">
<style>
.mui-content>.mui-table-view:first-child{
margin-top: 0.133333rem;
}
.mui-bar-nav~.mui-content{
padding-top: 1.173333rem;
}
.mui-content{
padding-bottom: 1.173333rem;
}
input[type=checkbox] {
 width: 0.426666rem;
 height: 0.426666rem;
 border: 0;
 outline: 0!important;
 background-color: transparent;
 -webkit-appearance: none;
}
input[type=checkbox]:before {
 content: '\e411';
}
input[type=checkbox]:checked:before {
 content: '\e441';
}
input[type=checkbox]:before {
 font-family: Muiicons;
 font-size: 0.426666rem;
 font-weight: 400;
 line-height: 1;
 text-decoration: none;
 color: #81d8d0;
 border-radius: 0;
 background: 0 0;
 -webkit-font-smoothing: antialiased;
}
input[type=checkbox]:checked:before {
 color: #81d8d0;
}

.allinput[type=checkbox] {
 width: 0.426666rem;
 height: 0.426666rem;
 border: 0;
 outline: 0!important;
 background-color: transparent;
 -webkit-appearance: none;
}
.allinput[type=checkbox]:before {
 content: '\e411';
}
.allinput[type=checkbox]:checked:before {
 content: '\e441';
}
.allinput[type=checkbox]:before {
 font-family: Muiicons;
 font-size: 0.426666rem;
 font-weight: 400;
 line-height: 1;
 text-decoration: none;
 color: #fff;
 border-radius: 0;
 background: 0 0;
 -webkit-font-smoothing: antialiased;
}
.allinput[type=checkbox]:checked:before {
 color: #fff;
}
.popover_detail_numbtn .mui-numbox{
float: right;
border-radius: 0;
padding: 0 0.56rem;
height: 0.586666rem;
width:2rem;
}
.mui-numbox [class*=btn-numbox], .mui-numbox [class*=numbox-btn] {
 font-size: 0.4rem;
 line-height: 0.56rem;
 width: 0.56rem;
 height: 0.56rem;
 color: #707070;
 background-color: #fff;
}
.shop_input_num[type=number]{
font-size: 0.266666rem;
line-height: 0.56rem;
top: 0;
}
</style>
</head>


<body id="app" v-cloak>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-pull-left mui_return_back"></a>
<h1 class="mui-title">购物车</h1>
</header>

<div class="mui-content">
<div class="mui_shopcar_list_box" v-for="data in items">
<div class="mui_order_item_title">
<div class="mui_adress_radio">
<input type="checkbox" v-model="data.shopselected" v-on:click="checkShop($index)">
</div>
 <a href="javascript:;" class="look_shop" v-on:click="LookShop(data.id)">
 {{data.shopname}} <img class="order_link" src="../../images/icon/order_link.png"/>
 </a>
 </div>
<ul class="mui-table-view mui-table-view-chevron mui_shopcar_list">
<li class="mui_shopcar_item" v-for="item in data.listgoods">
<div class="mui_adress_radio">
<input type="checkbox" v-model="item.selected" v-on:click="checkGoods($parent.$index,$index)">
</div>
<div class="mui_shopcar_img" v-on:click="LookGoods(item.id)">
<img src="../../images/423.jpg"/>
</div>
<div class="mui_shopcar_media">
<div class="mui_shopcar_title">
<p class="mui_shopcar_name">{{ item.name }}</p>
<span class="mui_shopcar_del" v-on:click="remove($parent.$index,$index)">
<a><img src="../../images/icon/19.png" alt="" /></a>
</span>
</div>
<p class="mui_shopcar_unit">单位:升</p>
<div class="mui_shopcar_pro">
<p class="mui_shopcar_price">{{item.price|currency '¥' 2}}</p>
<div class="popover_detail_numbtn">
<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
<button class="mui-btn mui-btn-numbox-minus" type="button" v-on:click.native="reduce($parent.$index,$index)">-</button>
<input class="mui-input-numbox shop_input_num" type="number" disabled value="{{item.count}}"/>
<button class="mui-btn mui-btn-numbox-plus" type="button" v-on:click.native="add($parent.$index,$index)">+</button>
</div>
</div>
</div>
</div>
</li>
<!--<li class="mui_shopcar_item">
<div class="mui_adress_radio">
<input name="address" type="checkbox">
</div>
<div class="mui_shopcar_img">
<img src="../../images/423.jpg"/>
</div>
<div class="mui_shopcar_media">
<div class="mui_shopcar_title">
<p class="mui_shopcar_name">内蒙古原产牛奶</p>
<span class="mui_shopcar_del">
<img src="../../images/icon/19.png" alt="" />
</span>
</div>
<p class="mui_shopcar_unit">单位:升</p>
<div class="mui_shopcar_pro">
<p class="mui_shopcar_price">¥ 50.00</p>
<div class="popover_detail_numbtn">
<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
<input id="test" class="mui-input-numbox" type="number" value="5" />
<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>
</div>
</div>
</div>
</li>-->
</ul>
</div>

</div>

<div class="mui_shopcar_bar">
<div class="mui_adress_radio">
<input type="checkbox" class="allinput" v-model="selectAll">
全选
</div>
<div class="mui_shopcar_sumbtn">
<p class="mui_shopcar_sum">合计:{{ total|currency '¥' 2}}</p>
<button id="order_true" type="button" v-on:click.native="Submit()">结算</button>
</div>
</div>
<script type="text/javascript" src="../../js/app.js" ></script>
<script src="../../js/mui.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/jquery-1.8.3.min.js" ></script>
<script>

mui.init();//初始化
mui.plusReady(function(){})
var vm = new Vue({
  el: "#app",
  data: {
   OrderTotal:0,//用来保存商品总价
   items: [//加入购物车商品
    {
     id:1,
     shopname:'内蒙古原产牛奶',
     shopselected:false,
     listgoods:[
      {
       id:101,
       name: '奶片',
       price:1.3,
       count:2,
       selected:false
      },
      {
       id:102,
       name: '小辣椒',
       price:100,
       count:1,
       selected:false 
      },
      {
       id:103,
       name: '小辣椒22222',
       price:100,
       count:1,
       selected:false 
      }
     ]
    },
    {
     id:2,
     shopname:'云端电子',
     shopselected:false,
     listgoods:[
      {
       id:201,
       name: '三星',
       price:4000,
       count:2,
       selected:false 
      },
      {
       id:202,
       name: '华为1',
       price:100,
       count:1,
       selected:false 
      },
      {
       id:203,
       name: '华为2',
       price:100,
       count:1,
       selected:false 
      },
      {
       id:204,
       name: '华为3',
       price:100,
       count:1,
       selected:false 
      }
     ]
    },
    {
     id:3,
     shopname:'小米官方商店',
     shopselected:false,
     listgoods:[
      {
       id:301,
       name: '小米4',
       price:1.3,
       count:2,
       selected:false 
      }
     ]
    }
   ]
  },
  //computed相当于属性的一个实时计算,如果实时计算里关联了对象,那么当对象的某个值改变的时候,同事会出发实时计算。
  computed: {
   selectAll:{
    //动态判断全选按钮是否选中(根据 选中的商店数量==items数组长度)
    get:function(){
     return this.items.filter(function(item){
      return item.shopselected == true;
     }).length == this.items.length;
    },
    //设置全选
    set:function(val){
     this.items.forEach(function(item){//遍历所有商店
      item.shopselected = val;//所有商店选中
      item.listgoods.forEach(function(list){//遍历所有商品
       list.selected = val;//所有商品选中
      })
     });
    }
   },
   num:function(){
    var num = 0;
    this.items.forEach(function(item){//遍历商家数组
     item.listgoods.filter(function(a){//遍历商品数组
      return a.selected//选择选中的商品
     }).map(function(a){
      return a.count//计算商品数量*商品单价
     }).forEach(function(a){
      num += a;
     });
    })
    return num;//返回总价
   },
   //计算总价
   total:function(){
    var total = 0;
    this.items.forEach(function(item){//遍历商家数组
     item.listgoods.filter(function(a){//遍历商品数组
      return a.selected//选择选中的商品
     }).map(function(a){
      return a.count*a.price//计算商品数量*商品单价
     }).forEach(function(a){
      total += a;
     });
    })
    this.OrderTotal = total;//更新商品总价
    return total;//返回总价
   }
  },
  methods:{
   //点击商店选中所有商品
   checkShop:function(pID){
    var self = this.items[pID];
    if(self.shopselected != true){
     self.listgoods.forEach(function(list){
      list.selected = true;
     })
    }else{
     self.listgoods.forEach(function(list){
      list.selected = false;
     })
    } 
   },
   //选择某商品 判断商店是否全选
   checkGoods:function(pID,id){
    var self = this.items[pID];//点击单选框的父节点
    if(self.listgoods[id].selected){//判断当选框是否备选中
    
self.listgoods.filter(function(item){
     return item.selected == true;
    }).length-1 == self.listgoods.length ? self.shopselected = true : self.shopselected = false;
    }else{
    
self.listgoods.filter(function(item){
     return item.selected == true;
    }).length+1 == self.listgoods.length ? self.shopselected = true : self.shopselected = false;
    }
   },
   //增加商品数量 最多购买100件
   add:function (parentID,ID) {//parentID是商家id,ID是商品id
    var self = this.items[parentID].listgoods[ID];
    if(self.count >100){
     return false;
    }
    self.count++;
   },
   //减少商品数量 最少买一件
   reduce:function(parentID,ID){//parentID是商家id,ID是商品id
    var self = this.items[parentID].listgoods[ID];
    if(self.count <= 1){
     return false
    }
    self.count--;
   },
   //移除商品函数
   remove:function(parentID,ID){//parentID是商家id,ID是商品id
    var self = this.items[parentID];
    self.listgoods.length == 1 ? this.items.splice(parentID, 1) : self.listgoods.splice(ID, 1);//如果删除最后一个商品,则商家一并删除
   },
   
   //结算函数
   Submit:function(){
    //获取选中的商家及相应的商品
    var TotalPrice = this.OrderTotal;//存放要支付的总价
    var OrderArry = [];//存放选中的商品数组
    this.items.forEach(function(item){//遍历商家数组
if(item.shopselected){//如果商家备选中则其下商品均被选中,直接添加数组
return OrderArry.push(item)
}else{//如果商家没有选中,继续遍历旗下商品是否备选中

var arry = {//设置临时数组,来保存没有选中商店的数据
'id' : item.id,//商店id
     'shopname' : item.shopname,//商店名字
     'shopselected' : item.shopselected,//商店是否备选中
     'listgoods' : []//商店旗下的商品数组
};
item.listgoods.filter(function(list){//遍历商店旗下的商品数组
      return list.selected//过滤所有选中的商品
     }).map(function(a){
     
return arry.listgoods.push(a)//将选中的商品添加到数组中
     });
     if(arry.listgoods.length > 0){//如果有商品选中在添加到数组
     
OrderArry.push(arry)
     }
}
    });
    console.log(OrderArry)//打印选中的商品数组
    console.log(TotalPrice)//打印总价
    
//结算跳转页面
 //打开确认订单
 mui.openWindow({
 url: 'order_true.html', 
 id:'order_true.html',
 extras:{//自定义扩展参数,可以用来处理页面间传值
 'BuyMethod' : 'ShoppingCartSettlement',//结算方式
  'ItemList' : OrderArry,//选择的商品数组
  'TotalPrice' : TotalPrice//要支付的总价
 },
 waiting:{
  autoShow:true,//自动显示等待框,默认为true
  title:'正在加载...'//等待对话框上显示的提示内容
 }
 });
   },
   
   //查看商家
   LookShop:function(id){
   mui.openWindow({
 url: '../SellerHome/seller_index.html', 
 id:'../SellerHome/seller_index.html',
 extras:{
  //自定义扩展参数,可以用来处理页面间传值
 },
 waiting:{
  autoShow:true,//自动显示等待框,默认为true
  //title:'正在加载...'//等待对话框上显示的提示内容
 }
 });
   },
   //查看商品
   LookGoods:function(id){
   mui.openWindow({
 url: '../Selected/selected_list_details.html', 
 id:'../Selected/selected_list_details.html',
 extras:{
  //自定义扩展参数,可以用来处理页面间传值
 },
 waiting:{
  autoShow:false,//自动显示等待框,默认为true
  //title:'正在加载...'//等待对话框上显示的提示内容
 }
 });
   },
  }
  });
</script>
</body>


</html>

关于vue.js的学习教程,请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

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

Javascript 相关文章推荐
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
jQuery事件用法详解
Oct 06 Javascript
JS路由跳转的简单实现代码
Sep 21 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue2过滤器模糊查询方法
Sep 16 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
Feb 12 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 #Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 #Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 #Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 #Javascript
解读vue生成的文件目录结构及说明
Nov 27 #Javascript
You might like
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
微信公众平台实现获取用户OpenID的方法
2015/04/15 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
javascript自然分类法算法实现代码
2013/10/11 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
js简单实现标签云效果实例
2015/08/06 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
在react项目中使用antd的form组件,动态设置input框的值
2020/10/24 Javascript
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
解决pycharm中的run和debug失效无法点击运行
2020/06/09 Python
用python实现学生管理系统
2020/07/24 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
总监职责范文
2013/11/09 职场文书
店长岗位职责
2013/11/21 职场文书
单位办理社保介绍信
2014/01/10 职场文书
2014年营业员工作总结
2014/11/18 职场文书
公司宣传语大全
2015/07/13 职场文书
初一军训感言
2015/08/01 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript