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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 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
php 代码优化的42条建议 推荐
2009/09/25 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
vue的keep-alive中使用EventBus的方法
2019/04/23 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
C# .NET面试题
2015/11/28 面试题
环境工程大学生自荐信
2013/10/21 职场文书
合作协议书怎么写
2014/04/18 职场文书
欢迎词范文
2015/01/27 职场文书
产品质量保证书范本
2015/02/27 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书