这是路由之间的跳转,传递值最好采用传参,而不是用$emit和$on,不起作用

如果实在一个页面中的兄弟组件,可以使用$emit和$on

中间件,eventBus.js 放在components目录下面

图片路径  static/img

模拟数据  /static/data.json

{
    "status":1,
    "result":{
        "totalMoney":59,
        "list":[
            {
                "productId":"60001",
                "productName":"HTML5+CSS3全面讲解",
                "productPrice":19,
                "productQuentity":1,
                "productImage":"static/img/img1.jpg",
                "parts":[
                    {
                        "partsId":"10001",
                        "partsName":"铅笔"
                    },
                    {
                        "partsId":"10002",
                        "partsName":"书签"
                    }
                ]
            },
            {
                "productId":"60002",
                "productName":"Javascrip从入门到精通",
                "productPrice":15,
                "productQuentity":1,
                "productImage":"static/img/img1.jpg",
                "parts":[
                    {
                        "partsId":"10003",
                        "partsName":"圆珠笔"
                    }
                ]
            }
        ]
    },
    "message":""
}
 
 
product.vue
 
<template>
<div class="product">
<table class="tab" width="100%" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th colspan="2">商品信息</th>
          <th style="width: 14%;">商品金额</th>
          <th style="width: 14%;">商品数量</th>
          <th style="width: 14%;">总金额</th>
          <th>编辑</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in productList">
          <td style="width: 5%;"><input type="checkbox" :checked="item.check" @click="checkBox(item)"/></td>
          <td class="goods">
            <img :src="item.productImage" class="goods-left"/>
            <div class="goods-right">
              <p>{{item.productName}}</p>
              <p class="tip">赠送:<span style="margin-right: 5px;" v-for="part in item.parts" v-text="part.partsName"></span></p>
            </div>
          </td>
          <td>{{item.productPrice | formatMoney}}</td>
          <td class="num">
            <a href="javascript:;" @click="changeMoney(item,-1)">-</a>&nbsp;&nbsp;
            <input type="text" v-model="item.productQuentity" disabled />&nbsp;&nbsp;
            <a href="javascript:;" @click="changeMoney(item,1)">+</a>
          </td>
          <td class="redcolor">{{item.productPrice*item.productQuentity | formatMoney}}</td>
          <td class="del" @click="del(item);">删除</td>
        </tr>
      </tbody>
      <tfoot>
        <tr class="footer">
          <td><input type="checkbox" :checked="checkAllFlag" @click="checkAll"/></td>
          <td>
            <span class="redcolor">全选</span>&nbsp;&nbsp;
          </td>
          <td colspan="4">
            总计:<span>{{totalMoney | formatMoney}}</span>元
            <button type="button" class="btn" @click="ToPayTotalMoney()">结账</button>
          </td>
        </tr>
      </tfoot>
    </table>
</div>
 
</template>
<script>
import axios from "axios";
import bus from './eventBus.js'
export default {
data() {
return {
productList: [],
checkAllFlag: false,
totalMoney: 0
};
},
mounted() {
this.getJson();
 
},
created(){
bus.$emit("hello","hello")
},
filters: {
//人民币单位,保留两位小数点
formatMoney: function(value) {
return "¥ " + value.toFixed(2);
}
},
methods: {
getJson: function() {
var that = this;
this.$http.get("/static/cartData.json").then(function(res) {
var res = res.data.result.list;
//console.log(res)
that.productList = res;
// console.log(that.proLists)
});
},
//单选
checkBox: function(item) {
var _this = this;
var num = 0;
if (typeof item.check == "undefined") {
this.$set(item, "check", true);
} else {
item.check = !item.check;
}
this.productList.forEach(function(item, value) {
if (item.check) {
num++;
}
});
if (num == _this.productList.length) {
this.checkAllFlag = true;
} else {
this.checkAllFlag = false;
}
this.getTotalMoney();
},
//全选
checkAll: function() {
var _this = this;
console.log(_this);
this.checkAllFlag = !this.checkAllFlag;
this.productList.forEach(function(item, index) {
if (typeof item.check == "undefined") {
_this.$set(item, "check", _this.checkAllFlag);
} else {
item.check = _this.checkAllFlag;
}
});
this.getTotalMoney();
},
//增减数量
changeMoney: function(product, way) {
if (way > 0) {
product.productQuentity++;
} else {
product.productQuentity--;
if (product.productQuentity < 1) {
product.productQuentity = 1;
}
}
this.getTotalMoney();
},
//计算总价
getTotalMoney: function() {
var _this = this;
this.totalMoney = 0;
this.productList.forEach(function(item, index) {
if (item.check) {
_this.totalMoney += item.productQuentity * item.productPrice;
}
});
},
del: function(item) {
var index = this.productList.indexOf(item);
this.productList.splice(index, 1);
this.getTotalMoney;
},
ToPayTotalMoney(){
//localStorage.setItem('totalMoney',this.totalMoney)
console.log(this.totalMoney)
bus.$emit("getTotalMoney",this.totalMoney);
this.$router.push({path:"/pay",
params:{
payTotalMoney:this.totalMoney
}
})
},
}
};
</script>
<style lang="scss">
</style>

