Vue(小案例_vue+axios仿手机app)_购物车（计算商品总金额）

最新推荐文章于 2024-03-04 00:00:00 发布

weixin_30772105

最新推荐文章于 2024-03-04 00:00:00 发布

阅读量291

点赞数

CC 4.0 BY-SA版权

文章标签： javascript git ViewUI

原文链接：http://www.cnblogs.com/xxm980617/p/10713000.html

本文详细介绍了电商网站中购物车功能的实现方法，包括计算总金额、商品删除操作及未结算时的用户离开提示功能。通过使用Vue.js的computed属性进行高效计算，利用splice方法实现商品删除，并采用导航守卫在用户跳转页面前确认是否离开。

一、前言

1、计算总金额

2、点击删除按钮，删除对应的商品信息

3、当还没结算的时候，当用户跳到其他页面时，提示用户是否要离开

二、主要内容

1、计算总金额

（1）效果演示：

　　（2）监听多个属性用到computed计算属性

computed:{
            payment(){
                let total = 0;//定义总金额
                let count =0;//定义总数量

                this.shopCart.forEach((shop)=>{

                    if(shop.isSelected){//当上面的按钮勾上了，才计算
                        count = count+shop.num;
                        total = total + shop.num * shop.sell_price;
                    }
                })

                return {
                    total, count
                }
            }
        },

2、点击删除按钮，删除对应的商品信息

　　删除操作可以用splice, delete

del(shop,index){//将当前的对象，和index传进来
                this.shopCart.splice(index,1)//数组中的当前对象
                

            }

3、当还没结算的时候，当用户跳到其他页面时，提示用户是否要离开

　　（1）用导航守卫，在路由离开之前给用户提示

beforeRouteLeave(to, from, next){
            let res = confirm("确定要离开吗");

            if(res){
                //保存用户编辑的数据
                let obj={};
                this.shopCart.forEach((shop)=>{
                    obj[shop.id]=shop.num
                })

                GoodsTool.saveGoods(obj);
                next();//然后放行
            }else{
                next(false);//取消，
            }
        }