<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>