这是路由之间的跳转,传递值最好采用传参,而不是用$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. pig语法学习 FOREACH GENERATE group AS

    深入浅出,转一个 转载必须注明出处:http://www.codelast.com/ 转载地址 本文可以让刚接触pig的人对一些基础概念有个初步的了解. 本文大概是互联网上第一篇公开发表的且涵盖大量实 ...

  2. ssh动态转发小记

    ssh,一般常用来做远程登录管理,也就是连上远程机器,得到一个shell,然后交互式地在上面敲命令-看结果-再敲命令. 偶尔也会用在脚本里,做些自动化批处理上传下载的操作,但本质上也是用shell来执 ...

  3. 8.Struts2-057漏洞复现

    漏洞信息: 定义XML配置时如果namespace值未设置且上层动作配置(Action Configuration)中未设置或用通配符namespace时可能会导致远程代码执行. url标签未设置va ...

  4. 修复Ubuntu的引导

    重装win7后如何恢复ubuntu引导 在重装系统之后,开机启动界面的ubuntu引导不见了,直接进入新安装的window系统中.下面是如何恢复ubuntu引导的方法: 1)准备一张ubuntu系统安 ...

  5. DropDownList绑定数据库

    this.DropDownList_设备列表.DataSource = dt_eq;//设置数据源 this.DropDownList_设备列表.DataTextField = "equip ...

  6. HTML5学习笔记(七)HTML5 服务器发送事件(Server-Sent Events)

    Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能够自动到达. EventSource 对象用于接 ...

  7. 用SQL数据库做多表关联应怎样设计库结构20170527

    http://77857.blog.51cto.com/67857/143872/ 多表关联的话表之间必须得存在关系才行呢,这样建立外键约束就行了, 关系表中插入主表的主键做外键. 假设表1学生表st ...

  8. 如何从git上clone一个项目

    今天想从自己的git上down下来代码,补充一些新的学习demo,不过因为平时工作中不适用git管理代码,所以,有些命令行忘记了.现在,通过这种方式再加深一遍印象吧. 那我就假设已经安装好了git了. ...

  9. scrapy框架爬取蜂鸟网的人像图片

    今天有点无聊,本来打算去蜂鸟网爬点图片存起来显得自己有点内涵,但是当我点开人像的时候就被里面的小姐姐所吸引了,下面就是整个爬图片的思路和过程了 第一步:先创建一个爬虫项目 scrapy startpr ...

  10. 旅行青蛙分析(Android篇)

    近期旅行青蛙这款游戏非常的火热,周围的朋友.家人都养了一只小青蛙.看到网上有人说这款游戏可以直接逆向编译,没有加密:所以在搜索相关资料后花了一些时间进行逆向分析与修改.这篇文章里,我将介绍如何获取稀有 ...