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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
jQuery oLoader实现的加载图片和页面效果
Mar 14 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JavaScript Array对象详解
Mar 01 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 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可变函数的使用详解
2013/06/14 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php实现文件下载实例分享
2014/06/02 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
JavaScript中的分号插入机制详细介绍
2015/02/11 Javascript
JavaScript模拟push
2016/03/06 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
python笔记(2)
2012/10/24 Python
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python random模块常用方法
2014/11/03 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
Python 实现微信防撤回功能
2019/04/29 Python
对Django外键关系的描述
2019/07/26 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python 爬取疫情数据的源码
2020/02/09 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
实习生体会的自我评价范文
2013/11/28 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
开业主持词
2014/03/21 职场文书
小学五年级学生评语
2014/04/22 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
政风行风建设责任书
2014/07/23 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS