vue+vant+axios，实现购物车功能；

购物实现:

1. 商品单件选择，

2.单件商品数量增减操作，

3. 单件商品的删除操作；

4. 商品全选/取消全选功能；

style:使用vant：

改造：

/*购物车*/
.cars-header .passport-user {line-height: 32px;}
.carts  .van-card__footer {/*right: auto;*/top: 48px;position: absolute;}
.carts  .van-card {padding: 5px 12px 5px 115px;background: #fff;}
.carts  .van-cell-group {padding: 10px 0 45px; }
.carts .van-swipe-cell__right {background: #cc292b;line-height: 146px;color: #fff;width: 68px;font-size: 18px;text-align: center;}
.carts .van-checkbox {margin-left: 10px; }
.carts .carts-checked{float:left;color: #0a0a0a;display: block;position: relative; line-height: 100px;z-index: 666;}
.carts-select-botm{width:100%;}
.carts-botm-total{position: relative;right: -53px;top: -45px;font-size: 12px; margin-top: 12px;text-align: right;display: none}
.carts .skuchoose{position: absolute;top: -19px;width: 200px}
.carts .skuitem{color: #999;margin-bottom: 3px;}
.cart-no-data{font-size: 17px; line-height: 30px; text-align: center; margin-top: 20px; color: #cc292b;}
.cart-no-data a{text-decoration: underline;}
.carts  input[type=checkbox] {display: inline-block;vertical-align: middle;width: 20px;height: 20px;-webkit-appearance: none;transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);background-color: transparent;border: 0;outline: 0 !important;line-height: 20px;color: #d8d8d8;}
.carts  input[type=checkbox]:after {content: "";display:block;width: 20px;height: 20px;border-radius: 50%;text-align: center;line-height: 17px;font-size: 16px;color: #fff;border: 1px solid #ddd;background-color: #fff;box-sizing:border-box;}
.carts input[type=checkbox]:checked:after {content: "L";border-color: #cc292b;background-color: #cc292b;}

html: 

<?php
$this->assign('title','购物车');
$this->assign('js',$this->Html->script(['axios','wechat/carts.index.js']));
?>
<div id="topbar" class="clearfix cars-header goback">
    <van-nav-bar title="购物车"  left-text="返回" @click-left="goBack"  left-arrow>
        <van-icon name="home" slot="right" size="20px" color="#666" @click="goHome" />
    </van-nav-bar>
</div>
<!-- 购物车列表-->
<template>
    <div class="mt-50 mb-50 carts  border-top1">
        <div class="van-swipe-cell pt-15">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了..." @load="getcartItems()">
                <div v-if="shopdata.length>0">
                    <van-swipe-cell :right-width="65" :on-close="onClose" v-for="(i,key) in shopdata" :key="key">
                        <label :for="i.item.id" class="carts-checked ml-8"  >
                           <!-- <input type="checkbox"  v-model="i.isChecked" :checked="i.isChecked" :id="i.item.id" @click="seleceOne(key)">-->
                            <input type="checkbox"  :checked="i.isChecked" :id="i.item.id" @change="seleceOne(key)">
                        </label>
                        <van-cell-group>
                            <van-card
                                    :num="i.total"
                                    :thumb='i.item.cover'
                                    :price="i.price | curreny"
                                    :title="i.item.title"
                                    :thumb-link="'/wechat/items/view/'+i.item.id"
                            >
                                <div slot="footer">
                                    <div slot="skuchoose">
                                        <div class="skuitem">规格: <span>{{i.sku_name}}</span></div>
                                        <div class="skuitem">
                                            <template v-if="i.discount!=0"><div class="font-default font-size12">优惠: ￥{{i.discount * i.total | curreny}} </div></template>
                                            <template v-if="i.is_install==1"><div>安装:含安装</div></template>
                                            <template v-if="i.is_install==0"><div>减免安装费: ￥{{i.waiverfee *  i.total | curreny}}</div></template>
                                        </div>
                                    </div>
                                    <div class="clearfix carts-select-botm">
                                        <div>
                                            <template v-if="i.item.limit_sale==1">
                                                <van-stepper v-model="i.total"  :max="i.item.limit_sale_count"  @change="selectNumChange(i.id,i.item.limit_sale,i.total,i.item.limit_sale_count,i.sku_id,i.is_install,i.item.id,key,i.checked)"/>
                                            </template>
                                            <template v-if="i.item.limit_sale==0">
                                                <van-stepper v-model="i.total"  @change="selectNumChange(i.id,i.item.limit_sale,i.total,i.item.limit_sale_count,i.sku_id,i.is_install,i.item.id,key,i.checked)"/>
                                            </template>
                                        </div>
                                        <span  class="font-red right carts-botm-total">小计<br>
                                            <template v-if="i.is_install==0">
                                                 ￥{{(i.price - i.waiverfee - i.discount) * i.total   | curreny}}
                                            </template>
                                           <template v-if="i.is_install==1">
                                                ￥{{(i.price -  i.discount) * i.total   | curreny}}
                                           </template>
                                        </span>
                                    </div>
                                </div>
                            </van-card>
                        </van-cell-group>
                        <span slot="right" @click="deleteCartItem(page,i.id,key)">删除</span>
                    </van-swipe-cell>
                </div>
                <div  v-if="firstload==true">
                    <div class="text-center no-items">
                        <div class="noitem-img"></div>
                        <p class="font-default">购物车是空的哦~，赶快 <a class="font-red" href="/wechat/items">填充购物车</a>！</p>
                    </div>
                </div>
                <van-submit-bar :price="totalPrice*100" :disabled="disabled" button-text="提交订单" @submit="onSubmit">
                  <!--  <label class="ml-15" for="checkedall"><input type="checkbox" id="checkedall"  @click="selectAll"  v-model="isCheckedAll" :checked="isCheckedAll"   name="isCheckedAll">全选</label>-->
                    <label class="ml-10" for="checkedall"><input type="checkbox" id="checkedall"  @change="selectAll"    :checked="isCheckedAll"   name="isCheckedAll">全选</label>
                </van-submit-bar>
            </van-list>
        </div>
</template>

js: 代码部分

var app = new Vue({
    el: "#app",
    data: {
        loading:false,
        finished:false,
        pageNumber:0,//当前页
        totalPage:0,//总数
        page: 1,
        disableok1:false,//禁用类class
        disableok2:false,//禁用类class
        nodata:false,//无数据加载时判断；
        orderEvery:[],//暂存每页的数据长度；

        isLoading: false,//控制下拉刷新的加载动画
        firstload:false,//第一次items为空时，不执行，之后判断如果为空，执行；
        totalNum:0,
        selectPrice: 0,//被选中的总价计算；
        totalPrice:0,//计算的总价
        isCheckedAll:true,//全选状态
        shopdata:[],//所有购物车列表;
        disabled:false,
        hasList: true,
        cart_id:[],
        total:0,//购买
        cat_id:0,//商品改变后的id
    },
    filters:{
        curreny:function(data){
            data = Number(data).toFixed(2) ;
            return data;
        }
    },
    created:function(){
       // this.getcartItems();
        this.getTotalPrice();//计算总价；
        this.getcartItems();//初始化执行第一页数据；
    },
    watch:{//监听商品全选/反选事件；
        shopdata:{
            handler:function(value){
                var that=this;
                var count=0;
                for(var i=0;i<value.length;i++){
                    if(value[i].isChecked==true){
                        count++;
                    }
                }
                if(count==value.length){
                    that.isCheckedAll=true
                }else{
                    that.isCheckedAll=false
                }
            },
            deep:true
        },
    },
    methods: {
        //返回上一页（历史记录)
        goBack:function(){
           // 默认将返回上一个页面
            self.location=document.referrer;
            //window.history.back();
            //window.history.go(-1);
        },
        //返回首页
        goHome:function(){
            window.location.href='/wechat/';
        },
        //购物车数据初始化
        getcartItems:function(){
            var that = this;
            that.loading = true;
            that.finished = false;
            axios.get('/api/carts',{params: {page:that.page},headers:{'X-Requested-With': 'XMLHttpRequest',token:token}}).then(function(res){
                that.loading = false;
                that.finished = true;
                if(res.data.code == 0){
                    that.shopdata=res.data.data;
                    for(let i=0;i<that.shopdata.length;i++){
                        //设置每一项的选中状态；
                        Vue.set(that.shopdata[i],"isChecked",true);
                    }
                    console.log(that.shopdata);
                    that.getTotalPrice();
                    if(that.shopdata.length==0){
                        that.firstload=true;
                    }else{
                        that.firstload=false;
                    }
                }else{
                    that.$toast(res.data.message);
                }
            })
        },
        //计算选中商品的总价：
        getTotalPrice:function () {
            let shopdata = this.shopdata;
            let totalprice = 0;
            for (let i = 0; i < shopdata.length; i++) {
                if (shopdata[i].isChecked==true) {
                    if(shopdata[i].is_install==0){
                        totalprice+=(shopdata[i].price - shopdata[i].waiverfee - shopdata[i].discount) * shopdata[i].total ;
                    }else if(shopdata[i].is_install==1){
                        totalprice+=(shopdata[i].price - shopdata[i].discount) * shopdata[i].total ;
                    }
                }
            }
            this.totalPrice = totalprice;
        },

        //选择一项
        seleceOne: function(index) {
            //console.log(index);
            if(this.shopdata[index].isChecked==true){
                this.shopdata[index].isChecked=false;
            }else{
                this.shopdata[index].isChecked=true;
            }
            this.getTotalPrice();
        },

        // 全选或取消全选
        selectAll: function() {
            if(this.isCheckedAll==true){
                for(var i=0;i<this.shopdata.length;i++){
                    this.shopdata[i].isChecked=false;
                }
                this.isCheckedAll="";
            }else{
                for(var i=0;i<this.shopdata.length;i++){
                    this.shopdata[i].isChecked=true;
                }
                this.isCheckedAll=true;
            }
            this.getTotalPrice();
        },
        //滑动显示删除；
        onClose:function(clickPosition, instance) {
            switch (clickPosition) {
                case 'left':
                case 'cell':
                case 'outside':
                    instance.close();
                    break;
                case 'right':
                    instance.close();
                    break;
            }
        },
        //删除购物项
        deleteCartItem:function(page,id,e){
            var that=this;
            that.shopdata.splice(e, 1); // 删除下标为i的元素，后面的1表示删除一个
            axios.delete(' /api/carts',{params:{id:id},headers:{'X-Requested-With': 'XMLHttpRequest',token:token}}).then(function(res){
                if(res.data.code == 0){
                    that.$toast("删除成功！");
                    that.getcartItems(page);
                   // console.log(that.shopdata);
                    if(that.shopdata.length==0 || that.shopdata==''){
                        that.nodata=true;
                    }
                }else{
                    that.$toast(res.data.message);
                }
            });
            that.getTotalPrice(id);
        },
        //购买数量改变时触发
        selectNumChange:function(cart_id,limt_status,total,limt_total,sku_id ,is_install,item_id,index,checked){
           if(limt_status==1 && limt_total<=total){
               this.$toast("该商品最多只能购买"+limt_total+"件！");
           }
            this.totalChange(cart_id,total,sku_id,is_install,item_id,index,checked);
            this.getTotalPrice();
        },
        //购买数量改变时执行；
        totalChange:function(cart_id,total,sku_id,is_install,item_id,index,checked){
            var that=this;
            var cartNum={};
            cartNum.cart_id=cart_id;
            cartNum.total=total;
            cartNum.sku_id=sku_id;
            cartNum.is_install=is_install;
            cartNum.item_id=item_id;
            cartNum.is_fast=0;
            axios.post('/api/carts',cartNum,{headers:{'X-Requested-With': 'XMLHttpRequest',token:token}}).then(function(res){
                if(res.data.code == 0){
                    that.getTotalPrice();
                }else{
                    that.$toast(res.data.message);
                }
                that.showcart=false;
            })
        },
        //提交订单，并到确认订单页面
        onSubmit:function() {
            var that=this;
            var cart_ids = [];
            that.disabled=false;
            for(var i=0;i<that.shopdata.length;i++){
                if(that.shopdata[i].isChecked){
                    cart_ids.push(that.shopdata[i].id);
                }
            }
            if(cart_ids.length > 0){
                cart_ids = cart_ids.join(',');
                window.location.href='/wechat/orders/create?cart_id='+cart_ids;
            }else{
                that.$toast("请至少选择一件商品！");
            }
        },
    }
});