购物车

<template>
  <div>
      <div class="top">
           <van-nav-bar
        title="购物车"
        left-arrow
        @click-left="onClickLeft"
      />
      </div>
    <div class="list">
        <van-checkbox-group v-model="result" @change="bian">
            <van-swipe-cell v-for="(item,index) in carts" :key="index">
                <van-row >
                  <van-col span="2" class="chu">
                       <van-checkbox :name="item"></van-checkbox>
                  </van-col>
                  <van-col span="22">
                       <van-card
                           :price="item.item.actualPrice"
                           :title="item.item.title"
                           class="goods-card"
                           :thumb="item.item.mainPic"
                         >
                         <template #num>
                             <van-stepper v-model="item.num" 
                                theme="round"
                                button-size="22"
                                disable-input 
                                @click="save"
                                />
                         </template>
                         </van-card>
                  </van-col>
                </van-row>
                  <template #right>
                  <van-button square text="删除" type="danger" @click="del(index)" class="delete-button" />
                </template>
            </van-swipe-cell>
        </van-checkbox-group>
    </div>
               
         <van-submit-bar :price="zong" button-text="提交订单" @submit="onSubmit">
           <van-checkbox v-model="checked" @click="xuan">全选</van-checkbox>
         </van-submit-bar>     
         
  </div>
</template>

<script>
export default {
    data() {
        return {
            carts:[],
            result:[],
            checked:false
        }
    },
    computed: {
        zong(){
            let zong =0;
            this.result.map(item=>{
                zong+=item.item.actualPrice*100*item.num
            })
         return  zong
        }
        
    },
    created(){
            if(localStorage.ksDemo){
                this.carts=JSON.parse(localStorage.ksDemo)
            }
    },
    methods:{
        // 全选 不全选
        xuan(){
            if(this.checked){
                this.result=this.carts
            }else{
                this.result=[]
            }
        },
        // 存储本地
        save(){
            localStorage.ksDemo=JSON.stringify(this.carts)
        },
        // 当result数组发生变化时要做的事
        bian(){
            this.checked=this.result.length==this.carts.length
        },
        // 删除
        del(index){
        
            let del =this.carts.splice(index,1)
            this.result.map((item,index)=>{
                if(item.item.id == del[0].item.id){
                    this.result.splice(index,1)
                }
            })
            this.save()
        },
        onClickLeft(){
            this.$router.push({
                path:"/"
            })
        }
    }
}
</script>

<style scoped>
.top{
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0px;
    z-index: 100;
    
}
.list{
    margin-top: 50px;
    width: 100%;
    margin-bottom: 50px;

}
.chu{
    display:flex;
    justify-content: center;
    align-items: center;
}
.delete-button{
    height: 100%;
}

</style>

在这里插入代码片购物车加减商品计算总价