pay.vue跳转页面,显示总价格

<template>
<div class="paycontent">
您需要支付<span>{{payMoney}}元</span>
 
</div>
</template>
<script>
import bus from "./eventBus.js";
import a from "@/components/a.vue"
import b from "@/components/b.vue"
export default {
data() {
return {
payMoney: 0,
msg:"hi"
};
},
mounted() {
var _this=this;
var val=this.$route.params.payTotalMoney;
if(val){
_this.payMoney=val;
}
}
};
</script>

vue-实现一个购物车结算页面的更多相关文章

  1. 用vuex写了一个购物车H5页面的示例代码

    用vuex写了一个购物车H5页面的示例代码:https://www.jb51.net/article/152008.htm 通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是 ...

  2. VUE的一个数据绑定与页面刷新相关的bug

    1.场景: N层嵌套的循环查询业务场景,框架是vue.其中在最后一层查完之后,还需要查其中每一项的两个属性,类型都是列表.查完之后将其赋值给一个变量用于页面展示.代码如下: (1)异常代码: getS ...

  3. 用vue做的购物车结算的功能

    <!-- 占位 --> <template> <div> <div class="product_table"> <div c ...

  4. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  5. localStorage实现购物车数量单价和结算页面的实时同步

    While there is life there is hope.一息若存,希望不灭 用localStorage实现简易的购物车数量单价和结算页面两个页面的实时同步: 购物车页面:实时更新页面,在i ...

  6. 使用jQuery制作一个简易的购物车结算流程

    因为今天下午时候在网上买了东西,在结算界面的时候突发奇想的也想自己动手做一个结算界面,当然了,只是一个最简易的结算界面,有商品数量的加减,有单价和小计,单个多个删除,全选和区县全选等等一些小功能,我在 ...

  7. 在vue中下拉框切换事件中改新建表单中的一个值,页面不显示

    事件中改新建表单中的一个值,页面不显示,当另一个对象值发生改变时,这个页面上的值才会显示 由于新建表单是弹窗,在弹出时会重新给每个字段重新赋值,在赋值时没给这个字段赋值(常见新加功能时,加了一个字段, ...

  8. day86:luffy:前端发送请求生成订单&结算页面优惠劵的实现

    目录 1.前端发送请求生成订单 1.前端点击支付按钮生成订单 2.结算成功之后应该清除结算页面的数据 3.后端计算结算页面总原价格和总的真实价格并存到数据库订单表中 2.优惠劵 1.准备工作 2.前端 ...

  9. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

随机推荐

  1. mac下已装virtualbox运行genymotion还报错找不到虚拟机的解决办法

    sudo ln -s /usr/local/bin/VBoxManage /usr/bin/VBoxManage  

  2. unreal3对象管理模块分析

    凡是稍微大一点的引擎框架,必然都要自己搞一套对象管理机制,如mfc.qt.glib等等,unreal自然也不例外. 究其原因,还是c++这种静态语言天生的不足,缺乏运行时类型操作功能,对于复杂庞大的逻 ...

  3. 6、perl创建模块(Exporter)及路径 引用 嵌套 查询模块

    参考博客:http://www.cnblogs.com/xudongliang/tag/perl/ 1.perl 模块的创建以及制定perl 模块的路径 (1)创建一个Myfun.pm模块. #/us ...

  4. 15、使用ggtree实现进化树的可视化和注释(转载)

    本文作者:余光创,目前就读于香港大学公共卫生系,开发过多个R/Bioconductor包,包括ChIPseeker, clusterProfiler, DOSE,ggtree,GOSemSim和Rea ...

  5. 微观SOA:服务设计原则及其实践方式

    大 量互联网公司都在拥抱SOA和服务化,但业界对SOA的很多讨论都比较偏向高大上.本文试图从稍微不同的角度,以相对接地气的方式来讨论SOA, 集中讨论SOA在微观实践层面中的缘起.本质和具体操作方式, ...

  6. web特点

    1.图形化和易于导航的 Web是非常易于导航的,只需要从一个连接跳到另一个连接,就可以在各页各站点之间进行浏览了. 2.与平台无关 这里所说的平台是指软件的运行环境,可以是Windows.Linux等 ...

  7. linux学习第一周小结

    这几天学习linux课程,安装环境,遇到不会的查询资料,在这个过程中发现了很多有意思的网页,看到了一些不一样的内容,现在对linux的学习兴趣增强了许多.学习解决问题也是很有意思的事情,解决问题的过程 ...

  8. Master 接受其它组件的注册

    Master对其它组件注册的处理: Master接受注册的对象主要就是: Driver.Application.Worker.注意:Executor 不会向 Master 注册,它是向 Driver ...

  9. Macbook sublime 安装markdown插件

    Sublime Text为3 版本 安装sublime text 插件,需要“***”,不会弄的,就可以移步了. 首先按 command + shift + p 调出安装插件的界面,输入“instal ...

  10. IDEA的git密码修改

    问题: 如果你办公的电脑是同事用过,在每次提交git的时候都显示是他的名字.想要修改提交git用户名密码. 但是博客idea 修改Git密码和账号方法所示方法无效.且操作系统是win10.(其他操作系 ...