template
<template>
<view>
<view class="list-item" v-for="(item, index) in goodList" :key="index">
<view class="group">
<checkbox-group @change="changeitem(item)" checked class="checkbox"><checkbox :value="item.unitPrice" :checked="item.checked" /></checkbox-group>
<image :src="item.src"></image>
<view class="goods">
<view class="price">￥{
{
item.unitPrice }}</view>
<view class="name">{
{
item.name }}</view>
<view class="order-info">
<view>产地：{
{
item.home }}</view>
<view>{
{
item.level }}</view>
<view>{
{
item.speci }}</view>
</view>
<view class="subtotal">
<view class="text">
<view>单品小计：</view>
<view>￥{
{
item.subtotal }}</view>
</view>
<view class="number"><wm-numberBox :value="item.numberBox" model="1" @change="addShopCart($event, item, index)"></wm-numberBox></view>
</view>
</view>
</view>
</view>
<view class="foot-box3">
<view class="checkbox">
<checkbox-group @change="selectAll"><checkbox :checked="allChecked">全选</checkbox></checkbox-group>
</view>
<view class="total-box">
<view class="total">合计：￥{
{
totalPrice }}</view>
<view class="btn"><button class="foot-btn" @click="settlement">结算</button></view>
</view>
</view>
</view>
</template>
js
data() {
return {
goodList: [
{
id: 0,
src: '../../static/bg/user.jpg',
unitPrice: '100',
name: '蓝猫',
home: '斯阔猫舍',
level: '特级',
age: '3',
subtotal: '23',
numberBox: 1,
checked: false
},
{
id: 1,
src: '../../static/bg/wallet.png',
unitPrice: '200',
name:'美短',
home: '时光猫舍',
level: '特级',
age: '5',
subtotal: '50',
numberBox: 1,
checked: false
}
],
checkList: [], //选中值
allChecked: false //是否全选
};
},
//计算总价
computed: {
totalPrice() {
let totalPrice = 0;
this.goodList.map(item => {
item.checked ? (totalPrice += item.numberBox * item.unitPrice) : (totalPrice += 0);
});
return totalPrice;
}
},
methods: {
//单选
changeitem(item) {
item.checked = !item.checked;
if (!item.checked) {
this.allChecked = false;
} else {
// 判断每一个商品是否是被选择的状态
const cartList = this.goodList.every(item => {
return item.checked === true;
});
if (cartList) {
this.allChecked = true;
} else {
this.allChecked = false;
}
}
},
//全选，全不选
selectAll() {
this.allChecked = !this.allChecked;
if (this.allChecked) {
this.goodList.map(item => {
item.checked = true;
});
} else {
this.goodList.map(item => {
item.checked = false;
});
}
},settlement(){
this.checkList=[]
this.goodList.map((item)=>{
if(item.checked){
return this.checkList.push(item.id)
}
})
console.log(this.checkList,'this.checkList')
}
}
注意：拿到数据后需要遍历数据 给每一项加一个checked属性（后端可不会给你加）