vue-实现一个购物车结算页面

这是路由之间的跳转，传递值最好采用传参，而不是用$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>