caimei-applets-hehe/components/cm-module/cm-cart-product/cm-cart-product.vue

<template>
    <view class="cm-cart-product">
        <template v-if="productList.length > 0">
            <!-- 供应商名称 -->
            <view class="shop-info">
                <template v-if="isExpired">
                    <view class="expired">失效商品{{ productList.length }}件</view>
                    <view class="clear" @click="deletefailureList">清空失效商品</view>
                </template>
                <template v-else>
                    <view
                        class="radio iconfont"
                        :class="data.checked ? 'icon-xuanze' : 'icon-weixuanze'"
                        @click="chooseAll"
                    ></view>
                    <view class="name">{{ data.name }}</view>
                </template>
            </view>
            <!-- 商品列表 -->
            <view class="product-list">
                <view
                    class="row"
                    v-for="(item, index) in productList"
                    :key="index"
                    :class="{ 'no-border': index === 0 }"
                >
                    <view
                        class="radio iconfont"
                        :class="item.productsChecked ? 'icon-xuanze' : 'icon-weixuanze'"
                        @click="chooseOne(item)"
                        v-if="isNormal || isDelete"
                    ></view>
                    <view class="expired" v-else>失效</view>
                    <view class="product">
                        <image class="cover" :src="item.mainImage"></image>
                        <view class="content">
                            <view class="title">{{ item.productName }}</view>
                            <!-- 普通列表 -->
                            <template v-if="isNormal">
                                <view class="params">规格：{{ item.unit || '' }}</view>
                                <view class="tags">
                                    <view class="tag type1">{{ item.heUserId ? '促销' : '自营' }}</view>
                                    <view
                                        class="tag type2"
                                        v-if="item.activeStatus == 1"
                                        @click="clickPopupShow(item, 2)"
                                        >活动价</view
                                    >
                                </view>
                                <view class="footer">
                                    <view class="price">￥{{ item.price }}</view>
                                    <view>
                                        <number-box
                                            @change="numberChange(item, $event)"
                                            v-if="!isDelete"
                                            :value="item.productCount"
                                        ></number-box>
                                    </view>
                                </view>
                            </template>
                            <template v-if="isExpired">
                                <view class="tip">商品已下架</view>
                            </template>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 合计价格 -->
            <view class="total" v-if="isNormal && !isDelete">
                <text class="title">合计：</text> <text class="price">￥{{ data.totalPrice | formatPrice }}</text>
            </view>
        </template>
        <!-- 促销活动弹窗 -->
        <activi-popup :product="handlerPros" :popupShow="popupShow"></activi-popup>
        <!-- 操作弹窗 -->
        <tui-modal
            :show="modal"
            @click="confirm"
            @cancel="modal = false"
            :content="contentModalText"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
        <cm-loading :visible="showLoading" text="加载中..."></cm-loading>
    </view>
</template>

