vant+vue 批量订货购车操作和布局，及删减功能等；

html:

<?php
$this->assign('title', SITE_NAME);
$this->assign('css', $this->Html->css(['css', 'wechat/typescss']));
$this->assign('js', $this->Html->script(['axios', 'wechattypes/carts.indextypes.js']));
?>
<!-- 头部 -->
<div class="">
    <div id="topbar" class="clearfix cars-header goback" style="z-index: 999;">
        <van-nav-bar title="购物车" left-text="返回" @click-left="goBack" left-arrow>
            <span slot="right">
                <span style="color:#1e9fff;" @click="goHome">首页 | </span>
                <span style="color:#1e9fff;" @click="goEdit" v-text="edittext"></span>
            </span>
            <!-- <van-icon name="home" slot="right" size="20px" color="#666" @click="goEdit" />-->
        </van-nav-bar>
    </div>
    <!--    返回-->
    <!--   标题  -->
    <!--   设置 编辑  -->
</div>
<!-- 购物车内容商品 -->
<div class="mt-48 mb-50">
    <!-- 商品列表 -->
    <template v-for="cart,k in carts">
        <div class="border-top1 border-bottom1 bg-white plr-15 mt-5">
            <!-- 商品信息 -->
            <div class="carts pt-10">
                <span class="close-cart" @click="deleItem(cart.id)" style="top: -6px;">X</span>
                <!-- 信息 -->
                <div class="clearfloat">
                    <label class="carts-checked left mr-8  checkbox">
                        <!--@change="seleceOne(cart.ischeck)"  :checked="cart.ischeck" v-model="ischeckArr[k]" -->
                        <input type="checkbox" v-model="cart.ischeck" @change="isCheckIt(cart.id,k,cart.ischeck)">
                    </label>
                    <div class="clearfloat left cart-item-rt">
                        <img width="60" height="60" :src="cart.item.cover" class="left" alt="">
                        <div class="item-info">
                            <p class="mtb-0"><span v-text="cart.item.title"></span></p>
                            <p class="mtb-0">
                                <small>1件起订</small>
                            </p>
                        </div>
                    </div>
                </div>
                <!-- 购买规格，数量，单价 -->
                <template v-if="cart.sku&&cart.sku.length>0">
                    <div class="clearfloat cart-xq pt-10" v-for="i in cart.sku">
                        <!-- <span class="close-cart">X</span> :checked="i.ischeck"-->
                        <label class="carts-checked left mr-8  checkbox">
                            <input type="checkbox" v-model="i.ischeck" @change="isCheckSku(cart.id,k,i.ischeck)">
                        </label>
                        <div class="clearfloat left bg-ee border-radius4 cart-tm">
                            <div class="left cart-sku">
                                <span class="sku-font" v-text="i.name"></span>
                                <strong><span v-text="'￥'+i.price"></span>/件 </strong>
                            </div>
                            <div class="right cart-step">
                                <van-stepper class="border1" v-model="i.total" integer></van-stepper>
                            </div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="clearfloat cart-xq">
                        <!-- <span class="close-cart">X</span>-->
                        <!-- <label  class="carts-checked left mr-8  checkbox">
                             <input type="checkbox" :checked="cart.ischeck"  @change="seleceOne(cart.ischeck)">
                         </label>-->
                        <div class="clearfloat left border-radius4 cart-tm" style="margin-left: 20px;">
                            <div class="left cart-sku">
                                <!-- <span class="sku-font" v-text="i.name"></span>-->
                                <strong><span v-text="'￥'+cart.price"></span>/件 </strong>
                            </div>
                            <div class="right cart-step">
                                <van-stepper class="border1" v-model="cart.total" integer></van-stepper>
                            </div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </template>
    <div class="text-center font-default font-size12 ptb-10">无更多内容...</div>
</div>
<!-- 底部统计 -->
<div class="cart-bt" style="">
    <!--  默认显示  -->
    <div v-show="action!='edit'" class="">
        <!--        <van-submit-bar :price="totalPrice*100" :disabled="disabled" button-text="提交订单" @submit="onSubmit">-->
        <van-submit-bar button-text="提交订单" :price="totalPrice*100">
            <div class="ml-15 van-checkbox" checked-color="#cc292b" @click="isCheckedAllOk(isCheckedAll)">
                <div class="van-checkbox__icon van-checkbox__icon--round" :class="{'van-checkbox__icon--checked':isCheckedAll}">
                    <i class="van-icon van-icon-success"></i>
                </div>
                <span class="van-checkbox__label">全选</span>
            </div>
