如何用vue.js写购物车功能

﹏ヽ暗。殇╰゛Y 2021-09-16 22:00 275阅读 0赞

原文来自：[https://blog.csdn.net/zwq123w/article/details/78618010][https_blog.csdn.net_zwq123w_article_details_78618010]

//要引入vue.js同时还有axios.min.js
        <script src="./homework/node_modules/vue/dist/vue.min.js"></script>
        <script src="./homework/node_modules/axios/dist/axios.min.js"></script>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        table{
             border-collapse:collapse; 
             float: left;
             border:1px solid #999;
        }
        #btn{
            background:#999;
            color: #fff;
        }
        #shop{
            list-style: none;   
        }
        #shop li{
            width: 400px;
            height:150px;
            border:1px solid #999;
        }
            #shop .p{
                width:200px;
                height:30px;
                background:gray;
                color: #fff;
                text-align: center;
                line-height:30px;
            }
            #shop .p1{
                color:orange;
                float: left;
            }
            #shop .p2{
                color: #999;
                float: left;
                margin-left:10px;
            }
            #shop .p3{
            clear: both;
            }
    
        </style>
        <script src="./homework/node_modules/vue/dist/vue.min.js"></script>
        <script src="./homework/node_modules/axios/dist/axios.min.js"></script>
    </head>
    <body>
    
    <div id="app">
    
        <ul id="shop">
            <li v-for="item,index in plist" :key="item.id" id="li">
                <p class="p">{
       {item.title}}</p>
                <p class="p1">¥{
       {item.sprice}}</p>
                <p class="p2"><del>¥{
       {item.price}}</del></p>
                <p class="p3">
                <span v-if="nums[item.id]">
                    <button @click="sub(item)">-</button>
                    {
       {nums[item.id]}}
                </span>
                    <button @click="add(item)">+</button>
                </p>
            </li>   
        </ul>
        <template v-if="car.length">
            <table border="1px">
                <tr v-for="item,index in car">
                    <td>{
       {item.title}}</td>
                    <td>
                        ¥{
       {item.sprice}}
                        <del>¥{
       {item.price}}</del>
                    </td>
                    <td>
                    <button @click="carsub(index,item.id)">-</button>
                        {
       {nums[item.id]}}
                        <button @click="caradd(index,item.id,item.store)">+</button>
                    </td>
                </tr>
            </table>
            <button @click="empty" id="btn">清空购物车</button>
            总计:<b>¥{
       {itotal}}</b>
        </template>
    </div>
    <script>
    //npm install axios安装axios
    var baseurl="http://www.easy-mock.com/mock/5a167443d8031f24f9a7a5f9/daojia";
    
    //创建Vue实例
    var vm = new Vue({
        el:"#app",
    
        data:{
            plist:[],//存放列表数据
            car:[],
            nums:{},
            buyed:[]
        },
        computed:{
            itotal:function(){
                var total=0;
                for(var i=0;i<this.car.length;i++){
                    total+=this.car[i].sprice*this.nums[this.car[i].id];
                }
                return total;
            }
        },
        methods:{
            //在购物车中增加数量
            caradd:function(index,id,store){
                //判断数量是否超过库存
                if(this.nums[id]>store){
                    return;
                }
                //this.car[index].num+=1;//数量加1
                this.nums[id]+=1;
                this.$set(this.car,index,this.car[index]);
            },
            //在购物车中减少数量
            carsub:function(index,id){
                //数量少于1时,删除商品
                if(this.nums[id]<=1){
                    this.car.splice(index,1);
                    this.buyed.splice(index,1);
                    delete this.nums[id];
                    return;
                }
                //this.car[index].num-=1;//商品-1
                this.nums[id]-=1;
                this.$set(this.car,index,this.car[index]);
            },
            add:function(item){
                if(this.buyed.indexOf(item.id)>=0){//判断商品是否已经添加了
                    for(var i=0;i<this.car.length;i++){
                        if(this.car[i].id==item.id){
                            if(this.nums[item.id]>item.store){
                                return ;
                            }
                            //this.car[i].num+=1;
                            this.nums[item.id]+=1;
                            this.$set(this.car, i, this.car[i]);
                            return;
                        }
                    }
                    return;//结束当前函数别的运行
                }
                //item.num = 1;
                this.$set(this.nums,item.id,1);
                this.buyed.push(item.id);
                this.car.push(item);
            },
            sub:function(item){
                for(var i=0;i<this.car.length;i++){
                    if(this.car[i].id==item.id){
                        if(this.nums[item.id]==1){
                            this.car.splice(i,1);
                            this.buyed.splice(i,1);
                            delete this.nums[item.id];
                            return;
                        }
                        this.car[i].num-=1;
                        this.nums[item.id]-=1;
                        this.$set(this.car,i,this.car[i]);
                        return;
                    }
                }
            },
            empty:function(){
                this.car=[];
                this.buyed=[];
                this.nums={};
            }
        },
        created:function(){
            var th = this;
            //当vue实例化完成使用axios异步请求数据
            axios.get(baseurl+'/plists').then(function(res){
                th.plist=th.plist.concat(res.data.plists);
                //console.log(res.data)
            }).catch(function(err){
                console.log(err)
            });
        }
    })
    
    //创建mock数据
        var data = {
                "list|10-20":
            [
                {
                    "id":"@guid",
                    "title":"@ctitle",
                    "price|1-100.2":0,
                    "sprice":function(){
                        return this.price-3;
                    },
                    "store|2-20":1
                }
            ]
        }
    </script>
    
    </body>
    </html>

[https_blog.csdn.net_zwq123w_article_details_78618010]: https://blog.csdn.net/zwq123w/article/details/78618010