<script>
import NumberBox from './number-box.vue'
import activiPopup from '@/components/cm-module/productDetails/cm-activipopu'
import CmLoading from '@/components/cm-module/cm-loading/cm-loading.vue'
import { mapGetters, mapActions, mapMutations } from 'vuex'
export default {
    name: 'cm-cart-product',
    components: {
        NumberBox,
        activiPopup,
        CmLoading
    },
    data() {
        return {
            modal: false,
            contentModalText: '',
            popupShow: false,
            handlerPros: {},
            showLoading: false
        }
    },
    props: {
        // 列表类型 list普通列表  delete删除列表  expired失效列表
        listType: {
            type: String,
            default: 'list'
        },
        // 数据
        data: {
            type: [Array, Object],
            default: () => {}
        },
        vkey: {
            type: String,
            default: ''
        }
    },
    filters: {
        formatPrice(val) {
            return Number(val).toFixed(2)
        }
    },
    computed: {
        // 是普通商品列表
        isNormal() {
            return this.listType.indexOf('normal') !== -1
        },
        // 是失效商品列表
        isExpired() {
            return this.listType.indexOf('expired') !== -1
        },
        // 当前状态为删除状态
        isDelete() {
            return this.listType.indexOf('delete') !== -1
        },
        productList() {
            if (this.isExpired) {
                return this.data
            } else {
                return this.data[this.vkey]
            }
        }
    },
    methods: {
        ...mapActions('cart', ['updateShoppogCount', 'removeFailureFromCart']),
        ...mapMutations('cart', ['selectProduct', 'selectAllShopProduct', 'selectFailure']),
        // 商品数量变化
        numberChange(product, count) {
            this.$emit('countChange')
            this.countChange(product, count)
        },
        // 勾选 / 取消勾选 供应商下所有商品
        chooseAll() {
            this.selectAllShopProduct({
                shopId: this.data.shopId,
                checked: !this.data.checked
            })
            this.$emit('chooseAll')
        },
        // 勾选到单个商品
        chooseOne(product) {
            if (this.isNormal) {
                this.selectProduct({
                    shopId: this.data.shopId,
                    productId: product.productId,
                    checked: !product.productsChecked
                })
            } else {
                this.selectFailure({
                    productId: product.productId,
                    checked: !product.productsChecked
                })
            }
            this.$emit('chooseOne')
        },
        //商品数量加加
        countChange(product, count) {
            this.showLoading = true
            this.updateShoppogCount({
                cartId: product.cartId,
                productCount: count
            }).finally(() => {
                this.showLoading = false
            })
        },
        // 促销活动弹窗
        clickPopupShow(pros, type) {
            if (pros.ladderList.length > 0) {
                this.popupShow = true
                this.handlerPros = pros
            }
        },
        // 清空失效商品
        deletefailureList() {
            this.modal = true
            this.contentModalText = '确定清除所有失效商品吗？'
        },
        // 确认清空
        confirm(e) {
            if (e.index !== 1) return (this.modal = false)
            this.showLoading = true
            this.removeFailureFromCart().finally(() => {
                this.modal = false
                this.showLoading = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
$grid: 24rpx;
.cm-cart-product {
    overflow: hidden;
    background: #fff;
    margin-bottom: $grid;
}
.shop-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $grid $grid 0;
    .name {
        width: 622rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
    }
    .expired {
        font-size: 30rpx;
        color: #333333;
    }
    .clear {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 184rpx;
        height: 42rpx;
        background: #fff8fd;
        border: 1rpx solid #ff457b;
        border-radius: 28rpx;
        font-size: 26rpx;
        color: #ff457b;
    }
}
.radio {
    font-size: 36rpx;
    color: #b2b2b2;
    &.icon-xuanze {
        color: #f83c6c;
    }
}
.product-list {
    .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 $grid;
        padding: 30rpx 0;
        border-top: 1px solid #e1e1e1;
        &.no-border {
            border-top: 0;
        }
        &:last-child {
            margin-bottom: 0;
        }
        .expired {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 72rpx;
            height: 36rpx;
            background: rgba(51, 51, 51, 0.3);
            border-radius: 24rpx;
            font-size: 24rpx;
            color: #ffffff;
        }
    }
    .product {
        width: 622rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .cover {
            width: 180rpx;
            height: 180rpx;
            box-sizing: border-box;
            border: 1rpx dashed #e1e1e1;
        }
        .content {
            width: 442rpx;
            .title,
            .tags,
            .params,
            .footer,
            .tip {
                padding-left: $grid;
            }
            .tags,
            .params {
                margin-top: 10rpx;
            }
            .tip {
                margin-top: 80rpx;
                margin-bottom: 0;
                font-size: 26rpx;
                color: #f83c6c;
            }
            .title {
                height: 66rpx;
                font-size: 26rpx;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 这里控制几行显示省略号
                -webkit-box-orient: vertical;
            }
            .tags {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                height: 24rpx;
                .tag {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 30rpx;
                    margin-right: 8rpx;
                    font-size: 22rpx;
                    &.type1 {
                        width: 56rpx;
                        background: #ff457b;
                        border-radius: 4rpx;
                        color: #ffffff;
                    }
                    &.type2 {
                        width: 80rpx;
                        background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
                            no-repeat;
                        background-size: 80rpx 30rpx;
                        color: #f83c6c;
                    }
                }
            }
            .params {
                font-size: 20rpx;
                color: #999999;
            }
            .footer {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                margin-top: 4rpx;
                height: 48rpx;
                .add-cart {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 44rpx;
                    height: 44rpx;
                    background: #ff457b;
                    color: #fff;
                    border-radius: 50%;
                }
                .price {
                    flex: 1;
                    font-size: 26rpx;
                    font-weight: 600;
                    color: #f83c6c;
                }
            }
        }
    }
}
.total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30rpx $grid;
    font-size: 26rpx;
    font-weight: bold;
    .title {
        color: #333333;
    }
    .price {
        color: #ff457b;
    }
}
</style>