Vue2 实现购物车功能(可直接使用)

目录

      • vue2.0实例简单购物车
      • 代码实现

vue2.0实例简单购物车

页面展示效果如下:​

Vue2 实现购物车功能(可直接使用)_第1张图片
该购物车实现了自动计算小计、总价。

代码实现

<body>
    <div id="app">
        <div>
            <form action="">
                商品名称:<input type="text" v-model="productName" name="productName">
                商品单价:<input type="text" v-model="productPrice" name="productPrice">
                <input type="button" value="添加商品" @click="addProduct">
            form>
        div>
        <ul>
            <li v-for="(pro,index) in productList"  :key="index">
                商品名称: {{pro.productName}} ---------------- 商品单价: {{pro.productPrice}} 
                <button @click="addproToCart(index)">添加商品button>
            li>
        ul>
        <cart :cartlist="cartList">cart>
    div>

    <template id="cartHtml">
        <div>
            <table border="1">
                <tr>
                    <td>商品td>
                    <td>商品名称td>
                    <td>商品价格td>
                    <td>商品数量td>
                    <td>商品价格td>
                tr>
                <tr v-for="(pro,index) in cartlist" :key="index">
                    <td><input type="checkbox" v-model="pro.active">td>
                    <td>{{pro.productName}}td>
                    <td>{{pro.productPrice}}td>
                    <td>
                        <button @click="reduceProNum(index)">-button>
                        {{pro.productNum}}
                        <button @click="addProNum(index)">+button>
                    td>
                    <td>{{pro.productPrice * pro.productNum}}td>
                tr>
                <tr>
                    <td colspan="3">选中的商品:{{activeNum}}/{{cartlist.length}}td>
                    <td colspan="2">商品总价:{{totalprice}}td>
                tr>
            table>
        div>
    template>    
body>

js代码

    var cart = {
        template:'#cartHtml',
        props:['cartlist'],
        methods:{
            // 商品数量+1
            addProNum(index){
                let product = this.cartlist[index];
                product.productNum++
            },
            // 商品数量-1
            reduceProNum(index){
                let product = this.cartlist[index];
                // 判断商品数量是否为1
                if(product.productNum==1){
                    this.cartlist.splice(index,1) // 为1,从数组中删除
                }else{
                    product.productNum--
                }
            }
        },
        computed:{
            activeNum(){
                let activeProdctList = this.cartlist.filter(item=>{
                    return item.active
                })
                return activeProdctList.length
            },
            totalprice(){
                let result = 0;
                for(pro of this.cartlist){
                    if(pro.active){
                        result = result + pro.productPrice * pro.productNum
                    }
                }
                return result;
            }
        }
    }

    var app = new Vue({
        el:'#app',
        data(){
            return{
                productName:'',
                productPrice:0,
                productList:[],
                cartList:[]
            }
        },
        methods:{
            addProduct(){
                // todo 对新增的商品名称和单价,进行验证

                // 查找新增的商品是否存在于商品列表中,如果不在存在返回-1
                let findindex = this.productList.findIndex(item=>{
                    return item.productName==this.productName
                })
                if(findindex==-1){ // 判断商品列表中是否存在新增商品
                    // 把新商品添加到商品列表中
                    this.productList.push({productName:this.productName,productPrice:this.productPrice})
                }else{
                    alert('此商品已经存在') // 商品已存在,给出提示
                }
            },
            // 添加商品到购物车,index是单击商品的下标
            addproToCart(index){
                
                let newproduct = this.productList[index]; // 根据下标从商品列表中取出商品对象
                // 从购物车列表中查找,是否存在新的商品,如果查到返回购物车中的商品
                let product = this.cartList.find(item=>{
                    return item.productName==newproduct.productName
                })
                if(product){
                    // 如果有对应商品数量加1
                    product.productNum++
                }else{
                    // 没有对应商品,添加新的商品到购物车
                    this.cartList.push({
                        productName:newproduct.productName,
                        productPrice:newproduct.productPrice,
                        productNum:1,
                        active:true
                    });
                }
                
                console.log(product);
            }
        },
        components:{
            cart
        }
    })

欢迎大家有问题指出

你可能感兴趣的:(Vue2,javascript,开发语言,ecmascript,vue.js)