caimei-applets-store/components/views/cm-cart-supplier-area/cm-cart-supplier-area.vue

<template>
    <view class="cart-supplier-area">
        <view class="area-top">
            <view
                class="icon iconfont"
                :class="isCheckedAll ? 'icon-xuanze' : 'icon-weixuanze'"
                @click="selectAllToggle"
            ></view>
            <view class="shop-name">{{ shopInfo.name }}</view>
        </view>
        <!-- 有效商品列表 -->
        <checkbox-group @change="checkboxChange">
            <view class="section" v-for="(item, index) in productList" :key="item.productId">
                <tui-divider height="60" v-if="index !== 0"></tui-divider>
                <view class="checkbox">
                    <label class="icon iconfont " :class="isChecked(item.productId) ? 'icon-xuanze' : 'icon-weixuanze'">
                        <checkbox :value="item.productId" :checked="item.checked" v-show="false" />
                    </label>
                    <cm-cart-product
                        class="product"
                        :isExpired="false"
                        :productInfo="item"
                        @countChange="onCountChange"
                    ></cm-cart-product>
                </view>
            </view>
        </checkbox-group>
    </view>
</template>

<script>
export default {
    name: 'cm-cart-supplier-area',
    props: {
        shopInfo: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            checkedList: []
        }
    },
    watch: {
        checkedList(nVal) {
            this.$emit('change', {
                shopId: this.shopInfo.shopId,
                checkedList: nVal
            })
        }
    },
    computed: {
        productList() {
            return this.shopInfo.productList || []
        },
        isCheckedAll() {
            return this.checkedList.length === this.productList.length
        }
    },
    methods: {
        // 选择全部
        selectAllToggle() {
            if (this.isCheckedAll) {
                this.checkedList = []
            } else {
                this.checkedList = this.productList.map(item => item.productId.toString())
            }
        },
        // 选中全部
        selectAll() {
            this.checkedList = this.productList.map(item => item.productId.toString())
        },
        // 取消全选
        unSelectAll() {
            this.checkedList = []
        },
        // 选择商品
        checkboxChange(e) {
            this.checkedList = e.detail.value
        },
        // 判断商品是否被选中
        isChecked(id) {
            return this.checkedList.includes(id.toString())
        },
        // 商品数量改变
        onCountChange(e) {
            this.$emit('countChange', e)
        }
    }
}
</script>

<style lang="scss" scoped>
.cart-supplier-area {
    padding: 24rpx;
    background: #fff;
    .icon {
        width: 72rpx;
    }

    .icon {
        margin-right: 8rpx;
    }

    .area-top {
        @extend .cm-flex-between;

        margin-bottom: 24rpx;

        .hover-class {
            background: #ffeff0 !important;
            border-color: #ff457b;
        }

        .shop-name {
            @include ellipsis(1);
            flex: 1;
            max-width: 620rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: #333333;
        }

        .expired {
            font-size: 30rpx;
            color: #333333;
        }

        .clear {
            @extend .cm-flex-center;
            width: 184rpx;
            height: 42rpx;
            background: #fff8fd;
            border: 1rpx solid #ff457b;
            border-radius: 28rpx;
            font-size: 26rpx;
            color: #ff457b;
        }
    }

    .checkbox {
        @extend .cm-flex-between;
        .product {
            flex: 1;
        }
    }
}
</style>