小程序店鋪級別購物車，選中非選中邏輯(VUE寫法)

效果圖:

代碼：

<!-- 
 * @description 購物車-列表
 * @author yxf
 * @date 2020-07-01
 * @version 1.0.0
 * @lastModifiedBy yxf
 * @lastModifiedTime 2020-07-01
-->
<template>
    <div class="wrap">
        <view class="list">
            <view class="list_item" v-for="(item,index) in list" :key="index">
                <view class="list_item_t flex">
                    <view class="checkbox" style="margin:0 30rpx" @click="checkAllGoods(item)">
                        <image
                            v-if="item.checkAll"
                            src="/static/images/car-checked.png"
                            mode="widthFix"
                        />
                        <image v-else src="/static/images/pay-unchecked.png" mode="widthFix" />
                        <!-- <image src="/static/images/pay-lock.png " mode="widthFix" /> -->
                    </view>
                    <view>{{item.shopName}}店鋪1111A</view>
                </view>
                <view
                    class="list_item_act"
                >{{item.startTime}} - {{item.endTime}} {{item.activityName}}本店商品滿100元減20元</view>
                <view v-for="(item2,index2) in item.goods" :key="index2">
                    <view class="list_item_goods">
                        <view class="checkbox list_item_goods_l" @click="checkGoods(item2,item)">
                            <image
                                v-if="item2.checked"
                                src="/static/images/car-checked.png"
                                mode="widthFix"
                            />
                            <image v-else src="/static/images/pay-unchecked.png" mode="widthFix" />
                            <!-- <image src="/static/images/pay-lock.png" mode="widthFix" /> -->
                        </view>
                        <view class="list_item_goods_c">
                            <!-- <image
                                src="http://jz.uat1.rscloud.com/img/logo.3c167510.png"
                                mode="widthFix"
                            /> -->
                        </view>
                        <view class="list_item_goods_r">
                            <view class="list_item_goods_rt">{{item2.prodName}}商品</view>
                            <view class="list_item_goods_rc">{{item2.specsValue}}150/80/xs</view>
                            <view class="list_item_goods_rb">￥{{item2.price}}</view>
                        </view>
                        <view class="u-number-box">
                            <u-number-box
                                :disabled-input="true"
                                :min="1"
                                :max="999999"
                                v-model="item2.goodsNum"
                                @minus="(val,obj)=>delNum(val,item2)"
                                @plus="(val,obj)=>addNum(val,item2)"
                            ></u-number-box>
                        </view>
                    </view>
                    <view class="list_item_goods_b">
                        <text>配送方式</text>
                        <text>支持自提</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="footer">
            <view class="checkbox" @click="checkAllShops">
                <image
                    style="margin:0 30rpx"
                    v-if="allCheck"
                    src="/static/images/car-checked.png"
                    mode="widthFix"
                />
                <image
                    style="margin:0 30rpx"
                    v-else
                    src="/static/images/pay-unchecked.png"
                    mode="widthFix"
                />
                <text>全選</text>
                <!-- <image src="/static/images/pay-lock.png" mode="widthFix" />-->
            </view>
            <view>
                <text>
                    合計:
                    <text style="color:#EA5205;font-weight:bold">￥{{totalMoney}}</text>
                </text>
                <button class="submit_btn">提交訂單</button>
            </view>
        </view>
    </div>
</template>

<script>
import uNumberBox from '@/components/uview/u-number-box'
/**
 * 參數說明
 * @property  {String} shopName 店鋪名稱
 * @property  {String} startTime 活動開始時間
 * @property  {String} endTime 活動結束時間
 * @property  {String} activityName  活動名稱
 * @property  {Array}  goods  商品列表
 * @property  {Number} distributeWay 配送方式 1：自提 2： 快遞
 * @property  {Number} goodsId 商品ID
 * @property  {String} prodName 商品名稱
 * @property  {String} skuImageUrl 商品圖片
 * @property  {Number} goodsNum  商品數量
 * @property  {String} goodsSku  商品sku
 * @property  {Number} id ID
 * @property  {Number} price 價格
 * @property  {String} specsValue 規格
 * @property  {Number} status 狀態  1:正常;2:無效
 * @property  {String} endTime 活動結束時間
 * @property  {String} endTime 活動結束時間
 * @event {Function} delNum 減少商品數量
 * @event {Function} addNum 增加商品數量
 *
 */
