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中的对象和数组的应用技巧
Jan 07 Javascript
初学Javascript的一些总结
Nov 03 Javascript
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
Express.JS使用详解
Jul 17 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
js实现弹窗猜数字游戏
Nov 26 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将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
NodeJS学习笔记之(Url,QueryString,Path)模块
2015/01/13 NodeJs
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue登录注册实例详解
2019/09/14 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python中的格式化输出用法总结
2016/07/28 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
判断python字典中key是否存在的两种方法
2018/08/10 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
2012/12/09 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
实习护理工作自我评价
2013/09/25 职场文书
自我鉴定范文300字
2013/10/01 职场文书
大四学生思想汇报
2014/01/13 职场文书
思想品德自我评价
2014/02/04 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS