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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js搭建移动端购物车界面

    本文介绍了如何使用Vue搭建一个移动端购物车界面,最终实现的功能包括: 1. 选择要最终购买的物品 2. 选择每件物品购买的数量 3.  实时更新所选择物品的总价格 HTML部分 首先给出HTML部分代码和注释,显示了整个界面的结构. <body> <div class="checkout"> <div id="app"> <div class="container"> <div class=

  • vue实现商城上货组件简易版

    本文实例为大家分享了vue实现商城上货组件的具体代码,供大家参考,具体内容如下 0.结果放前面 点击查看效果 带脚手架的源码 加个Star后,fork下来. 然后在控制台,先输入npm install安装依赖,再输入npm run dev运行查看效果 1.先列需求 一切开发都是基于需求做的,所以需求先行,根据需求设计功能. 需求如下: 上货商品有多个属性类别:(例如:颜色.尺寸.型号) 每个类别有多个子属性:(例如:白色.绿色.金色) 每个商品必然具备每个类别的其中一个子属性: 除此之外还有额外

  • Vue实现购物车场景下的应用

    本文实例为大家分享了Vue在购物车场景下的应用,供大家参考,具体内容如下 购物车场景需求: 1. 商品.店铺.购物车的选择 2. 商品删除 关键代码 测试数据 var _list = [{ checked: false, goods: [{ name: "商品1", price: 23, checked: false }] }, { checked: false, goods: [{ name: "商品2", price: 20, checked: false },

  • Vue实现购物车功能

    Vue实现购物车功能

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" /> &l

  • Vue2.0实现购物车功能

    Vue2.0实现购物车功能

    简介 vue.js是由华人尤雨溪开发的一套MVVM框架.vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化. 主要特性: 1.响应式的数据绑定  2.组件化开发  3.Virtual DOM 开发准备 工具 我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博

  • 用vue和node写的简易购物车实现

    项目介绍 这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境 因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q

  • 基于Vuejs实现购物车功能

    本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q

  • Vuejs实现购物车功能

    Vuejs实现购物车功能

    开始更新前端框架Vue.JS的相关博客. 功能概述 学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码 代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY

  • vue实现商城购物车功能

    vue实现商城购物车功能

    本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下 首先,先上最终的效果图 效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=

  • vuejs手把手教你写一个完整的购物车实例代码

    vuejs手把手教你写一个完整的购物车实例代码

    由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选 下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=

随机推荐