vuevant写一个购物车

<template>
<div>

<van-checkbox-group class="card-goods" v-model="checkedGoods">
  <van-checkbox
    class="card-goods__item"
    v-for="(item,index) in list"
    :checked='true'
    :key="index"
    :name="item"
    v-model='checked'
  >
    <van-card
      :price="item.price"
      :desc="item.text"
      :title="item.name"
      :thumb="item.img"
      >
       <div slot="bottom" :style="{float:'right',height:'5vh'}">
        <van-button size="mini" :style="{height:'5vh'}" @click="add($event,index)">+</van-button>
        <span  :style="{height:'5vh',fontSize:'15px'}" >{{item.num}}</span>
        <van-button :style="{height:'5vh'}"  size="mini" @click="jian($event,index)">-</van-button>
       </div>
    </van-card>
    <van-button type="default" @click="remove($event,index)" :style="{float:'right',height:'4vh',lineHeight:'4vh'}"> 删除 </van-button>
  </van-checkbox>
</van-checkbox-group>
 
 
<van-submit-bar
  :price="totalPrice"
  :disabled="!checkedGoods.length"
  :button-text="submitBarText"
  @submit="onSubmit(totalPrice)">

<van-checkbox @click=”tap()” v-model=”checked” :style=”{marginLeft:’5vw’,fontSize:’15px’}” > 全选 </van-checkbox>

</van-submit-bar>

</div>
</template>

<script>
import axios from ‘axios’;
import {Checkbox, CheckboxGroup, Card, SubmitBar, Toast} from ‘vant’;
export default {
mounted(){

  axios({
         method:'post',
         url:'http://www.tencent.com/api',
         data:{title:0},
       }).then((data)=>{
         this.list=data.data.list;
         this.list.forEach((item) => {this.checkedGoods.push(item);
            });
            this.checked=true;
       });
       
},

data() {

return {checkedGoods: [],
  list:[],
  checked:false,
  panduan:true,
  midprc:'',
};

},
computed: {

submitBarText:{get:function(){
     const count = this.checkedGoods.length;
     return '结算' + (count ? `(${count})` : '');// 模板字符串 ${count}
  },
},totalPrice:{get:function(){
    return this.list.reduce((total, item) => total + 
    (this.checkedGoods.indexOf(item) !== -1 ? item.price*100*item.num : 0)
    , 0);
  },
}

},
methods: {

onSubmit(a) {
  this.$store.state.z_info.tolpri=a/100;
  this.$store.state.z_info.od_name=this.list[0].name;
  this.$store.state.z_info.od_img=this.list[0].img;
  this.$store.state.z_info.od_text=this.list[0].text;
   this.$router.push({path:'/creods'});
   
},
tap(){if(this.checked){this.checkedGoods = [];
  }else{this.checkedGoods=[];
    this.list.forEach((item) => {this.checkedGoods.push(item);
            });
  }
},
remove(e,a){
  e.cancelBubble = true;
  this.list.splice(a,1);
  
},
add(e,a){
  e.cancelBubble = true;
  this.list[a].num++;
},
jian(e,a){
  e.cancelBubble = true;
  if(this.list[a].num<=1){this.list[a].num = 1;
  }else{this.list[a].num--;
  }
}

},
watch:{

checkedGoods:{handler:function(){if(this.checkedGoods.length==this.list.length){this.checked=true;}else{this.checked=false;}
},
}

}
};
</script>
<style lang=”less”>
.van-card__desc{
width: 60vw;
height:30vw
}
.card-goods {
padding: 0;
background-color: #fff;
margin-bottom: 50px;
&__item {

position: relative;
background-color: #fafafa;
.van-checkbox__label {
  width: 100%;
  height: auto; // temp
  padding: 0 10px 0 15px;
  box-sizing: border-box;
}
.van-checkbox__icon {
  top: 40%;
  left: 10px;
  z-index: 1;
  position: absolute;
  margin-top: -10px;
}
.van-card__price {
  color: #f44;
  height: 5vh;
  min-width: 50px;
  font-size: 20px;
  line-height: 5vh;
  text-align: center
}

}
}
.card-goods__item {
margin-bottom: 1vh;

}

.van-card__title{
height: 10vh;
line-height: 5vh;
font-size: 20px
}
.van-button–mini{
min-width: 30px
}

</style>