vue购物车实例

  • 时间:2018-10-20
  • 浏览量:
  • 分类:[ Vue]
  • 作者:池剑锋

最近有个网友问我,如何用vue写一个购物车的功能?刚好最近做了一个公众号的微商城带有购物车功能的项目,然后给他讲了些原理之后直接把代码发给了他。在这里也分享给你们。

贴上一张我自己做的项目购物车图

1.png


当然,我待会给的购物车demo会比较简单的,只有选中、全选反选、计算金额和提交订单这几个功能,至于点击之后弹出的订单窗口和微信支付我这里就不多说了。

好,先贴上一张刚刚从购物车分离出来的购物车图片

image.png


说说实现原理:

选中:点击的时候通过true和false来判断是否选中的状态,然后把状态存储到数组selectArr里去。

全选:通过selectArr数组来判断是否全部选中。

计算金额:遍历数据然后通过selectArr数组来判断,把选中的金额相加。

提交订单:和计算金额逻辑相似,遍历数据然后通过selectArr来判断选中的数据,通过自定义的数组来判断是否有选中的商品。


不多说了,剩下的自己去看代码

css代码

* {
    margin: 0;
    padding: 0
}

ul,
li {
    list-style: none
}

.list li {
    padding: 20px;
    border-bottom: 1px solid #0cc;
}
.list li>div{
	display: inline-block;
	vertical-align: middle;
}
.list li span,
.footer span {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid red;
    position: relative;
}

.Active:before,
.footerActive:before {
    content: "";
    width: 14px;
    height: 14px;
    background: #0cc;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -7px;
    margin-left: -7px;
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ccc;
}

.SunMonery {
    display: inline-block;
    vertical-align: middle;
}
[v-cloak] {
    display: none;
}


html代码

<div id="vmShop" v-cloak>
    <ul class="list">
        <li v-for="(item,n) in shopCardData">
            <div v-on:click="selectItemBtn(n,$event)">
                <span v-if="selectArr[n]" class="Active"></span>
                <span v-else></span>
            </div>
            <i>{{item.monery}}</i>
            <i>{{item.name}}</i>
        </li>
    </ul>
    <footer class="footer">
        <div v-on:click="allSelect()" class="SunMonery">
            <span></span>
        </div>
        <i>{{totalMoney()}}</i>
        <em v-on:click="subOrder()">提交订单</em>
    </footer>
</div>


js代码

var vmShop = new Vue({
    el: "#vmShop",
    data: {
        shopCardData: [{  //模拟数据
                id: 1,
                name: "我是商品1",
                monery: "10",
            },
            {
                id: 2,
                name: "我是商品2",
                monery: "20",
            },
            {
                id: 3,
                name: "我是商品3",
                monery: "30",
            },
        ],
        selectArr: [],
        
    },
    created: function(){
    	this.getShopCardContent();
    },
    methods: {
        allSelect: function () {  //全选
            var self = this;
            var Is = false;
            for (var i = 0; i < self.selectArr.length; i++) {
                if (!self.selectArr[i]) {  //当全部选中的时候
                    Is = true;
                    break;
                }
            }
            self.selectArr.forEach(function (item, index) {
                Is && (self.selectArr[index] = true);
                !Is && (self.selectArr[index] = false);
            });
            self.selectArr = JSON.parse(JSON.stringify(self.selectArr));
            self.checkSelectAll();
        },
        selectItemBtn: function (index, event) {  //点击选中
            this.selectArr[index] = !this.selectArr[index];
            this.checkSelectAll();
        },
        checkSelectAll: function () {
            var self = this;
            var lock = false;
            for (var n = 0; n < self.selectArr.length; n++) {
                if (!self.selectArr[n]) {  
                    lock = true;
                    break;
                }
            }
            self.selectArr = JSON.parse(JSON.stringify(self.selectArr));
            var selectAllBtn = $('.SunMonery>span');
            lock ? selectAllBtn.removeClass('footerActive') : selectAllBtn.addClass('footerActive');
        },
        totalMoney: function () { //计算金额
            var total = 0;
            var self = this;
            this.shopCardData.forEach(function (item, index) {
                if (self.selectArr[index]) {
                    total += parseFloat(item.monery);
                }
            });
            return total.toFixed(1);
        },
        getShopCardContent: function () { //初始化selectArr赋值,全部为false
            var self = this;
            self.selectArr = [];
            self.shopCardData.forEach(function () {
                self.selectArr.push(false);
            });
        },
        subOrder: function () { //结算
            var self = this;
            // var orderId = []; //订单Id
            // var orderMonery = 0; //订单金额
            var cehcklenth = [];  //选中的数组
            self.shopCardData.forEach(function (item, index) {  
                if (self.selectArr[index]) {
                    // orderId.push(item.id);
                    cehcklenth.push(index);
                    // orderMonery += parseFloat(item.monery);
                }
            });
            if (cehcklenth.length <= 0) {
                alert("请选择商品");
            } else {
                alert("我要提交订单了...");
            }
        }
    }
})

上面就是购物车的代码了,样式写的比较简陋,不过我们这里主要讲的是功能这一块,大家将就下。因为我那个项目的购物车没有删除和加或者减商品的功能,所以我这里给出的同样也是没有的,不过这两个功能实现起来也是很简单的,在这里我说下这两个功能的原理,代码我就不多写了。

删除:点击删除按钮的时候,调用后台给你的删除商品的接口,然后再调用一次商品数据接口即可。

加或者减:点击加号或者减号的时候调用后台给你的加或者减商品的接口,成功之后值‘++’或者‘--’即可


其实购物车还有一个常见的功能,那就是规格选择,有兴趣的朋友可以去研究下,在这里我就不细说了。

补充一句,别忘了引入vue和jquery文件。

购物车这一块就先写到这里了,如有疑问或者写的不对的地方,欢迎来吐槽。

上一篇:vue的渲染实例
下一篇:使用vue实现多规格选择实例
分享给好友