Vue----购物车Cart

最新推荐文章于 2024-12-20 09:35:41 发布

damys

最新推荐文章于 2024-12-20 09:35:41 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue vue-cart

本文链接：https://blog.youkuaiyun.com/damys/article/details/77992821

Vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现的购物车单价变化时总价自动更新的方法。通过监听单价和数量的变化，实时计算并显示购物车总价。文章还涵盖了全选、删除等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能：实现单个单价的变化，同步更新总价

html

<div class="wrap wrap-cart" id="app">
    <div class="area">

        <div class="cart-title"><span>购物车</span></div>

        <div class="cart-table">
            <div class="cart-head">
                <ul>
                    <li>商品信息</li>
                    <li>单价</li>
                    <li>数量</li>
                    <li>小计</li>
                    <li>编辑</li>
                </ul>
            </div>

            <ul class="cart-body">
                <li v-for="(item, index) in productList">
                    <div class="cart-item">                            
                        <a href="javascript:;" class="check-btn" v-bind:class="{'checked':item.checked}" v-on:click="selectProduct(item)">
                            <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                        </a>

                        <div class="goods-msg clearfix">
                            <img class="img" v-bind:src="item.productImage" alt="">
                            <div class="title">
                                <a href="detail.html" target="_blank" v-text="item.productName"></a>
                                <p v-for="part in item.parts" v-text="part.partName"></p>
                            </div>
                        </div>  
                    </div>

                    <div class="cart-item">
                        <span class="item-price">{{ item.productPrice | partFilter('') }}</span>
                    </div>

                    <div class="cart-item">
                        <div class="num-amount">
                            <span class="num-increase" @click="changeMoney(item, -1)">-</span>
                            <input type="text" class="num-input" :value="item.productQuantity" disabled>
                            <span class="num-decrease" @click="changeMoney(item, +1)">+</span>
                        </div>    
                    </div>

                    <div class="cart-item">
                        <span class="item-price-total">{{ item.productPrice * item.productQuantity | money('元') }}</span>
                    </div>

                    <div class="cart-item">
                        <a href="javascript:;" class="icon-btn" @click="delBtn(item)">
                            <svg class="icon icon-del"><use xlink:href="#icon-del"></use></svg>
                        </a>
                    </div>                  
                </li>

            </ul>

        </div>

        <div class="cart-foot">
            <div class="f-l">
                <a href="javascript:;" class="check-btn" :class="{'checked':checkAllFlag}" @click="allSelect(true)">
                    <svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
                </a>
                <a href="javascript:;" @click="allSelect(true)"  v-if="!checkAllFlag" >全选</a>
                <a @click="allSelect(false)" href="javascript:;" v-if="checkAllFlag">取消全选</a>
            </div>

            <div class="f-r">
                总金额：<span class="total-price">{{ totalMoney | partFilter('元') }}</span>
                <a href="goods-order.html" class=""><button class="btn gopay-btn radius">结账</button></a>
            </div>
        </div>

    </div>

    <!-- 遮罩层 -->
    <div class="md-overlay" v-if="delFlag"></div>

    <!-- 提示框 -->
    <div class="md-panel" :class="{'md-show':delFlag}">

        <div class="md-inner">
            <div class="panel-header"><div class="panel-close" @click="delFlag=false"></div></div>

            <div class="panel-body">你确认删除此订单信息吗?</div>

            <div class="panel-footer clearfix">
                <button class="btn-confirm" @click="confirmDel">YES</button>
                <button class="btn-cancel" @click="delFlag=false">NO</button>                   
            </div>
        </div> 

    </div>
</div>

js

<script src="./style/js/libs/vue/vue.min.js"></script>
<script src="./style/js/libs/vue/vue-resource.js"></script>
<script> 
new Vue({
    el:'#app',
    data:{
        productList  :[],
        totalMoney   : 0,
        checkAllFlag :false,
        delFlag      :false,
        curProduct   :''
    },
    filters:{
        partFilter:function(value, type){
            return '￥ ' + value.toFixed(2) + type;    // 保留2位仅做测试用
        }
    },
    mounted:function(){
        this.$nextTick(function(){
            this.getCartList();
        })
    },
    methods:{
        // 提取数据
        getCartList:function(){
            var _this =　this;
            // this.$http.get('./style/js/cart.json', {'id':12}).then(res=>{       // ES6
            this.$http.get('./style/js/cart.json', {'id':12}).then( function(res) {
                _this.productList = res.data.result.list;

                // 效果是一样的
//                    console.log(res.data);    
//                    console.log(res.body);
            })
        },


        // 选择商品
        selectProduct:function(item){
            if(typeof item.checked == 'undefined'){
                // 注册一个变量￥set(obj, key, val), 也可以在数据库里增加字段处理
                this.$set(item, 'checked', true);
            } else {
                item.checked = !item.checked;
            }

            // console.log(item.checked)

            // 全部选中则全部按钮点亮，相反
            var checkAllFlags = true;
            this.productList.forEach( function(item, index){
                checkAllFlags = checkAllFlags && item.checked;
            });
            this.checkAllFlag = checkAllFlags;

            // 再计算金额
            this.callTotalMoney(); 
        },


        // 点击执行全选
        allSelect:function(flag){
            this.checkAllFlag = flag;

            // this.productList.forEach((item, index)=>{    // ES6
            var _this = this;
            this.productList.forEach( function(item, index){
                if(typeof item.checked == 'undefined'){
                    // 一上来就点全选的情况，也要注册一个变量
                    _this.$set(item, 'checked', true);
                } else {
                    item.checked = _this.checkAllFlag;
                }
            }); 

            // 再计算金额
            this.callTotalMoney(); 
        }, 


        // 计算金额
        callTotalMoney:function(){
            this.totalMoney = 0;

            // this.productList.forEach((item, index)=>{     // ES6
            var _this = this;
            this.productList.forEach( function(item, index){    
                if(item.checked){
                    _this.totalMoney += item.productPrice * item.productQuantity;
                }
            })
        },


        // 点击加减商品数量计算金额
        changeMoney:function(item, type){
          if(type < 0){
              item.productQuantity--;

              if(item.productQuantity < 1) item.productQuantity = 1;
          } else {
              item.productQuantity++;
          }

            // 再计算金额
            this.callTotalMoney(); 
        },


        // 点击删除
        delBtn:function(item){
            this.delFlag     = true;
            this.curProduct  = item;
        },


        // 点击确认删除按钮
        confirmDel:function(){
            this.delFlag = false;
            var index = this.productList.indexOf(this.curProduct);
            console.log(index);
            this.productList.splice(index, 1);

            // 再计算金额
            this.callTotalMoney(); 
        }

    }

})

// 全局过滤器
Vue.filter("money", function(value, type){
    return '￥ ' + value.toFixed(2) + type;
})
</script>