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.skuId">
                <tui-divider height="60" v-if="index !== 0"></tui-divider>
                <view class="checkbox">
                    <label
                        class="icon iconfont "
                        :class="isChecked(item.skuId) ? 'icon-xuanze' : 'icon-weixuanze'"
                        :style="{ color: item.stock === 0 && !isDeleted ? '#ddd' : '' }"
                        @click="onLabelClick(item)"
                    >
                        <checkbox
                            :value="item.skuId"
                            :checked="item.checked"
                            v-show="false"
                            :disabled="item.stock === 0 && !isDeleted"
                        />
                    </label>
                    <cm-cart-product
                        class="product"
                        :isExpired="false"
                        :emptyStock="item.stock === 0"
                        :productInfo="item"
                        @countChange="onCountChange"
                        @unitChange="onUnitChange"
                    ></cm-cart-product>
                </view>
            </view>
        </checkbox-group>
    </view>
</template>

<script>
export default {
    name: 'cm-cart-supplier-area',
    props: {
        shopInfo: {
            type: Object,
            default: () => {}
        },
        isDeleted: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            checkedList: []
        }
    },
    watch: {
        checkedList(nVal) {
            this.$emit('change', {
                shopId: this.shopInfo.shopId,
                checkedList: nVal
            })
        }
    },
    computed: {
        productList() {
            return this.shopInfo.productList || []
        },
        selectProductList() {
            return this.shopInfo.productList.filter(item => item.stock !== 0 || this.isDeleted)
        },
        isCheckedAll() {
            return this.checkedList.length > 0 && this.checkedList.length === this.selectProductList.length
        }
    },
    methods: {
        // 选择全部
        selectAllToggle() {
            if (this.isCheckedAll) {
                this.checkedList = []
            } else {
                this.checkedList = this.selectProductList.map(item => item.skuId.toString())
            }
        },
        // 选中全部
        selectAll() {
            this.checkedList = this.selectProductList.map(item => item.skuId.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)
        },
        // 商品规格修改
        onUnitChange(e) {
            this.$emit('unitChange', e)
        },
        onLabelClick(item) {
            if (item.stock > 0) return
            this.$toast.error('商品规格已失效')
        }
    }
}
</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>