<!--     <van-checkbox v-model="isCheckedAll" class="ml-15" @click="isCheckedAllOk(isCheckedAll)" checked-color="#cc292b">全选</van-checkbox>-->
        </van-submit-bar>
    </div>
    <!--  编辑  -->

    <div v-show="action=='edit'" class="">
        <div class="van-submit-bar__bar">
            <div class="ml-15 van-checkbox" style="width: 120px;" checked-color="#cc292b" @click="isCheckedAllOk(isCheckedAll)">
                <div class="van-checkbox__icon van-checkbox__icon--round" :class="{'van-checkbox__icon--checked':isCheckedAll}">
                    <i class="van-icon van-icon-success"></i>
                </div>
                <span class="van-checkbox__label">全选</span>
            </div>
            <!--  <van-checkbox v-model="isCheckedAll"  @click="isCheckedAllOk(even)" style="width: 120px;" class="ml-15"  checked-color="#cc292b">全选</van-checkbox>-->
            <button class="van-button van-button--warning right van-button--large van-button--square" @click="delectSelec">
                <span class="van-button__text">选中删除</span>
            </button>
        </div>
    </div>
</div>

wechat/typescss:

/* 购物车 */
.carts{position: relative;}
.close-cart{position: absolute;
    right: -10px;
    top: 10px;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    color: #888;
    line-height: 20px;}