export default {
    components: { uNumberBox },
    data() {
        return {
            // allCheck: false,
            list: [
                {
                    shopName: '',
                    startTime: '',
                    endTime: '',
                    activityName: '',
                    checkAll: false,
                    goods: [
                        {
                            skuImageUrl: '',
                            prodName: 'a',
                            specsValue: '',
                            price: 10,
                            goodsNum: 1,
                            distributeWay: '',
                            checked: false
                        },
                        {
                            skuImageUrl: '',
                            prodName: '',
                            specsValue: '',
                            price: 20,
                            goodsNum: 2,
                            distributeWay: '',
                            checked: false
                        }
                    ]
                },
                {
                    shopName: '',
                    startTime: '',
                    endTime: '',
                    activityName: '',
                    checkAll: false,
                    goods: [
                        {
                            skuImageUrl: '',
                            prodName: 'a',
                            specsValue: '',
                            price: 30,
                            goodsNum: 3,
                            distributeWay: '',
                            checked: false
                        },
                        {
                            skuImageUrl: '',
                            prodName: '',
                            specsValue: '',
                            price: 40,
                            goodsNum: 4,
                            distributeWay: '',
                            checked: false
                        }
                    ]
                }
            ]
        }
    },
    created() {
        this.getData()
    },
    computed: {
        allCheck: {
            get: function() {
                return this.list.every(e => e.checkAll) //是否選中所有店鋪
            },
            set: function(params) {
                this.list.map(item => (item.checkAll = params))
            }
        },
        totalMoney: function() {
            let sum = 0
            if (this.list.length) {
                this.list.map(item => {
                    if (item.goods.length) {
                        item.goods.map(item2 => {
                            if (item2.checked) {
                                sum += item2.goodsNum * item2.price
                            }
                        })
                    }
                })
            } else {
                sum = 0
            }
            return sum
        }
    },
    methods: {
        delNum(val, item) {
            console.log(val)
            console.log(item)
        },
        addNum(val, item) {
            console.log(val)
            console.log(item)
        },
        getData() {
            // if (this.list.length) {
            //     this.list.map(item => {
            //         item.checkAll = false;
            //         if (item.goods.length) {
            //             item.goods.map(item2 => item2.checked = false)
            //         }
            //     }
            // }
        },
        //選中店鋪下的所有商品
        checkAllGoods(item) {
            item.checkAll = !item.checkAll
            item.goods.forEach(item2 => {
                item2.checked = item.checkAll
            })
        },
        //選中所有店鋪和商品
        checkAllShops() {
            this.allCheck = !this.allCheck
            this.list.map(item => {
                item.checkAll = this.allCheck
                item.goods.map(item2 => (item2.checked = this.allCheck))
            })
        },
        //選中某個商品
        checkGoods(item2, item) {
            item2.checked = !item2.checked
            let isCheckAllGoods = item.goods.every(e => e.checked) //是否選中該店鋪下的全部商品
            item.checkAll = isCheckAllGoods ? true : false
        }
    }
}
</script>

<style lang="less" scoped>
.wrap {
    background: #f7f7f7;
}
.list {
    overflow: hidden;
    padding-bottom: 150rpx;
}
.list_item {
    background: #fff;
    margin-top: 20rpx;
    .list_item_t {
        display: flex;
        padding: 30rpx 0 20rpx;
    }
    .list_item_act {
        margin: 0 30rpx 0 96rpx;
        background: rgba(153, 117, 243, 0.1);
        color: #9975f3;
        border-radius: 12rpx;
        font-size: 24rpx;
        padding: 10rpx;
    }
    .list_item_goods {
        height: 220rpx;
        display: flex;
        align-items: center;
        margin: 0 30rpx;
        position: relative;
        .u-number-box {
            position: absolute;
            right: 0;
            bottom: 30rpx;
        }
        .list_item_goods_l {
            flex-shrink: 0;
            image {
                margin: 30rpx 30rpx 30rpx 0;
            }
        }
        .list_item_goods_c {
            background: #efefef;
            border-radius: 12rpx;
            width: 160rpx;
            height: 160rpx;
            line-height: 160rpx;
            flex-shrink: 0;
            text-align: center;
            image {
                width: 90%;
                vertical-align: middle;
            }
        }
        .list_item_goods_r {
            margin-left: 20rpx;
            .list_item_goods_rt {
                .line_2;
                font-size: 30rpx;
                font-weight: 400;
                line-height: 42rpx;
                height: 100rpx;
            }
            .list_item_goods_rc {
                font-size: 24rpx;
                color: #999;
            }
            .list_item_goods_rb {
                font-size: 28rpx;
                color: #ea5205;
                font-weight: bold;
            }
        }
    }
    .list_item_goods_b {
        margin: 0 30rpx;
        padding: 0 0 20rpx 60rpx;
        display: flex;
        justify-content: space-between;
        border-bottom: 2rpx solid #f1f1f1;
        text {
            font-size: 24rpx;
            color: #999;
        }
    }
}

.checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    image {
        width: 36rpx;
        height: 36rpx;
    }
}
.footer {
    width: 100%;
    height: 140rpx;
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f3f3f3;
    .submit_btn {
        display: inline-block;
        vertical-align: middle;
        width: 240rpx;
        height: 88rpx;
        background: linear-gradient(144deg, rgba(179, 116, 248, 1) 0%, rgba(109, 120, 238, 1) 100%);
        border-radius: 44px;
        color: #fff;
        margin-left: 15rpx;
    }
}

//一行
.line_1 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
//兩行
.line_2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>>

選中圖片素材:
未選中圖片: http://chuantu.xyz/t6/739/1593657071x1031866013.png
選中圖片: http://chuantu.xyz/t6/739/1593657112x1700338641.png
uNumberBox 步進器組件：https://download.csdn.net/download/qq_42816550/12569264