#topbar {padding:0;}
.cart-item-rt{width: calc(100% - 32px);}
.carts .carts-checked {line-height: 43px;}
.carts .item-info{width: calc(100% - 90px);float: left;margin: 0 0;}
.cart-xq{vertical-align: middle; margin-bottom: 6px;position: relative;}
.cart-tm{padding: 5px 8px;vertical-align: middle;width: calc(100% - 32px);box-sizing: border-box;}
.checkbox{width: 22px;}
.cart-sku{font-size: 13px;color: #666;}
.cart-sku .sku-font{font-size: 13px;color: #888888;display: block;}
.cart-sku strong span{color: #d50412;font-size: 15px;}
.cart-step{margin-top: 3px;}
.cart-bt{position: fixed;width: 100%;bottom: 0px;left: 0;border-top: 1px solid #ccc;height: 50px;background: #fff;z-index: 999}
.cart-bt .van-checkbox__icon--checked .van-icon {color: #fff; border-color: #cc292b; background-color: #cc292b;}

js:

var app = new Vue({
    el: "#app",
    data: {
        loading:false,
        finished:false,
        isfisrsload:false,//第一次加载无显示;
        edittext:'编辑',//编辑文字，完成；
        action:'',//无内容的骨架占位
        value:1,//暂时，商品数量；
        isCheckedAll:false,//是否全选；
        carts:[ //模拟购物车信息
            {
                "item":{
                    "id":34,
                    "manage_id":50,
                    "operation_id":80,
                    "cat_id":173,
                    "title":"紫薯ssss",
                    "skus_name":"20袋/盒",
                    "cover":"http://ykdh.cdn.ekweixin.com/201902180645184d6674ea6041af9d58b1bd8b2c41a466.png",
                    "stock":5,
                    "barcode":"",
                    "sort":99,
                    "sunit":"",
                    "bunit":"",
                    "bsoperation":0,
                    "startn":0,
                    "startt":0,
                },
                "id":1,
                "wholesaler_id":108,
                "item_id":34,
                "sku_id":0,
                "sku_name":"",
                sku:[
                    {sku_id:'001','name':'12g,蓝色',price:22.3,sort:25,ischeck:false,"total":1},
                    {sku_id:'002','name':'13g,蓝色',price:24.3,sort:26,ischeck:false,"total":2},
                    {sku_id:'003','name':'40g,蓝色',price:25.3,sort:40,ischeck:false,"total":1},
                    {sku_id:'004','name':'18g,蓝色',price:26.3,sort:60,ischeck:false,"total":2}
                ],
                "sku_stock":null,
                "is_fast":0,
                "total":2,
                "total_fee":444,
                "price":222,
                "discount":200,
                "created":"2019-06-03  15:00 ",
                ischeck:false,//是否选中；
            },
            {
                "item":{
                    "id":34,
                    "manage_id":50,
                    "operation_id":80,
                    "cat_id":173,
                    "title":"生蜜薯",
                    "skus_name":"20袋/盒",
                    "cover":"http://ykdh.cdn.ekweixin.com/201902180645184d6674ea6041af9d58b1bd8b2c41a466.png",
                    "stock":5,
                    "barcode":"",
                    "sort":99,
                    "sunit":"",
                    "bunit":"",
                    "bsoperation":0,
                    "startn":0,
                    "startt":0,
                },
                "id":2,
                "wholesaler_id":108,
                "item_id":34,
                "sku_id":0,
                "sku_name":"",
                sku:[
                    {sku_id:'001','name':'12g',price:22.3,sort:25, ischeck:false,"total":1},
                    {sku_id:'002','name':'13g',price:24.3,sort:26, ischeck:false,"total":1},
                    {sku_id:'003','name':'40g',price:25.3,sort:40, ischeck:false,"total":1},
                    {sku_id:'004','name':'18g',price:26.3,sort:60, ischeck:false,"total":1}
                ],
                "sku_stock":null,
                "is_fast":0,
                "total":2,
                "total_fee":444,
                "price":222,
                "discount":200,
                "created":"2019-06-03  15:00 ",
                ischeck:false,//是否选中；
            },
            {
                "item":{
                    "id":34,
                    "manage_id":50,
                    "operation_id":80,
                    "cat_id":173,
                    "title":"无规格尼尔",
                    "skus_name":"20袋/盒",
                    "cover":"http://ykdh.cdn.ekweixin.com/201902180645184d6674ea6041af9d58b1bd8b2c41a466.png",
                    "stock":5,
                    "barcode":"",
                    "sort":99,
                    "sunit":"",
                    "bunit":"",
                    "bsoperation":0,
                    "startn":0,
                    "startt":0,
                },
                "id":3,
                "wholesaler_id":108,
                "item_id":34,
                "sku_id":0,
                "sku_name":"",
                sku:[],
                "sku_stock":null,
                "is_fast":0,
                "total":2,
                "total_fee":444,
                "price":222,
                "discount":200,
                "created":"2019-06-03  15:00 ",
                ischeck:false,//是否选中；
            },
        ],
        totalPrice:0,//统计总金额；
       // ischeckArr:new Array(this.carts.length),//备选中的数组；
    },

    filters:{
        curreny:function(data){
            data = Number(data).toFixed(2) ;
            if(data==parseInt(data)){
                data = parseInt(data);
            }
            return data;
        }
    },
    computed:{

    },
    watch: {//监听 全选,统计价格统计；
        carts:{
            handler:function(value){
                var that=this;
               // console.log(value);
                that.getTotalPrice();
            },
            deep:true
        },
    },
    created:function(){
        this.getTotalPrice();//计算总价；
    },
    methods:{
        //返回
        goBack:function () {
            let start, current, step;
            const params = location.search.match(/historyCursor=(\d+)/);
            if(params instanceof Array && params.length === 2) {
                // 如参数中带有historyCursor, 返回时将回跳n步
                start = +params[1];
                current = history.length;
                step = current - start + 1;
                location.go(-step);
            } else {
                // 默认将返回上一个页面
                history.back();
            }
        },
        //返回首页
        goHome:function(){
            window.location.href='/wechat/home'
        },
        //编辑信息；
        goEdit:function () {
            var that = this;
           // that.action = 'edit';
            if(that.action){
                that.action = '';
                that.edittext = '编辑';
            }else{
                that.action = 'edit';
                that.edittext = '完成';
            }
        },
        //商品，规格选择
       /* seleceOne:function (bc) {
            console.log(bc)
        },*/
        //计算选中商品的总价：
        getTotalPrice:function () {
            var  shopdata = this.carts;
            var totalprice = 0;
            for (var i = 0; i < shopdata.length; i++) {
                if(shopdata[i].ischeck==true) {
                    if(shopdata[i].sku&&shopdata[i].sku.length>0){
                        for(var j=0;j<shopdata[i].sku.length;j++){
                            if(shopdata[i].sku[j].ischeck==true){
                                totalprice +=shopdata[i].sku[j].price*shopdata[i].sku[j].total ;
                            }
                        }
                    }else{
                        totalprice +=shopdata[i].price*shopdata[i].total ;
                    }
                }else {
                    if(shopdata[i].sku&&shopdata[i].sku.length>0){
                        for(var j=0;j<shopdata[i].sku.length;j++){
                            if(shopdata[i].sku[j].ischeck==true){
                                totalprice +=shopdata[i].sku[j].price*shopdata[i].sku[j].total ;
                            }
                        }
                    }
                }
            }
            this.totalPrice = totalprice;
           // console.log(totalprice)
        },
        //商品选中，判断全选，和规格全选；
        isCheckIt:function(cart_id,k,ischeck){
            var that = this;
            if(that.carts[k].sku&&that.carts[k].sku.length){
                for(var i=0;i<that.carts[k].sku.length;i++){
                    that.carts[k].sku[i].ischeck = ischeck
                }
            }else{
                that.carts[k].ischeck = ischeck;
            }

            if(ischeck==true){
                var itm_ischeck = [];
                for(var x=0;x<that.carts.length;x++) {
                    if (that.carts[x].ischeck == false) {
                        that.isCheckedAll = false;
                    }else{
                        itm_ischeck.push(that.carts[x].ischeck)
                    }
                }
                if(itm_ischeck.length==that.carts.length){
                    for(var x=0;x<that.carts.length;x++) {
                        if (that.carts[x].sku && that.carts[x].sku.length > 0) {
                            var sku_ischeck = [];
                            if (that.carts[x].ischeck == true) {
                                for (var y = 0; y < that.carts[x].sku.length; y++) {
                                    if (that.carts[x].sku[y].ischeck == false) {
                                        that.isCheckedAll = false;
                                    } else {
                                        sku_ischeck.push(that.carts[x].sku[y].ischeck)
                                    }
                                }
                                if (sku_ischeck.length == that.carts[x].sku.length) {
                                    that.isCheckedAll = true;
                                }
                            } else {
                                that.isCheckedAll = false;
                            }
                        } else {
                            that.carts[x].ischeck = true;
                        }
                    }
                }else{
                    that.isCheckedAll = false;
                }
            }
            else{
                that.isCheckedAll=false;
            }
            that.getTotalPrice();//计算总价；
        },
        //规格选择
        isCheckSku:function (id,k,ischeck) {
            var that = this;
            var cart_ischeckarr=[];
            if(that.carts[k].sku&&that.carts[k].sku.length>0){
                for(var i=0;i<that.carts[k].sku.length;i++) {
                    if (that.carts[k].sku[i].ischeck == false) {
                        that.carts[k].ischeck = false;
                        that.isCheckedAll = false;
                    }else{
                        cart_ischeckarr.push(that.carts[k].sku[i].ischeck);
                    }
                }
                if(cart_ischeckarr.length==that.carts[k].sku.length){
                    that.carts[k].ischeck = true;
                }
            }
            if(ischeck==true){
                var itm_ischeck = [];
                for(var x=0;x<that.carts.length;x++) {
                    if (that.carts[x].ischeck == false) {
                        that.isCheckedAll = false;
                    }else{
                        itm_ischeck.push(that.carts[x].ischeck)
                    }
                }
                if(itm_ischeck.length==that.carts.length){
                    for(var x=0;x<that.carts.length;x++) {
                        if (that.carts[x].sku && that.carts[x].sku.length > 0) {
                            var sku_ischeck = [];
                            if (that.carts[x].ischeck == true) {
                                for (var y = 0; y < that.carts[x].sku.length; y++) {
                                    if (that.carts[x].sku[y].ischeck == false) {
                                        that.isCheckedAll = false;
                                    } else {
                                        sku_ischeck.push(that.carts[x].sku[y].ischeck)
                                    }
                                }
                                if (sku_ischeck.length == that.carts[x].sku.length) {
                                    that.isCheckedAll = true;
                                }
                            } else {
                                that.isCheckedAll = false;
                            }
                        } else {
                            that.carts[x].ischeck = true;
                        }
                    }
                }else{
                    that.isCheckedAll = false;
                }
            }
            else{
                that.isCheckedAll=false;
            }
            that.getTotalPrice();//计算总价；

        },
        //全选，取消全选；
        isCheckedAllOk:function (even) {
            if(even==false){
                this.isCheckedAll = true;
            }else{
                this.isCheckedAll = false;
            }
            for(var i=0;i<this.carts.length;i++){
                this.carts[i].ischeck =  this.isCheckedAll;
                if(this.carts[i].sku&&this.carts[i].sku.length>0){
                    for(var j=0;j<this.carts[i].sku.length;j++){
                        this.carts[i].sku[j].ischeck=this.isCheckedAll;
                    }
                }
            }
            this.getTotalPrice();//计算总价；
        },
        //删除购物车商品；
        deleItem:function(cart_id){
            alert('删除'+cart_id);
        },
        //删除选择的内容；
        delectSelec:function () {
            var  shopdata = this.carts;
            var delecArry=[];//删除的内容id；
            for (var i = 0; i < shopdata.length; i++) {
                if(shopdata[i].ischeck==true) {
                    var obj = {};
                    if(shopdata[i].sku&&shopdata[i].sku.length>0){
                        obj.id=shopdata[i].id;
                        obj.sku=[];
                        for(var j=0;j<shopdata[i].sku.length;j++){
                            if(shopdata[i].sku[j].ischeck==true){
                                obj.sku.push(shopdata[i].sku[j].sku_id);
                            }
                        }
                        delecArry.push(obj);
                    }else{
                        obj.id=shopdata[i].id;
                        delecArry.push(obj);
                    }
                }else {
                    var obj2 = {};
                    if(shopdata[i].sku&&shopdata[i].sku.length>0){
                        obj2.id=shopdata[i].id;
                        obj2.sku=[];
                        for(var j=0;j<shopdata[i].sku.length;j++){
                            if(shopdata[i].sku[j].ischeck==true){
                                obj2.sku.push(shopdata[i].sku[j].sku_id);
                            }
                        }
                        if(obj2.sku.length>0){
                            delecArry.push(obj2);
                        }
                    }
                }
            }
            console.log(delecArry)
            this.getTotalPrice();//计算总价；
        }
    }
});